playbook_ui 16.3.0.pre.alpha.play284214748 → 16.3.0.pre.alpha.play284914702

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 791fad49e5fd8c5c144cbbd18e58035c12bf1d46557e21eeacd9f26e1322c4ba
-  data.tar.gz: b3a105c74f8dd3366d4b286bd2fb1f23212c325b738b927649ddfc492d3415e0
+  metadata.gz: 4fe55987631151bf94d593a4ba964107a8d9a6f574777caea1985c45774ac05f
+  data.tar.gz: a8f5c270468d49e1f4ab9854610069c9ece935ca9f602f8040a1cd05be38525b
 SHA512:
-  metadata.gz: f1504b82ec481292f7636fb0e750125926f6c2bdb3041ea6dc8ac410f45b942de27222635e64ba6f62bda605de8ae5cc590e11c41935b64948ebf342ef0ee410
-  data.tar.gz: 9e01a49770efddb8de575ed2f3924029f80e84a3b796ec5619b6353c82bdd60cd33b3183a0c7763005fca8e9bc6333625e3c95d4551ba39dd4b0419ced36cdc2
+  metadata.gz: 44528ff333dd050da8f582643d3ea333dba82db57b552a2cd7b8cf17f57e949a973a687a3e06dcf2d5396f931b7af0fac956ca69ba8d0c679e1b7a271cbb7b11
+  data.tar.gz: bdba8e6587e6b7d960165cda7fb92bb6178e8e11aaf2e97e604451338d50f744b8429831a4c7189c6933a69924ae4e18baf1a86ce69007f75401dc2906a02de0

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() {

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

@@ -1,5 +1,6 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 import { PbDropdownKeyboard } from "./keyboard_accessibility";
+import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
 
 const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
 const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
@@ -23,7 +24,38 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   get target() {
-    return this.element.querySelector(CONTAINER_SELECTOR);
+    return this.cachedElements?.target || this.element.querySelector(CONTAINER_SELECTOR);
+  }
+
+  get baseInput() {
+    return this.cachedElements?.baseInput || this.element.querySelector(DROPDOWN_INPUT);
+  }
+
+  get trigger() {
+    return this.cachedElements?.trigger || this.element.querySelector(TRIGGER_SELECTOR);
+  }
+
+  get customTrigger() {
+    return this.cachedElements?.customTrigger || this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
+  }
+
+  get dropdownWrapper() {
+    return this.cachedElements?.dropdownWrapper || this.element.querySelector(".dropdown_wrapper");
+  }
+
+  get placeholder() {
+    return this.cachedElements?.placeholder || this.element.querySelector(DROPDOWN_PLACEHOLDER);
+  }
+
+  cacheElements() {
+    this.cachedElements = {
+      target: this.element.querySelector(CONTAINER_SELECTOR),
+      baseInput: this.element.querySelector(DROPDOWN_INPUT),
+      trigger: this.element.querySelector(TRIGGER_SELECTOR),
+      customTrigger: this.element.querySelector(CUSTOM_DISPLAY_SELECTOR),
+      dropdownWrapper: this.element.querySelector(".dropdown_wrapper"),
+      placeholder: this.element.querySelector(DROPDOWN_PLACEHOLDER),
+    };
   }
 
   selectedOptions = new Set();
@@ -32,13 +64,14 @@ export default class PbDropdown extends PbEnhancedElement {
   connect() {
     // Store instance on element for DatePicker sync
     this.element._pbDropdownInstance = this;
+    this.cacheElements();
 
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.isMultiSelect = this.element.dataset.pbDropdownMultiSelect === "true";
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
-    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
+    const baseInput = this.baseInput;
     this.wasOriginallyRequired =
       baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
@@ -76,7 +109,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
     // Clean up custom trigger click listener
     if (this.customTriggerClickHandler) {
-      const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element
+      const customTrigger = this.customTrigger || this.element
       customTrigger.removeEventListener('click', this.customTriggerClickHandler)
     }
 
@@ -98,7 +131,7 @@ export default class PbDropdown extends PbEnhancedElement {
     // Clean up search input listeners
     if (this.searchInput) {
       if (this.searchInputFocusHandler) {
-        const trigger = this.element.querySelector(TRIGGER_SELECTOR)
+        const trigger = this.trigger
         if (trigger) {
           trigger.removeEventListener('click', this.searchInputFocusHandler)
         }
@@ -122,14 +155,13 @@ export default class PbDropdown extends PbEnhancedElement {
     }
     const hasSelection = this.isMultiSelect
       ? this.selectedOptions.size > 0
-      : Boolean(this.element.querySelector(DROPDOWN_INPUT).value);
+      : Boolean(this.baseInput?.value);
 
     this.clearBtn.style.display = hasSelection ? "" : "none";
   }
 
   bindEventListeners() {
-    const customTrigger =
-      this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
+    const customTrigger = this.customTrigger || this.element;
     this.customTriggerClickHandler = (e) => {
       const label = e.target.closest(LABEL_SELECTOR);
       if (label && label.htmlFor) {
@@ -169,9 +201,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
     // Focus the input when anyone clicks the wrapper
     this.searchInputFocusHandler = () => this.searchInput.focus()
-    this.element
-      .querySelector(TRIGGER_SELECTOR)
-      ?.addEventListener('click', this.searchInputFocusHandler);
+    this.trigger?.addEventListener('click', this.searchInputFocusHandler);
 
     // Live filter
     this.searchInputHandler = (e) => this.handleSearch(e.target.value)
@@ -203,7 +233,7 @@ export default class PbDropdown extends PbEnhancedElement {
   adjustDropdownPosition(container) {
     if (!container) return;
 
-    const wrapper = this.element.querySelector(".dropdown_wrapper");
+    const wrapper = this.dropdownWrapper;
     if (!wrapper) return;
 
     const wrapperRect = wrapper.getBoundingClientRect();
@@ -276,7 +306,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const hiddenInput = this.baseInput;
 
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
@@ -314,11 +344,11 @@ export default class PbDropdown extends PbEnhancedElement {
   isClickOutside(event) {
     const label = event.target.closest(LABEL_SELECTOR);
     if (label && this.element.contains(label)) return false;
-    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
+    const customTrigger = this.customTrigger;
     if (customTrigger) {
       return !customTrigger.contains(event.target);
     } else {
-      const triggerElement = this.element.querySelector(TRIGGER_SELECTOR);
+      const triggerElement = this.trigger;
       const containerElement =
         this.element.parentNode.querySelector(CONTAINER_SELECTOR);
 
@@ -339,7 +369,7 @@ export default class PbDropdown extends PbEnhancedElement {
     if (this.isMultiSelect) {
       detail = Array.from(this.selectedOptions).map(JSON.parse);
     } else {
-      const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+      const hiddenInput = this.baseInput;
       detail = hiddenInput.value
         ? JSON.parse(
             this.element.querySelector(
@@ -458,7 +488,7 @@ export default class PbDropdown extends PbEnhancedElement {
       this.emitSelectionChange();
     }
 
-    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
+    const customTrigger = this.customTrigger;
     if (customTrigger) {
       if (this.target.classList.contains("open")) {
         this.hideElement(this.target);
@@ -478,7 +508,7 @@ export default class PbDropdown extends PbEnhancedElement {
           this.adjustDropdownHeight();
         }
       });
-      this.element.querySelector(DROPDOWN_INPUT).value = Array.from(
+      this.baseInput.value = Array.from(
         this.selectedOptions,
       )
         .map((opt) => JSON.parse(opt).id)
@@ -532,26 +562,26 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   toggleElement(elem) {
-    if (elem.classList.contains("open")) {
-      this.hideElement(elem);
-      this.updateArrowDisplay(false);
-      return;
-    }
-    this.showElement(elem);
-    this.updateArrowDisplay(true);
+    const isOpen = toggleVisibility({
+      isVisible: elem.classList.contains("open"),
+      onHide: () => this.hideElement(elem),
+      onShow: () => this.showElement(elem),
+    });
+
+    this.updateArrowDisplay(isOpen);
   }
 
   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";
-    }
+    setArrowVisibility({
+      rootElement: this.element,
+      downSelector: DOWN_ARROW_SELECTOR,
+      upSelector: UP_ARROW_SELECTOR,
+      showDownArrow: !isOpen,
+    });
   }
 
   handleFormValidation() {
-    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const hiddenInput = this.baseInput;
 
     hiddenInput.addEventListener(
       "invalid",
@@ -594,7 +624,7 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   setDefaultValue() {
-    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const hiddenInput = this.baseInput;
     const optionEls = Array.from(
       this.element.querySelectorAll(OPTION_SELECTOR),
     );
@@ -707,7 +737,7 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   resetDropdownValue() {
-    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const hiddenInput = this.baseInput;
     const options = this.element.querySelectorAll(OPTION_SELECTOR);
     options.forEach((option) => {
       option.classList.remove("pb_dropdown_option_selected");
@@ -716,7 +746,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
     hiddenInput.value = "";
 
-    const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
+    const defaultPlaceholder = this.placeholder;
     this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);
 
     if (this.searchInput) {
@@ -915,7 +945,7 @@ export default class PbDropdown extends PbEnhancedElement {
       .querySelectorAll('input[data-generated="true"]')
       .forEach((n) => n.remove());
 
-    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
+    const baseInput = this.baseInput;
     if (!baseInput) return;
     // for multi_select, for each selectedOption, create a hidden input
     const name = baseInput.getAttribute("name");
@@ -953,10 +983,10 @@ export default class PbDropdown extends PbEnhancedElement {
         this.adjustDropdownHeight();
       });
 
-      const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+      const hiddenInput = this.baseInput;
       if (hiddenInput) hiddenInput.value = "";
 
-      const placeholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
+      const placeholder = this.placeholder;
       if (placeholder)
         this.setTriggerElementText(placeholder.dataset.dropdownPlaceholder);
     }

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -102,7 +102,7 @@ export const getDefaultCheckedItems = (
         } else {
           const parent = items.find(
             (parentItem: { [key: string]: any }) =>
-              parentItem.id === item.parent_id
+              parentItem.id === item.parentId
           );
           if (!parent || !parent.checked) {
             checkedDefault.push(item);

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -179,7 +179,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       parent_id: string | null = null,
       depth = 0,
       parentDisabled = false,
-      ancestorChecked = false
     ) => {
       if (!Array.isArray(treeData)) {
         return;
@@ -189,36 +188,28 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
         const isDisabled =
           item.disabled || (parentDisabled && !returnAllSelected);
 
-          const explicitlySelected = Boolean(
-            selectedIds && selectedIds?.length && selectedIds.includes(item.id)
-          );
-
-          const checked =
-          !isDisabled &&
-          (explicitlySelected || (ancestorChecked && !returnAllSelected && variant !== "single"))
-
         const newItem = {
           ...item,
-          checked: checked,
+          checked: Boolean(
+            selectedIds && selectedIds.length && selectedIds.includes(item.id),
+          ),
           parent_id,
           depth,
           disabled: isDisabled,
         };
         if (newItem.children && newItem.children.length > 0) {
-        // if this node is checked (by explicit selection or ancestor cascade),
-        // and we're in default, cascade to descendants
-        const cascadeToChildren =
-        checked && !returnAllSelected && variant !== "single"
-
-        newItem.children = addCheckedAndParentProperty(
-          newItem.children,
-          selectedIds,
-          newItem.id,
-          depth + 1,
-          isDisabled,
-          cascadeToChildren
-        )
-      }
+          const children =
+            item.checked && !returnAllSelected
+              ? modifyRecursive(item.children, true)
+              : item.children;
+          newItem.children = addCheckedAndParentProperty(
+            children,
+            selectedIds,
+            newItem.id,
+            depth + 1,
+            isDisabled,
+          );
+        }
         return newItem;
       });
     };

data/app/pb_kits/playbook/utilities/domHelpers.ts

@@ -0,0 +1,50 @@
+type ToggleVisibilityOptions = {
+  isVisible: boolean,
+  onHide: () => void,
+  onShow: () => void,
+}
+
+type ArrowVisibilityOptions = {
+  rootElement: ParentNode,
+  downSelector: string,
+  upSelector: string,
+  showDownArrow: boolean,
+  displayValue?: string,
+}
+
+export const toggleVisibility = ({ isVisible, onHide, onShow }: ToggleVisibilityOptions): boolean => {
+  if (isVisible) {
+    onHide()
+    return false
+  }
+
+  onShow()
+  return true
+}
+
+export const getElementHeight = (element: HTMLElement, displayValue = 'block'): string => {
+  const originalDisplay = element.style.display
+  element.style.display = displayValue
+  const height = `${element.scrollHeight}px`
+  element.style.display = originalDisplay
+  return height
+}
+
+export const setArrowVisibility = ({
+  rootElement,
+  downSelector,
+  upSelector,
+  showDownArrow,
+  displayValue = 'inline-block',
+}: ArrowVisibilityOptions): void => {
+  const downArrow = rootElement.querySelector<HTMLElement>(downSelector)
+  const upArrow = rootElement.querySelector<HTMLElement>(upSelector)
+
+  if (downArrow) {
+    downArrow.style.display = showDownArrow ? displayValue : 'none'
+  }
+
+  if (upArrow) {
+    upArrow.style.display = showDownArrow ? 'none' : displayValue
+  }
+}