@patternfly/react-table 5.1.1-prerelease.9 → 5.2.0-prerelease.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "5.1.1-prerelease.9",
+  "version": "5.2.0-prerelease.1",
   "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",
@@ -39,10 +39,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.1.1-prerelease.9",
-    "@patternfly/react-icons": "^5.1.1-prerelease.5",
-    "@patternfly/react-styles": "^5.1.1-prerelease.5",
-    "@patternfly/react-tokens": "^5.1.1-prerelease.5",
+    "@patternfly/react-core": "^5.2.0-prerelease.1",
+    "@patternfly/react-icons": "^5.2.0-prerelease.0",
+    "@patternfly/react-styles": "^5.2.0-prerelease.0",
+    "@patternfly/react-tokens": "^5.2.0-prerelease.0",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -54,5 +54,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "295aa26fe74665f75560a61f157c3a02122d550a"
+  "gitHead": "f7f065572254120f68487ab4b4caff597ece5ad3"
 }

package/src/components/Table/ActionsColumn.tsx

@@ -39,7 +39,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
   extraData,
   actionsToggle,
   popperProps = {
-    position: 'right',
+    position: 'end',
     direction: 'down'
   },
   innerRef,

package/src/components/Table/Tr.tsx

@@ -5,7 +5,7 @@ import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inl
 import { css } from '@patternfly/react-styles';
 import { TableContext } from './Table';
 
-export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps {
+export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
   /** Content rendered inside the <tr> row */
   children?: React.ReactNode;
   /** Additional classes added to the <tr> row  */

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

@@ -27,14 +27,13 @@ export const LegacyTableMisc: React.FunctionComponent = () => {
     repo.lastCommit
   ]);
 
-  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row, ...props }) => {
+  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row }) => {
     const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true;
     const customStyle = {
       borderLeft: '3px solid var(--pf-v5-global--primary-color--100)'
     };
     return (
       <tr
-        {...props}
         ref={trRef as React.LegacyRef<HTMLTableRowElement>}
         className={css(className, isOddRow ? 'odd-row-class' : 'even-row-class', 'custom-static-class')}
         style={isOddRow ? customStyle : {}}

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

@@ -27,14 +27,10 @@ export const LegacyTableStripedCustomTr: React.FunctionComponent = () => {
     repo.lastCommit
   ]);
 
-  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row, ...props }) => {
+  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row }) => {
     const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true;
     return (
-      <tr
-        {...props}
-        ref={trRef as React.LegacyRef<HTMLTableRowElement>}
-        className={css(className, isOddRow && 'pf-m-striped')}
-      />
+      <tr ref={trRef as React.LegacyRef<HTMLTableRowElement>} className={css(className, isOddRow && 'pf-m-striped')} />
     );
   };
 

package/src/docs/demos/Table.md

@@ -47,10 +47,9 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { rows, columns } from './table-demos/sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 ## Demos
 
@@ -109,9 +108,10 @@ import {
   PaginationVariant,
   Text,
   TextContent,
+  TextVariants,
   MenuToggle
 } from '@patternfly/react-core';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+import { Table as TableDeprecated, TableHeader, TableBody, TableText } from '@patternfly/react-table/deprecated';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
@@ -855,7 +855,7 @@ import {
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { rows, columns } from '';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 class FilterTableDemo extends React.Component {
   constructor(props) {
@@ -1457,7 +1457,6 @@ import {
   Bullseye,
   Button,
   Card,
-  DashboardWrapper,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
@@ -1468,6 +1467,7 @@ import {
   PageSection
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const TableEmptyState: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -1521,7 +1521,6 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   Card,
-  DashboardWrapper,
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
@@ -1529,6 +1528,7 @@ import {
   PageSection,
   Spinner
 } from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const LoadingStateDemo: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -1570,7 +1570,6 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   Card,
-  DashboardWrapper,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
@@ -1579,6 +1578,8 @@ 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-core/src/demos/DashboardWrapper';
 
 export const ErrorStateDemo: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>

package/src/docs/demos/table-demos/BulkSelect.jsx

@@ -14,9 +14,8 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import { rows, columns } from './sampleData';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const BulkSelectTableDemo = () => {
   const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);

package/src/docs/demos/table-demos/ColumnManagement.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {
   Button,
+  Card,
   DataList,
   DataListCheck,
   DataListItem,
@@ -17,20 +18,19 @@ import {
   OverflowMenu,
   OverflowMenuGroup,
   OverflowMenuItem,
-  OptionsMenu,
-  OptionsMenuToggle,
+  PageSection,
   Pagination,
   PaginationVariant,
   Text,
-  TextContent
+  TextContent,
+  TextVariants
 } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper.js';
 import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils';
-
-import { rows, columns } from './sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const ColumnManagementAction = () => {
   const defaultColumns = columns;

package/src/docs/demos/table-demos/Compact.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   Button,
   Card,
+  Label,
   MenuToggle,
   MenuToggleElement,
   Pagination,
@@ -14,11 +15,10 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import { rows, columns } from './sampleData';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const CompactTable = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);

package/src/docs/demos/table-demos/CompoundExpansion.jsx

@@ -19,7 +19,7 @@ import {
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const CompoundExpandable = () => {

package/src/docs/demos/table-demos/ExpandCollapseAll.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status'];
 

package/src/docs/demos/table-demos/SortableResponsive.jsx

@@ -7,10 +7,19 @@ import {
   DropdownList,
   Flex,
   FlexItem,
+  Label,
   MenuToggle,
   MenuToggleElement,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuDropdownItem,
+  OverflowMenuGroup,
+  OverflowMenuItem,
   PageSection,
+  PageSectionVariants,
   Pagination,
+  Select,
   SelectOption,
   SelectList,
   SelectGroup,
@@ -29,10 +38,9 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-import { rows, columns } from './sampleData';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const ComposableTableSortable = () => {
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
@@ -89,7 +97,7 @@ export const ComposableTableSortable = () => {
     setPerPage(newPerPage);
   };
 
-  renderPagination = (variant) => (
+  const renderPagination = (variant) => (
     <Pagination
       isCompact
       itemCount={rows.length}

package/src/docs/demos/table-demos/StaticBottomPagination.jsx

@@ -15,11 +15,10 @@ import {
   Select,
   SelectOption
 } from '@patternfly/react-core';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import { rows, columns } from './sampleData';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const StaticBottomPagination = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);

package/src/docs/demos/table-demos/StickyFirstColumn.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
 import { Card, PageSection } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const StickyFirstColumn = () => {
   const facts = Array.from(

package/src/docs/demos/table-demos/StickyHeader.jsx

@@ -2,9 +2,8 @@ import React from 'react';
 
 import { Card, Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import { rows, columns } from '../examples/Data';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const StickyHeader: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {