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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.57",
+  "version": "6.0.0-alpha.58",
   "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.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.57",
+    "@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",
@@ -55,5 +55,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "b2e46fefe688b2809ccf36e1ca575867a0c82a78"
+  "gitHead": "085b43fa526d2b629825d72a19083f506379cd30"
 }

package/src/components/Table/EditableSelectInputCell.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import { Select, SelectOptionObject } from '@patternfly/react-core/dist/esm/deprecated/components/Select';
+import { Select, SelectList } from '@patternfly/react-core/dist/esm/components/Select';
+import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { EditableSelectInputProps } from './base/types';
@@ -15,7 +16,7 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
   /** Event handler which fires when user selects an option in this cell */
   onSelect: (
     event: React.MouseEvent | React.ChangeEvent,
-    newValue: string | SelectOptionObject,
+    newValue: any | any[],
     rowIndex: number,
     cellIndex: number,
     isPlaceholder?: boolean
@@ -25,11 +26,11 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
   /** Flag indicating the select input is disabled */
   isDisabled?: boolean;
   /** Current selected options to display as the read only value of the table cell */
-  selections?: string | SelectOptionObject | (string | SelectOptionObject)[];
+  selections?: any | any[];
   /** Flag indicating the select menu is open */
   isOpen?: boolean;
   /** Event handler which fires when the select toggle is toggled */
-  onToggle?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event, isExpanded: boolean) => void;
+  onToggle?: (event: React.MouseEvent | undefined) => void;
   /** Event handler which fires when the user clears the selections */
   clearSelection?: (event: React.MouseEvent, rowIndex: number, cellIndex: number) => void;
 }
@@ -48,10 +49,10 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
 }: IEditableSelectInputCell) => {
   const onSelectHandler = (
     event: React.MouseEvent | React.ChangeEvent,
-    newValue: string | SelectOptionObject,
-    isPlaceholder: boolean
+    newValue: any | any[]
+    //    isPlaceholder: boolean
   ) => {
-    onSelect(event, newValue, rowIndex, cellIndex, isPlaceholder);
+    onSelect(event, newValue, rowIndex, cellIndex);
   };
 
   const onClear = (event: React.MouseEvent) => {
@@ -64,10 +65,14 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
       onSelect={onSelectHandler}
       {...(clearSelection && { onClear })}
       isOpen={isOpen}
-      onToggle={onToggle}
-      selections={selections}
+      selected={selections}
+      toggle={(toggleRef: any) => (
+        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+          {isOpen ? 'Expanded' : 'Collapsed'}
+        </MenuToggle>
+      )}
     >
-      {options}
+      <SelectList>{options}</SelectList>
     </Select>
   );
 

package/src/components/Table/TableTypes.tsx

@@ -1,7 +1,6 @@
 import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from './base/types';
 import { SortByDirection } from './SortColumn';
 import { DropdownItemProps } from '@patternfly/react-core/dist/esm/components/Dropdown';
-import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
 import * as React from 'react';
 import { CustomActionsToggleProps } from './ActionsColumn';
 import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
@@ -102,8 +101,8 @@ export interface IColumn {
     rowLabeledBy?: string;
     expandId?: string;
     contentId?: string;
-    dropdownPosition?: DropdownPosition;
-    dropdownDirection?: DropdownDirection;
+    dropdownPosition?: 'right' | 'left';
+    dropdownDirection?: 'up' | 'down';
     menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
     actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
     actionsPopperProps?: any;

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

@@ -8,8 +8,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 { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
-import { SelectOptionObject, SelectProps } from '@patternfly/react-core/dist/esm/deprecated/components/Select';
+import { SelectProps } from '@patternfly/react-core/dist/esm/components/Select';
 import { Table } from '../Table';
 import { Thead } from '../Thead';
 import { Tbody } from '../Tbody';
@@ -61,9 +60,9 @@ export interface TdActionsType {
   /** Whether the actions are disabled */
   isDisabled?: boolean;
   /** Actions dropdown position */
-  dropdownPosition?: DropdownPosition;
+  dropdownPosition?: 'right' | 'left';
   /** Actions dropdown direction */
-  dropdownDirection?: DropdownDirection;
+  dropdownDirection?: 'up' | 'down';
   /** The container to append the dropdown menu to. Defaults to 'inline'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.
    * Some examples:
@@ -286,11 +285,11 @@ export interface EditableSelectInputProps {
   value: string | string[];
   /** Flag controlling isOpen state of select */
   isSelectOpen: boolean;
-  /** String or SelectOptionObject, or array of strings or SelectOptionObjects representing current selections */
-  selected: string | SelectOptionObject | (string | SelectOptionObject)[];
+  /** Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption */
+  selected: any | any[];
   /** Array of react elements to display in the select menu */
   options: React.ReactElement[];
-  /** Props to be passed down to the Select component */
+  /** Props to be passed down to the select component */
   editableSelectProps?: SelectProps;
   /** arbitrary data to pass to the internal select component in the editable select input cell */
   [key: string]: any;

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

@@ -18,7 +18,6 @@ import {
   textCenter,
   cellActions
 } from './';
-import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
 import {
   IAction,
   IActions,
@@ -58,8 +57,8 @@ const testCellActions = async ({
     rowData,
     column: {
       extraParams: {
-        dropdownPosition: DropdownPosition.right,
-        dropdownDirection: DropdownDirection.down
+        dropdownPosition: 'right',
+        dropdownDirection: 'down'
       }
     }
   });

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core';
-import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
 import { Provider } from '../../../components/Table/base/provider';
@@ -143,8 +142,8 @@ class Table extends React.Component<TableProps, {}> {
     rowLabeledBy: 'simple-node',
     expandId: 'expandable-toggle',
     contentId: 'expanded-content',
-    dropdownPosition: DropdownPosition.right,
-    dropdownDirection: DropdownDirection.down,
+    dropdownPosition: 'right',
+    dropdownDirection: 'down',
     actionsMenuAppendTo: 'inline',
     header: undefined as React.ReactNode,
     caption: undefined as React.ReactNode,