@patternfly/react-table 6.0.0-alpha.58 → 6.0.0-alpha.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.58",
+  "version": "6.0.0-alpha.59",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.58",
-    "@patternfly/react-icons": "^6.0.0-alpha.20",
-    "@patternfly/react-styles": "^6.0.0-alpha.20",
-    "@patternfly/react-tokens": "^6.0.0-alpha.20",
+    "@patternfly/react-core": "^6.0.0-alpha.59",
+    "@patternfly/react-icons": "^6.0.0-alpha.21",
+    "@patternfly/react-styles": "^6.0.0-alpha.21",
+    "@patternfly/react-tokens": "^6.0.0-alpha.21",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -55,5 +55,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "085b43fa526d2b629825d72a19083f506379cd30"
+  "gitHead": "6101cfe558acec0474dd1c0649e44c38bf01383f"
 }

package/src/components/Table/Td.tsx

@@ -30,8 +30,8 @@ import {
   TdTreeRowType
 } from './base/types';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
-import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
-import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
+import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
+import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
 
 export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
   /**
@@ -294,8 +294,8 @@ const TdBase: React.FunctionComponent<TdProps> = ({
       {...(isStickyColumn && {
         style: {
           [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
-          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
-          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Table/Th.tsx

@@ -10,8 +10,8 @@ import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/component
 import { BaseCellProps } from './Table';
 import { IFormatterValueType, IColumn } from './TableTypes';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
-import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
-import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
+import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
+import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
 
 export interface ThProps
   extends BaseCellProps,
@@ -224,8 +224,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       {...(isStickyColumn && {
         style: {
           [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
-          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
-          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Table/examples/Table.md

@@ -56,7 +56,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
-import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
+import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
 
 ## Table examples
 
@@ -71,6 +71,7 @@ Some general notes:
 ### Basic
 
 ```ts file="TableBasic.tsx"
+
 ```
 
 ### Custom row wrapper, header tooltips & popovers
@@ -82,6 +83,7 @@ Some general notes:
 To add a header tooltip or popover to `Th`, pass a `ThInfoType` object via the `info` prop.
 
 ```ts file="TableMisc.tsx"
+
 ```
 
 ### Sortable & wrapping headers
@@ -103,6 +105,7 @@ type OnSort = (
 The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the `Sortable - responsive` demo in the `React demos` tab.
 
 ```ts file="TableSortable.tsx"
+
 ```
 
 ### Sortable - custom control
@@ -110,6 +113,7 @@ The built in display for sorting is not fully responsive, as the column headers
 Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the `Sortable - responsive` demo in the `React demos` tab.
 
 ```ts file="TableSortableCustom.tsx"
+
 ```
 
 ### Selectable with checkbox
@@ -140,6 +144,7 @@ type OnSelect = (
 checking checkboxes will check intermediate rows' checkboxes.
 
 ```ts file="TableSelectable.tsx"
+
 ```
 
 ### Selectable radio input
@@ -147,6 +152,7 @@ checking checkboxes will check intermediate rows' checkboxes.
 Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props.
 
 ```ts file="TableSelectableRadio.tsx"
+
 ```
 
 ### Row click handler, clickable rows
@@ -154,6 +160,7 @@ Similarly to the selectable example above, the radio buttons use the first colum
 This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.
 
 ```ts file="TableClickable.tsx"
+
 ```
 
 ### Actions
@@ -165,6 +172,7 @@ To make a cell an action cell, render an `ActionsColumn` component inside a row'
 If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `ActionsColumn` can be passed a `menuAppendTo` prop to adjust where the actions menu is appended.
 
 ```ts file="TableActions.tsx"
+
 ```
 
 ### Actions Overflow
@@ -172,6 +180,7 @@ If actions menus are getting clipped by other items on the page, such as sticky
 Useing an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space.
 
 ```ts file="TableActionsOverflow.tsx"
+
 ```
 
 ### Expandable
@@ -197,6 +206,7 @@ type OnCollapse = (
 Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set.
 
 ```ts file="TableExpandable.tsx"
+
 ```
 
 ### Compound expandable
@@ -221,16 +231,19 @@ export type OnExpand = (
 ```
 
 ```ts file="TableCompoundExpandable.tsx"
+
 ```
 
 ### Cell width, breakpoint modifiers
 
 ```ts file="TableCellWidth.tsx"
+
 ```
 
 ### Controlling text
 
 ```ts file="TableControllingText.tsx"
+
 ```
 
 ### Modifiers with table text
@@ -238,11 +251,13 @@ export type OnExpand = (
 If the "wrapModifier" property is set to "truncate", it's needed to ensure that the corresponding tooltip can be opened using both keyboard and screen reader. Since this particular Td element is generic and doesn't have any predefined decorators, the focus management required to trigger the tooltip needs to be handled manually by defining and manipulating the requisite props.
 
 ```ts file="TableTextModifiers.tsx"
+
 ```
 
 ### Empty state
 
 ```ts file="TableEmptyState.tsx"
+
 ```
 
 ### Favoritable (implemented with sortable)
@@ -265,6 +280,7 @@ type OnFavorite = (
 To make a favoritable column sortable, pass a `ThSortType` object to the favoritable column's `Th` with `isFavorites` set to true.
 
 ```ts file="TableFavoritable.tsx"
+
 ```
 
 ### Tree table
@@ -298,6 +314,7 @@ aria-posinset, and aria-setsize as violations. This is an intentional choice at
 the voice over technologies will recognize the flat table structure as a tree.
 
 ```ts file="TableTree.tsx"
+
 ```
 
 ### Flat tree table with no inset
@@ -305,6 +322,7 @@ the voice over technologies will recognize the flat table structure as a tree.
 To remove the inset used to leave space for the expand/collapse toggle in a flat tree table, use the `hasNoInset` prop on the `Table` component.
 
 ```ts file="TableTreeNoInset.tsx"
+
 ```
 
 ### Draggable row table
@@ -318,6 +336,7 @@ To make a row draggable:
 5. The draggable `Td` in each row needs a `TdDraggableType` object passed to its `draggable` prop.
 
 ```ts isBeta file="TableDraggable.tsx"
+
 ```
 
 ### Sticky table modifiers
@@ -334,7 +353,7 @@ There are a few ways this can be handled:
 
 ### Sticky column
 
-To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: 
+To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky:
 
 - `isStickyColumn`
 - `hasRightBorder` for a left-aligned sticky column, or `hasLeftBorder` for a right-aligned sticky column.
@@ -342,6 +361,7 @@ To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the fo
 To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property. For multiple sticky columns, use the `stickyLeftOffset` and `stickyRightOffset` properties for additional left or right sticky columns.
 
 ```ts file="TableStickyColumn.tsx"
+
 ```
 
 ### Multiple left-aligned sticky columns
@@ -351,11 +371,12 @@ To make multiple left-aligned columns sticky:
 - wrap `Table` with `InnerScrollContainer`
 - add `isStickyColumn` to all columns that should be sticky
 - add `hasRightBorder` to the rightmost sticky column
-- add `stickyLeftOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the previous sticky columns. The leftmost sticky column should have a value of `0`, which is the default of this property. 
+- add `stickyLeftOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the previous sticky columns. The leftmost sticky column should have a value of `0`, which is the default of this property.
 
 To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property.
 
 ```ts file="TableMultipleStickyColumns.tsx"
+
 ```
 
 ### Multiple right-aligned sticky columns
@@ -365,11 +386,12 @@ To make multiple right-aligned columns sticky:
 - wrap `Table` with `InnerScrollContainer`
 - add `isStickyColumn` to all columns that should be sticky
 - add `hasLeftBorder` to the leftmost sticky column
-- add `stickyRightOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the next sticky columns. The rightmost sticky column should have a value of `0`, which is the default of this property. 
+- add `stickyRightOffset` to each sticky column with a value that equals the combined width - set by `stickyMindWidth` - of the next sticky columns. The rightmost sticky column should have a value of `0`, which is the default of this property.
 
 To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property.
 
 ```ts file="TableRightStickyColumn.tsx"
+
 ```
 
 ### Sticky columns and header
@@ -377,6 +399,7 @@ To prevent the default text wrapping behavior and allow horizontal scrolling, al
 To maintain proper sticky behavior across sticky columns and header, `Table` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`.
 
 ```ts file="TableStickyColumnsAndHeader.tsx"
+
 ```
 
 ### Nested column headers
@@ -393,21 +416,25 @@ The first `Tr` represents the top level of columns, and each must pass either `r
 The second `Tr` represents the second level of sub columns. The `Th` in this row each should pass `isSubHeader`, and the last sub column of a column should also pass `hasRightBorder`.
 
 ```ts file="TableNestedHeaders.tsx"
+
 ```
 
 ### Nested column headers and expandable rows
 
 ```ts file="TableNestedExpandable.tsx"
+
 ```
 
 ### Expandable with nested table
 
 ```ts file="TableNestedTableExpandable.tsx"
+
 ```
 
 ### Nested sticky header
 
 ```ts file="TableNestedStickyHeader.tsx"
+
 ```
 
 ### Striped
@@ -415,6 +442,7 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 To apply striping to a basic table, add the `isStriped` property to `Table`.
 
 ```ts file="TableStriped.tsx"
+
 ```
 
 ### Striped expandable
@@ -422,6 +450,7 @@ To apply striping to a basic table, add the `isStriped` property to `Table`.
 To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `Table`.
 
 ```ts file="TableStripedExpandable.tsx"
+
 ```
 
 ### Striped multiple tobdy
@@ -429,6 +458,7 @@ To apply striping to an expandable table, add the `isStriped` and `isExpandable`
 When there are multiple `Tbody` components within a table, a more granular application of striping may be controlled by adding either the `isEvenStriped` or `isOddStriped` properties to `Tbody`. These properties will stripe even or odd rows within that `Tbody` respectively.
 
 ```ts file="TableStripedMultipleTbody.tsx"
+
 ```
 
 ### Striped tr
@@ -436,4 +466,5 @@ When there are multiple `Tbody` components within a table, a more granular appli
 To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `Table`.
 
 ```ts file="TableStripedTr.tsx"
+
 ```

package/src/components/Table/examples/TableMisc.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 /* eslint-disable camelcase */
-import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
+import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
 
 interface Repository {
   name: string;
@@ -67,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => {
         {repositories.map((repo, rowIndex) => {
           const isOddRow = (rowIndex + 1) % 2;
           const customStyle = {
-            backgroundColor: global_BackgroundColor_150.var
+            backgroundColor: global_background_color_secondary_default.var
           };
           // Some arbitrary logic to demonstrate that cell styles can be based on anything
           const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;

package/src/components/Table/utils/transformers.test.tsx

@@ -30,7 +30,7 @@ import {
 } from '../TableTypes';
 import { css } from '@patternfly/react-styles';
 import tableStyles from '@patternfly/react-styles/css/components/Table/table';
-import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
+import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 
 const testCellActions = async ({
   actions,
@@ -76,9 +76,7 @@ const testCellActions = async ({
     await user.click(screen.getAllByRole('button')[0]);
     await waitFor(() =>
       // eslint-disable-next-line testing-library/no-container
-      expect(container.querySelectorAll(`.${dropdownStyles.dropdownMenu} li button`)).toHaveLength(
-        expectDisabled ? 0 : 1
-      )
+      expect(container.querySelectorAll(`.${menuStyles.menu} li button`)).toHaveLength(expectDisabled ? 0 : 1)
     );
   }
 };

package/src/demos/Table.md

@@ -57,7 +57,6 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';

package/src/demos/examples/TableEmptyStateError.tsx

@@ -11,7 +11,6 @@ import {
   PageSection
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateError: React.FunctionComponent = () => (
@@ -32,10 +31,10 @@ export const TableEmptyStateError: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState variant={EmptyStateVariant.sm}>
+                  <EmptyState variant={EmptyStateVariant.sm} titleText="">
                     <EmptyStateHeader
                       titleText="Unable to connect"
-                      icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
+                      icon={<EmptyStateIcon icon={ExclamationCircleIcon} />}
                       headingLevel="h2"
                     />
                     <EmptyStateBody>

package/src/deprecated/components/Table/examples/LegacyTableMisc.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
 /* eslint-disable camelcase */
-import global_primary_color_100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100';
+import global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default';
 
 interface Repository {
   name: string;
@@ -32,7 +32,7 @@ export const LegacyTableMisc: React.FunctionComponent = () => {
   const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row }) => {
     const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true;
     const customStyle = {
-      borderLeft: `3px solid ${global_primary_color_100.var}`
+      borderLeft: `3px solid ${global_color_brand_default.var}`
     };
     return (
       <tr