@patternfly/react-table 6.2.0-prerelease.16 → 6.2.0-prerelease.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.2.0-prerelease.16",
+  "version": "6.2.0-prerelease.18",
   "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.2.0-prerelease.15",
+    "@patternfly/react-core": "^6.2.0-prerelease.17",
     "@patternfly/react-icons": "^6.2.0-prerelease.2",
     "@patternfly/react-styles": "^6.2.0-prerelease.2",
     "@patternfly/react-tokens": "^6.2.0-prerelease.2",
@@ -51,5 +51,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "a2cb15519172f33cc701fd6b6cc5e7405a6d8a4c"
+  "gitHead": "e71da5ef7c6bec9dace193be79f4c8b7250f3716"
 }

package/src/components/Table/ActionsColumn.tsx

@@ -88,10 +88,9 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               {title}
             </Button>
           ) : (
-            React.cloneElement(title as React.ReactElement, { onClick, isDisabled, ...props })
+            React.cloneElement(title as React.ReactElement<any>, { onClick, isDisabled, ...props })
           )
         )}
-
       <Dropdown
         isOpen={isOpen}
         onOpenChange={!isOnOpenChangeDisabled ? (isOpen: boolean) => setIsOpen(isOpen) : undefined}

package/src/components/Table/EditableSelectInputCell.tsx

@@ -22,7 +22,7 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
     isPlaceholder?: boolean
   ) => void;
   /** Options to display in the expandable select menu */
-  options?: React.ReactElement[];
+  options?: React.ReactElement<any>[];
   /** Flag indicating the select input is disabled */
   isDisabled?: boolean;
   /** Flag indicating the toggle gets placeholder styles **/
@@ -47,7 +47,7 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
   isPlaceholder = false,
   onToggle = () => {},
   selections = [''],
-  options = [] as React.ReactElement[],
+  options = [] as React.ReactElement<any>[],
   props
 }: IEditableSelectInputCell) => {
   const onSelectHandler = (event: React.MouseEvent | React.ChangeEvent, newValue: any | any[]) => {

package/src/components/Table/Table.tsx

@@ -10,6 +10,8 @@ import { KeyTypes } from '@patternfly/react-core/dist/esm/helpers/constants';
 import { useOUIAProps, OUIAProps } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
+import type { JSX } from 'react';
+
 export interface BaseCellProps {
   /** Content rendered inside the cell */
   children?: React.ReactNode;

package/src/components/Table/TableTypes.tsx

@@ -195,7 +195,7 @@ export interface decoratorReturnType {
   scope?: string;
   parentId?: number;
   colSpan?: number;
-  id?: React.ReactText;
+  id?: number | string;
 }
 
 export type ITransform = (label?: IFormatterValueType, extra?: IExtra) => decoratorReturnType;

package/src/components/Table/Td.tsx

@@ -263,8 +263,8 @@ const TdBase: React.FunctionComponent<TdProps> = ({
 
   React.useEffect(() => {
     setTruncated(
-      (cellRef as React.RefObject<HTMLElement>).current.offsetWidth <
-        (cellRef as React.RefObject<HTMLElement>).current.scrollWidth
+      (cellRef as React.RefObject<HTMLElement | null>).current.offsetWidth <
+        (cellRef as React.RefObject<HTMLElement | null>).current.scrollWidth
     );
   }, [cellRef]);
 

package/src/components/Table/Th.tsx

@@ -198,8 +198,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
 
   React.useEffect(() => {
     setTruncated(
-      (cellRef as React.RefObject<HTMLElement>).current.offsetWidth <
-        (cellRef as React.RefObject<HTMLElement>).current.scrollWidth
+      (cellRef as React.RefObject<HTMLElement | null>).current.offsetWidth <
+        (cellRef as React.RefObject<HTMLElement | null>).current.scrollWidth
     );
   }, [cellRef]);
 

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

@@ -298,7 +298,7 @@ export interface EditableSelectInputProps {
   /** 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[];
+  options: React.ReactElement<any>[];
   /** 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 */

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

@@ -9,7 +9,7 @@ export const TableDraggable: React.FunctionComponent = () => {
   const [itemOrder, setItemOrder] = React.useState(['row1', 'row2', 'row3']);
   const [tempItemOrder, setTempItemOrder] = React.useState<string[]>([]);
 
-  const bodyRef = React.useRef<HTMLTableSectionElement>();
+  const bodyRef = React.useRef<HTMLTableSectionElement>(undefined);
 
   const onDragStart: TrProps['onDragStart'] = (evt) => {
     evt.dataTransfer.effectAllowed = 'move';

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

@@ -18,7 +18,7 @@ const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
   elementToFocusOnEditRef,
   rowAriaLabel = 'row'
 }) => {
-  const editButtonRef = React.useRef<HTMLButtonElement>();
+  const editButtonRef = React.useRef<HTMLButtonElement>(undefined);
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, button: 'edit' | 'stopEditing') => {
     const focusRef = button === 'edit' ? elementToFocusOnEditRef : editButtonRef;
@@ -104,7 +104,7 @@ const EditableCell: React.FunctionComponent<EditableCellProps> = ({
       <div className={css(inlineEditStyles.inlineEditValue)}>{staticValue}</div>
       {hasMultipleInputs ? (
         <div className={css(inlineEditStyles.inlineEditGroup, 'pf-m-column')} role={role} aria-label={ariaLabel}>
-          {(editingValue as React.ReactElement[]).map((elem, index) => (
+          {(editingValue as React.ReactElement<any>[]).map((elem, index) => (
             <div key={index} className={css(inlineEditStyles.inlineEditInput)}>
               {elem}
             </div>
@@ -137,7 +137,7 @@ const EditableRow: React.FunctionComponent<EditableRow> = ({
   const [editable, setEditable] = React.useState(false);
   const [editedData, setEditedData] = React.useState(data);
 
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(undefined);
 
   return (
     <Tr className={css(inlineEditStyles.inlineEdit, editable ? inlineEditStyles.modifiers.inlineEditable : '')}>

package/src/demos/DashboardHeader.tsx

@@ -16,6 +16,8 @@ import {
   MastheadLogo,
   MastheadContent,
   MenuToggle,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -26,7 +28,6 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-table/src/demos/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-table/src/demos/assets/pf-logo.svg';
@@ -108,10 +109,9 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
             >
               {notificationBadge ?? (
                 <ToolbarItem>
-                  <Button
+                  <NotificationBadge
                     aria-label="Notifications"
-                    variant={ButtonVariant.plain}
-                    icon={<BellIcon />}
+                    variant={NotificationBadgeVariant.read}
                     onClick={() => {}}
                   />
                 </ToolbarItem>

package/src/demos/DashboardWrapper.tsx

@@ -38,7 +38,7 @@ interface DashboardWrapperProps {
   /** Callback when notification drawer panel is finished expanding. */
   onNotificationDrawerExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
   /** Skip to content component for the page */
-  skipToContent?: React.ReactElement;
+  skipToContent?: React.ReactElement<any>;
   /** Sets the value for role on the <main> element */
   role?: string;
   /** an id to use for the [role="main"] element */

package/src/demos/examples/TableColumnManagement.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import {
   Button,

package/src/demos/examples/TableColumnManagementWithDraggable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import {
   Button,

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

@@ -18,7 +18,7 @@ export interface BodyCellProps {
   ariaControls?: string;
   editableValue?: any;
   editableSelectProps?: SelectProps;
-  options?: React.ReactElement[];
+  options?: React.ReactElement<any>[];
   isSelectOpen?: boolean;
   value?: any;
   isValid?: boolean;
@@ -69,10 +69,10 @@ export const BodyCell: React.FunctionComponent<BodyCellProps> = ({
   let isEmptyStateCell = false;
   if (children) {
     isEmptyStateCell =
-      ((children as React.ReactElement).type === Bullseye &&
-        (children as React.ReactElement).props.children &&
-        (children as React.ReactElement).props.children.type === EmptyState) ||
-      (children as React.ReactElement).type === EmptyState;
+      ((children as React.ReactElement<any>).type === Bullseye &&
+        (children as React.ReactElement<any>).props.children &&
+        (children as React.ReactElement<any>).props.children.type === EmptyState) ||
+      (children as React.ReactElement<any>).type === EmptyState;
   }
 
   const cell = (

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

@@ -29,6 +29,8 @@ import {
   CustomActionsToggleProps
 } from '../../../components';
 
+import type { JSX } from 'react';
+
 export interface TableProps extends OUIAProps {
   /** Adds an accessible name for the Table */
   'aria-label'?: string;

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

@@ -36,7 +36,7 @@ export const LegacyTableMisc: React.FunctionComponent = () => {
     };
     return (
       <tr
-        ref={trRef as React.LegacyRef<HTMLTableRowElement>}
+        ref={trRef as React.Ref<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

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

package/src/test-helpers/MockedTableChanges.js

@@ -41,7 +41,7 @@ export const TableProvider = withContext({
   contextType: { columns: PropTypes.any, renderers: PropTypes.any }
 })('table');
 
-const MockedTableChanges = ({ updateFunc, columns }) => (
+const MockedTableChanges = ({ updateFunc = () => undefined, columns = [] }) => (
   <TableContext.Provider value={{ updateHeaderData: updateFunc }}>
     <TableProvider>
       <TableHeader headerRows={columns} />
@@ -54,9 +54,4 @@ MockedTableChanges.propTypes = {
   columns: PropTypes.array
 };
 
-MockedTableChanges.defaultProps = {
-  updateFunc: () => undefined,
-  columns: []
-};
-
 export default MockedTableChanges;