playbook_ui 14.22.0.pre.rc.5 → 14.22.0.pre.rc.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 49ddd7737d0cef09aa6010e30813ef33f6202f3ca6443f8ee52a644ccdc3fb83
-  data.tar.gz: 69f3054455c3885674edc65f962433816fbbdbee18059c27b9d83b78a2413dfc
+  metadata.gz: 41c18c0c1f4ae27ccea671a7ca29e35edfdef4a22b4cfc806cc27f90e0d63814
+  data.tar.gz: d3b75ef1e55dd2a03b84f59fd424a1cbcc2eb7814a3f26095fb9e691a2b87597
 SHA512:
-  metadata.gz: 8e6ec342701d4deaad0a332fe4a9815b6fd33780682766c6ec694c6470e5e501ebb39f9a6d5f79938b8dd87b9d1e741cbc1ac9852127bd5c8d31403353dbc0a7
-  data.tar.gz: 52794a22016cb2c64d77deaaa81cf207149779407f1cbb7c1b3453068fb8596bb3890744e0558e25de5c7aaef173b06120a9445087c602393ff470be39f4bf4e
+  metadata.gz: '08bb1b746b94d9a8df7bb6a2d612b5546f5634fcfdf60b95e62035850bc302d1899628d01c86f7cd3f0e11a5d69e2905b6e952cbb0ba9c505a64320a3da9502f'
+  data.tar.gz: 0adc5454fae876ffc7bd1defcc215eda7939244cd089621ad9a2a7aa9ec52de0640fd2f93a6ab76a8ccedf0c9767f0c12b13f7408de2baf838207117cf3d0e49

data/app/pb_kits/playbook/_playbook.scss

@@ -104,7 +104,6 @@
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
 @import 'pb_tooltip/tooltip';
-@import 'pb_treemap_chart/treemap_chart';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';

data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js

@@ -0,0 +1,36 @@
+function showActionBar(actionBar, selectedCount) {
+  // Show action bar directly
+  actionBar.style.height = "auto";
+  actionBar.style.overflow = "visible";
+  actionBar.style.opacity = "1";
+  actionBar.style.transitionProperty = "all";
+  actionBar.style.transitionTimingFunction = "ease-in-out";
+  actionBar.classList.remove("p_none");
+  actionBar.classList.add("p_xs", "is-visible", "show-action-card");
+
+  // Update the count
+  const countElement = actionBar.querySelector(".selected-count");
+  if (countElement) {
+    countElement.textContent = `${selectedCount} Selected`;
+  }
+}
+
+function hideActionBar(actionBar) {
+  // Hide action bar directly
+  actionBar.style.height = "0px";
+  actionBar.style.overflow = "hidden";
+  actionBar.style.opacity = "0";
+  actionBar.classList.add("p_none");
+  actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+}
+
+export function updateSelectionActionBar(table, selectedCount) {
+  const actionBar = table.querySelector(".row-selection-actions-card");
+  if (!actionBar) return;
+
+  if (selectedCount > 0) {
+    showActionBar(actionBar, selectedCount);
+  } else {
+    hideActionBar(actionBar);
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js

@@ -1,106 +1,82 @@
 import PbEnhancedElement from "../pb_enhanced_element";
+import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
-const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
+const FLAT_SELECTOR = "[data-flat-advanced-table-select='true']";
+const SELECT_ALL_SELECTOR = "#select-all-rows input[type='checkbox']";
 
 export default class PbFlatAdvancedTable extends PbEnhancedElement {
   static get selector() {
-    return FLAT_ADVANCED_TABLE_SELECTOR;
+    return FLAT_SELECTOR;
   }
 
-  get target() {
-    const table = this.element.closest("table");
-    return table.querySelectorAll(
-      `"label[data-flat-advanced-table-select='true']"`
-    );
+  constructor(...args) {
+    super(...args);
+    // keep track of selected IDs per-table-instance
+    this.selectedRows = new Set();
   }
 
-  static selectedRows = new Set();
-
   connect() {
     const table = this.element.closest("table");
-    if (!table) return;
+    if (!table || table.dataset.flatAdvancedInit) return;
+    table.dataset.flatAdvancedInit = "true";
+
+    // Reference to outer container for action bar
     const mainTable = this.element.closest(".pb_advanced_table");
-    // Prevent double-init
-    if (table.dataset.flatAdvancedTableInitialized) return;
-    table.dataset.flatAdvancedTableInitialized = "true";
+    // This so it is hidden on first render
+    if (mainTable) {
+      updateSelectionActionBar(mainTable, 0);
+    }
 
-    const checkboxLabels = table.querySelectorAll(
-      "label[data-flat-advanced-table-select='true']"
-    );
-    checkboxLabels.forEach((label) => {
-      const checkbox = label.querySelector("input[type='checkbox']");
-      if (!checkbox) return;
-      checkbox.addEventListener("change", () => {
-        const rowId = checkbox.id;
-        const isChecked = checkbox.checked;
-      
-        if (isChecked) {
-          PbFlatAdvancedTable.selectedRows.add(rowId);
-        } else {
-          PbFlatAdvancedTable.selectedRows.delete(rowId);
-        }
-      
-        // Update row background color based on checkbox state
-        const rowEl = checkbox.closest("tr");
-        if (rowEl) {
-          if (isChecked) {
-            rowEl.classList.add("bg-row-selection");
-            rowEl.classList.remove("bg-white");
-          } else {
-            rowEl.classList.remove("bg-row-selection");
-            rowEl.classList.add("bg-white");
-          }
-        }
-        const allCheckboxes = table.querySelectorAll(
-          "label[data-flat-advanced-table-select='true'] input[type='checkbox']"
-        );
-      
-        const selectAllInput = table.querySelector(
-          "#select-all-rows input[type='checkbox']"
-        );
-      
-        if (selectAllInput) {
-          const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
-          selectAllInput.checked = allChecked;
-        }
-      
+    const updateCheckboxState = () => {
+      // Sync dataset on main table
+      if (mainTable) {
         mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(PbFlatAdvancedTable.selectedRows)
+          Array.from(this.selectedRows)
         );
-      });
-      
-    });
+        updateSelectionActionBar(mainTable, this.selectedRows.size);
+      }
+    };
+
+    table.addEventListener("change", (e) => {
+      const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
+      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
+      if (!rowCb && !allCb) return;
 
-    // Handle select-all checkbox
-    const selectAllWrapper = table.querySelector("#select-all-rows");
-    if (selectAllWrapper) {
-      const selectAllInput = selectAllWrapper.querySelector(
-        'input[type="checkbox"]'
-      );
-      selectAllInput.addEventListener("change", () => {
-        const checkAll = selectAllInput.checked;
+      if (rowCb) {
+        const id = rowCb.id;
+        if (rowCb.checked) this.selectedRows.add(id);
+        else this.selectedRows.delete(id);
 
-        checkboxLabels.forEach((label) => {
-          const cb = label.querySelector("input[type='checkbox']");
-          cb.checked = checkAll;
-          const rowId = cb.id;
-          const rowEl = cb.closest("tr");
+        const tr = rowCb.closest("tr");
+        tr?.classList.toggle("bg-row-selection", rowCb.checked);
+        tr?.classList.toggle("bg-white", !rowCb.checked);
+
+        // Sync header checkbox
+        const header = table.querySelector(SELECT_ALL_SELECTOR);
+        if (header) {
+          const all = Array.from(
+            table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+          ).every((cb) => cb.checked);
+          header.checked = all;
+        }
+      }
 
-          if (checkAll) {
-            PbFlatAdvancedTable.selectedRows.add(rowId);
-            rowEl?.classList.add("bg-row-selection");
-            rowEl?.classList.remove("bg-white");
-          } else {
-            PbFlatAdvancedTable.selectedRows.delete(rowId);
-            rowEl?.classList.remove("bg-row-selection");
-            rowEl?.classList.add("bg-white");
-          }
+      if (allCb) {
+        const checked = allCb.checked;
+        Array.from(
+          table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+        ).forEach((cb) => {
+          cb.checked = checked;
+          const tr = cb.closest("tr");
+          tr?.classList.toggle("bg-row-selection", checked);
+          tr?.classList.toggle("bg-white", !checked);
+          const id = cb.id;
+          if (checked) this.selectedRows.add(id);
+          else this.selectedRows.delete(id);
         });
+      }
 
-        mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(PbFlatAdvancedTable.selectedRows)
-        );
-      });
-    }
+      updateCheckboxState();
+    });
   }
 }

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

@@ -1,4 +1,5 @@
 import PbEnhancedElement from "../pb_enhanced_element";
+import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -9,9 +10,33 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return ADVANCED_TABLE_SELECTOR;
   }
 
+  static expandedRows = new Set();
+  static selectedRows = new Set();
+  static isCollapsing = false;
+
+  constructor(...args) {
+    super(...args);
+    // Map parent row ID to array of its child rows
+    this.childRowsMap = new Map();
+  }
+
+  // Fetch and cache child rows for a given parent row ID
+  childRowsFor(parentId) {
+    if (!this.childRowsMap.has(parentId)) {
+      const table = this.element.closest("table");
+      const rows = Array.from(
+        table.querySelectorAll(`tr[data-row-parent="${parentId}"]`)
+      );
+      this.childRowsMap.set(parentId, rows);
+    }
+    return this.childRowsMap.get(parentId);
+  }
+
   updateTableSelectedRowsAttribute() {
     const mainTable = this.element.closest(".pb_advanced_table");
-    mainTable.dataset.selectedRows = JSON.stringify(Array.from(PbAdvancedTable.selectedRows));
+    mainTable.dataset.selectedRows = JSON.stringify(
+      Array.from(PbAdvancedTable.selectedRows)
+    );
   }
 
   // Check if the row is expanded or collapsed
@@ -104,7 +129,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     } else {
       PbAdvancedTable.selectedRows.delete(rowId);
     }
-     // Update background color on row
+    // Update background color on row
     if (!isChecked) {
       rowEl.classList.remove("bg-row-selection");
 
@@ -176,118 +201,129 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       );
       selectAllInput.checked = allChecked;
     }
+    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
   }
 
   get target() {
-    const table = this.element.closest("table");
-    return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
+    return this.childRowsFor(this.element.id) || [];
   }
 
-  static expandedRows = new Set();
-  static selectedRows = new Set();
-  static isCollapsing = false;
-
   connect() {
-    this.element.addEventListener("click", () => {
-      if (!PbAdvancedTable.isCollapsing) {
-        const isExpanded =
-          this.element.querySelector(UP_ARROW_SELECTOR).style.display ===
-          "inline-block";
-        if (!isExpanded) {
-          PbAdvancedTable.expandedRows.add(this.element.id);
-        } else {
-          PbAdvancedTable.expandedRows.delete(this.element.id);
-        }
-        this.toggleElement(this.target);
-      }
-    });
+    const table = this.element.closest("table");
 
     this.hideCloseIcon();
+    const mainTable = this.element.closest(".pb_advanced_table");
+    
+    // This so it is hidden on first render
+    if (mainTable) {
+      updateSelectionActionBar(mainTable);
+    }
 
-    const table = this.element.closest("table");
+    // Precompute parent→child rows mapping once
+    table.querySelectorAll("tr[data-row-parent]").forEach((row) => {
+      const parentId = row.dataset.rowParent;
+      if (!this.childRowsMap.has(parentId)) {
+        this.childRowsMap.set(parentId, []);
+      }
+      this.childRowsMap.get(parentId).push(row);
+    });
 
     // Prevent duplicate initialization
     if (table.dataset.pbAdvancedTableInitialized) return;
     table.dataset.pbAdvancedTableInitialized = "true";
 
-    // Bind checkbox change handlers for all row checkboxes
-    const checkboxLabels = table.querySelectorAll("label[data-row-id]");
-    checkboxLabels.forEach((label) => {
-      const checkbox = label.querySelector("input[type='checkbox']");
+    // Delegate checkbox changes
+    table.addEventListener("change", (event) => {
+      const checkbox = event.target.closest('input[type="checkbox"]');
       if (!checkbox) return;
-      checkbox.addEventListener("change", (event) => {
-        this.handleCheckboxClick(event);
-      });
-    });
 
-    // Bind nested row expansion logic
-    const nestedButtons = table.querySelectorAll("[data-advanced-table]");
-    nestedButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        const isExpanded =
-          button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block";
-        if (isExpanded) {
-          PbAdvancedTable.expandedRows.add(button.id);
-        } else {
-          PbAdvancedTable.expandedRows.delete(button.id);
-        }
-      });
-    });
+      // Header "select-all" logic
+      if (checkbox.closest("#select-all-rows")) {
+        const checkAll = checkbox.checked;
+        const rowCheckboxes = table.querySelectorAll(
+          'label[data-row-id] input[type="checkbox"]'
+        );
+        rowCheckboxes.forEach((cb) => {
+          if (cb.checked !== checkAll) {
+            cb.checked = checkAll;
+            this.handleCheckboxClick({ currentTarget: cb });
+          }
+        });
+        this.updateTableSelectedRowsAttribute();
+        updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+        return;
+      }
 
-    // Bind select-all logic for this table
-    const selectAllCheckbox = table.querySelector("#select-all-rows");
-    if (selectAllCheckbox) {
-      selectAllCheckbox.addEventListener("change", () => {
-        const checkboxInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
-        const checkAll = checkboxInput.checked;
+      // Individual row checkbox logic
+      const rowLabel = checkbox.closest("label[data-row-id]");
+      if (rowLabel) {
+        this.handleCheckboxClick({ currentTarget: checkbox });
+        this.updateTableSelectedRowsAttribute();
 
-        const checkboxes = Array.from(
-          table.querySelectorAll("label[data-row-id] input[type='checkbox']")
+        // Sync header select-all state
+        const selectAllInput = table.querySelector(
+          '#select-all-rows input[type="checkbox"]'
         );
+        if (selectAllInput) {
+          selectAllInput.checked = Array.from(
+            table.querySelectorAll('label[data-row-id] input[type="checkbox"]')
+          ).every((cb) => cb.checked);
+        }
+      }
+    });
 
-        checkboxes.forEach((cb) => {
-          cb.checked = checkAll;
-          const rowId = cb.id;
-          const rowEl = cb.closest("tr");
+    // Delegate expand/collapse toggles
+    table.addEventListener("click", (event) => {
+      const toggleBtn = event.target.closest("[data-advanced-table]");
+      if (!toggleBtn || PbAdvancedTable.isCollapsing) return;
+
+      // Temporarily bind `this.element` to the clicked toggle
+      const prevElement = this.element;
+      this.element = toggleBtn;
+
+      // Update expandedRows set
+      const isExpanded =
+        toggleBtn.querySelector(UP_ARROW_SELECTOR).style.display ===
+        "inline-block";
+      if (!isExpanded) {
+        PbAdvancedTable.expandedRows.add(toggleBtn.id);
+      } else {
+        PbAdvancedTable.expandedRows.delete(toggleBtn.id);
+      }
 
-          if (checkAll) {
-            PbAdvancedTable.selectedRows.add(rowId);
-            rowEl?.classList.add("bg-row-selection");
-            rowEl?.classList.remove("bg-white", "bg-silver");
-          } else {
-            PbAdvancedTable.selectedRows.delete(rowId);
-            rowEl?.classList.remove("bg-row-selection");
-            rowEl?.classList.add("bg-white");
-          }
-        });
+      // Find direct child rows
+      const childRows = Array.from(
+        table.querySelectorAll(`[data-row-parent="${toggleBtn.id}"]`)
+      );
+      this.toggleElement(childRows);
 
-        checkboxes.forEach((cb) => this.updateParentCheckboxes(cb));
+      // Restore original element context
+      this.element = prevElement;
+    });
 
-        this.updateTableSelectedRowsAttribute();
-      });
-    }
-    this.addBorderRadiusOnLastVisibleRow()
+    this.addBorderRadiusOnLastVisibleRow();
   }
 
   addBorderRadiusOnLastVisibleRow() {
-    const parentElement = this.element.closest('.pb_advanced_table');
-    
+    const parentElement = this.element.closest(".pb_advanced_table");
+
     const table = document.getElementById(parentElement.id);
 
     if (table) {
-      const visibleRows = table.querySelectorAll('tr.is-visible, tr:not(.toggle-content)');
-  
-      visibleRows.forEach(row => row.classList.remove('last-visible-row'));
-  
+      const visibleRows = table.querySelectorAll(
+        "tr.is-visible, tr:not(.toggle-content)"
+      );
+
+      visibleRows.forEach((row) => row.classList.remove("last-visible-row"));
+
       const lastVisibleRow = visibleRows[visibleRows.length - 1];
 
       if (lastVisibleRow) {
-        lastVisibleRow.classList.add('last-visible-row');
+        lastVisibleRow.classList.add("last-visible-row");
       }
     }
   }
 
-
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
@@ -470,151 +506,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 }
 
-// Isolate action bar functionality so it doesn't mix with existing functionality
-class PbAdvancedTableActionBar {
-  constructor() {
-    this.init();
-  }
-
-  init() {
-    // Initialize action bars for all advanced tables with action bars
-    document.addEventListener('DOMContentLoaded', () => {
-      this.setupActionBars();
-    });
-
-    // Also run immediately in case DOM is already loaded
-    if (document.readyState === 'loading') {
-      // DOM is still loading
-    } else {
-      // DOM is already loaded
-      this.setupActionBars();
-    }
-  }
-
-  setupActionBars() {
-    const advancedTables = document.querySelectorAll('.pb_advanced_table');
-
-    advancedTables.forEach(table => {
-      // Only proceed if this table has both selectable rows AND an action bar
-      if (!this.shouldEnableActionBar(table)) return;
-
-      const actionBar = table.querySelector('.row-selection-actions-card');
-      if (!actionBar) return; // Skip tables without action bars
-
-      // Initialize action bar styles
-      this.initializeActionBar(actionBar);
-
-      // Set up checkbox listeners for this table
-      this.setupCheckboxListeners(table, actionBar);
-    });
-  }
-
-  shouldEnableActionBar(table) {
-    // Check if the table has selectable rows
-    const hasSelectableRows = table.querySelector('input[type="checkbox"]') !== null;
-
-    // Check if the table has a row selection action bar (not other types of action bars)
-    const hasRowSelectionActionBar = table.querySelector('.row-selection-actions-card') !== null;
-
-    // Additional check: look for the presence of row checkboxes with data-row-id
-    const hasRowCheckboxes = table.querySelector('label[data-row-id] input[type="checkbox"]') !== null;
-
-    // Only enable if ALL conditions are met:
-    // 1. Has selectable checkboxes
-    // 2. Has the specific row selection action bar
-    // 3. Has row checkboxes (not just other types of checkboxes)
-    return hasSelectableRows && hasRowSelectionActionBar && hasRowCheckboxes;
-  }
-
-  initializeActionBar(actionBar) {
-    // Set initial hidden state
-    Object.assign(actionBar.style, {
-      height: '0px',
-      overflow: 'hidden',
-      display: 'block',
-      opacity: '0'
-    });
-
-    // Remove any visibility classes
-    actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-    actionBar.classList.add("p_none");
-  }
-
-  setupCheckboxListeners(table, actionBar) {
-    // Only listen to row checkboxes (those with data-row-id), not all checkboxes
-    const rowCheckboxes = table.querySelectorAll('label[data-row-id] input[type="checkbox"]');
-
-    rowCheckboxes.forEach(checkbox => {
-      checkbox.addEventListener('change', () => {
-        // Use setTimeout to ensure this runs after the main checkbox logic
-        setTimeout(() => {
-          this.updateActionBarVisibility(table, actionBar);
-        }, 0);
-      });
-    });
-
-    // Special handling for select-all checkbox (only if it exists)
-    const selectAllCheckbox = table.querySelector("#select-all-rows");
-    if (selectAllCheckbox) {
-      const selectAllInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
-      if (selectAllInput) {
-        selectAllInput.addEventListener('change', () => {
-          // Use setTimeout to ensure this runs after the main select-all logic
-          setTimeout(() => {
-            this.updateActionBarVisibility(table, actionBar);
-          }, 10); // Slightly longer delay for select-all to ensure all row checkboxes are updated
-        });
-      }
-    }
-  }
-
-  updateActionBarVisibility(table, actionBar) {
-    // Only count row checkboxes (those with data-row-id), not all checkboxes
-    const rowCheckboxes = table.querySelectorAll('label[data-row-id] input[type="checkbox"]');
-
-    // Get all checked row checkboxes
-    const selectedRowCheckboxes = Array.from(rowCheckboxes).filter(cb => cb.checked);
-
-    // Get the selected count
-    const selectedCount = selectedRowCheckboxes.length;
-
-    if (selectedCount > 0) {
-      this.showActionBar(actionBar, selectedCount);
-    } else {
-      this.hideActionBar(actionBar);
-    }
-  }
-
-  showActionBar(actionBar, selectedCount) {
-    // Show action bar directly
-    actionBar.style.height = 'auto';
-    actionBar.style.overflow = 'visible';
-    actionBar.style.opacity = '1';
-    actionBar.style.transitionProperty = 'all';
-    actionBar.style.transitionTimingFunction = 'ease-in-out';
-    actionBar.classList.remove("p_none");
-    actionBar.classList.add("p_xs", "is-visible", "show-action-card");
-
-    // Update the count
-    const countElement = actionBar.querySelector(".selected-count");
-    if (countElement) {
-      countElement.textContent = `${selectedCount} Selected`;
-    }
-  }
-
-  hideActionBar(actionBar) {
-    // Hide action bar directly
-    actionBar.style.height = '0px';
-    actionBar.style.overflow = 'hidden';
-    actionBar.style.opacity = '0';
-    actionBar.classList.add("p_none");
-    actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-  }
-}
-
-// Initialize the isolated action bar functionality
-new PbAdvancedTableActionBar();
-
 window.expandAllRows = (element) => {
   PbAdvancedTable.handleToggleAllHeaders(element);
 };

data/app/pb_kits/playbook/pb_advanced_table/table_action_bar.html.erb

@@ -8,7 +8,7 @@
 }) do %>
   <%= pb_rails("flex", props: { align_items: "center", justify: "between" }) do %>
     <%= pb_rails("caption", props: { color: "light", padding_left: "xs", size: "xs" }) do %>
-      <span class="selected-count"><%= object.selected_count %> Selected</span>
+      <span class="selected-count"></span>
     <% end %>
     <%= pb_rails("flex/flex_item") do %>
       <%= pb_rails("flex") do %>