@patternfly/react-table 6.0.0-alpha.1 → 6.0.0-alpha.100

package/src/deprecated/components/Table/base/header-row.tsx

@@ -46,7 +46,7 @@ export const HeaderRow: React.FunctionComponent<HeaderRowProps> = ({
 
       if (!transformedProps) {
         // tslint:disable-next-line:no-console
-        console.warn('Table.Header - Failed to receive a transformed result'); // eslint-disable-line max-len, no-console
+        console.warn('Table.Header - Failed to receive a transformed result'); // eslint-disable-line no-console
       }
 
       let cellNode;

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

@@ -5,6 +5,7 @@ import { compoundExpand } from '@patternfly/react-table';
 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 spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -117,7 +118,7 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
       cells: [
         {
           title: (
-            <div className="pf-v5-u-m-md" id={`compound-expansion-table-${repo.name}-1`}>
+            <div className={spacing.mMd} id={`compound-expansion-table-${repo.name}-1`}>
               Expanded content for {repo.name}: Branches goes here!
             </div>
           ),
@@ -132,7 +133,7 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
       cells: [
         {
           title: (
-            <div className="pf-v5-u-m-md" id={`compound-expansion-table-${repo.name}-2`}>
+            <div className={spacing.mMd} id={`compound-expansion-table-${repo.name}-2`}>
               Expanded content for {repo.name}: Pull requests goes here!
             </div>
           ),
@@ -147,7 +148,7 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
       cells: [
         {
           title: (
-            <div className="pf-v5-u-m-md" id={`compound-expansion-table-${repo.name}-3`}>
+            <div className={spacing.mMd} id={`compound-expansion-table-${repo.name}-3`}>
               Expanded content for {repo.name}: Workspaces goes here!
             </div>
           ),

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

@@ -4,10 +4,8 @@ import {
   Bullseye,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
   Button,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions
 } from '@patternfly/react-core';
@@ -26,12 +24,12 @@ export const LegacyTableEmptyState: React.FunctionComponent = () => {
           props: { colSpan: 8 },
           title: (
             <Bullseye>
-              <EmptyState variant={EmptyStateVariant.sm}>
-                <EmptyStateHeader
-                  titleText="No results found"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                  headingLevel="h2"
-                />
+              <EmptyState
+                headingLevel="h2"
+                titleText="No results found"
+                icon={SearchIcon}
+                variant={EmptyStateVariant.sm}
+              >
                 <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>
                 <EmptyStateFooter>
                   <EmptyStateActions>

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

@@ -1,6 +1,8 @@
 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_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default';
 
 interface Repository {
   name: string;
@@ -27,14 +29,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)'
+      borderLeft: `3px solid ${global_color_brand_default.var}`
     };
     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/LegacyTableSelectable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { headerCol } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -96,7 +97,7 @@ export const LegacyTableSelectable: React.FunctionComponent = () => {
     <div>
       <Checkbox
         label="Can select all"
-        className="pf-v5-u-mb-lg"
+        className={spacing.mbLg}
         isChecked={canSelectAll}
         onChange={(_event, checked) => setCanSelectAll(checked)}
         aria-label="toggle select all checkbox"

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

@@ -137,9 +137,8 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
                   isExpanded={isSortDropdownOpen}
                   variant="plain"
                   aria-label="Sort columns"
-                >
-                  <SortAmountDownIcon />
-                </MenuToggle>
+                  icon={<SortAmountDownIcon />}
+                />
               )}
             >
               <NewSelectGroup label="Sort column">

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/deprecated/components/Table/examples/Table.md

@@ -21,17 +21,17 @@ import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
-import { SelectOption as SelectOptionDeprecated } from '@patternfly/react-core/deprecated';
-import { 
-  Select as NewSelect,
-  SelectGroup as NewSelectGroup,
-  SelectList  as NewSelectList,
-  SelectOption as NewSelectOption,
+import {
+Select as NewSelect,
+SelectGroup as NewSelectGroup,
+SelectList as NewSelectList,
+SelectOption as NewSelectOption,
 } from '@patternfly/react-core/dist/esm/components/Select';
 
-
 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 global_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default';
 
 ## Table Columns
 
@@ -46,7 +46,7 @@ cells: (ICell | string)[];
 ```
 interface ICell {
   /* cell contents */
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   /** transformations applied to the header cell */
   transforms?: ITransform[];
   /** transformations applied to the cells within the column's body */
@@ -109,7 +109,7 @@ interface IRow extends RowType {
   noPadding?: boolean;
 }
 interface IRowCell {
-  title?: string | React.ReactNode | RowCellContent;
+  title?: React.ReactNode | RowCellContent;
   props?: any;
   formatters?: IFormatter[];
 }
@@ -120,6 +120,7 @@ interface IRowCell {
 ### Basic
 
 ```ts file="LegacyTableBasic.tsx"
+
 ```
 
 ### Custom row wrapper
@@ -150,6 +151,7 @@ interface RowWrapperProps {
 ```
 
 ```ts file="LegacyTableMisc.tsx"
+
 ```
 
 ### Sortable & wrapping column headers
@@ -167,6 +169,7 @@ Note: If you want to add a tooltip/popover to a sortable header, in the `transfo
 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. The example below showcases how sorting may have a custom control display that can be used for small screen sizes.
 
 ```ts file="LegacyTableSortable.tsx"
+
 ```
 
 ### Sortable - custom control
@@ -174,6 +177,7 @@ The built in display for sorting is not fully responsive, as the column headers
 Sorting a table may also be controlled with a toolbar. This toolbar item may also be hidden at large screen sizes and only displayed when the screen size is small to support responsive tables.
 
 ```ts file="LegacyTableSortableCustom.tsx"
+
 ```
 
 ### Selectable with checkbox
@@ -194,6 +198,7 @@ of using `td` elements, the cells in that column use `th` elements.
 checking checkboxes will check intermediate rows' checkboxes.
 
 ```ts file="LegacyTableSelectable.tsx"
+
 ```
 
 ### Selectable radio input
@@ -204,6 +209,7 @@ To enable row radio selection, set the `onSelect` callback prop on the Table, an
 To disable selection for a row, set `disableSelection: true` on the row definition.
 
 ```ts file="LegacyTableSelectableRadio.tsx"
+
 ```
 
 ### Clickable rows, selectable rows, and header cell tooltips/popovers
@@ -211,6 +217,7 @@ To disable selection for a row, set `disableSelection: true` on the row definiti
 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="LegacyTableClickable.tsx"
+
 ```
 
 ### Actions and first cell in body rows as th
@@ -220,6 +227,7 @@ To use actions you can either specify an array of actions and pass that into the
 If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `Table` can be passed a `actionsMenuAppendTo` prop to adjust where the actions menu is appended.
 
 ```ts file="LegacyTableActions.tsx"
+
 ```
 
 ### Expandable
@@ -230,6 +238,7 @@ The parent row can have an `isOpen` field for managing the expanded state of the
 Also, pass an `onCollapse` event handler via the prop on the Table
 
 ```ts file="LegacyTableExpandable.tsx"
+
 ```
 
 ### Compound expandable
@@ -246,26 +255,31 @@ To build a compound expandable table:
 4. An `onExpand` event handler prop should be passed to the Table.
 
 ```ts file="LegacyTableCompoundExpandable.tsx"
+
 ```
 
 ### With width and breakpoint visibility modifiers
 
 ```ts file="LegacyTableCellWidth.tsx"
+
 ```
 
 ### Controlling text
 
 ```ts file="LegacyTableControllingText.tsx"
+
 ```
 
 ### Modifiers with table text
 
 ```ts file="LegacyTableTextModifiers.tsx"
+
 ```
 
 ### Empty state
 
 ```ts file="LegacyTableEmptyState.tsx"
+
 ```
 
 ### Editable rows
@@ -301,7 +315,6 @@ Example:
 
 ```js
 import React from 'react';
-import { SelectOption as SelectOptionDeprecated } from '@patternfly/react-core/deprecated';
 import {
   Table,
   TableHeader,
@@ -311,7 +324,8 @@ import {
   validateCellEdits,
   applyCellEdits,
   EditableTextCell,
-  EditableSelectInputCell
+  EditableSelectInputCell,
+  SelectOption
 } from '@patternfly/react-table';
 
 class EditableRowsTable extends React.Component {
@@ -328,13 +342,13 @@ class EditableRowsTable extends React.Component {
       ],
       rows: [
         {
-          rowEditBtnAriaLabel: idx => `Edit row ${idx}`,
-          rowSaveBtnAriaLabel: idx => `Save edits for row ${idx}`,
-          rowCancelBtnAriaLabel: idx => `Cancel edits for row ${idx}`,
+          rowEditBtnAriaLabel: (idx) => `Edit row ${idx}`,
+          rowSaveBtnAriaLabel: (idx) => `Save edits for row ${idx}`,
+          rowCancelBtnAriaLabel: (idx) => `Cancel edits for row ${idx}`,
           rowEditValidationRules: [
             {
               name: 'required',
-              validator: value => value.trim() !== '',
+              validator: (value) => value.trim() !== '',
               errorText: 'This field is required'
             }
           ],
@@ -398,12 +412,9 @@ class EditableRowsTable extends React.Component {
                   onSelect={this.onSelect}
                   isOpen={props.isSelectOpen}
                   options={props.options.map((option, index) => (
-                    <SelectOptionDeprecated
-                      key={index}
-                      value={option.value}
-                      id={'uniqueIdRow1Cell4Option' + index}
-                      isPlaceholder={option.isPlaceholder}
-                    />
+                    <SelectOption key={index} value={option.value} id={'uniqueIdRow1Cell4Option' + index}>
+                      {option.value}
+                    </SelectOption>
                   ))}
                   onToggle={(event, isOpen) => {
                     this.onToggle(isOpen, rowIndex, cellIndex);
@@ -417,7 +428,6 @@ class EditableRowsTable extends React.Component {
                 isSelectOpen: props.isSelectOpen || false,
                 selected: props.selected || ['Option 1'],
                 options: [
-                  { value: 'Placeholder...', isPlaceholder: true },
                   { value: 'Option 1' },
                   { value: 'Option 2' },
                   { value: 'Option 3' },
@@ -495,12 +505,9 @@ class EditableRowsTable extends React.Component {
                   isOpen={props.isSelectOpen}
                   options={props.options.map((option, index) => {
                     return (
-                      <SelectOptionDeprecated
-                        key={index}
-                        value={option.value}
-                        id={'uniqueIdRow2Cell4Option' + index}
-                        isPlaceholder={option.isPlaceholder}
-                      />
+                      <SelectOption key={index} value={option.value} id={'uniqueIdRow2Cell4Option' + index}>
+                        {option.value}
+                      </SelectOption>
                     );
                   })}
                   onToggle={(event, isOpen) => {
@@ -535,22 +542,22 @@ class EditableRowsTable extends React.Component {
           rowEditValidationRules: [
             {
               name: 'required',
-              validator: value => value.trim() !== '',
+              validator: (value) => value.trim() !== '',
               errorText: 'This field is required'
             },
             {
               name: 'notFoo',
-              validator: value => value.trim().toLowerCase() !== 'foo',
+              validator: (value) => value.trim().toLowerCase() !== 'foo',
               errorText: 'Value cannot be "foo"'
             },
             {
               name: 'minLength',
-              validator: value => value.trim().length >= 7,
+              validator: (value) => value.trim().length >= 7,
               errorText: 'Value must be at least 7 characters'
             },
             {
               name: 'notXyz',
-              validator: value => value.trim().toLowerCase() !== 'xyz',
+              validator: (value) => value.trim().toLowerCase() !== 'xyz',
               errorText: 'Value cannot be xyz'
             }
           ],
@@ -615,12 +622,9 @@ class EditableRowsTable extends React.Component {
                   clearSelection={this.clearSelection}
                   isOpen={props.isSelectOpen}
                   options={props.options.map((option, index) => (
-                    <SelectOptionDeprecated
-                      key={index}
-                      value={option.value}
-                      id={'uniqueIdRow3Cell4Option' + index}
-                      isPlaceholder={option.isPlaceholder}
-                    />
+                    <SelectOption key={index} value={option.value} id={'uniqueIdRow3Cell4Option' + index}>
+                      {option.value}
+                    </SelectOption>
                   ))}
                   onToggle={(event, isOpen) => {
                     this.onToggle(isOpen, rowIndex, cellIndex);
@@ -701,7 +705,7 @@ class EditableRowsTable extends React.Component {
             if (!newSelected.includes(newValue)) {
               newSelected.push(newValue);
             } else {
-              newSelected = newSelected.filter(el => el !== newValue);
+              newSelected = newSelected.filter((el) => el !== newValue);
             }
             newSelectOpen = true;
             break;
@@ -732,7 +736,7 @@ class EditableRowsTable extends React.Component {
     };
 
     this.onToggle = (isOpen, rowIndex, cellIndex) => {
-      console.log("isOpen", isOpen);
+      console.log('isOpen', isOpen);
       let newRows = Array.from(this.state.rows);
       newRows[rowIndex].cells[cellIndex].props.isSelectOpen = isOpen;
       this.setState({
@@ -772,6 +776,7 @@ When you also pass a sort callback through the `onSort` prop, favorites sorting
 If you want to exclude favorites from sorting, set `canSortFavorites={false}` on the Table.
 
 ```ts file="LegacyTableFavoritable.tsx"
+
 ```
 
 ### Tree table
@@ -801,6 +806,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="LegacyTableTree.tsx"
+
 ```
 
 ### Striped
@@ -808,6 +814,7 @@ the voice over technologies will recognize the flat table structure as a tree.
 To apply striping to a basic table, add the `isStriped` property to `Table`.
 
 ```ts file="LegacyTableStriped.tsx"
+
 ```
 
 ### Striped expandable
@@ -815,6 +822,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="LegacyTableStripedExpandable.tsx"
+
 ```
 
 ### Striped custom tr
@@ -822,4 +830,5 @@ To apply striping to an expandable table, add the `isStriped` and `isExpandable`
 To manually control striping, use a custom row wrapper that applies the `pf-m-striped` css class for each desired row.
 
 ```ts file="LegacyTableStripedCustomTr.tsx"
+
 ```

package/rollup.config.js

@@ -1,7 +0,0 @@
-const { name } = require('./package.json');
-const baseConfig = require('../rollup.base');
-
-module.exports = baseConfig({
-  packageName: name.replace('@patternfly/', ''),
-  name: 'PatternFlyTable'
-});