@patternfly/react-table 6.0.0-alpha.7 → 6.0.0-alpha.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.7",
+  "version": "6.0.0-alpha.70",
   "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,20 +40,16 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.7",
-    "@patternfly/react-icons": "^6.0.0-alpha.5",
-    "@patternfly/react-styles": "^6.0.0-alpha.5",
-    "@patternfly/react-tokens": "^6.0.0-alpha.5",
+    "@patternfly/react-core": "^6.0.0-alpha.69",
+    "@patternfly/react-icons": "^6.0.0-alpha.24",
+    "@patternfly/react-styles": "^6.0.0-alpha.24",
+    "@patternfly/react-tokens": "^6.0.0-alpha.24",
     "lodash": "^4.17.19",
-    "tslib": "^2.5.0"
-  },
-  "devDependencies": {
-    "rimraf": "^2.6.2",
-    "typescript": "^4.7.4"
+    "tslib": "^2.6.2"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e9117354af65f496fe3166e6faea7b8721f08b62"
+  "gitHead": "c9886cacdd291d0ead56bd43ff15a49880a7eb3a"
 }

package/rollup.config.mjs

@@ -0,0 +1,8 @@
+// @ts-check
+import baseConfig from '../rollup.base.mjs';
+import pkg from './package.json' with { type: 'json' };
+
+export default baseConfig({
+  packageName: pkg.name.replace('@patternfly/', ''),
+  name: 'PatternFlyTable'
+});

package/single-packages.config.json

@@ -1,7 +1,4 @@
 {
-    "packageName": "@patternfly/react-table",
-    "exclude": [
-        "dist/esm/deprecated/index.js",
-        "dist/esm/next/index.js"
-    ]
-}
+  "packageName": "@patternfly/react-table",
+  "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"]
+}

package/src/components/Table/ActionsColumn.tsx

@@ -30,6 +30,8 @@ export interface ActionsColumnProps extends Omit<React.HTMLProps<HTMLElement>, '
   innerRef?: React.Ref<any>;
   /** Ref to forward to the first item in the popup menu */
   firstActionItemRef?: React.Ref<HTMLButtonElement>;
+  /** Flag indicating that the dropdown's onOpenChange callback should not be called. */
+  isOnOpenChangeDisabled?: boolean;
 }
 
 const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
@@ -44,6 +46,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
   },
   innerRef,
   firstActionItemRef,
+  isOnOpenChangeDisabled = false,
   ...props
 }: ActionsColumnProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -91,7 +94,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
 
       <Dropdown
         isOpen={isOpen}
-        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+        onOpenChange={!isOnOpenChangeDisabled ? (isOpen: boolean) => setIsOpen(isOpen) : undefined}
         toggle={(toggleRef: any) =>
           actionsToggle ? (
             actionsToggle({ onToggle, isOpen, isDisabled, toggleRef })
@@ -103,9 +106,8 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               isExpanded={isOpen}
               isDisabled={isDisabled}
               variant="plain"
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )
         }
         {...(rowData && rowData.actionProps)}
@@ -116,35 +118,37 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
         <DropdownList>
           {items
             .filter((item) => !item.isOutsideDropdown)
-            .map(({ title, itemKey, onClick, tooltipProps, isSeparator, ...props }, index) => {
-              if (isSeparator) {
-                return <Divider key={itemKey || index} data-key={itemKey || index} />;
-              }
-              const item = (
-                <DropdownItem
-                  onClick={(event: any) => {
-                    onActionClick(event, onClick);
-                    onToggle();
-                  }}
-                  {...props}
-                  key={itemKey || index}
-                  data-key={itemKey || index}
-                  ref={index === 0 ? firstActionItemRef : undefined}
-                >
-                  {title}
-                </DropdownItem>
-              );
-
-              if (tooltipProps?.content) {
-                return (
-                  <Tooltip key={itemKey || index} {...tooltipProps}>
-                    {item}
-                  </Tooltip>
+            .map(
+              ({ title, itemKey, onClick, tooltipProps, isSeparator, shouldCloseOnClick = true, ...props }, index) => {
+                if (isSeparator) {
+                  return <Divider key={itemKey || index} data-key={itemKey || index} />;
+                }
+                const item = (
+                  <DropdownItem
+                    onClick={(event: any) => {
+                      onActionClick(event, onClick);
+                      shouldCloseOnClick && onToggle();
+                    }}
+                    {...props}
+                    key={itemKey || index}
+                    data-key={itemKey || index}
+                    ref={index === 0 ? firstActionItemRef : undefined}
+                  >
+                    {title}
+                  </DropdownItem>
                 );
-              } else {
-                return item;
+
+                if (tooltipProps?.content) {
+                  return (
+                    <Tooltip key={itemKey || index} {...tooltipProps}>
+                      {item}
+                    </Tooltip>
+                  );
+                } else {
+                  return item;
+                }
               }
-            })}
+            )}
         </DropdownList>
       </Dropdown>
     </React.Fragment>

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>
   );
 
@@ -76,7 +81,7 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
       <div className={inlineStyles.inlineEditValue}>{Array.isArray(value) ? value.join(', ') : value}</div>
       <div className={inlineStyles.inlineEditInput}>
         {select}
-        <div className={css(formStyles.formHelperText, formStyles.modifiers.error)} aria-live="polite">
+        <div className={css(formStyles.formHelperText)} aria-live="polite">
           {props.errorText}
         </div>
       </div>

package/src/components/Table/EditableTextCell.tsx

@@ -49,7 +49,7 @@ export const EditableTextCell: React.FunctionComponent<IEditableTextCell> = ({
         }}
         aria-label={inputAriaLabel}
       />
-      <div className={css(formStyles.formHelperText, formStyles.modifiers.error)} aria-live="polite">
+      <div className={css(formStyles.formHelperText)} aria-live="polite">
         {props.errorText}
       </div>
     </div>

package/src/components/Table/Table.tsx

@@ -5,7 +5,7 @@ import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-
 import { css } from '@patternfly/react-styles';
 import { toCamel } from './utils';
 import { IVisibility } from './utils/decorators/classNames';
-import { useOUIAProps, OUIAProps, handleArrows, setTabIndex } from '@patternfly/react-core';
+import { useOUIAProps, OUIAProps, handleArrows, setTabIndex, KeyTypes } from '@patternfly/react-core';
 import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
 export interface BaseCellProps {
@@ -124,7 +124,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
       setTableCaption(
         <caption>
           {selectableRowCaptionText}
-          <div className="pf-v5-screen-reader">
+          <div className="pf-v6-screen-reader">
             This table has selectable rows. It can be navigated by row using tab, and each row can be selected using
             space or enter.
           </div>
@@ -132,7 +132,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
       );
     } else {
       setTableCaption(
-        <caption className="pf-v5-screen-reader">
+        <caption className="pf-v6-screen-reader">
           This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space
           or enter.
         </caption>
@@ -169,7 +169,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
     const rows = (Array.from(tableRef.current.querySelectorAll('tbody tr')) as Element[]).filter(
       (el) => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden
     );
-    if (key === 'Space' || key === 'Enter') {
+    if (key === KeyTypes.Space || key === KeyTypes.Enter) {
       (activeElement as HTMLElement).click();
       event.preventDefault();
     }

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;
@@ -138,7 +137,7 @@ export interface IExtra extends IExtraData {
 }
 
 export type IFormatterValueType = formatterValueType & {
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   props?: any;
 };
 
@@ -157,7 +156,7 @@ export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, P
   /** Key of actions menu item */
   itemKey?: string;
   /** Content to display in the actions menu item */
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   /** Render item as aria-disabled option */
   isAriaDisabled?: boolean;
   /** Props for adding a tooltip to a menu item. This is used to display tooltip when hovered over the item  */
@@ -166,6 +165,8 @@ export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, P
   onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
   /** Flag indicating this action should be placed outside the actions menu, beside the toggle */
   isOutsideDropdown?: boolean;
+  /** Flag indicating whether the actions dropdown should close after an item is clicked. */
+  shouldCloseOnClick?: boolean;
 }
 
 export interface ISeparator extends IAction {
@@ -189,7 +190,7 @@ export interface decoratorReturnType {
   textCenter?: boolean;
   component?: string;
   isVisible?: boolean;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   props?: any;
   scope?: string;
   parentId?: number;
@@ -203,7 +204,7 @@ export type IFormatter = (data?: IFormatterValueType, extra?: IExtra) => formatt
 
 export 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 */
@@ -227,7 +228,7 @@ export interface ICell {
 export type RowCellContent<T = any> = (value?: string, rowIndex?: number, cellIndex?: number, props?: T) => void;
 
 export interface IRowCell<T = any> {
-  title?: string | React.ReactNode | RowCellContent<T>;
+  title?: React.ReactNode | RowCellContent<T>;
   props?: T;
   formatters?: IFormatter[];
 }

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'> {
   /**
@@ -55,7 +55,7 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
   draggableRow?: TdDraggableType;
   /** True to remove padding */
   noPadding?: boolean;
-  /** Applies pf-v5-c-table__action to td */
+  /** Applies pf-v6-c-table__action to td */
   isActionCell?: boolean;
   /**
    * Tooltip to show on the body cell.
@@ -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,
@@ -56,6 +56,14 @@ export interface ThProps
   stickyRightOffset?: string;
   /** Indicates the <th> is part of a subheader of a nested header */
   isSubheader?: boolean;
+  /** Visually hidden text accessible only via assistive technologies. This must be passed in if the
+   * th is intended to be visually empty, and must be conveyed as a column header text.
+   */
+  screenReaderText?: string;
+  /** Provides an accessible name to the th. This should only be passed in when the th contains only non-text
+   * content, such as a "select all" checkbox or "expand all" toggle.
+   */
+  'aria-label'?: string;
 }
 
 const ThBase: React.FunctionComponent<ThProps> = ({
@@ -83,8 +91,17 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   stickyLeftOffset,
   stickyRightOffset,
   isSubheader = false,
+  screenReaderText,
+  'aria-label': ariaLabel,
   ...props
 }: ThProps) => {
+  if (!children && !screenReaderText && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.'
+    );
+  }
+
   const [showTooltip, setShowTooltip] = React.useState(false);
   const [truncated, setTruncated] = React.useState(false);
   const cellRef = innerRef ? innerRef : React.createRef();
@@ -188,8 +205,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       onBlur={() => setShowTooltip(false)}
       data-label={dataLabel}
       onMouseEnter={tooltip !== null ? onMouseEnter : onMouseEnterProp}
-      scope={component === 'th' && children ? scope : null}
+      scope={component === 'th' ? scope : null}
       ref={cellRef}
+      aria-label={ariaLabel}
       className={css(
         styles.tableTh,
         className,
@@ -206,13 +224,13 @@ 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
       })}
     >
-      {transformedChildren}
+      {transformedChildren || (screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>)}
     </MergedComponent>
   );
 

package/src/components/Table/__tests__/Th.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Th } from '../Th';
+
+test('Does not render with aria-label by default', () => {
+  render(<Th />);
+  expect(screen.getByRole('columnheader')).not.toHaveAccessibleName();
+});
+
+test('Renders with aria-label when passed in', () => {
+  render(<Th aria-label="Test" />);
+  expect(screen.getByRole('columnheader')).toHaveAccessibleName('Test');
+});
+
+test('Does not render with screen reader text by default', () => {
+  render(<Th />);
+
+  expect(screen.getByRole('columnheader')).toBeEmptyDOMElement();
+});
+
+test('Does not render with screen reader text when children are passed in', () => {
+  render(<Th screenReaderText="Test">Heading label</Th>);
+
+  expect(screen.getByRole('columnheader')).not.toHaveTextContent('Test');
+});
+
+test('Renders with screen reader text when screenReaderText is passed in', () => {
+  render(<Th screenReaderText="Test" />);
+
+  expect(screen.getByRole('columnheader')).toHaveTextContent('Test');
+});

package/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap

@@ -5,9 +5,9 @@ exports[`RowWrapper renders correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__tr"
+        class="pf-v6-c-table__tr"
         data-ouia-component-id="OUIA-Generated-TableRow-1"
-        data-ouia-component-type="PF5/TableRow"
+        data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
     </tbody>
@@ -20,9 +20,9 @@ exports[`RowWrapper renders expanded correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
+        class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
         data-ouia-component-id="OUIA-Generated-TableRow-2"
-        data-ouia-component-type="PF5/TableRow"
+        data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
     </tbody>

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;