playbook_ui 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318 → 13.19.0.pre.alpha.play1141iconkitusinglibrary2264

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a2a8401ba8a89fbd4477ebe4c6b623775ac8d8549ccc3ed7cdb8b45be2e3378
-  data.tar.gz: fec2e78f34f867ffbc5a821d9fbdd87d6babdf9b6f2fcbbaac7bcfdcf60dcbc8
+  metadata.gz: dc85d46bc740674b47dbae257e9c81833befa30e371132c6b8c666e5b9085d10
+  data.tar.gz: e5f9fddaf77380e589222c5a5a5b7d4f6113a3b972daf02d8b5a5a2428056111
 SHA512:
-  metadata.gz: 62ede5709d8065b9bc8940baea20b1445fbcf757f7f536e668b444958243a78b35a56a7c1631776c903ab5af597ceb8277078fa76388ed72b54ceae678c99efd
-  data.tar.gz: 24fb2f1a7d742933a49e6b4a2582b2bcf967cc7665919b8960eef63caed35c40d22b1b4e046d4b2d792df5433ce27587ab7c86938fb147c3952e5b0479dff003
+  metadata.gz: 873f1d7fd3362e9e8825e9565864de562f7df6a3867f872f34e937ad494595ff9741534192c545f28673e0ce2f6790483eb4a059fc733393dfe1342663f95a59
+  data.tar.gz: 0b5450fc7b8d3311f2d1ae1d6f1923d3aaee4c4c5267daab6080e535fa88dec66695131ea87e28f95f8ee20cfd7bd6e8891e4c902b96421dfbd4a6de30d6f113

data/app/pb_kits/playbook/index.js

@@ -93,7 +93,7 @@ export { default as StarRating } from './pb_star_rating/_star_rating'
 export { default as StatChange } from './pb_stat_change/_stat_change'
 export { default as StatValue } from './pb_stat_value/_stat_value'
 export { default as Table } from './pb_table/_table'
-export { default as TableRow } from './pb_table/SubKits/_table_row'
+export { default as TableRow } from './pb_table/_table_row'
 export { default as TextInput } from './pb_text_input/_text_input'
 export { default as Textarea } from './pb_textarea/_textarea'
 export { default as Time } from './pb_time/_time'

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

@@ -20,7 +20,7 @@ import AdvancedTableContext from "./Context/AdvancedTableContext";
 import { TableHeader } from "./SubKits/TableHeader";
 import { TableBody } from "./SubKits/TableBody";
 
-import { DataType } from "./Utilities/types";
+import { DataType, ExpandedStateObject } from "./Utilities/types";
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string };
@@ -80,7 +80,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     ? expandedControl.onChange
     : setLocalExpanded;
 
-  const columnHelper = createColumnHelper();
+  const columnHelper = createColumnHelper<DataType>();
 
   //Create cells for first columns
   const createCellFunction = (cellAccessors: string[]) => {
@@ -163,7 +163,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
     columns,
     onExpandedChange: setExpanded,
-    getSubRows: (row: DataType) => row.children,
+    getSubRows: (row) => row.children,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -192,7 +192,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const handleExpandOrCollapse = (row: Row<DataType>) => {
     onToggleExpansionClick && onToggleExpansionClick(row);
 
-    const expandedState = expanded;
+    const expandedState = expanded as ExpandedStateObject;
     const targetParent = row?.parentId;
     return setExpanded(
       updateExpandAndCollapseState(tableRows, expandedState, targetParent)

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

@@ -3,69 +3,69 @@ 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 "./SubKits";
 
 type TableProps = {
-    aria?: { [key: string]: string },
-    children: React.ReactNode[] | React.ReactNode,
-    className: string,
-    collapse?: "sm" | "md" | "lg",
-    container?: boolean,
-    dark?: boolean,
-    data?: { [key: string]: string },
-    dataTable: boolean,
-    disableHover?: boolean,
-    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
-    id?: string,
-    responsive?: "collapse" | "scroll" | "none",
-    singleLine?: boolean,
-    size?: "sm" | "md" | "lg",
-    sticky?: boolean,
-    striped?: boolean,
-    tag?: "table" | "div",
-    verticalBorder?: boolean,
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
+  className: string,
+  collapse?: "sm" | "md" | "lg",
+  container?: boolean,
+  dark?: boolean,
+  data?: { [key: string]: string },
+  dataTable: boolean,
+  disableHover?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  responsive?: "collapse" | "scroll" | "none",
+  singleLine?: boolean,
+  size?: "sm" | "md" | "lg",
+  sticky?: boolean,
+  striped?: boolean,
+  verticalBorder?: boolean,
 } & GlobalProps
 
 const Table = (props: TableProps) => {
-    const {
-        aria = {},
-        children,
-        className,
-        collapse = 'sm',
-        container = true,
-        dark,
-        data = {},
-        dataTable = false,
-        disableHover = false,
-        htmlOptions = {},
-        id,
-        responsive = 'collapse',
-        singleLine = false,
-        size = 'sm',
-        sticky = false,
-        striped = false,
-        tag = 'table',
-        verticalBorder = false,
-    } = props
+  const {
+    aria = {},
+    children,
+    className,
+    collapse = 'sm',
+    container = true,
+    dark,
+    data = {},
+    dataTable = false,
+    disableHover = false,
+    htmlOptions = {},
+    id,
+    responsive = 'collapse',
+    singleLine = false,
+    size = 'sm',
+    sticky = false,
+    striped = false,
+    verticalBorder = false,
+  } = props
 
-    const ariaProps = buildAriaProps(aria)
-    const dataProps = buildDataProps(data)
-    const htmlProps = buildHtmlProps(htmlOptions)
-    const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
-    const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
-    const isTableTag = tag === 'table'
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+  const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
 
-    const classNames = classnames(
-        'pb_table',
-        `table-${size}`,
-        `table-responsive-${responsive}`,
-        {
+  useEffect(() => {
+    const instance = new PbTable()
+    instance.connect()
+  }, [])
+
+  return (
+    <table
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(
+          'pb_table',
+          `table-${size}`,
+          `table-responsive-${responsive}`,
+          {
             'table-card': container,
             'table-dark': dark,
             'data_table': dataTable,
@@ -73,49 +73,17 @@ const Table = (props: TableProps) => {
             'no-hover': disableHover,
             'sticky-header': sticky,
             'striped': striped,
-        },
-        globalProps(props),
-        tableCollapseCss,
-        verticalBorderCss,
-        className
-    )
-
-    useEffect(() => {
-        const instance = new PbTable()
-        instance.connect()
-    }, [])
-
-    return (
-        <>
-            {isTableTag ? (
-                <table
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
-                </table>
-            ) : (
-                <div
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
-                </div>
-            )}
-        </>
-    )
+          },
+          globalProps(props),
+          tableCollapseCss,
+          verticalBorderCss,
+          className
+        )}
+        id={id}
+    >
+        {children}
+    </table>
+  )
 }
 
-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/_table_row.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type TableRowPropTypes = {
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
+  className: string,
+  data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  sideHighlightColor: string,
+}
+
+const TableRow = (props: TableRowPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    sideHighlightColor = 'windows',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const sideHighlightClass =
+    sideHighlightColor != '' ? `side_highlight_${sideHighlightColor}` : null
+  const classes = classnames(buildCss('pb_table_row_kit', sideHighlightClass), globalProps(props), className)
+
+  return (
+    <tr
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
+    >
+      {children}
+    </tr>
+  )
+}
+
+export default TableRow

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

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

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

@@ -1,8 +1,5 @@
 examples:
   rails:
-    - table_with_subcomponents: Table with Sub Components (Table Elements)
-    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
-    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -29,7 +26,6 @@ examples:
     - table_striped: Striped Table
 
   react:
-    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -53,6 +49,3 @@ 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

@@ -21,6 +21,3 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 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/_content.scss

@@ -2,9 +2,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    tbody, .pb_table_tbody {
-      tr, .pb_table_tr {
-        td, .pb_table_td {
+    tbody {
+      tr {
+        td {
           font-size: $default-font-size;
         }
       }

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

@@ -10,21 +10,21 @@
       width: 100%;
       background: none !important;
 
-      thead, .pb_table_thead {
-        tr, .pb_table_tr {
+      thead {
+        tr {
           left: $offscreen;
           position: absolute;
           top: $offscreen;
 
-          th, .pb_table_th {
+          th {
             display: block;
             visibility: visible;
           }
         }
       }
-      tbody, .pb_table_tbody {
-        tr, .pb_table_tr {
-          td, .pb_table_td {
+      tbody {
+        tr {
+          td {
             display: block;
             visibility: visible;
             border-left-width: 1px !important;
@@ -63,7 +63,7 @@
           }
 
           &:first-child {
-            td, .pb_table_td {
+            td {
               &:first-child {
                 margin-top: $space-xs !important;
               }
@@ -74,9 +74,9 @@
       &.table-card {
         background: none !important;
 
-        tbody, .pb_table_tbody {
-          tr, .pb_table_tr {
-            td, .pb_table_td {
+        tbody {
+          tr {
+            td {
               background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
@@ -98,8 +98,8 @@
       }
       @media (hover:hover) {
         &:hover {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
+          tbody {
+            tr {
               box-shadow: 0 0 0 $white !important;
             }
           }
@@ -108,9 +108,9 @@
       // reset the first and last to normalize
       @each $name, $value in $cell-pad-list {
         &.#{$name} {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
+          tbody {
+            tr {
+              td {
                 &:first-child,
                 &:last-child {
                   padding: $value $cell-gutter !important;

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

@@ -4,9 +4,9 @@
   &.table-sm,
   &.table-md,
   &.table-lg {
-    thead, .pb_table_thead {
-      tr, .pb_table_tr {
-        th, .pb_table_th {
+    thead {
+      tr {
+        th {
           @include caption;
           border-bottom: 1px solid $border_light;
         }

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

@@ -9,17 +9,17 @@ $border_hover_color_dark: lighten($border_dark, 5%);
   &.table-lg {
     &:not(.no-hover) {
       border-collapse: collapse;
-      tbody, .pb_table_tbody {
-        tr, .pb_table_tr {
+      tbody {
+        tr {
           box-shadow: 0 0 0 $white;
           transition: box-shadow $transition-speed ease;
-          td, .pb_table_td {
+          td {
             border-top-color: transparent;
             border-top-width: 0;
             transition: all $transition-speed ease;
           }
           @media (hover:hover) {
-            td, .pb_table_td {
+            td {
               position: relative;
               &:after {
                 transition: background-color $transition-speed ease, height $transition-speed ease;
@@ -41,7 +41,7 @@ $border_hover_color_dark: lighten($border_dark, 5%);
             }
             &:hover {
               box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
-              td, .pb_table_td {
+              td {
                 border-color: darken($border_light, 10%);
                 border-top-width: 0;
                 border-top-color: transparent;
@@ -57,9 +57,9 @@ $border_hover_color_dark: lighten($border_dark, 5%);
       }
       &.table-card {
         border-collapse: separate;
-        tbody, .pb_table_tbody {
-          tr, .pb_table_tr {
-            td, .pb_table_td {
+        tbody {
+          tr {
+            td {
               &:first-child {
                 border-left-width: 1px;
               }
@@ -72,12 +72,12 @@ $border_hover_color_dark: lighten($border_dark, 5%);
       }
 
       &.dark  {
-        tbody, .pb_table_tbody {
-          tr, .pb_table_tr {
+        tbody {
+          tr {
             @media (hover:hover) {
               &:hover {
                 box-shadow: 0 2px 10px 0 $shadow_dark;
-                td, .pb_table_td {
+                td {
                   border-top-width: 0;
                   border-top-color: transparent;
                   border-color: $border_hover_color_dark !important;