playbook_ui 13.20.0 → 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89bd4e938528cafc5784b31a33e8164edd9b132e4f63f2ebbf2ba1160b07738f
-  data.tar.gz: b87c8966e25b1b0b6fc2a01b84ae7164436a4f2be860f49c7414f667d1c5d40f
+  metadata.gz: f7cfb7021f51c07eb77a7166393965f50d634939c88a3d7b2a72890fc8f76aea
+  data.tar.gz: 4e0fd0437700056b9fcd95076dd5f700e89b616cf83f97ef9f96ae50c205352f
 SHA512:
-  metadata.gz: 7991e682deaf82d106bb0e2a29bb029a6299eba736a0c3e85de50366efa998db4f30026c9fcfc3cf4f7c2ac95f2fddaa38a90add59379d7c7b0890e070e8850a
-  data.tar.gz: 6f649c427896f5010b9721ffd3a0e0c9f282f6eb6c65c666cdbd2487aab6132175a7660b7e48bc89cbe1133736ac4a79d9911f053bb481193096f6032220e6c9
+  metadata.gz: '09e5b5458d55ae87b2f8ccd44d3f8dc9a95391b8e8ae5493fa5f05408acfe0bd5f2db7c84343fa450bbc05299a597fc8bf6ca48d9976eeac0b1720d353b0cba7'
+  data.tar.gz: e360ce6a4f2074667af1b2e8a9067fd28e8e7a6f30136d04a69c7f7e3f1dcda3835d4cf4663be4e816dd89909698b4c9b0ac8991ff779b3666e845239dd5afa8

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/_table_row'
+export { default as TableRow } from './pb_table/subcomponents/_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/Components/CollapsibleTrail.tsx

@@ -11,7 +11,12 @@ const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
     backgroundColor: "#E4E8F0",
   }
 
-  return <div style={style} />
+  return (
+    <div 
+        className="collapsible-trail" 
+        style={style} 
+    />
+  )
 }
 
 // Updated function to render multiple trails depending on depth

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

@@ -1,19 +1,21 @@
-import React, { useContext } from "react";
+import React, { useContext } from "react"
+import { Getter, Row } from "@tanstack/react-table"
 
-import Flex from "../../pb_flex/_flex";
-import FlexItem from "../../pb_flex/_flex_item";
-import Icon from "../../pb_icon/_icon";
-import { GlobalProps } from "../../utilities/globalProps";
+import { GenericObject } from "../../types"
 
-import { Getter, Row } from "@tanstack/react-table";
-import { DataType } from "../Utilities/types";
-import AdvancedTableContext from "../Context/AdvancedTableContext";
+import { GlobalProps } from "../../utilities/globalProps"
+
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Icon from "../../pb_icon/_icon"
+
+import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 interface CustomCellProps {
-  getValue?: Getter<string>;
-  onRowToggleClick?: (arg: Row<DataType>) => void;
-  row: Row<DataType>;
-  value?: string;
+  getValue?: Getter<string>
+  onRowToggleClick?: (arg: Row<GenericObject>) => void
+  row: Row<GenericObject>
+  value?: string
 } 
 
 export const CustomCell = ({
@@ -22,12 +24,12 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
 
-  const handleOnExpand = (row: Row<DataType>) => {
-    onRowToggleClick && onRowToggleClick(row);
-    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
-  };
+  const handleOnExpand = (row: Row<GenericObject>) => {
+    onRowToggleClick && onRowToggleClick(row)
+    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
+  }
   const RowHasChildren = row.original.children ? true : false
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
@@ -59,5 +61,5 @@ export const CustomCell = ({
         </FlexItem>
       </Flex>
     </div>
-  );
-};
+  )
+}

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

@@ -1,11 +1,14 @@
 import React from "react"
-import Icon from "../../pb_icon/_icon"
 import { Header } from "@tanstack/react-table"
-import { DataType } from "../Utilities/types"
+
+import { GenericObject } from "../../types"
+
+import Icon from "../../pb_icon/_icon"
+
 import { displayIcon } from "../Utilities/IconHelpers"
 
 type SortIconButtonProps = {
-  header: Header<DataType, unknown>
+  header: Header<GenericObject, unknown>
   sortIcon?: string | string[]
 }
 export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {

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

@@ -1,23 +1,27 @@
 import React, { useContext } from "react"
+import { Row, Table } from "@tanstack/react-table"
+
+import { GenericObject } from "../../types"
+
+import { GlobalProps } from "../../utilities/globalProps"
+
 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"
 
 import { isChrome } from "../Utilities/BrowserCheck"
-import { DataType } from "../Utilities/types"
-import { GlobalProps } from "../../utilities/globalProps"
+
+import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 interface SubRowHeaderRowProps {
   collapsibleTrail?: boolean
   enableToggleExpansion?: "all" | "header" | "none"
-  onClick: (row: Row<DataType>) => void
-  row: Row<DataType>
+  onClick: (row: Row<GenericObject>) => void
+  row: Row<GenericObject>
   subRowHeaders?: string[]
-  table: Table<DataType>
+  table: Table<GenericObject>
 }
 
 export const SubRowHeaderRow = ({
@@ -28,7 +32,7 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading } = useContext(AdvancedTableContext);
+  const { inlineRowLoading } = useContext(AdvancedTableContext)
 
   const numberOfColumns = table.getAllFlatColumns().length
   const rowHasChildren = row.original.children ? true : false

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

@@ -1,20 +1,25 @@
 import React, { useContext } from "react"
-import classnames from "classnames";
-import Flex from "../../pb_flex/_flex"
+import classnames from "classnames"
 import { flexRender, Header } from "@tanstack/react-table"
 
+import { GenericObject } from "../../types"
+
+import { GlobalProps } from "../../utilities/globalProps"
+
+import Flex from "../../pb_flex/_flex"
+
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
+
 import { isChrome } from "../Utilities/BrowserCheck"
-import { DataType } from "../Utilities/types"
+
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { GlobalProps } from "../../utilities/globalProps"
 
 type TableHeaderCellProps = {
   enableSorting?: boolean
   enableToggleExpansion?: "all" | "header" | "none"
   handleExpandOrCollapse?: () => void
-  header?: Header<DataType, unknown>
+  header?: Header<GenericObject, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
   loading?: boolean
   sortIcon?: string | string[]
@@ -45,24 +50,24 @@ export const TableHeaderCell = ({
 const cellClassName = classnames("table-header-cells", 
   `${isChrome() ? "chrome-styles" : ""}`, 
   `${enableSorting ? "table-header-cells-active" : ""}`
-);
+)
 
 const cellId = `${loading ? 
     `loading-${header.id}`
     : `${header.id}`
-}`;
+}`
 
 const isToggleExpansionEnabledLoading =
   header.index === 0 &&
   loading &&
   (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none";
+  enableToggleExpansion !== "none"
   
 const isToggleExpansionEnabled =
   header.index === 0 &&
   !loading &&
   (enableToggleExpansion === "all" || "header") &&
-  enableToggleExpansion !== "none";
+  enableToggleExpansion !== "none"
 
   return (
     <th

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

@@ -1,13 +1,17 @@
 import React, { useContext } from "react"
-import Icon from "../../pb_icon/_icon"
 import { Row } from "@tanstack/react-table"
-import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { DataType } from "../Utilities/types"
+
+import { GenericObject } from "../../types"
+
+import Icon from "../../pb_icon/_icon"
+
 import { displayIcon } from "../Utilities/IconHelpers"
 
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+
 interface ToggleIconButtonProps {
-  onClick: (row: Row<DataType>) => void
-  row?: Row<DataType>
+  onClick: (row: Row<GenericObject>) => void
+  row?: Row<GenericObject>
 }
 
 export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {

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

@@ -1,27 +1,33 @@
 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 classnames from "classnames"
 import { flexRender, Row } from "@tanstack/react-table"
 
+import { GenericObject } from "../../types"
+
+import { buildCss } from "../../utilities/props"
+import { globalProps } from "../../utilities/globalProps"
+import { isChrome } from "../Utilities/BrowserCheck"
+
+import LoadingInline from "../../pb_loading_inline/_loading_inline"
+
 import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
 import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
+
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { isChrome } from "../Utilities/BrowserCheck"
-import { DataType } from "../Utilities/types"
 
 type TableBodyProps = {
-  className?: string;
+  className?: string
   collapsibleTrail?: boolean
-  id?: string;
+  dark?: boolean
+  id?: string
   subRowHeaders?: string[]
 }
 
 export const TableBody = ({
   className,
   collapsibleTrail = true,
+  dark = false,
   id,
   subRowHeaders,
   ...props
@@ -40,14 +46,14 @@ export const TableBody = ({
     buildCss("pb_advanced_table_body"),
     globalProps(props),
     className
-  );
+  )
 
   return (
     <>
       <tbody className={classes} 
           id={id}
       >
-        {table.getRowModel().rows.map((row: Row<DataType>) => {
+        {table.getRowModel().rows.map((row: Row<GenericObject>) => {
           const isExpandable = row.getIsExpanded()
           const isFirstChildofSubrow = row.depth > 0 && row.index === 0
           const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false

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

@@ -1,23 +1,29 @@
 import React, { useContext } from "react"
-import classnames from "classnames";
-import { buildCss } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
+import classnames from "classnames"
 import { HeaderGroup } from "@tanstack/react-table"
-import AdvancedTableContext from "../Context/AdvancedTableContext"
+
+import { GenericObject } from "../../types"
+
+import { buildCss } from "../../utilities/props"
+import { globalProps } from "../../utilities/globalProps"
+
 import { TableHeaderCell } from "../Components/TableHeaderCell"
-import { DataType } from "../Utilities/types"
+
+import AdvancedTableContext from "../Context/AdvancedTableContext"
 
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
   className?: string
+  dark?: boolean,
   enableSorting?: boolean
-  id?: string;
+  id?: string
   sortIcon?: string | string[]
 }
 
 export const TableHeader = ({
   children,
   className,
+  dark = false,
   enableSorting = false,
   id,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
@@ -34,7 +40,7 @@ export const TableHeader = ({
     buildCss("pb_advanced_table_header"),
     globalProps(props),
     className
-  );
+  )
 
 
   return (
@@ -43,7 +49,7 @@ export const TableHeader = ({
           id={id}
       >
         {/* Get the header groups (only one in this example) */}
-        {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
             {headerGroup.headers.map(header => (
               <TableHeaderCell

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

@@ -1,5 +1,6 @@
 import { RowModel } from "@tanstack/react-table"
-import { DataType, ExpandedStateObject } from "./types"
+import { ExpandedStateObject } from "./types"
+import { GenericObject } from "../../types"
 
 const filterExpandableRows = (expandedState: Record<string, boolean>) => {
   for (const expandedRow in expandedState) {
@@ -11,7 +12,7 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
 }
 
 export const updateExpandAndCollapseState = (
-  tableRows: RowModel<DataType>,
+  tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
   targetParent: string
 ) => {

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

@@ -4,5 +4,3 @@ export type ExpandedStateObject = Extract<
   ExpandedState,
   Record<string, boolean>
 >
-
-export type DataType = { [key: string]: any }

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

@@ -4,6 +4,7 @@
 @import "../tokens/spacing";
 @import "./scss_partials/loading";
 @import "./scss_partials/pseudo_states";
+@import "./scss_partials/chrome_styles";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light !important;
@@ -86,13 +87,50 @@
     box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
   }
 
-  .chrome-styles:first-child {
-    border-right: $border-color;
-  }
+  @include chrome_styles($border-color);
+
+  &.dark {
+    .bg-white {
+      background: $bg_dark_card;
+    }
+
+    .bg-silver {
+      background: $bg_dark;
+    }
+
+    .table-header-cells:first-child, td:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    }
+
+    .collapsible-trail {
+      background-color: $border_dark !important;
+    }
+
+    .sort-button-icon, .header-sort-button > div {
+      color: $white !important;
+    }
+
+    .gray-icon {
+      color:  $text_dk_light !important;
+    }
+
+    .sticky-header {
+      background-color: $bg_dark_card;
+    }
 
-  .table-card {
-    .chrome-styles:first-child {
-      border-right: $transparent !important;
+    .loading-toggle-icon,
+    .loading-cell {
+      &::after {
+        background-color: $bg_dark !important;
+        background-image: linear-gradient(
+          to left,
+          $bg_dark 0%,
+          lighten($bg_dark, 1%) 50%,
+          lighten($bg_dark, 2%) 60%,
+          $bg_dark 80%,
+          $bg_dark 100%
+        ) !important;
+      }
     }
   }
 }