playbook_ui 16.9.0.pre.alpha.play300717269 → 16.9.0.pre.alpha.playgroundsmore17219

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fdd9d5e129fde1084a07222cd76abbfe3fb2a828bc7979275102d5eed9b879ab
-  data.tar.gz: a31904f6e3e745f63d919f3356498760868a626351785aae3f74ac7ac6319bd0
+  metadata.gz: 62c122bf0b7250df2b2a33b88cfb0ec47dbd635ce881498f37bef87b9a0384d4
+  data.tar.gz: 0f0a5052a26cdd6638a8017ab8251ae435fdbc1569dbd5a12d5e1a6c3eedd64b
 SHA512:
-  metadata.gz: 996f867496aa467e357f57bbd06d3efad91474d68416c1d15524675d8839c062c54c49030fafb7088fe4f0aa8739cd5957ce4554c7da0e644ec3cde572f3dff2
-  data.tar.gz: 6183de19b665aa3a430cc8c0fc52c66d27ba898e9bac34c1b3220a8b4f8971503d2fd4dd8b3da0991bbf0bb2676786d464da91081616183a9625453a7fc0508b
+  metadata.gz: c03a14dbff445b02405641e2a18123c03bf4efed3860a94868e3031f95918c3d696af676fa903976d87372a577e2aaa01b81b93638b7d0b008a54a28419ce12b
+  data.tar.gz: d266a46973eab20d8bc9c6365fcf2b32eed9a08a38a96967f208edf4612011d1cd9c670c6c44dad6d121c8245532eb96ba3f76d2a7df0a8ddec351e27707a432

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

@@ -136,7 +136,6 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
-    actionBarHeight,
     rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
@@ -173,7 +172,7 @@ export const RegularTableView = ({
             position: 'sticky',
             top:
               row.getIsPinned() === 'top'
-                  ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
+                  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
                   : undefined,
             zIndex: '3'
           }}

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

@@ -17,7 +17,6 @@ import {
   showActionBar,
   hideActionBar,
 } from "../Utilities/ActionBarAnimationHelper";
-import { scheduleStickyActionBarHeightUpdate } from "../Utilities/StickyLayoutHelper";
 import { GenericObject } from "../../types";
 
 interface TableActionBarProps {
@@ -40,7 +39,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   type = "row-selection",
 }) => {
   const cardRef = useRef(null);
-  const { table, columnVisibilityControl, columnDefinitions, tableContainerRef } =
+  const { table, columnVisibilityControl, columnDefinitions } =
     useContext(AdvancedTableContext);
 
   // ----------- Column visibility logic -----------
@@ -132,10 +131,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       } else {
         hideActionBar(cardRef.current);
       }
-
-      scheduleStickyActionBarHeightUpdate(tableContainerRef?.current ?? null);
     }
-  }, [isVisible, type, tableContainerRef]);
+  }, [isVisible, type]);
 
   const [showPopover, setShowPopover] = useState(false)
 

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

@@ -4,7 +4,6 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { Row } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { getRowHeightEstimate } from '../Utilities/TableContainerStyles';
-import { measureElementHeight } from '../Utilities/StickyLayoutHelper';
 
 const AdvancedTableContext = createContext<any>({});
 
@@ -31,11 +30,8 @@ export const AdvancedTableProvider = ({ children, ...props }: {
   
   const [headerHeight, setHeaderHeight] = useState(44);
   const [rowHeight, setRowHeight] = useState(38);
-  const [actionBarHeight, setActionBarHeight] = useState(0);
 
   const measureHeights = useCallback(() => {
-    const wrapper = (props.tableContainerRef?.current || tableContainerRef.current) as HTMLElement | null;
-
     if (headerRef.current) {
       const headerElement = headerRef.current as HTMLElement;
       const headerRect = headerElement.getBoundingClientRect();
@@ -49,21 +45,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
         setRowHeight(rowRect.height);
       }
     }
-
-    if (wrapper) {
-      const actionBar = wrapper.querySelector(
-        ".row-selection-actions-card.is-visible, .row-selection-actions-card.show-action-card"
-      ) as HTMLElement | null;
-      const measuredActionBarHeight = actionBar
-        ? measureElementHeight(actionBar)
-        : 0;
-      setActionBarHeight(measuredActionBarHeight);
-      wrapper.style.setProperty(
-        "--advanced-table-action-bar-height",
-        `${measuredActionBarHeight}px`
-      );
-    }
-  }, [props.tableContainerRef]);
+  }, []);
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
@@ -74,12 +56,6 @@ export const AdvancedTableProvider = ({ children, ...props }: {
       resizeObserver.observe(headerRef.current);
     }
 
-    const wrapper = (props.tableContainerRef?.current || tableContainerRef.current) as HTMLElement | null;
-    const actionBar = wrapper?.querySelector(".row-selection-actions-card");
-    if (actionBar) {
-      resizeObserver.observe(actionBar);
-    }
-
     if (sampleRowRef.current) {
       resizeObserver.observe(sampleRowRef.current);
     }
@@ -96,7 +72,7 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, headerGroupCount, props.isActionBarVisible, measureHeights]);
+  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization
@@ -226,7 +202,6 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     keepPinnedRows: props.keepPinnedRows,
     headerHeight,
     rowHeight,
-    actionBarHeight,
     headerRef,
     sampleRowRef,
     measureHeights,

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

@@ -364,34 +364,6 @@
     }
   }
 
-  &.advanced-table-sticky-header {
-    .row-selection-actions-card.show-action-card,
-    .row-selection-actions-card.is-visible {
-      background-color: $white;
-      left: 0;
-      position: sticky;
-      top: 0;
-      z-index: 5;
-    }
-
-    .pb_table.sticky-header {
-      thead,
-      .pb_advanced_table_header {
-        top: var(--advanced-table-action-bar-height, 0px);
-        z-index: 3;
-      }
-    }
-
-    &.hidden-action-bar {
-      .pb_table.sticky-header {
-        thead,
-        .pb_advanced_table_header {
-          top: 0;
-        }
-      }
-    }
-  }
-
   // Max height overflow - the below prevents expansion from overflowing container at full screen for responsive and nonresponsive tables
   &.advanced-table-max-height-xs {
     max-height: 320px;
@@ -429,6 +401,55 @@
     @include scrollbar-styling;
   }
 
+  // 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;
@@ -486,6 +507,16 @@
     }
   }
 
+  .fullscreen-icon {
+    @extend .button-icon;
+    @extend %primary-color-pseudo;
+    padding: 2px 0;
+
+    &:focus-visible {
+      border-radius: $border_rad_lighter;
+    }
+  }
+
   // First column separator/border
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
@@ -956,13 +987,6 @@
       background-color: $bg_dark_card;
     }
 
-    &.advanced-table-sticky-header {
-      .row-selection-actions-card.show-action-card,
-      .row-selection-actions-card.is-visible {
-        background-color: $bg_dark_card;
-      }
-    }
-
     .loading-toggle-icon,
     .loading-cell {
       &::after {
@@ -978,6 +1002,18 @@
       }
     }
 
+    // Fullscreen
+    &.advanced-table-fullscreen {
+      background: $bg_dark;
+    }
+
+    .advanced-table-fullscreen-header {
+      background-color: $bg_dark_card;
+      position: sticky;
+      top: 0;
+      z-index: $z_10;
+    }
+
     &[class*="advanced-table-sticky-left-columns"] {
       .sticky-left {
         background-color: $bg_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";
@@ -18,7 +18,15 @@ import TableActionBar from "./Components/TableActionBar";
 
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
-import { updateStickyLayoutHeights, scheduleStickyActionBarHeightUpdate } from "./Utilities/StickyLayoutHelper";
+
+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 }
@@ -66,6 +74,8 @@ type AdvancedTableProps = {
   onRowSelectionChange?: (arg: RowSelectionState) => void
   onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
+  allowFullScreen?: boolean
+  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 /**
@@ -125,6 +135,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
+    allowFullScreen = false,
+    fullScreenControl,
   } = props;
 
   const noTableCardContainer = tableProps?.container === false;
@@ -202,51 +214,87 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     );
   }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  // Build CSS classes and props
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+  // Fullscreen
+  const [isFullscreen, setIsFullscreen] = useState(false)
 
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
-  const isStickyHeader = Boolean(tableProps?.sticky);
+  const toggleFullscreen = useCallback(() => {
+    setIsFullscreen(prevState => !prevState)
+  }, [])
 
   useEffect(() => {
-    if (!isStickyHeader || !tableWrapperRef.current) return;
+    if (allowFullScreen && fullScreenControl) {
+      fullScreenControl({
+        toggleFullscreen,
+        isFullscreen
+      })
+    }
+  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
 
-    const wrapper = tableWrapperRef.current;
-    const updateHeights = () => updateStickyLayoutHeights(wrapper);
+  const renderFullscreenHeader = () => {
+    if (!isFullscreen) return null
 
-    updateHeights();
-    scheduleStickyActionBarHeightUpdate(wrapper);
+    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>
+    )
+  }
 
-    const resizeObserver = new ResizeObserver(updateHeights);
-    resizeObserver.observe(wrapper);
+  useEffect(() => {
+    if (!allowFullScreen) return
 
-    const actionBar = wrapper.querySelector(".row-selection-actions-card");
-    if (actionBar) {
-      resizeObserver.observe(actionBar);
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isFullscreen) {
+        event.preventDefault()
+        toggleFullscreen()
+      }
     }
-
-    const table = wrapper.querySelector("table.pb_table");
-    const thead = table?.querySelector("thead");
-    if (thead) {
-      resizeObserver.observe(thead);
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
     }
+  }, [allowFullScreen, toggleFullscreen, isFullscreen])
 
-    return () => resizeObserver.disconnect();
-  }, [isStickyHeader, isActionBarVisible, columnDefinitions, tableData]);
+  // Build CSS classes and props
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
 
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
+      'advanced-table-fullscreen': isFullscreen,
+      'advanced-table-allow-fullscreen': allowFullScreen,
       // Add the hidden-action-bar class when action bar functionality exists but is not visible
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
-    { 'advanced-table-sticky-header': isStickyHeader },
     { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
@@ -310,6 +358,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           ref={tableWrapperRef}
           style={tableWrapperStyle as React.CSSProperties}
       >
+        {renderFullscreenHeader()}
         <AdvancedTableProvider
             cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
@@ -326,6 +375,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}
             isActionBarVisible={isActionBarVisible}
+            isFullscreen={isFullscreen}
             loading={loading}
             onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}

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

@@ -46,7 +46,6 @@ module Playbook
           max_height_classname,
           hide_scroll_bar_class,
           hidden_action_bar_class,
-          sticky_header_class,
         ]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
         additional_classes << "advanced-table-no-table-container" if no_table_card_container?
@@ -76,12 +75,6 @@ module Playbook
         selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
       end
 
-      def sticky_header_class
-        return "" unless table_props.is_a?(Hash)
-
-        table_props[:sticky] || table_props["sticky"] ? "advanced-table-sticky-header" : ""
-      end
-
       def selected_rows
         @selected_rows ||= []
       end

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

@@ -418,56 +418,6 @@ test("tableProps prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   const table = kit.querySelector('table')
   expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
-  expect(kit).toHaveClass("advanced-table-sticky-header")
-})
-
-test("sticky header with column visibility control offsets layout heights", async () => {
-  const columnDefsWithIds = columnDefinitions.map((col) => ({
-    ...col,
-    id: col.accessor,
-  }))
-
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefsWithIds}
-        columnVisibilityControl={{ default: true }}
-        data={{ testid: testId }}
-        responsive="none"
-        tableData={MOCK_DATA}
-        tableProps={{ sticky: true }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("advanced-table-sticky-header")
-  expect(kit).not.toHaveClass("hidden-action-bar")
-
-  const actionBar = kit.querySelector(".row-selection-actions-card.show-action-card")
-  expect(actionBar).toBeInTheDocument()
-
-  await waitFor(() => {
-    expect(kit.style.getPropertyValue("--advanced-table-action-bar-height")).toMatch(/^\d+px$/)
-  })
-})
-
-test("sticky header without column visibility control keeps zero action bar offset", async () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        responsive="none"
-        tableData={MOCK_DATA}
-        tableProps={{ sticky: true }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("advanced-table-sticky-header")
-  expect(kit).not.toHaveClass("hidden-action-bar")
-
-  await waitFor(() => {
-    expect(kit.style.getPropertyValue("--advanced-table-action-bar-height")).toBe("0px")
-  })
 })
 
 test("enableExpansionIcon changes icon", () => {
@@ -696,6 +646,19 @@ test("customRenderer prop functions as expected", () => {
   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")
+})
+
 test("pinnedRows prop renders pinned rows at top", () => {
   const pinnedRowsControl = {
     value: { top: ["1", "3"] },

data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js

@@ -1,44 +1,26 @@
-import {
-  scheduleStickyActionBarHeightUpdate,
-  updateStickyActionBarHeight,
-} from "./Utilities/StickyLayoutHelper";
-
-// Card kit defaults to `transition-property: all`, which can animate height/opacity
-// during expand/collapse. Limit transitions to decorative properties only.
-const ACTION_BAR_TRANSITION_PROPERTIES = "border-color, box-shadow";
-
 function showActionBar(actionBar, selectedCount) {
   // Get container
   const tableContainer = actionBar.closest('.pb_advanced_table');
 
-  // Update the count before measuring height so the label is included on first show
-  const countElement = actionBar.querySelector(".selected-count");
-  if (countElement) {
-    countElement.textContent = `${selectedCount} Selected`;
-  }
-
-  // Expand without animating height so sticky offsets measure the final size
-  actionBar.style.transitionProperty = "none";
+  // Show action bar directly
+  actionBar.style.height = "auto";
   actionBar.style.overflow = "visible";
   actionBar.style.opacity = "1";
+  actionBar.style.transitionProperty = "all";
+  actionBar.style.transitionTimingFunction = "ease-in-out";
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
-  actionBar.style.height = "auto";
-
-  // Force layout so padding/content are included before measuring
-  void actionBar.offsetHeight;
-
-  const expandedHeight = actionBar.scrollHeight;
-  actionBar.style.height = `${expandedHeight}px`;
 
   // Remove hidden-action-bar class when action bar is shown
   if (tableContainer) {
     tableContainer.classList.remove("hidden-action-bar");
-    updateStickyActionBarHeight(tableContainer);
-    scheduleStickyActionBarHeightUpdate(tableContainer);
   }
 
-  actionBar.style.transitionProperty = ACTION_BAR_TRANSITION_PROPERTIES;
+  // Update the count
+  const countElement = actionBar.querySelector(".selected-count");
+  if (countElement) {
+    countElement.textContent = `${selectedCount} Selected`;
+  }
 }
 
 function hideActionBar(actionBar) {
@@ -46,7 +28,6 @@ function hideActionBar(actionBar) {
   const tableContainer = actionBar.closest('.pb_advanced_table');
 
   // Hide action bar directly
-  actionBar.style.transitionProperty = "none";
   actionBar.style.height = "0px";
   actionBar.style.overflow = "hidden";
   actionBar.style.opacity = "0";
@@ -56,10 +37,7 @@ function hideActionBar(actionBar) {
   // Add hidden-action-bar class when action bar is hidden
   if (tableContainer) {
     tableContainer.classList.add("hidden-action-bar");
-    updateStickyActionBarHeight(tableContainer);
   }
-
-  actionBar.style.transitionProperty = ACTION_BAR_TRANSITION_PROPERTIES;
 }
 
 export function updateSelectionActionBar(table, selectedCount) {