playbook_ui 16.3.0.pre.alpha.PLAY2810toastaddmargin14803 → 16.3.0.pre.alpha.PLAY2814advancedtablesortparentonlyreact14813

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6408ec28821af982194a7cc3dfc5455782498b851a798534bb31e6691a5c53a8
-  data.tar.gz: cbf3ea0631fcbac27eba9a7d536bd4fac3a018f4e2e006a6d6bb96e177169733
+  metadata.gz: '08fb76d06568a9cfa7e70127d6025444f9f52640848d94b246e43f1d9a4e40bd'
+  data.tar.gz: 981afae84f0710df2dbb89c76fa81f0676f2d9bc795f034bc2cf07fe45b20226
 SHA512:
-  metadata.gz: 89c5c9ae942801eba0b4f985a07e074e6016bb8c7b9ecb698552ca898c1f56748b00dbf2d6e05533b2098f74e95296e87b396b7387dcd1760fe2fc918dd79fe1
-  data.tar.gz: fe873426e671dd5b3d6a825a58f4cf4ec9b77a208d91a916e822d82b28a8e6bb8462ba4d247c233a6c53d91e4c2715e8f349d3f4c5242bd2eb1bf9583b08678b
+  metadata.gz: e588d74894b397d7fe857d87534df43f41330dc7cb223a30aacd2289abb505cd135e099ad4802290590dc7397ba81b9e34bc2ac390aff54b52bf0f069a684680
+  data.tar.gz: 917c919b3f66125c7fb7eeaf41f38d8912cadc0039653e8634fb780f2b171a1dd4f86208c9897b7e904abaf78f084a2208df591251a5479888065ae7a8fc9320

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -12,6 +12,7 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
+import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
   tableData: GenericObject[];
@@ -36,6 +37,7 @@ interface UseTableStateProps {
   columnVisibilityControl?: GenericObject;
   rowStyling?: GenericObject;
   inlineRowLoading?: boolean;
+  sortParentOnly?: boolean;
 }
 
 export function useTableState({
@@ -55,7 +57,8 @@ export function useTableState({
   columnVisibilityControl,
   pinnedRows,
   rowStyling,
-  inlineRowLoading = false
+  inlineRowLoading = false,
+  sortParentOnly = false
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -190,7 +193,7 @@ export function useTableState({
     getSubRows: (row: GenericObject) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    getSortedRowModel: sortParentOnly ? getParentOnlySortedRowModel() : getSortedRowModel(),
     enableSortingRemoval: enableSortingRemoval,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowModelUtils.ts

@@ -0,0 +1,100 @@
+// Returns a row model getter that sorts only depth-0 (parent) rows so children and grandchild rows keep their original order under each parent.
+
+import type { Table, Row, RowModel, RowData } from "@tanstack/react-table";
+
+export function getParentOnlySortedRowModel<TData extends RowData>(): (
+  table: Table<TData>
+) => () => RowModel<TData> {
+  return (table) => () => {
+    const sortingState = table.getState().sorting;
+    const rowModel = table.getPreSortedRowModel();
+
+    if (!rowModel.rows.length || !sortingState?.length) {
+      return rowModel;
+    }
+
+    const sortedFlatRows: Row<TData>[] = [];
+    const availableSorting = sortingState.filter((sort) =>
+      table.getColumn(sort.id)?.getCanSort()
+    );
+
+    const columnInfoById: Record<
+      string,
+      {
+        sortUndefined?: false | -1 | 1 | "first" | "last";
+        invertSorting?: boolean;
+        sortingFn: (rowA: Row<TData>, rowB: Row<TData>, columnId: string) => number;
+      }
+    > = {};
+
+    availableSorting.forEach((sortEntry) => {
+      const column = table.getColumn(sortEntry.id);
+      if (!column) return;
+      columnInfoById[sortEntry.id] = {
+        sortUndefined: column.columnDef.sortUndefined,
+        invertSorting: column.columnDef.invertSorting,
+        sortingFn: column.getSortingFn(),
+      };
+    });
+
+    const parentRows = rowModel.rows.map((row) => ({ ...row }));
+    parentRows.sort((rowA, rowB) => {
+      for (let i = 0; i < availableSorting.length; i += 1) {
+        const sortEntry = availableSorting[i]!;
+        const columnInfo = columnInfoById[sortEntry.id]!;
+        const sortUndefined = columnInfo.sortUndefined;
+        const isDesc = sortEntry?.desc ?? false;
+        let sortInt = 0;
+
+        if (sortUndefined) {
+          const aValue = rowA.getValue(sortEntry.id);
+          const bValue = rowB.getValue(sortEntry.id);
+          const aUndefined = aValue === undefined;
+          const bUndefined = bValue === undefined;
+          if (aUndefined || bUndefined) {
+            if (sortUndefined === "first") return aUndefined ? -1 : 1;
+            if (sortUndefined === "last") return aUndefined ? 1 : -1;
+            sortInt =
+              aUndefined && bUndefined
+                ? 0
+                : aUndefined
+                  ? sortUndefined
+                  : -sortUndefined;
+          }
+        }
+
+        if (sortInt === 0) {
+          sortInt = columnInfo.sortingFn(rowA, rowB, sortEntry.id);
+        }
+
+        if (sortInt !== 0) {
+          if (isDesc) sortInt *= -1;
+          if (columnInfo.invertSorting) sortInt *= -1;
+          return sortInt;
+        }
+      }
+      return rowA.index - rowB.index;
+    });
+
+    function flattenRowsInOrder(rows: Row<TData>[]): void {
+      rows.forEach((row) => {
+        sortedFlatRows.push(row);
+        if (row.subRows?.length) {
+          flattenRowsInOrder(row.subRows);
+        }
+      });
+    }
+    flattenRowsInOrder(parentRows);
+
+    const rowsById: Record<string, Row<TData>> = {};
+    sortedFlatRows.forEach((row) => {
+      rowsById[row.id] = row;
+    });
+
+    return {
+      rows: parentRows,
+      flatRows: sortedFlatRows,
+      rowsById,
+    };
+  };
+}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -66,6 +66,7 @@ type AdvancedTableProps = {
   showActionsBar?: boolean,
   persistToggleExpansionButton?: boolean,
   sortControl?: GenericObject
+  sortParentOnly?: boolean
   tableData: GenericObject[]
   tableOptions?: GenericObject
   tableProps?: GenericObject
@@ -114,6 +115,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     selectableRows,
     persistToggleExpansionButton = false,
     sortControl,
+    sortParentOnly = false,
     stickyLeftColumn,
     tableData,
     tableOptions,
@@ -159,7 +161,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnVisibilityControl,
     pinnedRows,
     rowStyling,
-    inlineRowLoading
+    inlineRowLoading,
+    sortParentOnly
   });
 
   // Initialize table actions

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -495,7 +495,41 @@ test("sort button exists and sorts column data", () => {
 
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
-}) 
+})
+
+test("sortParentOnly sorts only parent rows and keeps children grouped under parent", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        sortParentOnly
+        tableData={MOCK_DATA}
+    >
+      <AdvancedTable.Header enableSorting />
+      <AdvancedTable.Body />
+    </AdvancedTable>
+  )
+
+  const kit = screen.getByTestId(testId)
+  const sortButton = kit.querySelector(".header-sort-button.pb_th_link")
+  expect(sortButton).toBeInTheDocument()
+
+  const tbody = kit.querySelector('tbody')
+  const rowsBefore = tbody.getElementsByTagName('tr')
+  expect(rowsBefore[0]).toHaveTextContent('2021')
+
+  sortButton.click()
+
+  const rowsAfter = tbody.getElementsByTagName('tr')
+  expect(rowsAfter[0]).toHaveTextContent('2022')
+
+  const expandButton = kit.querySelector(".gray-icon.expand-toggle-icon")
+  expandButton.click()
+
+  const rowsExpanded = tbody.getElementsByTagName('tr')
+  expect(rowsExpanded.length).toBeGreaterThan(1)
+  expect(rowsExpanded[1]).toHaveTextContent('Q1')
+})
 
 test("Generates Table.Header default + custom classname", () => {
   render(

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.jsx

@@ -0,0 +1,175 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+import Caption from "../../pb_caption/_caption"
+
+const sharedColumnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+]
+
+const sortByColumnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+    enableSort: true,
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+    enableSort: true,
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+]
+
+const sortByColumnMultiDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+            enableSort: true,
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+            enableSort: true,
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const AdvancedTableSortParentOnly = (props) => {
+  return (
+    <div>
+      <Caption text="Enable Sorting (first column) + sortParentOnly" />
+      <AdvancedTable
+          columnDefinitions={sharedColumnDefinitions}
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+      <Caption marginTop="md" 
+          text="Sort by column + sortParentOnly"
+      />
+      <AdvancedTable
+          columnDefinitions={sortByColumnDefinitions}
+          enableSortingRemoval
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+      <Caption marginTop="md" 
+          text="Sort by column (multi-column) + sortParentOnly"
+      />
+      <AdvancedTable
+          columnDefinitions={sortByColumnMultiDefinitions}
+          enableSortingRemoval
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSortParentOnly

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.md

@@ -0,0 +1,5 @@
+The `sortParentOnly` prop is a boolean set to `false` by default. When set to `true`, only parent (depth-0) rows are re-ordered when sorting; children and grandchildren stay grouped under their parent and keep their original order.
+
+`sortParentOnly` works with every sorting mode: `enableSorting` on the header, per-column `enableSort: true`, and sortable leaf columns in the multi-header variant. Sort indicators behave as usual.
+
+When omitted or `false`, sorting applies to all levels.

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -39,6 +39,7 @@ examples:
   - advanced_table_sort_per_column: Enable Sort By Column
   - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
   - advanced_table_custom_sort: Custom Sort
+  - advanced_table_sort_parent_only: Sort Parent Only
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers

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

@@ -49,4 +49,5 @@ export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
 export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
-export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
+export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
+export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'

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

@@ -1,5 +1,6 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
+import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
 
 const ADVANCED_TABLE_SELECTOR = "[data-advanced-table]";
 const DOWN_ARROW_SELECTOR = "#advanced-table_open_icon";
@@ -20,10 +21,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     this.childRowsMap = new Map();
   }
 
+  get table() {
+    return this.cachedTable || (this.cachedTable = this.element.closest("table"));
+  }
+
+  get mainTable() {
+    return this.cachedMainTable || (this.cachedMainTable = this.element.closest(".pb_advanced_table"));
+  }
+
   // 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 table = this.table;
       const rows = Array.from(
         table.querySelectorAll(`tr[data-row-parent="${parentId}"]`)
       );
@@ -33,7 +42,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   updateTableSelectedRowsAttribute() {
-    const mainTable = this.element.closest(".pb_advanced_table");
+    const mainTable = this.mainTable;
+    if (!mainTable) return;
     mainTable.dataset.selectedRows = JSON.stringify(
       Array.from(PbAdvancedTable.selectedRows)
     );
@@ -41,7 +51,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
   // Recalculate selected count based on all checked checkboxes
   recalculateSelectedCount() {
-    const table = this.element.closest("table");
+    const table = this.table;
+    if (!table) return;
     
     // Get all checkboxes that could be part of the selection
     // This includes row checkboxes and any parent checkboxes that might be programmatically checked
@@ -95,7 +106,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
     
     this.updateTableSelectedRowsAttribute();
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
     
     // Sync header select-all state
     if (selectAllCheckbox) {
@@ -139,7 +150,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     this.updateTableSelectedRowsAttribute();
 
-    const table = checkbox.closest("table");
+    const table = this.table;
     const selectAllCheckbox = table.querySelector("#select-all-rows");
 
     if (selectAllCheckbox) {
@@ -153,7 +164,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       );
       selectAllInput.checked = allChecked;
     }
-    updateSelectionActionBar(table.closest(".pb_advanced_table"), PbAdvancedTable.selectedRows.size);
+    updateSelectionActionBar(this.mainTable, PbAdvancedTable.selectedRows.size);
   }
 
   get target() {
@@ -161,10 +172,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   connect() {
-    const table = this.element.closest("table");
+    const table = this.table;
+    if (!table) return;
 
     this.hideCloseIcon();
-    const mainTable = this.element.closest(".pb_advanced_table");
+    const mainTable = this.mainTable;
     
     // This so it is hidden on first render
     if (mainTable) {
@@ -271,9 +283,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       }
 
       // Find direct child rows
-      const childRows = Array.from(
-        table.querySelectorAll(`[data-row-parent="${toggleBtn.id}"]`)
-      );
+      const childRows = this.childRowsFor(toggleBtn.id);
       this.toggleElement(childRows);
 
       // Restore original element context
@@ -284,7 +294,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   }
 
   addBorderRadiusOnLastVisibleRow() {
-    const parentElement = this.element.closest(".pb_advanced_table");
+    const parentElement = this.mainTable;
+    if (!parentElement) return;
 
     const table = document.getElementById(parentElement.id);
 
@@ -316,11 +327,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     elements.forEach((elem) => {
       elem.style.display = "table-row";
       elem.classList.add("is-visible");
-      const childRowsAll = this.element
-        .closest("table")
-        .querySelectorAll(
-          `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
-        );
+      const childRowsAll = this.table.querySelectorAll(
+        `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
+      );
 
       childRowsAll.forEach((childRow) => {
         const dataContent = childRow.dataset.advancedTableContent;
@@ -382,8 +391,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       const currentDepth = parseInt(elem.dataset.rowDepth);
       if (childrenArray.length > currentDepth) {
         // Find the child rows corresponding to this parent row
-        const childRows = this.element
-          .closest("table")
+        const childRows = this.table
           .querySelectorAll(
             `[data-advanced-table-content^="${elem.dataset.advancedTableContent}-"]`
           );
@@ -401,28 +409,39 @@ export default class PbAdvancedTable extends PbEnhancedElement {
 
     const isVisible = elements[0].classList.contains("is-visible");
 
-    isVisible ? this.hideElement(elements) : this.showElement(elements);
-    isVisible ? this.displayDownArrow() : this.displayUpArrow();
+    const isExpanded = toggleVisibility({
+      isVisible,
+      onHide: () => this.hideElement(elements),
+      onShow: () => this.showElement(elements),
+    });
+
+    isExpanded ? this.displayUpArrow() : this.displayDownArrow();
 
     const row = this.element.closest("tr");
     if (row) {
-      row.classList.toggle("bg-silver", !isVisible);
-      row.classList.toggle("pb-bg-row-white", isVisible);
+      row.classList.toggle("bg-silver", isExpanded);
+      row.classList.toggle("pb-bg-row-white", !isExpanded);
     }
 
     this.addBorderRadiusOnLastVisibleRow();
   }
 
   displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
-      "inline-block";
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = "none";
+    setArrowVisibility({
+      rootElement: this.element,
+      downSelector: DOWN_ARROW_SELECTOR,
+      upSelector: UP_ARROW_SELECTOR,
+      showDownArrow: true,
+    });
   }
 
   displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display =
-      "inline-block";
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = "none";
+    setArrowVisibility({
+      rootElement: this.element,
+      downSelector: DOWN_ARROW_SELECTOR,
+      upSelector: UP_ARROW_SELECTOR,
+      showDownArrow: false,
+    });
   }
 
   static handleToggleAllHeaders(element) {

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

@@ -1,4 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
+import { getElementHeight, setArrowVisibility, toggleVisibility } from '../utilities/domHelpers'
 
 const MAIN_SELECTOR = '[data-collapsible-main]'
 const CONTENT_SELECTOR = '[data-collapsible-content]'
@@ -43,15 +44,7 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   showElement(elem) {
-  // Get the natural height of the element
-    const getHeight = () => {
-      elem.style.display = 'block'
-      const height = elem.scrollHeight + 'px' // Get it's height
-      elem.style.display = '' //  Hide it again
-      return height
-    }
-
-    const height = getHeight()
+    const height = getElementHeight(elem)
     elem.classList.add('is-visible')
     elem.style.height = height // Update the max-height
     elem.style.overflow = "hidden"
@@ -82,26 +75,22 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   toggleElement(elem) {
-    if (elem.classList.contains('is-visible')) {
-      this.hideElement(elem)
-      this.displayDownArrow()
-      return
-    }
-    // Otherwise, show it
-    this.showElement(elem)
-    this.displayUpArrow()
+    const isExpanded = toggleVisibility({
+      isVisible: elem.classList.contains('is-visible'),
+      onHide: () => this.hideElement(elem),
+      onShow: () => this.showElement(elem),
+    })
+
+    isExpanded ? this.displayUpArrow() : this.displayDownArrow()
   }
 
   toggleArrows(showDownArrow) {
-    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
-    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
-  
-    if (downArrow) {
-      downArrow.style.display = showDownArrow ? 'inline-block' : 'none';
-    }
-    if (upArrow) {
-      upArrow.style.display = showDownArrow ? 'none' : 'inline-block';
-    }
+    setArrowVisibility({
+      rootElement: this.element,
+      downSelector: DOWN_ARROW_SELECTOR,
+      upSelector: UP_ARROW_SELECTOR,
+      showDownArrow,
+    })
   }
   
   displayDownArrow() {