playbook_ui 14.16.0 → 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dbada6b3906a7bdd5cd17ccdc6db4251385789e29416980b5f3ffa501a9c9f94
-  data.tar.gz: 27b40157f9658e595e8f0ee77c1fc837c2bb80f0c794df82715de2d59dce8a00
+  metadata.gz: ee5a8f7236c5915641d49888d1b31358596a366e9e22a281b560dcaa31bb8936
+  data.tar.gz: ad235c43f83f72d5d31a9a99e02d662cb7db5b5b5c270d9c1bbe3c9392e9d9ae
 SHA512:
-  metadata.gz: f45a55efaef13d3ccc5e8907b755ce1e2aa1fb428b87b9c6ca8fad3f5d268e71e0b72ba2d71fe8d372443d501ab76a37f864e6c2744c71012360f0036defcbb8
-  data.tar.gz: a070cb303d181a6a48842fed3ebba697ca17428cd4b6e475f9b0cb97565351dac99b78d81a1ee76582d12cdde9841f2434be5b755035fe83c3d7bf78b41adcf3
+  metadata.gz: 198ec85648866bcbcb816b91bc9a54e8ea126596c036bc5af0d8fb9ddad100b1cfca65a032a24cc65211f0679495cbbc5ab0f0708cf2751c9e75d1f19fac35bd
+  data.tar.gz: 9ca8b30bda370751ff399531e4e22879a39beae908d79dedac31dfe5f30159aa501b1a3ed620d80f44e74d1c619ac1517e31c304d8583c9d86862a74a157ba99

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

@@ -3,4 +3,4 @@ import { ExpandedState } from "@tanstack/react-table"
 export type ExpandedStateObject = Extract<
   ExpandedState,
   Record<string, boolean>
->
+>

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

@@ -7,6 +7,7 @@
 @import "./scss_partials/chrome_styles";
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
+@import "../tokens/positioning";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
@@ -101,6 +102,15 @@
       border-top-left-radius: 0px !important;
       border-top-right-radius: 0px !important;
     }
+    // Right align header content of first data column in selectable row no subrow setup
+    &.selectable-rows-enabled {
+      tr { 
+        th:nth-child(2),
+        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
+          justify-content: flex-end;
+        }
+      }
+    }
 
     // Set fixed width for header cells to match table body
     th {
@@ -112,7 +122,8 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom {
+      &.table-header-cells-custom, 
+      &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
         box-sizing: border-box !important;
@@ -168,6 +179,15 @@
         text-align: right;
       }
     }
+    // Right align row content of first data column in selectable row no subrow setup
+    &.selectable-rows-enabled {
+      tr {
+        td:nth-child(2),
+        .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none {
+          justify-content: end;
+        }
+      }
+    }
   }
 
   .table-header-cells-active:first-child {
@@ -210,6 +230,53 @@
     max-height: 1920px;
     overflow-y: auto;
   }
+  
+  // Fullscreen
+  &.advanced-table-allow-fullscreen {
+    transition: all 0.3s ease;
+  }
+  
+  &.advanced-table-fullscreen {
+    background-color: $bg_light;
+    box-sizing: border-box;
+    height: 100vh;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: $z_10;
+
+    .pb_table {
+      th, td, div, button {
+        font-size: calc(100%);
+      }
+      box-sizing: border-box;
+      margin: $space_lg;
+      max-width: calc(100% - 64px);
+      width: calc(100% - 64px);
+    }
+
+    .pb_table.sticky-header {
+      thead,
+      .pb_advanced_table_header {
+        position: sticky !important;
+        top: 44px !important;
+        z-index: $z_10;
+      }
+    }
+  }
+  
+  .advanced-table-fullscreen-header {
+    background-color: $white;
+    height: 44px;
+    padding: 13px 20px;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: $z_10;
+  }
+
   // Icons
   .button-icon {
     display: flex;
@@ -258,11 +325,22 @@
     }
   }
 
+  .fullscreen-icon {
+    @extend .button-icon;
+    @extend %primary-color-pseudo;
+    padding: 2px 0;
+
+    &:focus-visible {
+      border-radius: $border_rad_lighter;
+    }
+  }
+
   // Vertical separator
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
   td:first-child,
-  .pb_table_td:first-child {
+  .pb_table_td:first-child,
+  .checkbox-cell.checkbox-cell-header:first-child {
     box-shadow: 1px 0px 0px 0px $border_light !important;
   }
 
@@ -318,6 +396,7 @@
       .table-header-cells:first-child,
       td:first-child,
       .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child,
       [class*="pinned-left"] {
           background-color: $white;
           box-shadow: $shadow_deep !important;
@@ -435,6 +514,28 @@
         ) !important;
       }
     }
+
+    // Vertical separator
+    .table-header-cells:first-child,
+    .table-header-cells-custom:first-child,
+    td:first-child,
+    .pb_table_td:first-child,
+    .checkbox-cell.checkbox-cell-header:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    }
+
+    // Fullscreen
+    &.advanced-table-fullscreen {
+      background: $bg_dark;
+    }
+
+    .advanced-table-fullscreen-header {
+      background-color: $bg_dark_card;
+      position: sticky;
+      top: 0;
+      z-index: $z_10;
+    }
+
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
@@ -459,6 +560,7 @@
         .table-header-cells:first-child,
         td:first-child,
         .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child,
         [class*="pinned-left"] {
           background: $bg_dark_card;
           border-right: $border_dark;

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
@@ -49,6 +58,8 @@ type AdvancedTableProps = {
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
   virtualizedRows?: boolean
+  allowFullScreen?: boolean
+  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
@@ -82,6 +93,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
+    allowFullScreen = false,
+    fullScreenControl,
   } = props;
 
   // Component refs
@@ -146,6 +159,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 +229,10 @@ 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
+    },
     globalProps(props),
     className
   );
@@ -167,93 +246,97 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
-        onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
-          e.currentTarget,
-          fetchNextPage,
-          isFetching,
-          totalFetched,
-          fullData.length
-        ) : undefined}
-        ref={tableWrapperRef}
-        style={tableWrapperStyle as React.CSSProperties}
-    >
-      <AdvancedTableProvider
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion={enableToggleExpansion}
-          enableVirtualization={virtualizedRows}
-          expanded={expanded}
-          expandedControl={expandedControl}
-          handleExpandOrCollapse={handleExpandOrCollapse}
-          hasAnySubRows={hasAnySubRows}
-          inlineRowLoading={inlineRowLoading}
-          isActionBarVisible={isActionBarVisible}
-          loading={loading}
-          responsive={responsive}
-          selectableRows={selectableRows}
-          setExpanded={setExpanded}
-          showActionsBar={showActionsBar}
-          sortControl={sortControl}
-          subRowHeaders={tableOptions?.subRowHeaders}
-          table={table}
-          tableContainerRef={tableWrapperRef}
-          toggleExpansionIcon={toggleExpansionIcon}
-          virtualizedRows={virtualizedRows}
+    <>
+      {/* Top Pagination */}
+      {pagination && (
+        <TablePagination
+            onChange={onPageChange}
+            position="top"
+            range={paginationProps?.range}
+            table={table}
+        />
+      )}
+
+      <div
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+          onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
+            e.currentTarget,
+            fetchNextPage,
+            isFetching,
+            totalFetched,
+            fullData.length
+          ) : undefined}
+          ref={tableWrapperRef}
+          style={tableWrapperStyle as React.CSSProperties}
       >
-        <React.Fragment>
-          {/* Top Pagination */}
-          {pagination && (
-            <TablePagination
-                onChange={onPageChange}
-                position="top"
-                range={paginationProps?.range}
-                table={table}
+        {renderFullscreenHeader()}
+        <AdvancedTableProvider
+            columnDefinitions={columnDefinitions}
+            enableToggleExpansion={enableToggleExpansion}
+            enableVirtualization={virtualizedRows}
+            expanded={expanded}
+            expandedControl={expandedControl}
+            handleExpandOrCollapse={handleExpandOrCollapse}
+            hasAnySubRows={hasAnySubRows}
+            inlineRowLoading={inlineRowLoading}
+            isActionBarVisible={isActionBarVisible}
+            isFullscreen={isFullscreen}
+            loading={loading}
+            responsive={responsive}
+            selectableRows={selectableRows}
+            setExpanded={setExpanded}
+            showActionsBar={showActionsBar}
+            sortControl={sortControl}
+            subRowHeaders={tableOptions?.subRowHeaders}
+            table={table}
+            tableContainerRef={tableWrapperRef}
+            toggleExpansionIcon={toggleExpansionIcon}
+            virtualizedRows={virtualizedRows}
+        >
+          <React.Fragment>
+            {/* Selection Action Bar */}
+            <TableActionBar
+                actions={actions}
+                isVisible={isActionBarVisible}
+                selectedCount={selectedRowsLength}
             />
-          )}
-
-          {/* Selection Action Bar */}
-          <TableActionBar
-              actions={actions}
-              isVisible={isActionBarVisible}
-              selectedCount={selectedRowsLength}
-          />
 
-          {/* Main Table */}
-          <Table
-              className={`${loading ? "content-loading" : ""}`}
-              dark={dark}
-              dataTable
-              numberSpacing="tabular"
-              responsive="none"
-              {...tableProps}
-          >
-            {children ? (
-              children
-            ) : (
-              <>
-                <TableHeader />
-                <TableBody />
-              </>
-            )}
-          </Table>
-
-          {/* Bottom Pagination */}
-          {pagination && (
-            <TablePagination
-                onChange={onPageChange}
-                position="bottom"
-                range={paginationProps?.range}
-                table={table}
-            />
-          )}
-        </React.Fragment>
-      </AdvancedTableProvider>
-    </div>
+            {/* Main Table */}
+            <Table
+                className={`${loading ? "content-loading" : ""}`}
+                dark={dark}
+                dataTable
+                numberSpacing="tabular"
+                responsive="none"
+                {...tableProps}
+            >
+              {children ? (
+                children
+              ) : (
+                <>
+                  <TableHeader />
+                  <TableBody />
+                </>
+              )}
+            </Table>
+          </React.Fragment>
+        </AdvancedTableProvider>
+     
+      </div>
+      {/* Bottom Pagination */}
+      {pagination && (
+        <TablePagination
+            onChange={onPageChange}
+            position="bottom"
+            range={paginationProps?.range}
+            table={table}
+        />
+      )}
+    </>
   );
 };
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -3,8 +3,8 @@
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
-            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
           <% end %>
         <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -20,6 +20,8 @@ module Playbook
       prop :max_height, type: Playbook::Props::Enum,
                         values: %w[auto xs sm md lg xl xxl xxxl],
                         default: "auto"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
@@ -32,6 +34,14 @@ module Playbook
       def max_height_classname
         max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
       end
+
+      def selected_rows
+        @selected_rows ||= []
+      end
+
+      def selected_rows_length
+        selected_rows.length
+      end
     end
   end
 end

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_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_pagination.jsx

@@ -40,7 +40,6 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />