@patternfly/react-table 6.2.0-prerelease.2 → 6.2.0-prerelease.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.2.0-prerelease.2",
+  "version": "6.2.0-prerelease.20",
   "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,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.2.0-prerelease.2",
-    "@patternfly/react-icons": "^6.2.0-prerelease.0",
-    "@patternfly/react-styles": "^6.2.0-prerelease.0",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.0",
+    "@patternfly/react-core": "^6.2.0-prerelease.19",
+    "@patternfly/react-icons": "^6.2.0-prerelease.3",
+    "@patternfly/react-styles": "^6.2.0-prerelease.3",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.3",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ffab2937260ccd96a62d143b33954fe2c9f1e5e4"
+  "gitHead": "939bec6792f720d379d5bfd9c271e4920480bcc4"
 }

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/SortColumn.tsx

@@ -6,8 +6,9 @@ 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 { ActionList, ActionListItem } from '@patternfly/react-core/dist/esm/components/ActionList';
+import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 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 {

package/src/components/Table/Table.tsx

@@ -5,9 +5,13 @@ 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, KeyTypes } from '@patternfly/react-core';
+import { handleArrows, setTabIndex } from '@patternfly/react-core/dist/esm/helpers/KeyboardHandler';
+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

@@ -6,7 +6,10 @@
  */
 
 import * as React from 'react';
-import { ButtonProps, PopoverProps, SelectProps, TooltipProps } from '@patternfly/react-core';
+import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
+import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
+import { SelectProps } from '@patternfly/react-core/dist/esm/components/Select';
+import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { Table } from '../Table';
 import { Thead } from '../Thead';
 import { Tbody } from '../Tbody';
@@ -295,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/Table.md

@@ -40,8 +40,12 @@ NavItem,
 NavList,
 PageSidebar,
 PageSidebarBody,
+Modal,
+ModalHeader,
+ModalBody,
+ModalFooter,
 } from '@patternfly/react-core';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+import { DragDropSort } from '@patternfly/react-drag-drop';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';