@patternfly/react-table 6.0.0-prerelease.14 → 6.0.0-prerelease.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-prerelease.14",
+  "version": "6.0.0-prerelease.16",
   "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,7 +40,7 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-prerelease.14",
+    "@patternfly/react-core": "^6.0.0-prerelease.15",
     "@patternfly/react-icons": "^6.0.0-prerelease.4",
     "@patternfly/react-styles": "^6.0.0-prerelease.3",
     "@patternfly/react-tokens": "^6.0.0-prerelease.4",
@@ -51,5 +51,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "9a679a4df32c7246c085c895acb3c4ab1c28472f"
+  "gitHead": "d29e2351921da25429652d253e22eec26dc64ddf"
 }

package/src/components/Table/EditableSelectInputCell.tsx

@@ -25,6 +25,8 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
   options?: React.ReactElement[];
   /** Flag indicating the select input is disabled */
   isDisabled?: boolean;
+  /** Flag indicating the toggle gets placeholder styles **/
+  isPlaceholder?: boolean;
   /** Current selected options to display as the read only value of the table cell */
   selections?: any | any[];
   /** Flag indicating the select menu is open */
@@ -42,17 +44,14 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
   onSelect = () => {},
   clearSelection,
   isOpen = false,
+  isPlaceholder = false,
   onToggle = () => {},
   selections = [''],
   options = [] as React.ReactElement[],
   props
 }: IEditableSelectInputCell) => {
-  const onSelectHandler = (
-    event: React.MouseEvent | React.ChangeEvent,
-    newValue: any | any[]
-    //    isPlaceholder: boolean
-  ) => {
-    onSelect(event, newValue, rowIndex, cellIndex);
+  const onSelectHandler = (event: React.MouseEvent | React.ChangeEvent, newValue: any | any[]) => {
+    onSelect(event, newValue, rowIndex, cellIndex, isPlaceholder);
   };
 
   const onClear = (event: React.MouseEvent) => {
@@ -61,16 +60,16 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
 
   const select = (
     <Select
-      {...props.editableSelectProps}
       onSelect={onSelectHandler}
       {...(clearSelection && { onClear })}
       isOpen={isOpen}
       selected={selections}
       toggle={(toggleRef: any) => (
-        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} isPlaceholder={isPlaceholder}>
           {isOpen ? 'Expanded' : 'Collapsed'}
         </MenuToggle>
       )}
+      {...props.editableSelectProps}
     >
       <SelectList>{options}</SelectList>
     </Select>

package/src/components/Table/SortColumn.tsx

@@ -2,10 +2,13 @@ import * as React from 'react';
 import LongArrowAltUpIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-up-icon';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import ArrowsAltVIcon from '@patternfly/react-icons/dist/esm/icons/arrows-alt-v-icon';
+import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { TableText } from './TableText';
 import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
+import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
+import { FavoriteButtonProps } from './base/types';
 
 export enum SortByDirection {
   asc = 'asc',
@@ -21,6 +24,7 @@ export interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   tooltip?: React.ReactNode;
   tooltipProps?: Omit<TooltipProps, 'content'>;
   tooltipHasDefaultBehavior?: boolean;
+  favoriteButtonProps?: FavoriteButtonProps;
 }
 
 export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
@@ -33,6 +37,7 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   tooltip,
   tooltipProps,
   tooltipHasDefaultBehavior,
+  favoriteButtonProps,
   ...props
 }: SortColumnProps) => {
   let SortedByIcon;
@@ -42,6 +47,29 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   } else {
     SortedByIcon = ArrowsAltVIcon;
   }
+
+  if (favoriteButtonProps) {
+    return (
+      <ActionList isIconList>
+        <ActionListItem>
+          <Button variant="plain" icon={<StarIcon />} {...favoriteButtonProps} />
+        </ActionListItem>
+        <ActionListItem>
+          <Button
+            variant="plain"
+            icon={
+              <span className={css(styles.tableSortIndicator)}>
+                <SortedByIcon />
+              </span>
+            }
+            onClick={(event) => onSort && onSort(event)}
+            {...props}
+          />
+        </ActionListItem>
+      </ActionList>
+    );
+  }
+
   return (
     <button
       {...props}

package/src/components/Table/TableTypes.tsx

@@ -109,6 +109,7 @@ export interface IColumn {
     allRowsExpanded?: boolean;
     isHeaderSelectDisabled?: boolean;
     onFavorite?: OnFavorite;
+    favoriteButtonProps?: ButtonProps;
   };
 }
 

package/src/components/Table/Th.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { info, sortable, sortableFavorites, selectable, collapsible, cellWidth, Visibility, classNames } from './utils';
 import { ThInfoType, ThSelectType, ThExpandType, ThSortType, formatterValueType } from './base/types';
 import { mergeProps } from './base/merge-props';
@@ -113,15 +114,18 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     }
     onMouseEnterProp(event);
   };
+
   let sortParams = null;
   if (sort) {
     if (sort.isFavorites) {
       sortParams = sortableFavorites({
-        onSort: sort?.onSort,
+        onSort: sort.onSort,
         columnIndex: sort.columnIndex,
         sortBy: sort.sortBy,
         tooltip: tooltip as string,
-        tooltipProps
+        tooltipProps,
+        ariaLabel: sort['aria-label'],
+        favoriteButtonProps: sort.favoriteButtonProps
       })();
     } else {
       sortParams = sortable(children as IFormatterValueType, {
@@ -137,6 +141,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       });
     }
   }
+
   const selectParams = select
     ? selectable(children as IFormatterValueType, {
         rowData: {
@@ -217,6 +222,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
         hasRightBorder && scrollStyles.modifiers.borderRight,
         hasLeftBorder && scrollStyles.modifiers.borderLeft,
         modifier && styles.modifiers[modifier as 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap'],
+        sort?.favoriteButtonProps?.favorited && styles.modifiers.favorited,
         mergedClassName
       )}
       {...mergedProps}
@@ -230,7 +236,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
         } as React.CSSProperties
       })}
     >
-      {transformedChildren || (screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>)}
+      {transformedChildren ||
+        (screenReaderText && <span className={accessibilityStyles.screenReader}>{screenReaderText}</span>)}
     </MergedComponent>
   );
 

package/src/components/Table/base/types.tsx

@@ -6,9 +6,7 @@
  */
 
 import * as React from 'react';
-import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
-import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
-import { SelectProps } from '@patternfly/react-core/dist/esm/components/Select';
+import { ButtonProps, PopoverProps, SelectProps, TooltipProps } from '@patternfly/react-core';
 import { Table } from '../Table';
 import { Thead } from '../Thead';
 import { Tbody } from '../Tbody';
@@ -156,6 +154,11 @@ export interface ThInfoType {
   className?: string;
 }
 
+export interface FavoriteButtonProps extends ButtonProps {
+  /** Flag if the button is favorited. */
+  favorited?: boolean;
+}
+
 export interface ThSortType {
   /** Wraps the content in a button and adds a sort icon - Click callback on the sortable cell */
   onSort?: OnSort;
@@ -163,8 +166,12 @@ export interface ThSortType {
   sortBy: ISortBy;
   /** The column index */
   columnIndex: number;
+  /** Adds accessible text to the sort button. */
+  'aria-label'?: string;
   /** True to make this a favoritable sorting cell */
   isFavorites?: boolean;
+  /** Props for the favorite button (only for favoritable cell). */
+  favoriteButtonProps?: FavoriteButtonProps;
 }
 
 export interface ThSelectType {

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

@@ -1,6 +1,6 @@
 ---
 id: Table
-cssPrefix: pf-c-table
+cssPrefix: pf-v6-c-table
 section: components
 propComponents:
   [

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

@@ -28,10 +28,10 @@ export const TableFavoritable: React.FunctionComponent = () => {
   // Index of the currently sorted column
   // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
   // as the identifier of the sorted column. See the "Compound expandable" example.
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number>();
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>();
 
   // Favorite state is similar to selection state, see Selectable with checkbox.
   const [favoriteRepoNames, setFavoriteRepoNames] = React.useState<string[]>([]);
@@ -42,6 +42,9 @@ export const TableFavoritable: React.FunctionComponent = () => {
     });
   const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name);
 
+  // State of the header cell to favorite / unfavorite all rows
+  const [headerFavorited, setHeaderFavorited] = React.useState(false);
+
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // In this example we only deal with booleans here because we only sort on the favorites column.
   // For more complex sorting, see Sortable.
@@ -55,7 +58,7 @@ export const TableFavoritable: React.FunctionComponent = () => {
   // Note that we perform the sort as part of the component's render logic and not in onSort.
   // We shouldn't store the list of data in state because we don't want to have to sync that with props.
   let sortedRepositories = repositories;
-  if (activeSortIndex !== null) {
+  if (activeSortIndex !== undefined) {
     sortedRepositories = repositories.sort((a, b) => {
       const aValue = getSortableRowValues(a)[activeSortIndex];
       const bValue = getSortableRowValues(b)[activeSortIndex];
@@ -80,7 +83,16 @@ export const TableFavoritable: React.FunctionComponent = () => {
       setActiveSortIndex(index);
       setActiveSortDirection(direction);
     },
-    columnIndex
+    'aria-label': 'Sort favorites',
+    columnIndex,
+    favoriteButtonProps: {
+      favorited: headerFavorited,
+      onClick: (_event) => {
+        repositories.forEach((repo) => setRepoFavorited(repo, !headerFavorited));
+        setHeaderFavorited(!headerFavorited);
+      },
+      'aria-label': headerFavorited ? 'Unfavorite all' : 'Favorite all'
+    }
   });
 
   return (
@@ -101,7 +113,20 @@ export const TableFavoritable: React.FunctionComponent = () => {
             <Td
               favorites={{
                 isFavorited: isRepoFavorited(repo),
-                onFavorite: (_event, isFavoriting) => setRepoFavorited(repo, isFavoriting),
+                onFavorite: (_event, isFavoriting) => {
+                  setRepoFavorited(repo, isFavoriting);
+
+                  if (
+                    isFavoriting &&
+                    repositories.filter((r) => r !== repo).every((r) => favoriteRepoNames.includes(r.name))
+                  ) {
+                    setHeaderFavorited(true);
+                  }
+
+                  if (!isFavoriting && favoriteRepoNames.length === 1 && favoriteRepoNames.includes(repo.name)) {
+                    setHeaderFavorited(false);
+                  }
+                },
                 rowIndex
               }}
             />

package/src/components/Table/utils/decorators/sortable.tsx

@@ -8,12 +8,13 @@ import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 export const sortableFavorites = (sort: any) => () =>
   sortable(<StarIcon aria-hidden />, {
     columnIndex: sort.columnIndex,
-    className: styles.modifiers.favorite,
-    ariaLabel: 'Sort favorites',
+    className: styles.tableFavorite,
+    ariaLabel: sort.ariaLabel ?? 'Sort favorites',
     column: {
       extraParams: {
         sortBy: sort.sortBy,
-        onSort: sort?.onSort
+        onSort: sort.onSort,
+        favoriteButtonProps: sort.favoriteButtonProps
       }
     },
     tooltip: sort.tooltip,
@@ -26,7 +27,7 @@ export const sortable: ITransform = (
   { columnIndex, column, property, className, ariaLabel, tooltip, tooltipProps, tooltipHasDefaultBehavior }: IExtra
 ) => {
   const {
-    extraParams: { sortBy, onSort }
+    extraParams: { sortBy, onSort, favoriteButtonProps }
   } = column;
 
   const extraData = {
@@ -62,6 +63,7 @@ export const sortable: ITransform = (
         tooltip={tooltip}
         tooltipProps={tooltipProps}
         tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
+        favoriteButtonProps={favoriteButtonProps}
       >
         {label as React.ReactNode}
       </SortColumn>

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

@@ -325,9 +325,10 @@ import {
   applyCellEdits,
   EditableTextCell,
   EditableSelectInputCell,
-  SelectOption
 } from '@patternfly/react-table';
 
+import { SelectOption as NewSelectOption} from '@patternfly/react-core/dist/esm/components/Select';
+
 class EditableRowsTable extends React.Component {
   constructor(props) {
     super(props);
@@ -412,12 +413,12 @@ class EditableRowsTable extends React.Component {
                   onSelect={this.onSelect}
                   isOpen={props.isSelectOpen}
                   options={props.options.map((option, index) => (
-                    <SelectOption key={index} value={option.value} id={'uniqueIdRow1Cell4Option' + index}>
+                    <NewSelectOption key={index} value={option.value} id={'uniqueIdRow1Cell4Option' + index}>
                       {option.value}
-                    </SelectOption>
+                    </NewSelectOption>
                   ))}
-                  onToggle={(event, isOpen) => {
-                    this.onToggle(isOpen, rowIndex, cellIndex);
+                  onToggle={(event) => {
+                    this.onToggle(props.isSelectOpen, rowIndex, cellIndex);
                   }}
                   selections={props.selected}
                 />
@@ -435,8 +436,8 @@ class EditableRowsTable extends React.Component {
                   { value: 'Option 5' }
                 ],
                 editableSelectProps: {
-                  variant: 'single',
-                  'aria-label': 'Row 1 cell 4 content'
+                  'aria-label': 'Row 1 cell 4 content',
+                  onOpenChange: (isOpen: boolean) => this.onOpenChange(isOpen, 0, 3)
                 }
               }
             }
@@ -505,13 +506,13 @@ class EditableRowsTable extends React.Component {
                   isOpen={props.isSelectOpen}
                   options={props.options.map((option, index) => {
                     return (
-                      <SelectOption key={index} value={option.value} id={'uniqueIdRow2Cell4Option' + index}>
+                      <NewSelectOption key={index} value={option.value} id={'uniqueIdRow2Cell4Option' + index}>
                         {option.value}
-                      </SelectOption>
+                      </NewSelectOption>
                     );
                   })}
-                  onToggle={(event, isOpen) => {
-                    this.onToggle(isOpen, rowIndex, cellIndex);
+                  onToggle={(event) => {
+                    this.onToggle(props.isSelectOpen, rowIndex, cellIndex);
                   }}
                   selections={props.selected}
                 />
@@ -521,8 +522,9 @@ class EditableRowsTable extends React.Component {
                 name: 'uniqueIdRow2Cell4',
                 isSelectOpen: props.isSelectOpen || false,
                 selected: props.selected || [],
+                isPlaceholder: true,
                 options: [
-                  { value: 'Placeholder...', isPlaceholder: true },
+                   { value: 'Placeholder...', isPlaceholder: true},
                   { value: 'Option 1' },
                   { value: 'Option 2' },
                   { value: 'Option 3' },
@@ -530,9 +532,10 @@ class EditableRowsTable extends React.Component {
                   { value: 'Option 5' }
                 ],
                 editableSelectProps: {
-                  variant: 'typeaheadmulti',
                   'aria-label': 'Row 2 cell 4 content',
-                  toggleId: 'editable-toggle'
+                  toggleId: 'editable-toggle',
+                  onOpenChange: (isOpen: boolean) => this.onOpenChange(isOpen, 1, 3)
+
                 }
               }
             }
@@ -622,12 +625,12 @@ class EditableRowsTable extends React.Component {
                   clearSelection={this.clearSelection}
                   isOpen={props.isSelectOpen}
                   options={props.options.map((option, index) => (
-                    <SelectOption key={index} value={option.value} id={'uniqueIdRow3Cell4Option' + index}>
+                    <NewSelectOption key={index} value={option.value} id={'uniqueIdRow3Cell4Option' + index}>
                       {option.value}
-                    </SelectOption>
+                    </NewSelectOption>
                   ))}
-                  onToggle={(event, isOpen) => {
-                    this.onToggle(isOpen, rowIndex, cellIndex);
+                  onToggle={(event) => {
+                    this.onToggle(props.isSelectOpen, rowIndex, cellIndex);
                   }}
                   selections={props.selected}
                 />
@@ -637,8 +640,9 @@ class EditableRowsTable extends React.Component {
                 name: 'uniqueIdRow3Cell4',
                 isSelectOpen: props.isSelectOpen || false,
                 selected: props.selected || ['Option 3'],
+                isPlaceholder: false,
                 options: [
-                  { value: 'Placeholder...', isPlaceholder: true },
+                  { value: 'Placeholder...', isPlaceholder: true},
                   { value: 'Option 1' },
                   { value: 'Option 2' },
                   { value: 'Option 3' },
@@ -646,8 +650,9 @@ class EditableRowsTable extends React.Component {
                   { value: 'Option 5' }
                 ],
                 editableSelectProps: {
-                  variant: 'checkbox',
-                  'aria-label': 'Row 3 cell 4 content'
+                  'aria-label': 'Row 3 cell 4 content',
+                  onOpenChange: (isOpen: boolean) => this.onOpenChange(isOpen, 2, 3)
+
                 }
               }
             }
@@ -735,10 +740,19 @@ class EditableRowsTable extends React.Component {
       });
     };
 
+    // set open state if component closes menu on click (e.g. when you click outside of the menu)
+    this.onOpenChange = (isOpen: boolean, rowIndex: string | number | undefined, cellIndex: string | number | undefined) => {
+      const newRows = Array.from(this.state.rows);
+      newRows[rowIndex].cells[cellIndex].props.isSelectOpen = isOpen;
+      this.setState({
+        rows: newRows
+      });
+    }
+
     this.onToggle = (isOpen, rowIndex, cellIndex) => {
       console.log('isOpen', isOpen);
       let newRows = Array.from(this.state.rows);
-      newRows[rowIndex].cells[cellIndex].props.isSelectOpen = isOpen;
+      newRows[rowIndex].cells[cellIndex].props.isSelectOpen = !newRows[rowIndex].cells[cellIndex].props.isSelectOpen;
       this.setState({
         rows: newRows
       });