playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY20787400

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState, useCallback } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
@@ -19,6 +19,15 @@ import TableActionBar from "./Components/TableActionBar";
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
 
+import Card from "../pb_card/_card"
+import Flex from "../pb_flex/_flex"
+import Icon from "../pb_icon/_icon"
+
+type FullscreenControls = {
+  toggleFullscreen: () => void;
+  isFullscreen: boolean;
+};
+
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
@@ -29,6 +38,8 @@ type AdvancedTableProps = {
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
   expandedControl?: GenericObject
+  expandByDepth?: { [key: string]: string | number }
+  onExpandByDepthClick?: (arg: number, arg1: any) => void
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -49,6 +60,8 @@ type AdvancedTableProps = {
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
   virtualizedRows?: boolean
+  allowFullScreen?: boolean
+  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
@@ -62,6 +75,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
+    expandByDepth,
+    onExpandByDepthClick,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -76,12 +91,15 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     showActionsBar = true,
     selectableRows,
     sortControl,
+    stickyLeftColumn,
     tableData,
     tableOptions,
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
+    allowFullScreen = false,
+    fullScreenControl,
   } = props;
 
   // Component refs
@@ -146,6 +164,68 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     );
   }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
+  // Fullscreen
+  const [isFullscreen, setIsFullscreen] = useState(false)
+
+  const toggleFullscreen = useCallback(() => {
+    setIsFullscreen(prevState => !prevState)
+  }, [])
+
+  useEffect(() => {
+    if (allowFullScreen && fullScreenControl) {
+      fullScreenControl({
+        toggleFullscreen,
+        isFullscreen
+      })
+    }
+  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
+
+  const renderFullscreenHeader = () => {
+    if (!isFullscreen) return null
+
+    const defaultMinimizeIcon = (
+      <button
+          className="gray-icon fullscreen-icon"
+          onClick={toggleFullscreen}
+      >
+        <Icon
+            cursor="pointer"
+            fixedWidth
+            icon="arrow-down-left-and-arrow-up-right-to-center"
+            {...props}
+        />
+      </button>
+    )
+
+    return (
+      <Card 
+          borderNone
+          borderRadius="none"
+          className="advanced-table-fullscreen-header" 
+          {...props}
+      >
+          <Flex justify="end">
+            {defaultMinimizeIcon}
+          </Flex>
+      </Card>
+    )
+  }
+
+  useEffect(() => {
+    if (!allowFullScreen) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isFullscreen) {
+        event.preventDefault()
+        toggleFullscreen()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [allowFullScreen, toggleFullscreen, isFullscreen])
+
   // Build CSS classes and props
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -154,6 +234,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
+    {
+      'advanced-table-fullscreen': isFullscreen,
+      'advanced-table-allow-fullscreen': allowFullScreen
+    },
+    {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     globalProps(props),
     className
   );
@@ -194,22 +279,27 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           ref={tableWrapperRef}
           style={tableWrapperStyle as React.CSSProperties}
       >
+        {renderFullscreenHeader()}
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
+            expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
             handleExpandOrCollapse={handleExpandOrCollapse}
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}
             isActionBarVisible={isActionBarVisible}
+            isFullscreen={isFullscreen}
             loading={loading}
+            onExpandByDepthClick={onExpandByDepthClick}
             responsive={responsive}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
             sortControl={sortControl}
+            stickyLeftColumn={stickyLeftColumn}
             subRowHeaders={tableOptions?.subRowHeaders}
             table={table}
             tableContainerRef={tableWrapperRef}
@@ -246,7 +336,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         </AdvancedTableProvider>
      
       </div>
- {/* Bottom Pagination */}
+      {/* Bottom Pagination */}
       {pagination && (
         <TablePagination
             onChange={onPageChange}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -149,7 +149,7 @@ return (
         data={{testid: testId}}
         sortControl={sortControl}
         tableData={MOCK_DATA}
-      >
+    >
         <AdvancedTable.Header enableSorting />
         <AdvancedTable.Body />
       </AdvancedTable>
@@ -338,8 +338,8 @@ test("enableExpansionIcon changes icon", () => {
 
   const kit = screen.getByTestId(testId)
   const tableHead = kit.querySelector('table')
-  const toggleIcon= tableHead.querySelector(".pb_icon_kit")
-  expect(toggleIcon).toHaveClass("fa-chevron-up")
+  const toggleIcon = tableHead.querySelector(".pb_custom_icon")
+  expect(toggleIcon).toBeInTheDocument()
 })
 
 test("sortIcon changes icon", () => {
@@ -360,8 +360,8 @@ test("sortIcon changes icon", () => {
 
   const kit = screen.getByTestId(testId)
   const sortIcon = kit.querySelector('.sort-button-icon')
-  const icon= sortIcon.querySelector(".pb_icon_kit")
-  expect(icon).toHaveClass("fa-chevron-down")
+  const icon = sortIcon.querySelector(".pb_custom_icon")
+  expect(icon).toBeInTheDocument()
 })
 
 test("Sort icon renders with enableSorting + sortControl works as expected", () => {
@@ -452,7 +452,7 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
   expect(rowButton).toBeInTheDocument()
   rowButton.click()
-  const inlineLoading = kit.querySelector(".fa-spinner")
+  const inlineLoading = kit.querySelector(".pb_custom_icon")
   expect(inlineLoading).toBeInTheDocument()
 })
 
@@ -498,4 +498,17 @@ test("customRenderer prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   const pill = kit.querySelector(".pb_pill_kit_success_lowercase")
   expect(pill).toBeInTheDocument()
-})
+})
+
+test("allowFullScreen prop adds fullscreen class", () => {
+  render(
+    <AdvancedTable
+        allowFullScreen
+        columnDefinitions={columnDefinitions}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const tableContainer = screen.getByRole("table").closest("div")
+  expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
+})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx

@@ -0,0 +1,66 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableExpandByDepth = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const expandByDepth = [
+    {
+        depth: 0,
+        label: "Year",
+    },
+    {
+        depth: 1,
+        label: "Quarter",
+    },
+    {
+        depth: 2,
+        label: "Month",
+    }
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          expandByDepth={expandByDepth}
+          onExpandByDepthClick={(depth, rows) => {console.log(depth, rows)}}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableExpandByDepth

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md

@@ -0,0 +1,10 @@
+The `expandByDepth` prop enables users to expand or collapse table rows by specific levels of nesting. When provided, it renders a dropdown that appears when the toggle icon in the header is clicked.
+
+`expandByDepth` accepts an array of objects, where each object defines the depth level to target and the label to display in the dropdown. When a user selects an option:
+
+**Expanding a depth**: Expands all rows at the selected depth AND all parent levels above it (if parent levels were closed), ensuring nested content is visible.
+
+**Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
+
+If you want to attach further logic to each option click, the **optional** `onExpandByDepthClick` prop can be used. This click event provides 2 arguments that can be hooked into: the depth level of the clicked item AND all flattened table rows. Any additional functionality provided through this onClick will be applied in addition to the default.
+

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react"
+import { AdvancedTable, Button, Flex } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTableFullscreen = (props) => {
+  const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
+  const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
+
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const tableProps = {
+    sticky: true
+  }
+
+  return (
+    <div>
+      <Flex justify="end">
+          <Button
+              marginBottom="sm"
+              onClick={() => fullscreenToggleSmall?.()}
+              text="Fullscreen Small Table"
+              variant="secondary"
+          />
+      </Flex>
+      <AdvancedTable
+          allowFullScreen
+          columnDefinitions={columnDefinitions}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+          <AdvancedTable.Header enableSorting />
+          <AdvancedTable.Body />
+      </AdvancedTable>
+      <Flex justify="end">
+          <Button
+              marginY="sm"
+              onClick={() => fullscreenToggleLarge?.()}
+              text="Fullscreen Large Table"
+              variant="secondary"
+          />
+      </Flex>
+      <AdvancedTable
+          allowFullScreen
+          columnDefinitions={columnDefinitions}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
+          responsive="none"
+          tableData={PAGINATION_MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      >
+          <AdvancedTable.Header enableSorting />
+          <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableFullscreen

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md

@@ -0,0 +1,3 @@
+Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props.  `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
+
+Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx

@@ -0,0 +1,58 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableStickyColumns = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      id: "newEnrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      id: "scheduledMeetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      id: "attendanceRate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+      id: "completedClasses",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      id: "classCompletionRate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+      id: "graduatedStudents",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          responsive="none"
+          stickyLeftColumn={["year"]}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableStickyColumns

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md

@@ -0,0 +1,6 @@
+To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
+
+To achieve this:
+- Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string. 
+- One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
+- It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableStickyColumnsAndHeader = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      id: "newEnrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      id: "scheduledMeetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      id: "attendanceRate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+      id: "completedClasses",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      id: "classCompletionRate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+      id: "graduatedStudents",
+    },
+  ]
+
+  const tableProps = {
+    sticky: true
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          maxHeight="xs"
+          responsive="none"
+          stickyLeftColumn={["year"]}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableStickyColumnsAndHeader

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md

@@ -0,0 +1,8 @@
+To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
+
+- Set `sticky: true` via `tableProps`
+- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
+
+**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
+
+Expand the table above to see this in action.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx

@@ -0,0 +1,55 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableStickyHeader = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const tableProps = {
+    sticky: true
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          responsive="none"
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableStickyHeader

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md

@@ -0,0 +1,3 @@
+The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
+
+This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md

@@ -0,0 +1,3 @@
+The `table_props` prop can also be used to render a sticky header for the Advanced Table.
+
+This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { container: false, sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -37,14 +37,13 @@ const AdvancedTableTableProps = (props) => {
 
   const tableProps = {
     container: false,
-    sticky: true
+    verticalBorder: true
   }
 
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          responsive="none"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}