playbook_ui 13.16.0 → 13.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ead10fd559bd856f7f8ab99fae8f09f709917597051f693a1328d3b5c0801da7
-  data.tar.gz: d65933a64cf81ddc8d39a7be40bf3e65c5aa98a0d74ecf2e528ca1edb07f1851
+  metadata.gz: f629448a4cd0208c365ff8cd0c7c18a3fb911bdc118497843b76279f9309b7c9
+  data.tar.gz: 466dd0df9bd42b611106524156fc473ad518fbe78ae1bb586a3e8715317586f3
 SHA512:
-  metadata.gz: 38f2bb66b95bac19fa9f5fa3a786df73f4eb7b738f50d561220476e72904761d7ba68c7ba785086b66796e6f80709f9dd693fed7c136da0d369f299ca7d0bc6d
-  data.tar.gz: f8b2432816f7b229d96b6bf53f6507569dc54b6fcf8f40246f0a34799beff3dedaf7d92ecee7f88d2f4bac71580f9a78edac3a28365c38b91fd7eab4a33d0c88
+  metadata.gz: 5f1d56aa0e2398edd4c6f97ea258e7d2f4d71f11b18a5410c82a9a142c4a3324ec0dd71dca84c7554dc0a7aee273e6e56c936c80351a241ce49157ef76806e36
+  data.tar.gz: 216199bebe300338129cda84ff8c4d0765231c1aecfa2bbfec3f008012ee39e019aac578b88926d06f5e7823d593f177ba699b4ae43091a6648cf1b77c4d24b0

data/app/pb_kits/playbook/_playbook.scss

@@ -1,16 +1,17 @@
+
+
+@import 'pb_advanced_table/advanced_table';
+@import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
+@import 'pb_badge/badge';
+@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';
 @import 'pb_card/card';
-@import 'pb_detail/detail';
-@import 'pb_title/title';
-@import 'pb_avatar/avatar';
-@import 'pb_avatar_action_button/avatar_action_button';
-@import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
@@ -20,21 +21,22 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_picker/date_picker';
-@import 'pb_date_time/date_time';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
+@import 'pb_date_time/date_time';
 @import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
+@import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
+@import 'pb_flex/flex';
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_flex/flex';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
@@ -55,6 +57,7 @@
 @import 'pb_map/map';
 @import 'pb_map/pb_map_button_mixin';
 @import 'pb_message/message';
+@import 'pb_multi_level_select/multi_level_select';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
@@ -85,9 +88,11 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
-@import 'pb_timeline/timeline';
 @import 'pb_time_range_inline/time_range_inline';
+@import 'pb_time_stacked/time_stacked';
+@import 'pb_timeline/timeline';
 @import 'pb_timestamp/timestamp';
+@import 'pb_title/title';
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
@@ -96,7 +101,6 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_time_stacked/time_stacked';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/mixins';
@@ -115,5 +119,3 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
-
-@import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/_reset.scss

@@ -1,5 +1,5 @@
-@import "./tokens/typography";
-@import "./tokens/colors";
+@import "tokens/typography";
+@import "tokens/colors";
 
 * {
   box-sizing: border-box;

data/app/pb_kits/playbook/index.js

@@ -4,6 +4,7 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
+export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -59,8 +60,8 @@ export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
-export { default as Map} from './pb_map/_map'
 export { default as MapCustomButton } from './pb_map/_map_custom_button'
+export { default as Map} from './pb_map/_map'
 export { default as Message } from './pb_message/_message'
 export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'

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

@@ -0,0 +1,30 @@
+import React from "react"
+
+//CollapsibleTrail component
+const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
+  const style: { [key: string]: string | number } = {
+    position: "absolute",
+    left: `${leftOffset}em`,
+    top: 0,
+    bottom: 0,
+    width: "2px",
+    backgroundColor: "#E4E8F0",
+  }
+
+  return <div style={style} />
+}
+
+// Updated function to render multiple trails depending on depth
+export const renderCollapsibleTrail = (currentDepth: number) => {
+  const lines = []
+  for (let i = 1; i <= currentDepth; i++) {
+    // Calculate leftOffset with additional 0.4rem for each depth level above 1
+    const additionalOffset = i > 1 ? (i - 1) * 0.25 : 0
+    const leftOffset = i * 1.0 + additionalOffset
+    lines.push(<CollapsibleTrail key={i} 
+        leftOffset={leftOffset} 
+               />
+              )
+  }
+  return lines
+}

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

@@ -0,0 +1,62 @@
+import React, { useContext } from "react";
+
+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 { Getter, Row } from "@tanstack/react-table";
+import { DataType } from "../Utilities/types";
+import AdvancedTableContext from "../Context/AdvancedTableContext";
+
+interface CustomCellProps {
+  getValue?: Getter<string>;
+  onRowToggleClick?: (arg: Row<DataType>) => void;
+  row: Row<DataType>;
+  value?: string;
+} 
+
+export const CustomCell = ({
+  getValue,
+  onRowToggleClick,
+  row,
+  value,
+}: CustomCellProps & GlobalProps) => {
+  const { setExpanded, expanded } = useContext(AdvancedTableContext);
+  const RowWithoutChildren = row.originalSubRows === undefined;
+
+  const handleOnExpand = (row: Row<DataType>) => {
+    onRowToggleClick && onRowToggleClick(row);
+    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+  };
+
+  return (
+    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
+      <Flex alignItems="center" 
+          columnGap="xs"
+          orientation="row"
+      >
+        {!RowWithoutChildren ? (
+          <button
+              className="gray-icon expand-toggle-icon"
+              onClick={() => handleOnExpand(row)}
+          >
+            {row.getIsExpanded() ? (
+              <Icon cursor="pointer"
+                  icon="circle-play"
+                  rotation={90}
+              />
+            ) : (
+              <Icon cursor="pointer"
+                  icon="circle-play"    
+               />
+            )}
+          </button>
+        ) : null}
+        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
+          {row.depth === 0 ? getValue() : value}
+        </FlexItem>
+      </Flex>
+    </div>
+  );
+};

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

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const LoadingCell = () => {
+  return <div className="loading-cell" />
+}

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

@@ -0,0 +1,30 @@
+import React from "react"
+import Icon from "../../pb_icon/_icon"
+import { Header } from "@tanstack/react-table"
+import { DataType } from "../Utilities/types"
+import { displayIcon } from "../Utilities/IconHelpers"
+
+type SortIconButtonProps = {
+  header: Header<DataType, unknown>
+  sortIcon?: string | string[]
+}
+export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
+
+  return (
+    <>
+      {header.column.getIsSorted() === "desc" ? (
+        <div className="sort-button-icon" 
+            key={displayIcon(sortIcon)[0]}
+        >
+          <Icon icon={displayIcon(sortIcon)[0]} />
+        </div>
+      ) : (
+        <div className="sort-button-icon" 
+            key={displayIcon(sortIcon)[1]}
+        >
+          <Icon icon={displayIcon(sortIcon)[1]} />
+        </div>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,61 @@
+import React from "react"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import { Row, Table } from "@tanstack/react-table"
+
+import { ToggleIconButton } from "./ToggleIconButton"
+import { renderCollapsibleTrail } from "./CollapsibleTrail"
+
+import { isChrome } from "../Utilities/BrowserCheck"
+import { DataType } from "../Utilities/types"
+import { GlobalProps } from "../../utilities/globalProps"
+
+interface SubRowHeaderRowProps {
+  collapsibleTrail?: boolean
+  enableToggleExpansion?: "all" | "header"
+  onClick: (row: Row<DataType>) => void
+  row: Row<DataType>
+  subRowHeaders?: string[]
+  table: Table<DataType>
+}
+
+export const SubRowHeaderRow = ({
+  collapsibleTrail,
+  enableToggleExpansion,
+  onClick,
+  row,
+  subRowHeaders,
+  table,
+}: SubRowHeaderRowProps & GlobalProps) => {
+  const numberOfColumns = table.getAllFlatColumns().length
+
+  return (
+    <tr className="custom-row bg-silver">
+      <td
+          className={`custom-row-first-column ${
+          isChrome() ? "chrome-styles" : ""
+          }`}
+          colSpan={1}
+      >
+        {collapsibleTrail && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+        <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
+          <Flex align="center" 
+              columnGap="xs"
+          >
+            {enableToggleExpansion === "all" && row.getCanExpand() ? (
+              <ToggleIconButton onClick={onClick} 
+                  row={row}
+              />
+            ) : null}
+            <Caption
+                marginLeft={row.getCanExpand() ? "none" : "xs"}
+                text={subRowHeaders[row.depth - 1]}
+            />
+          </Flex>
+        </div>
+      </td>
+
+      <td colSpan={numberOfColumns - 1} />
+    </tr>
+  )
+}

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

@@ -0,0 +1,127 @@
+import React, { useContext } from "react"
+import classnames from "classnames";
+import Flex from "../../pb_flex/_flex"
+import { flexRender, Header } from "@tanstack/react-table"
+
+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"
+  handleExpandOrCollapse?: () => void
+  header?: Header<DataType, unknown>
+  headerChildren?: React.ReactNode | React.ReactNode[]
+  headerId?: string
+  loading?: boolean
+  sortIcon?: string | string[]
+} & GlobalProps
+
+export const TableHeaderCell = ({
+  enableSorting,
+  enableToggleExpansion,
+  handleExpandOrCollapse,
+  header,
+  headerChildren,
+  headerId,
+  loading,
+  sortIcon,
+}: TableHeaderCellProps) => {
+  const { sortControl } = useContext(AdvancedTableContext)
+
+  const toggleSortButton = (event: React.SyntheticEvent) => {
+    if (sortControl) {
+      const sortIsDesc = header.column.getIsSorted() === "desc"
+      sortIsDesc
+        ? sortControl.onChange({ desc: true })
+        : sortControl.onChange({ desc: false })
+    } else {
+      header.column.getToggleSortingHandler()(event)
+    }
+  }
+
+const cellClassName = classnames("table-header-cells", 
+  `${isChrome() ? "chrome-styles" : ""}`, 
+  `${enableSorting ? "table-header-cells-active" : ""}`
+);
+
+const cellId = `${loading ? 
+    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
+    : `${header.id}${headerId ? `-${headerId}` : ""}`
+}`;
+
+  return (
+    <th
+        align="right"
+        className={cellClassName}
+        id={cellId}
+        key={`${header.id}-header`}
+    >
+      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
+        <Flex alignItems="center">
+          {headerChildren}
+          <div>
+            {flexRender(header.column.columnDef.header, header.getContext())}
+          </div>
+        </Flex>
+      ) : (
+        <Flex
+            alignItems="center"
+            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
+        >
+          {header.index === 0 &&
+            !loading &&
+            (enableToggleExpansion === "all" || "header") && (
+              <ToggleIconButton onClick={handleExpandOrCollapse} />
+            )}
+
+          {header.index === 0 &&
+            loading &&
+            (enableToggleExpansion === "all" || "header") && (
+              <div className="loading-toggle-icon header-toggle-icon" />
+            )}
+
+          <Flex
+              className={`${header.index === 0 &&
+                enableSorting &&
+                "header-sort-button pb_th_link"}`}
+              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header.index === 0 &&
+                enableSorting && {
+                  htmlOptions: {
+                    onClick: (event: React.MouseEvent) => toggleSortButton(event),
+                    onKeyDown: (event: React.KeyboardEvent) => {
+                      if (event.key === "Enter") {
+                        toggleSortButton(event)
+                      }
+                    },
+                    tabIndex: 0,
+                  },
+                })}
+              justify={header.index === 0 && enableSorting ? "between" : "none"}
+              paddingLeft={enableSorting ? "xxs" : "xs"}
+          >
+            <div>
+              {flexRender(header.column.columnDef.header, header.getContext())}
+            </div>
+
+            {header.index === 0 &&
+              header.column.getCanSort() &&
+              enableSorting &&
+              (loading ? (
+                <div className="loading-toggle-icon" />
+              ) : (
+                <SortIconButton header={header} 
+                    sortIcon={sortIcon} 
+                />
+              ))}
+          </Flex>
+        </Flex>
+      )}
+    </th>
+  )
+}

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

@@ -0,0 +1,28 @@
+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 { displayIcon } from "../Utilities/IconHelpers"
+
+interface ToggleIconButtonProps {
+  onClick: (row: Row<DataType>) => void
+  row?: Row<DataType>
+}
+
+export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
+  const { toggleExpansionIcon } = useContext(AdvancedTableContext)
+  return (
+    <button
+        className="gray-icon toggle-all-icon"
+        key={displayIcon(toggleExpansionIcon)[0]}
+        onClick={() => onClick(row)}
+    >
+      <Icon
+          cursor="pointer"
+          fixedWidth
+          icon={displayIcon(toggleExpansionIcon)[0]}
+      />
+    </button>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react"
+
+const AdvancedTableContext = createContext<any>({})
+
+export default AdvancedTableContext