playbook_ui 14.22.0.pre.rc.2 → 14.22.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 60de2699b3213e11373d3894f23082a1bd0f1975413dd47e56a9ac1a05cc5fe0
-  data.tar.gz: 2e486251afd8b0ea3866755887d78e31a7cc6a96d28e78f76a1ebcce67072e6c
+  metadata.gz: 758567d131c4ffac31b6b9dfaf532518031be4ee6923c3078111d582eb282dea
+  data.tar.gz: df96ff270bdbbd7596b9c465baa69ffd9ae394133347f67a130284ea3ba5c366
 SHA512:
-  metadata.gz: f924a62c189edfd0462efa80f3f3c6960044b67194ff47212a261deea88e5dc81939cee8d816436bff37b322e4fd41ca0baf4f7aa768d61c71fa7d8c3c6f8652
-  data.tar.gz: 1498242e9f85a89aadc89e1a1f78528b4a2638e7544ad1907910e1b301dbc61f23e95041a2a961d47660277efc9ea08aacee30af13e1a811f872b45c812c9f80
+  metadata.gz: 91a15df0481aeb874fe3d03c750fbb172eab5b852e7279be6579399b11ea70cd736954fd1351f8d2e83416605a6e712b891e895a32544db347581b231b0f2f72
+  data.tar.gz: 98e02a517893e29d1903a37a5d2472f8bb2896482d2e03a14106d8bb7a423104d53efc90a4b96c658de9a550d26683c410604e885c572c11b0f19ed079e4e84c

data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx

@@ -1,6 +1,6 @@
-import React, { useContext, useLayoutEffect, useState, useEffect } from "react"
+import React, { useContext, useLayoutEffect, useState, useEffect, useRef } from "react"
 import classnames from "classnames"
-import { flexRender, Cell } from "@tanstack/react-table"
+import { flexRender, Cell, Row } from "@tanstack/react-table"
 import { VirtualItem } from "@tanstack/react-virtual"
 
 import { GenericObject } from "../../types"
@@ -10,6 +10,8 @@ import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
+import Detail from "../../pb_detail/_detail"
+import Flex from "../../pb_flex/_flex"
 
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
@@ -20,11 +22,13 @@ import AdvancedTableContext from "../Context/AdvancedTableContext"
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
   subRowHeaders?: string[]
+  isFetching: boolean
 }
 
 export const VirtualizedTableView = ({
   collapsibleTrail = true,
   subRowHeaders,
+  isFetching,
 }: VirtualizedTableViewProps) => {
   const {
     enableToggleExpansion,
@@ -36,6 +40,7 @@ export const VirtualizedTableView = ({
     hasAnySubRows,
     virtualizer,
     flattenedItems,
+    totalAvailableCount,
   } = useContext(AdvancedTableContext)
 
   const columnPinning = table.getState().columnPinning || { left: [] };
@@ -121,19 +126,7 @@ export const VirtualizedTableView = ({
   }
 
   // Get virtual items
-  let virtualItems: VirtualItem[] = [];
-  try {
-    virtualItems = virtualizer.getVirtualItems();
-  } catch (err) {
-    return (
-      <tr>
-        <td colSpan={table.getAllFlatColumns().length || 1}>
-          Error loading virtualized data.
-        </td>
-      </tr>
-    );
-  }
-
+  const virtualItems: VirtualItem[] = virtualizer.getVirtualItems?.() || [];
   if (!virtualItems.length) {
     return (
       <tr>
@@ -143,6 +136,9 @@ export const VirtualizedTableView = ({
       </tr>
     );
   }
+  
+  // Establish # of Parent Rows (so that Footer count does not include every single row)
+  const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
 
   return (
     <>
@@ -177,7 +173,7 @@ export const VirtualizedTableView = ({
         if (item.type === 'row') {
           const row = item.row;
           const isExpandable = row.getIsExpanded();
-          const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
+          const rowHasNoChildren = row.original?.children && !row.original.children.length;
           const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
           const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
 
@@ -266,6 +262,30 @@ export const VirtualizedTableView = ({
           );
         }
 
+        if (item.type === 'footer') {
+          // Render footer
+          return (
+            <tr
+                className="virtualized-table-row virtualized-footer"
+                key={`footer-row`}
+                style={virtualItemStyle}
+            >
+              <td colSpan={table.getAllFlatColumns().length}>
+                <Flex align="center"
+                    justify="center"
+                >
+
+                {isFetching ? (
+                  <LoadingInline />
+                ) : (
+                  <Detail text={`Showing ${topLevelRowCount} of ${totalAvailableCount} rows`} />
+                )}
+                </Flex>
+              </td>
+            </tr>
+          )
+        }
+
         return null;
       })}
     </>

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -8,7 +8,7 @@ import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
 const AdvancedTableContext = createContext<any>({});
 
 interface FlattenedItem {
-    type: 'header' | 'row' | 'loading';
+    type: 'header' | 'row' | 'loading' | 'footer';
     row: Row<GenericObject>;
     id: string;
 }
@@ -116,6 +116,17 @@ export const AdvancedTableProvider = ({ children, ...props }: {
       }
     });
 
+    const isFetching = props.isFetching || false;
+    const shouldAddFooter = table && !isFetching && tableRows.length > 0
+
+    if (shouldAddFooter) {
+      items.push({
+        type: 'footer',
+        row: {} as Row<GenericObject>,
+        id: `footer-row`,
+      });
+    }
+
     return items;
   }, [
     isVirtualized,
@@ -159,10 +170,11 @@ export const AdvancedTableProvider = ({ children, ...props }: {
   useEffect(() => {
     if (isVirtualized && virtualizer && table && containerRef.current) {
       // Force recalculation of all virtual items
+      virtualizer.setOptions({
+        ...virtualizer.options,
+        count: flattenedItems.length,
+      });
       virtualizer.measure();
-
-      // Reset scroll position when sorting changes
-      containerRef.current.scrollTop = 0;
     }
   }, [
     isVirtualized,
@@ -170,7 +182,8 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     table,
     containerRef,
     JSON.stringify(table?.getState().sorting || []),
-    JSON.stringify(table?.getState().expanded || {})
+    JSON.stringify(table?.getState().expanded || {}),
+    flattenedItems.length,
   ]);
 
   const contextValue = {

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Row, RowPinningState } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers";
@@ -19,13 +19,21 @@ export function useTableActions({
   onRowSelectionChange
 }: UseTableActionsProps) {
 
+  // State to achieve 1 second delay before fetching more rows
+  const [bottomReached, setBottomReached] = useState(false)
+  const bottomTimeout = useRef<NodeJS.Timeout | null>(null)
+
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
-    onToggleExpansionClick && onToggleExpansionClick(row);
-    const expandedState = expanded;
-    const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
-    setExpanded(updatedRows);
+    if (onToggleExpansionClick) onToggleExpansionClick(row)
+      const updatedExpandedState = await updateExpandAndCollapseState(
+        table.getRowModel(),
+        expanded,
+        row?.parentId,
+        undefined
+      )
+
+      setExpanded(updatedExpandedState)
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 
   // Handle pagination
@@ -35,20 +43,32 @@ export function useTableActions({
 
   // Handle scroll detection for infinite scroll/virtualization
   const fetchMoreOnBottomReached = useCallback((
-    containerRefElement: HTMLDivElement | null,
-    fetchNextPage: () => void,
-    isFetching: boolean,
-    totalFetched: number,
-    totalDBRowCount: number
+      containerRef: HTMLDivElement | null,
+      fetchNextPage: () => void,
+      isFetching: boolean,
+      totalFetched: number,
+      totalDBRowCount: number
   ) => {
-    if (containerRefElement) {
-      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-      // If user scrolls near bottom, fetch more data
-      if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && totalFetched < totalDBRowCount) {
-        fetchNextPage();
+    if (!containerRef || isFetching || totalFetched >= totalDBRowCount) return
+    const { scrollTop, scrollHeight, clientHeight } = containerRef
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight
+    // If user scrolls near bottom, fetch more data after 1 second delay
+    if (distanceFromBottom < 50) {
+      if (!bottomReached) {
+        setBottomReached(true)
+        bottomTimeout.current = setTimeout(() => {
+          fetchNextPage()
+          setBottomReached(false)
+        }, 1000)
+      }
+    } else {
+      setBottomReached(false)
+      if (bottomTimeout.current) {
+        clearTimeout(bottomTimeout.current)
+        bottomTimeout.current = null
       }
     }
-  }, []);
+  },[bottomReached]);
 
   // Update selection state
   useEffect(() => {

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -16,6 +16,7 @@ type TableBodyProps = {
   dark?: boolean
   id?: string
   subRowHeaders?: string[]
+  isFetching: boolean
 }
 
 export const TableBody = ({
@@ -24,6 +25,7 @@ export const TableBody = ({
   dark = false,
   id,
   subRowHeaders,
+  isFetching,
   ...props
 }: TableBodyProps) => {
 
@@ -63,6 +65,7 @@ export const TableBody = ({
           // Virtualized table view
           <VirtualizedTableView
               collapsibleTrail={collapsibleTrail}
+              isFetching={isFetching}
               subRowHeaders={subRowHeaders}
           />
         ) : (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -40,9 +40,13 @@ export const TableHeader = ({
     showActionsBar,
     selectableRows,
     responsive,
-    headerRef
+    headerRef,
+    virtualizedRows,
+    enableVirtualization,
   } = useContext(AdvancedTableContext)
 
+  const isVirtualized = virtualizedRows || enableVirtualization;
+
   const classes = classnames(
     buildCss("pb_advanced_table_header"),
     globalProps(props),
@@ -57,46 +61,93 @@ export const TableHeader = ({
     `${isChrome() ? "chrome-styles" : ""}`,
     `${responsive === "scroll" && "pinned-left"}`,
   );
+
+  const renderRegularTableHeader = () => (
+    <thead className={classes} 
+        id={id}
+    >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+        <tr 
+            key={`${headerGroup.id}-headerGroup`}
+            ref={index === 0 ? headerRef : null}
+        >
+          {!hasAnySubRows && selectableRows && (
+            <th className={customCellClassnames}>
+              <Checkbox
+                  checked={table?.getIsAllRowsSelected()}
+                  indeterminate={table?.getIsSomeRowsSelected()}
+                  onChange={table?.getToggleAllRowsSelectedHandler()}
+              />
+            </th>
+          )}
+          {headerGroup.headers.map(header => {
+            const isPinnedLeft = columnPinning.left.includes(header.id)
+            return (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  isPinnedLeft={isPinnedLeft}
+                  key={`${header.id}-header`}
+                  loading={loading}
+                  sortIcon={sortIcon}
+                  table={table}
+              />
+            )
+          })}
+        </tr>
+      ))}
+    </thead>
+  );
+
+  const renderVirtualizedTableHeader = () => (
+    <thead 
+        className={classes} 
+        data-virtualized="true"
+        id={id}
+    >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
+        <tr 
+            className="virtualized-header-row-header"
+            key={`${headerGroup.id}-headerGroup-virtualized`}
+            ref={index === 0 ? headerRef : null}
+        >
+          {!hasAnySubRows && selectableRows && (
+            <th className={classnames(customCellClassnames, "virtualized-header-cell")}>
+              <Checkbox
+                  checked={table?.getIsAllRowsSelected()}
+                  indeterminate={table?.getIsSomeRowsSelected()}
+                  onChange={table?.getToggleAllRowsSelectedHandler()}
+              />
+            </th>
+          )}
+          {headerGroup.headers.map(header => {
+            const isPinnedLeft = columnPinning.left.includes(header.id)
+            return (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  isPinnedLeft={isPinnedLeft}
+                  isVirtualized
+                  key={`${header.id}-header-virtualized`}
+                  loading={loading}
+                  sortIcon={sortIcon}
+                  table={table}
+              />
+            )
+          })}
+        </tr>
+      ))}
+    </thead>
+  );
   return (
-    <>
-      <thead className={classes}
-          id={id}
-      >
-        {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-          <tr 
-              key={`${headerGroup.id}-headerGroup`}
-              ref={index === 0 ? headerRef : null}
-          >
-            {!hasAnySubRows && selectableRows && (
-              <th className={customCellClassnames}>
-                <Checkbox
-                    checked={table?.getIsAllRowsSelected()}
-                    indeterminate={table?.getIsSomeRowsSelected()}
-                    onChange={table?.getToggleAllRowsSelectedHandler()}
-                />
-              </th>
-            )}
-            {headerGroup.headers.map(header => {
-              const isPinnedLeft = columnPinning.left.includes(header.id)
-              return (
-                <TableHeaderCell
-                    enableSorting={enableSorting}
-                    enableToggleExpansion={enableToggleExpansion}
-                    handleExpandOrCollapse={handleExpandOrCollapse}
-                    header={header}
-                    headerChildren={children}
-                    isPinnedLeft={isPinnedLeft}
-                    key={`${header.id}-header`}
-                    loading={loading}
-                    sortIcon={sortIcon}
-                    table={table}
-                />
-              )
-            })}
-          </tr>
-        ))}
-      </thead>
+    <>      
+      {isVirtualized ? renderVirtualizedTableHeader() : renderRegularTableHeader()}
     </>
   )
 }

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

@@ -57,7 +57,6 @@ export const getVirtualizedContainerStyles = (maxHeight?: string): React.CSSProp
       position: 'absolute',
       top: 0,
       left: 0,
-      width: '100%',
       height: '40px', // Match standard table row height
       transform: `translateY(${startPosition}px)`,
       tableLayout: 'fixed',
@@ -67,12 +66,14 @@ export const getVirtualizedContainerStyles = (maxHeight?: string): React.CSSProp
   /**
    * Get height estimates for different row types
    */
-  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading') => {
+  export const getRowHeightEstimate = (rowType: 'header' | 'row' | 'loading' | 'footer') => {
     switch (rowType) {
       case 'header':
         return 40; // Header height
       case 'loading':
         return 30; // Loading indicator height
+      case 'footer':
+        return 40
       case 'row':
       default:
         return 40; // Standard row height - match this to your design system

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

@@ -63,11 +63,30 @@
     width: 100%;
   }
 
-  // Virtualized table styles
+  // Virtualized Table and Rows for Infinite Scroll
+  scrollbar-gutter: stable right-edges;
+  .virtualized-header-row-header {
+    width: 100% !important;
+    .table-header-cells:first-child {
+      min-width: 180px;
+    }
+  }
+
+  .virtualized-footer {
+    width: 100% !important;
+    td {
+      border-bottom-left-radius: 4px !important;
+      border-bottom-right-radius: 4px !important;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   .virtualized-table-row {
     display: table !important;
     table-layout: fixed !important;
-    width: 100% !important;
+    box-sizing: border-box !important;
 
     td {
       display: table-cell !important;
@@ -104,7 +123,7 @@
 
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
-    }
+  }
   
 
   .row-selection-actions-card {
@@ -193,7 +212,6 @@
 
     // Fix virtualized row borders
     tr.virtualized-table-row {
-      border-bottom: 1px solid $border_light;
 
       &.bg-silver {
         td:first-child {
@@ -606,6 +624,16 @@
         td.sticky-left {
           border-right: 1px solid $border_light !important;
         }
+        // Virtualized Table in Responsive Styles
+        .virtualized-header,
+        .virtualized-header-row-header,
+        .virtualized-table-row,
+        .virtualized-footer {
+          border-right: 1px solid $border_light !important;
+          .table-header-cells:first-child {
+            box-shadow: 0 0 10px 0 rgba($shadow, 0.16) !important;
+          }
+        }
       }
     }
   }

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

@@ -266,6 +266,29 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Visibility flag for action bar
   const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
+  // The actual Main <Table /> element
+  const tableElement = (
+    <Table
+        className={`${loading ? "content-loading" : ""}`}
+        dark={dark}
+        dataTable
+        numberSpacing="tabular"
+        responsive="none"
+        {...tableProps}
+    >
+      {children ? (
+        children
+      ) : (
+        <>
+          <TableHeader />
+          <TableBody   
+              isFetching={isFetching}
+          />
+        </>
+      )}
+    </Table>
+  )
+
   return (
     <>
       {/* Top Pagination */}
@@ -322,6 +345,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             table={table}
             tableContainerRef={tableWrapperRef}
             toggleExpansionIcon={toggleExpansionIcon}
+            totalAvailableCount={fullData.length}
             virtualizedRows={virtualizedRows}
         >
           <React.Fragment>
@@ -333,24 +357,14 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                 type={columnVisibilityControl ? "column-visibility" : "row-selection"}
             />
 
-            {/* Main Table */}
-            <Table
-                className={`${loading ? "content-loading" : ""}`}
-                dark={dark}
-                dataTable
-                numberSpacing="tabular"
-                responsive="none"
-                {...tableProps}
-            >
-              {children ? (
-                children
-              ) : (
-                <>
-                  <TableHeader />
-                  <TableBody />
-                </>
-              )}
-            </Table>
+            {/* Virtualized wrapper div only if virtualizedRows is true */}
+            {virtualizedRows ? (
+              <div style={{ overflow: 'auto', width: '100%' }}>
+                {tableElement}
+              </div>
+            ) : (
+              tableElement
+            )}
           </React.Fragment>
         </AdvancedTableProvider>
 

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

@@ -632,4 +632,23 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
 
   const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
   expect(firstEnrollmentCell).toHaveAttribute("align", "left");
-});
+});
+
+test("renders virtualized table rows and header", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA_WITH_ID}
+        virtualizedRows
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const virtualizedHeader = kit.querySelector('.virtualized-header-row-header')
+  expect(virtualizedHeader).toBeInTheDocument()
+
+  const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
+  expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
+})

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

@@ -0,0 +1,3 @@
+The `virtualizedRows` boolean prop enables the rendering of a virtualized table using [Tanstack's Virtualizer Library](https://tanstack.com/virtual/v3/docs/api/virtualizer) with infinite scroll capabilities for large data sets.
+
+**Note:** Not all Advanced Table props work perfectly with the Virtualized Table - for complex table configurations with many added features or controls consider using the [Pagination](https://playbook.powerapp.cloud/kits/advanced_table/react#pagination) version instead. Additionally, it is a known issue that due to the use of absolute positioning for the virtualized header, it does not render in Safari.

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

@@ -61,3 +61,4 @@ examples:
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
+  - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -35,4 +35,5 @@ export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_t
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
-export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
+export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
+export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'

data/app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import Collapsible from '../../pb_collapsible/_collapsible'
+import Caption from '../../pb_caption/_caption'
+import Body from '../../pb_body/_body'
+
+type FilterSectionProps = {
+  children?: React.ReactChild[] | React.ReactChild,
+  collapsible?: boolean,
+  collapsed?: boolean,
+  headerText?: string,
+}
+const FilterSection = ({ children, collapsible = false, collapsed = true, headerText, }: FilterSectionProps): React.ReactElement => {
+  if (collapsible) {
+    return (
+      <Collapsible
+          collapsed={collapsed}
+          padding="none"
+      >
+        <Collapsible.Main
+            paddingX="sm"
+            paddingY="xs"
+        >
+            <Caption>{ headerText }</Caption>
+        </Collapsible.Main>
+        <Collapsible.Content
+            className="filter_section_collapsible"
+            paddingX="sm"
+        >
+          { children }
+        </Collapsible.Content>
+      </Collapsible>
+    )
+  }
+  
+  return (
+    <Body
+        paddingTop="xs"
+        paddingX="sm"
+    >
+      <>
+        {headerText && <Caption marginBottom="sm">{ headerText }</Caption>}
+        { children }
+      </>
+    </Body>
+  )
+}
+
+export default FilterSection