playbook_ui 13.20.0 → 13.21.0.pre.alpha.PBNTR224letuserresetrowexpansion2466

data/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -4,7 +4,8 @@
     class: object.classname,
     data: object.data,
     id: object.id,
-    value: object.value) do %>
+    value: object.value,
+    **combined_html_options) do %>
 
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
     <% if object.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   aria: object.aria,
   data: object.data,
-  class: object.classnames) do %>
+  class: object.classnames,
+  **combined_html_options) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label }) %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.multi %>
     <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
     <% if object.inputs == "disabled" %>
 

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("list") do %>
     <% object.items.each do |item| %>
       <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <% if layout_option == "number" %>
     <% case object.size %>
       <% when "xs", "sm" %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -3,6 +3,13 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
+import {
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "./subcomponents";
 
 type TableProps = {
     aria?: { [key: string]: string },
@@ -105,4 +112,10 @@ const Table = (props: TableProps) => {
     )
 }
 
+Table.Head = TableHead
+Table.Header = TableHeader
+Table.Body = TableBody
+Table.Row = TableRow
+Table.Cell = TableCell
+
 export default Table

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import Table from '../_table'
-import TableRow from '../_table_row'
 
 const TableSideHighlight = (props) => {
   return (
@@ -20,7 +19,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="product_1_highlight"
               {...props}
           >
@@ -29,8 +28,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="product_2_highlight"
               {...props}
           >
@@ -39,8 +38,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="product_3_highlight"
               {...props}
           >
@@ -49,8 +48,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -59,7 +58,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
 
@@ -79,7 +78,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="success"
               {...props}
           >
@@ -88,8 +87,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="warning"
               {...props}
           >
@@ -98,8 +97,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="error"
               {...props}
           >
@@ -108,8 +107,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -118,7 +117,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
 
@@ -138,7 +137,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="category_1"
               {...props}
           >
@@ -147,8 +146,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="category_2"
               {...props}
           >
@@ -157,8 +156,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="category_3"
               {...props}
           >
@@ -167,8 +166,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -177,7 +176,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
     </div>

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import Table from '../_table'
+
+const TableWithSubcomponents = (props) => {
+  return (
+    <Table
+        size="sm"
+        {...props}
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Column 1'}</Table.Header>
+          <Table.Header>{'Column 2'}</Table.Header>
+          <Table.Header>{'Column 3'}</Table.Header>
+          <Table.Header>{'Column 4'}</Table.Header>
+          <Table.Header>{'Column 5'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>{'Value 1'}</Table.Cell>
+          <Table.Cell>{'Value 2'}</Table.Cell>
+          <Table.Cell>{'Value 3'}</Table.Cell>
+          <Table.Cell>{'Value 4'}</Table.Cell>
+          <Table.Cell>{'Value 5'}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithSubcomponents

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md

@@ -0,0 +1,7 @@
+You can optionally build your table using our sub-components, which map to their respective html table elements:
+
+`Table.Head` = `thead`
+`Table.Body` = `tbody`
+`Table.Row` = `tr`
+`Table.Header` = `th`
+`Table.Cell` = `td`

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
+    <%= pb_rails("table/table_head", props: {tag:"div"}) do %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>       
+         <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body", props: {tag:"div"}) do %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import Table from '../_table'
+
+const TableWithSubcomponentsAsDivs = (props) => {
+  return (
+    <Table
+        size="sm"
+        tag="div"
+        {...props}
+    >
+      <Table.Head tag="div">
+        <Table.Row tag="div">
+          <Table.Header tag="div">{'Column 1'}</Table.Header>
+          <Table.Header tag="div">{'Column 2'}</Table.Header>
+          <Table.Header tag="div">{'Column 3'}</Table.Header>
+          <Table.Header tag="div">{'Column 4'}</Table.Header>
+          <Table.Header tag="div">{'Column 5'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body tag="div">
+        <Table.Row tag="div">
+          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row tag="div">
+          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithSubcomponentsAsDivs

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md

@@ -0,0 +1,3 @@
+Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components. 
+
+*NOTE: The `tag` prop defaults to `table`, which returns html elements.  If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use `div` as their `tag` in order for the table to render properly.

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+    <%= pb_rails("table/table_head") do %>
+        <%= pb_rails("table/table_row") do %>
+            <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
+         <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body") do %>
+        <%= pb_rails("table/table_row") do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+        <% end %>
+        <%= pb_rails("table/table_row") do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+        <% end %>
+        <%= pb_rails("table/table_row") do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md

@@ -0,0 +1,7 @@
+You can optionally build your table using our sub-components, which map to their respective html table elements:
+
+`table_head` = `thead`
+`table_body` = `tbody`
+`table_row` = `tr`
+`table_header` = `th`
+`table_cell` = `td`

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

@@ -1,6 +1,5 @@
 examples:
   rails:
-    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -25,9 +24,11 @@ examples:
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
     - table_striped: Striped Table
+    - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
+    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
+
 
   react:
-    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -51,3 +52,6 @@ examples:
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
     - table_striped: Striped Table
+    - table_with_subcomponents: Table with Sub Components (Table Elements)
+    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
+

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

@@ -22,3 +22,5 @@ export { default as TableWithBackgroundKit } from './_table_with_background_kit.
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
 export { default as TableDiv } from './_table_div.jsx'
+export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
+export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'

data/app/pb_kits/playbook/pb_table/styles/_striped.scss

@@ -1,7 +1,7 @@
 [class^=pb_table] {
   &.striped {
     tbody, .pb_table_tbody {
-      tr:nth-child(odd), .tr:nth-child(odd) {
+      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd), .tr:nth-child(odd) {
+        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

data/app/pb_kits/playbook/pb_table/styles/_structure.scss

@@ -48,7 +48,8 @@
         }
       }
       &.data_table {
-        thead tr th {
+        thead tr th,
+        .pb_table_thead .pb_table_tr .pb_table_th {
           padding-top: $cell-pad-sm;
           padding-bottom: $cell-pad-sm;
           &:first-child {
@@ -58,7 +59,8 @@
             padding-right: $cell-pad-sm;
           }
         }
-        tbody tr td {
+        tbody tr td,
+        .pb_table_tbody .pb_table_tr .pb_table_td  {
           padding-top: $cell-pad-sm;
           padding-bottom: $cell-pad-sm;
           &:first-child {

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildHtmlProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+
+type TableBodyPropTypes = {
+  aria?: { [key: string]: string };
+  children: React.ReactNode[] | React.ReactNode;
+  className: string;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  tag?: "table" | "div";
+};
+
+const TableBody = (props: TableBodyPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    tag = "table",
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames("pb_table_tbody", globalProps(props), className);
+  const isTableTag = tag === "table";
+
+  return (
+    <>
+      {isTableTag ? (
+        <tbody
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {children}
+        </tbody>
+      ) : (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default TableBody;