playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178 → 13.18.0.pre.alpha.PLAY12062192

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af16199bf3de903780fbe8aef3da42bc2864cdbed9ef37c559bd9c6e3b823ec8
-  data.tar.gz: 3d64795bc4c41d875381d33a8303280f184fe0cc4915471f6f1cf11455ef604f
+  metadata.gz: 94f589b86b30ab8ce2fc2a6efde754d3c0858127cd98de756f7a5988a270fb98
+  data.tar.gz: 65f4377c3a940d0ebe99287aab5d264cef225ce71b39fd82ad3206947d0b3647
 SHA512:
-  metadata.gz: fad31fe23e5f08b313d6e7b0d7c571c3ca20c08bd59d5e75b001009c8a2ccf2657eb84f3ac882093745458d494ca9d3d54056d83f76f06aafd6897f9c33285a4
-  data.tar.gz: f0e6431938db0f7fec379cf5c6374d89f7383a9cd6936c3b302811519c74f96fd40df04580f7a5c0c8bfb8ce889c15567ed3075f65e4d32d6e792a83b5e84140
+  metadata.gz: 920f3031b3b57dacc1f20099c3fd5f63133f90cec68608967a9b243d0f4fc939613642224e04d0d81dcf66e53690a3e031d6da5efba401ab12923b7b28e4f33f
+  data.tar.gz: 1813f4f68ea6e197b6bfe10414128582e30cd3b6eafc18bf29942b9c82aec32ca7f0eb594de67de7c4024616ffb4283ef3a66f6cc1b733f8edd95d0da30df6c8

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

@@ -22,14 +22,13 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded } = useContext(AdvancedTableContext);
+  const RowWithoutChildren = row.originalSubRows === undefined;
 
   const handleOnExpand = (row: Row<DataType>) => {
     onRowToggleClick && onRowToggleClick(row);
     setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
   };
-  const RowHasChildren = row.original.children ? true : false
-  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
@@ -37,7 +36,7 @@ export const CustomCell = ({
           columnGap="xs"
           orientation="row"
       >
-        {renderButton ? (
+        {!RowWithoutChildren ? (
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
@@ -54,7 +53,7 @@ export const CustomCell = ({
             )}
           </button>
         ) : null}
-        <FlexItem paddingLeft={renderButton? "none" : "xs"}>
+        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
           {row.depth === 0 ? getValue() : value}
         </FlexItem>
       </Flex>

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

@@ -1,9 +1,8 @@
-import React, { useContext } from "react"
+import React from "react"
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
 import { Row, Table } from "@tanstack/react-table"
 
-import AdvancedTableContext from "../Context/AdvancedTableContext";
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
 
@@ -13,7 +12,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 interface SubRowHeaderRowProps {
   collapsibleTrail?: boolean
-  enableToggleExpansion?: "all" | "header" | "none"
+  enableToggleExpansion?: "all" | "header"
   onClick: (row: Row<DataType>) => void
   row: Row<DataType>
   subRowHeaders?: string[]
@@ -28,11 +27,7 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading } = useContext(AdvancedTableContext);
-
   const numberOfColumns = table.getAllFlatColumns().length
-  const rowHasChildren = row.original.children ? true : false
-  const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
 
   return (
     <tr className="custom-row bg-silver">
@@ -47,13 +42,13 @@ export const SubRowHeaderRow = ({
           <Flex align="center" 
               columnGap="xs"
           >
-            {enableToggleExpansion === "all" && canExpand ? (
+            {enableToggleExpansion === "all" && row.getCanExpand() ? (
               <ToggleIconButton onClick={onClick} 
                   row={row}
               />
             ) : null}
             <Caption
-                marginLeft={canExpand ? "none" : "xs"}
+                marginLeft={row.getCanExpand() ? "none" : "xs"}
                 text={subRowHeaders[row.depth - 1]}
             />
           </Flex>

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

@@ -12,10 +12,11 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
   enableSorting?: boolean
-  enableToggleExpansion?: "all" | "header" | "none"
+  enableToggleExpansion?: "all" | "header"
   handleExpandOrCollapse?: () => void
   header?: Header<DataType, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
+  headerId?: string
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -26,6 +27,7 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
+  headerId,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
@@ -48,22 +50,10 @@ const cellClassName = classnames("table-header-cells",
 );
 
 const cellId = `${loading ? 
-    `loading-${header.id}`
-    : `${header.id}`
+    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
+    : `${header.id}${headerId ? `-${headerId}` : ""}`
 }`;
 
-const isToggleExpansionEnabledLoading =
-  header.index === 0 &&
-  loading &&
-  (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none";
-  
-const isToggleExpansionEnabled =
-  header.index === 0 &&
-  !loading &&
-  (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none";
-
   return (
     <th
         align="right"
@@ -83,11 +73,15 @@ const isToggleExpansionEnabled =
             alignItems="center"
             justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
         >
-          {isToggleExpansionEnabled && (
+          {header.index === 0 &&
+            !loading &&
+            (enableToggleExpansion === "all" || "header") && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
 
-          {isToggleExpansionEnabledLoading &&(
+          {header.index === 0 &&
+            loading &&
+            (enableToggleExpansion === "all" || "header") && (
               <div className="loading-toggle-icon header-toggle-icon" />
             )}
 

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

@@ -1,7 +1,4 @@
 import React, { useContext } from "react"
-import classnames from "classnames";
-import { buildCss } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import { flexRender, Row } from "@tanstack/react-table"
 
@@ -13,47 +10,28 @@ import { isChrome } from "../Utilities/BrowserCheck"
 import { DataType } from "../Utilities/types"
 
 type TableBodyProps = {
-  className?: string;
   collapsibleTrail?: boolean
-  id?: string;
   subRowHeaders?: string[]
 }
 
 export const TableBody = ({
-  className,
   collapsibleTrail = true,
-  id,
   subRowHeaders,
-  ...props
 }: TableBodyProps) => {
-
   const {
-    columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
-    inlineRowLoading,
     loading,
     table,
   } = useContext(AdvancedTableContext)
-
-  const classes = classnames(
-    buildCss("pb_advanced_table_body"),
-    globalProps(props),
-    className
-  );
-
   return (
     <>
-      <tbody className={classes} 
-          id={id}
-      >
+      <tbody>
         {table.getRowModel().rows.map((row: Row<DataType>) => {
           const isExpandable = row.getIsExpanded()
           const isFirstChildofSubrow = row.depth > 0 && row.index === 0
-          const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
+          const rowHasNoChildren = !row.original.children?.length
           const numberOfColumns = table.getAllFlatColumns().length
-          const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
-          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
 
           return (
             <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -69,7 +47,7 @@ export const TableBody = ({
               )}
 
               <tr
-                  className={`${rowBackground ? "bg-silver" : "bg-white"} ${
+                  className={`${isExpandable ? "bg-silver" : "bg-white"} ${
                     row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
                   }`}
                   id={`${row.index}-${row.id}-${row.depth}-row`}
@@ -101,11 +79,9 @@ export const TableBody = ({
               </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
-              {isDataLoading ? (
+              {isExpandable && rowHasNoChildren && row.depth === 0 ? (
                 <tr key={`${row.id}-row`}>
-                  <td colSpan={numberOfColumns}
-                      style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
-                  >
+                  <td colSpan={numberOfColumns}>
                     <LoadingInline />
                   </td>
                 </tr>

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

@@ -1,7 +1,4 @@
 import React, { useContext } from "react"
-import classnames from "classnames";
-import { buildCss } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
 import { HeaderGroup } from "@tanstack/react-table"
 import AdvancedTableContext from "../Context/AdvancedTableContext"
 import { TableHeaderCell } from "../Components/TableHeaderCell"
@@ -9,19 +6,16 @@ import { DataType } from "../Utilities/types"
 
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
-  className?: string
   enableSorting?: boolean
-  id?: string;
+  headerId?: string
   sortIcon?: string | string[]
 }
 
 export const TableHeader = ({
   children,
-  className,
   enableSorting = false,
-  id,
+  headerId,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
-  ...props
 }: TableHeaderProps) => {
   const {
     enableToggleExpansion,
@@ -30,18 +24,9 @@ export const TableHeader = ({
     table,
   } = useContext(AdvancedTableContext)
 
-  const classes = classnames(
-    buildCss("pb_advanced_table_header"),
-    globalProps(props),
-    className
-  );
-
-
   return (
     <>
-      <thead className={classes}
-          id={id}
-      >
+      <thead>
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
@@ -52,6 +37,7 @@ export const TableHeader = ({
                   handleExpandOrCollapse={handleExpandOrCollapse}
                   header={header}
                   headerChildren={children}
+                  headerId={headerId}
                   key={`${header.id}-header`}
                   loading={loading}
                   sortIcon={sortIcon}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -24,9 +24,10 @@ export const updateExpandAndCollapseState = (
   // Update isExpansionConsistent variable
   for (const row of rows) {
     if (
-      targetParent === undefined
+      row.getCanExpand() &&
+      (targetParent === undefined
         ? row.depth === 0
-        : targetParent === row.parentId
+        : targetParent === row.parentId)
     ) {
       areRowsExpanded.add(row.getIsExpanded())
       if (areRowsExpanded.size > 1) {
@@ -47,7 +48,7 @@ export const updateExpandAndCollapseState = (
     })
   } else {
     for (const row of rows) {
-      if (targetParent === row.parentId) {
+      if (row.getCanExpand() && targetParent === row.parentId) {
         updateExpandedRows[row.id] = !isExpansionConsistent
           ? true
           : !row.getIsExpanded()

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import Table from "../pb_table/_table";
 import {
@@ -28,12 +28,10 @@ type AdvancedTableProps = {
   className?: string;
   columnDefinitions: DataType[];
   data?: { [key: string]: string };
-  enableToggleExpansion?: "all" | "header" | "none";
+  enableToggleExpansion?: "all" | "header";
   expandedControl?: DataType;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   initialLoadingRowsCount?: number;
-  inlineRowLoading?: boolean;
   loading?: boolean | string;
   onRowToggleClick?: (arg: Row<DataType>) => void;
   onToggleExpansionClick?: (arg: Row<DataType>) => void;
@@ -53,10 +51,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
-    htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
-    inlineRowLoading = false,
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
@@ -108,9 +104,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
           const accessorValue = rowData[depthAccessor];
           return accessorValue ? (
-            <CustomCell
-                onRowToggleClick={onRowToggleClick}
-                row={row} 
+            <CustomCell row={row} 
                 value={accessorValue} 
             />
           ) : (
@@ -201,7 +195,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_advanced_table"),
     globalProps(props),
@@ -211,22 +204,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
     >
       <AdvancedTableContext.Provider
           value={{
-            columnDefinitions,
-            enableToggleExpansion,
-            expanded,
+            table,
             handleExpandOrCollapse,
-            inlineRowLoading,
             loading,
+            enableToggleExpansion,
+            toggleExpansionIcon,
             setExpanded,
+            expanded,
             sortControl,
-            table,
-            toggleExpansionIcon,
           }}
       >
         <Table

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

@@ -343,39 +343,3 @@ test("sort button exists and sorts column data", () => {
   const row2 = kit.getElementsByTagName('tr')[2]
   expect(row2.id).toBe("0-0-0-row")
 }); 
-
-test("Generates Table.Header default + custom classname", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header className="custom-header" />
-      <AdvancedTable.Body />
-
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHeader = kit.querySelector('thead')
-  expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
-});
-
-test("Generates Table.Body default + custom classname", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header />
-      <AdvancedTable.Body className="custom-body-classname"/>
-
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHeader = kit.querySelector('tbody')
-  expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
-});

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

@@ -9,5 +9,4 @@ examples:
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
-  - advanced_table_inline_row_loading: inline Row Loading
 

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

@@ -7,4 +7,3 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
 export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
-export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'

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

@@ -3,13 +3,14 @@ import React, { ReactNode, useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
 
-type FiltersPopoverProps = { 
+type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
   dark?: boolean,
+  maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
 }
-const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -26,6 +27,7 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
   return (
     <PbReactPopover
         closeOnClick="outside"
+        maxHeight={maxHeight}
         minWidth={minWidth}
         placement={placement}
         reference={filterButton}

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

@@ -69,14 +69,14 @@
       <% end %>
     <% end %>
 
-    <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
+    <% if object.template != "sort_only" %>
+      <%= pb_rails("popover", props: object.popover_props) do %>
         <%= content %>
       <% end %>
     <%end%>
 
-    <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
+    <% if object.template != "filter_only" %>
+      <%= pb_rails("popover", props: object.popover_props) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

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

@@ -10,6 +10,7 @@ module Playbook
                       values: %w[default single filter_only sort_only],
                       default: "default"
       prop :background, type: Playbook::Props::Boolean, default: true
+      prop :max_height
       prop :min_width, default: "auto"
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
@@ -31,7 +32,7 @@ module Playbook
       end
 
       def wrapper(&block)
-        if object.background
+        if background
           pb_rails("card", props: { padding: "none" }, &block)
         else
           capture(&block)
@@ -48,6 +49,29 @@ module Playbook
           ""
         end
       end
+
+      def popover_props
+        if template != "sort_only"
+          {
+            max_height: max_height,
+            min_width: min_width,
+            close_on_click: "outside",
+            trigger_element_id: "filter#{id}",
+            tooltip_id: "filter-form#{id}",
+            position: placement,
+          }
+        elsif template != "filter_only"
+          {
+            max_height: max_height,
+            classname: "pb_filter_sort_menu",
+            close_on_click: "outside",
+            trigger_element_id: "sort-button#{id}",
+            tooltip_id: "sort-filter-btn-tooltip#{id}",
+            position: placement,
+            padding: "none",
+          }
+        end
+      end
     end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.18.0"
-  VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178"
+  VERSION = "13.18.0.pre.alpha.PLAY12062192"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178
+  version: 13.18.0.pre.alpha.PLAY12062192
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-02-19 00:00:00.000000000 Z
+date: 2024-02-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -293,8 +293,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
@@ -309,7 +307,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_description.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
-- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
 - app/pb_kits/playbook/pb_advanced_table/docs/example.yml
 - app/pb_kits/playbook/pb_advanced_table/docs/index.js
 - app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss

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

@@ -1,58 +0,0 @@
-import React from "react";
-import { AdvancedTable } from "../..";
-import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
-
-const AdvancedTableInlineRowLoading = (props) => {
-  const columnDefinitions = [
-    {
-      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",
-    },
-  ];
-
-  //Render the subRow header rows
-  const subRowHeaders = ["Quarter", "Month", "Day"]
-
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion="all"
-          inlineRowLoading
-          tableData={MOCK_DATA_INLINE_LOADING}
-          {...props}
-      >
-        <AdvancedTable.Header />
-        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
-      </AdvancedTable>
-    </div>
-  );
-};
-
-export default AdvancedTableInlineRowLoading;

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

@@ -1,5 +0,0 @@
-As a default, the kit assumes that the dataset provided to it at first render is the complete dataset and renders the row level expansion buttons, the toggleAllExpansion buttons in the subrow headers (if any), etc based on that dataset. However, if the dev wants to set up a more complicated querying logic that for instance, runs a query on each expansion button click, then they can use the `inlineRowLoading` prop. This prop, if present, assumes that any item in the dataset that has an empty children array WILL have children even if it does not have any on first render. The kit therefore renders the correct buttons as well as adding an inline Loading state for the row with that empty children array. 
-
-In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
-
-This prop is set to `false` by default. 

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

@@ -1,200 +0,0 @@
-export const MOCK_DATA_INLINE_LOADING = [
-    {
-      year: "2021",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "20",
-      scheduledMeetings: "10",
-      attendanceRate: "51%",
-      completedClasses: "3",
-      classCompletionRate: "33%",
-      graduatedStudents: "19",
-      children: [],
-    },
-    {
-      year: "2022",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "25",
-      scheduledMeetings: "17",
-      attendanceRate: "75%",
-      completedClasses: "5",
-      classCompletionRate: "45%",
-      graduatedStudents: "32",
-      children: [
-        {
-          year: "2022",
-          quarter: "Q1",
-          month: null,
-          day: null,
-          newEnrollments: "2",
-          scheduledMeetings: "35",
-          attendanceRate: "32%",
-          completedClasses: "15",
-          classCompletionRate: "52%",
-          graduatedStudents: "36",
-          children: [
-            {
-              year: "2022",
-              quarter: "Q1",
-              month: "January",
-              day: null,
-              newEnrollments: "16",
-              scheduledMeetings: "20",
-              attendanceRate: "11%",
-              completedClasses: "13",
-              classCompletionRate: "47%",
-              graduatedStudents: "28",
-              children: [
-                {
-                  year: "2022",
-                  quarter: "Q1",
-                  month: "January",
-                  day: "15",
-                  newEnrollments: "34",
-                  scheduledMeetings: "28",
-                  attendanceRate: "97%",
-                  completedClasses: "20",
-                  classCompletionRate: "15%",
-                  graduatedStudents: "17",
-                },
-                {
-                  year: "2022",
-                  quarter: "Q1",
-                  month: "January",
-                  day: "25",
-                  newEnrollments: "43",
-                  scheduledMeetings: "23",
-                  attendanceRate: "66%",
-                  completedClasses: "26",
-                  classCompletionRate: "47%",
-                  graduatedStudents: "9",
-                },
-              ],
-            },
-            {
-              year: "2022",
-              quarter: "Q1",
-              month: "May",
-              day: null,
-              newEnrollments: "20",
-              scheduledMeetings: "41",
-              attendanceRate: "95%",
-              completedClasses: "26",
-              classCompletionRate: "83%",
-              graduatedStudents: "43",
-              children: [
-                {
-                  year: "2011",
-                  quarter: "Q1",
-                  month: "May",
-                  day: "2",
-                  newEnrollments: "19",
-                  scheduledMeetings: "35",
-                  attendanceRate: "69%",
-                  completedClasses: "8",
-                  classCompletionRate: "75%",
-                  graduatedStudents: "23",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      year: "2023",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "10",
-      scheduledMeetings: "15",
-      attendanceRate: "65%",
-      completedClasses: "4",
-      classCompletionRate: "49%",
-      graduatedStudents: "29",
-      children: [
-        {
-          year: "2023",
-          quarter: "Q1",
-          month: null,
-          day: null,
-          newEnrollments: "2",
-          scheduledMeetings: "35",
-          attendanceRate: "32%",
-          completedClasses: "15",
-          classCompletionRate: "52%",
-          graduatedStudents: "36",
-          children: [
-            {
-              year: "2023",
-              quarter: "Q1",
-              month: "March",
-              day: null,
-              newEnrollments: "16",
-              scheduledMeetings: "20",
-              attendanceRate: "11%",
-              completedClasses: "13",
-              classCompletionRate: "47%",
-              graduatedStudents: "28",
-              children: [
-                {
-                  year: "2023",
-                  quarter: "Q1",
-                  month: "March",
-                  day: "10",
-                  newEnrollments: "34",
-                  scheduledMeetings: "28",
-                  attendanceRate: "97%",
-                  completedClasses: "20",
-                  classCompletionRate: "15%",
-                  graduatedStudents: "17",
-                },
-                {
-                  year: "2023",
-                  quarter: "Q1",
-                  month: "March",
-                  day: "11",
-                  newEnrollments: "43",
-                  scheduledMeetings: "23",
-                  attendanceRate: "66%",
-                  completedClasses: "26",
-                  classCompletionRate: "47%",
-                  graduatedStudents: "9",
-                },
-              ],
-            },
-            {
-              year: "2023",
-              quarter: "Q1",
-              month: "April",
-              day: null,
-              newEnrollments: "20",
-              scheduledMeetings: "41",
-              attendanceRate: "95%",
-              completedClasses: "26",
-              classCompletionRate: "83%",
-              graduatedStudents: "43",
-              children: [
-                {
-                  year: "2023",
-                  quarter: "Q1",
-                  month: "April",
-                  day: "15",
-                  newEnrollments: "19",
-                  scheduledMeetings: "35",
-                  attendanceRate: "69%",
-                  completedClasses: "8",
-                  classCompletionRate: "75%",
-                  graduatedStudents: "23",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ];
-