[PBNTR-224] Letting user reset row expansion in Advanced Table

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

@@ -24,12 +24,16 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
+  const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
-    onRowToggleClick && onRowToggleClick(row)
-    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
-  }
+    onRowToggleClick && onRowToggleClick(row);
+
+    if (!expandedControl) {
+      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+    }
+  };
+
   const RowHasChildren = row.original.children ? true : false
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 

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

@@ -226,6 +226,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions,
             enableToggleExpansion,
             expanded,
+            expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
             loading,

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx

@@ -44,11 +44,16 @@ const AdvancedTableExpandedControl = (props) => {
     onChange: setExpanded,
   }
 
+  const onRowToggleClick = (row) => {
+    setExpanded({ ...expanded, [row.id]: !expanded[row.id] })
+  }
+
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           expandedControl={expandedControl}
+          onRowToggleClick={onRowToggleClick}
           tableData={MOCK_DATA}
           {...props}
       />

playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md

@@ -1,3 +1,5 @@
+**NOTE**: If using `expandedControl` the dev is expected to manage the row level expansion state themselves, the kit itself will NOT do it by default.
+
 `expandedControl` is an optional prop that can be used to gain greater control over the expansion state of the Advanced Table. Tanstack handles expansion itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the expansion state so it persists on page reload, set an initial expansion state, etc. 
 
 In this example we are showing that if initial expansion state is set, it will render the table expanded according to that state. 

playbook/lib/playbook/kit_base.rb

@@ -88,7 +88,7 @@ def data_attributes
       {
         data: data,
         aria: aria,
-      }.transform_keys { |key| key.to_s.gsub("_", "-") }
+      }.transform_keys { |key| key.to_s.tr("_", "-") }
     end
   end
 end