@patternfly/react-core 6.2.0-prerelease.2 → 6.2.0-prerelease.21

package/src/components/TextArea/examples/TextAreaResizableNone.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaResizeNone: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={(_event, value) => setValue(value)}
+      resizeOrientation="none"
+      aria-label="text area resize none example"
+    />
+  );
+};

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -57,6 +57,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   'aria-controls'?: string;
   /** The id of the input element */
   inputId?: string;
+  /** Additional props to spread to the input element. */
+  inputProps?: any;
 }
 
 const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -78,6 +80,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   isExpanded,
   'aria-controls': ariaControls,
   inputId,
+  inputProps,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled, validated } = React.useContext(TextInputGroupContext);
@@ -121,6 +124,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(role && { role })}
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
+          {...inputProps}
         />
         {validated && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
       </span>

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -317,6 +317,11 @@ describe('TextInputGroupMain', () => {
     expect(onBlurMock).toHaveBeenCalledTimes(1);
   });
 
+  test('Additional props are spread when inputProps prop is passed', () => {
+    render(<TextInputGroupMain aria-label="Test input" inputProps={{ autofocus: 'true' }} />);
+    expect(screen.getByLabelText('Test input')).toHaveAttribute('autofocus', 'true');
+  });
+
   it('matches the snapshot', () => {
     const { asFragment } = render(<TextInputGroupMain>Test</TextInputGroupMain>);
 

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -15,7 +15,7 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
   /** Flag indicating the expandable content is expanded */
   isExpanded?: boolean;
   /** Expandable content reference for passing to data toolbar children */
-  expandableContentRef?: RefObject<HTMLDivElement>;
+  expandableContentRef?: RefObject<HTMLDivElement | null>;
   /** Label container reference for passing to data toolbar children */
   labelContainerRef?: RefObject<any>;
   /** optional callback for clearing all filters in the toolbar */

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -39,7 +39,7 @@ export interface ToolbarFilterProps extends ToolbarItemProps {
   /** Flag to show the toolbar item */
   showToolbarItem?: boolean;
   /** Reference to a label container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
-  expandableLabelContainerRef?: React.RefObject<HTMLDivElement>;
+  expandableLabelContainerRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 interface ToolbarFilterState {

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -8,7 +8,7 @@ import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_brea
 export interface ToolbarContextProps {
   isExpanded: boolean;
   toggleIsExpanded: () => void;
-  labelGroupContentRef: RefObject<HTMLDivElement>;
+  labelGroupContentRef: RefObject<HTMLDivElement | null>;
   updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;
   numberOfFilters: number;
   clearAllFilters?: () => void;
@@ -28,7 +28,7 @@ export const ToolbarContext = React.createContext<ToolbarContextProps>({
 });
 
 interface ToolbarContentContextProps {
-  expandableContentRef: RefObject<HTMLDivElement>;
+  expandableContentRef: RefObject<HTMLDivElement | null>;
   expandableContentId: string;
   labelContainerRef: RefObject<any>;
   isExpanded?: boolean;

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -69,7 +69,6 @@ exports[`Toolbar should render with custom label content 1`] = `
             class="pf-v6-c-toolbar__toggle"
           >
             <button
-              aria-disabled="false"
               aria-haspopup="false"
               aria-label="Show Filters"
               class="pf-v6-c-button pf-m-plain"
@@ -143,7 +142,6 @@ exports[`Toolbar should render with custom label content 1`] = `
                       class="pf-v6-c-label__actions"
                     >
                       <button
-                        aria-disabled="false"
                         aria-label="Close New"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -191,7 +189,6 @@ exports[`Toolbar should render with custom label content 1`] = `
                       class="pf-v6-c-label__actions"
                     >
                       <button
-                        aria-disabled="false"
                         aria-label="Close Pending"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -226,7 +223,6 @@ exports[`Toolbar should render with custom label content 1`] = `
               class="pf-v6-c-label-group__close"
             >
               <button
-                aria-disabled="false"
                 aria-label="Close label group"
                 aria-labelledby="remove_group_generated-id generated-id"
                 class="pf-v6-c-button pf-m-plain pf-m-no-padding"
@@ -270,7 +266,6 @@ exports[`Toolbar should render with custom label content 1`] = `
           class="pf-v6-c-toolbar__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link pf-m-inline"
             data-ouia-component-id="OUIA-Generated-Button-link-1"
             data-ouia-component-type="PF6/Button"
@@ -288,7 +283,6 @@ exports[`Toolbar should render with custom label content 1`] = `
           class="pf-v6-c-toolbar__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link pf-m-inline"
             data-ouia-component-id="OUIA-Generated-Button-link-2"
             data-ouia-component-type="PF6/Button"

package/src/components/Toolbar/examples/Toolbar.md

@@ -24,16 +24,6 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 ```
 
-### Toolbar item spacers
-
-You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
-
-Items are spaced “16px” apart by default via their parents' `gap` or `columnGap` property. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
-
-```ts file="./ToolbarSpacers.tsx"
-
-```
-
 ### With adjusted inset
 
 To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.
@@ -62,6 +52,14 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 ```
 
+### Background color variants
+
+To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
+
+```ts file="./ToolbarColorVariant.tsx"
+
+```
+
 ## Examples with toggle groups and filters
 
 The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.
@@ -113,10 +111,19 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 
 ```
 
-## Background color variants
+## Examples with toolbar spacers
+You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
 
-To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
+Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
 
-```ts file="./ToolbarColorVariant.tsx"
+### Toolbar group spacers
+
+```ts file="./ToolbarGroupSpacers.tsx"
+
+```
+
+### Toolbar item spacers
+
+```ts file="./ToolbarItemSpacers.tsx"
 
 ```

package/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarGroupSpacers: React.FunctionComponent = () => {
+  const groupGapItems = (
+    <React.Fragment>
+      <ToolbarGroup>
+        <ToolbarItem>
+          <Button variant="secondary">Default Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Default Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const groupColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup columnGap={{ default: 'columnGapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup columnGap={{ default: 'columnGapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup columnGap={{ default: 'columnGapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const groupRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <>
+      Using gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupGapItems}</ToolbarContent>
+      </Toolbar>
+      Using column gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      Using row gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupRowGapItems}</ToolbarContent>
+      </Toolbar>
+      <br />
+    </>
+  );
+};

package/src/components/Toolbar/examples/ToolbarItemSpacers.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarItemSpacers: React.FunctionComponent = () => {
+  const itemGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap">
+        <ToolbarItem gap={{ default: 'gapNone' }}>
+          <Button variant="secondary">No Gap</Button>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapSm' }}>
+          <Button variant="secondary">Small Gap</Button>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapXl' }}>
+          <Button variant="secondary">Extra Large Gap</Button>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap">
+        <ToolbarItem columnGap={{ default: 'columnGapNone' }}>
+          <Button variant="secondary">No Column Gap</Button>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapSm' }}>
+          <Button variant="secondary">Small Column Gap</Button>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapXl' }}>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+          <Button variant="secondary">No Row Gap</Button>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+          <Button variant="secondary">Small Row Gap</Button>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <>
+      Using gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemGapItems}</ToolbarContent>
+      </Toolbar>
+      Using column gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      Using row gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemRowGapItems}</ToolbarContent>
+      </Toolbar>
+    </>
+  );
+};

package/src/components/TreeView/TreeViewListItem.tsx

@@ -151,7 +151,9 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         type="checkbox"
         onChange={(evt) => onCheck && onCheck(evt, itemData, parentItem)}
         onClick={(evt) => evt.stopPropagation()}
-        ref={(elem) => elem && (elem.indeterminate = checkProps.checked === null)}
+        ref={(elem) => {
+          elem && (elem.indeterminate = checkProps.checked === null);
+        }}
         {...checkProps}
         checked={isCheckboxChecked}
         id={randomId}
@@ -185,7 +187,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       {hasBadge && children && (
         <span className={css(styles.treeViewNodeCount)}>
           <Badge {...badgeProps}>
-            {customBadgeContent ? customBadgeContent : (children as React.ReactElement).props.data.length}
+            {customBadgeContent ? customBadgeContent : (children as React.ReactElement<any>).props.data.length}
           </Badge>
         </span>
       )}

package/src/components/TreeView/examples/TreeView.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
-import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';
+import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
 
 ## Examples
 
@@ -51,6 +51,12 @@ A search input can be used to filter tree view items. It is recommended that a t
 
 ```
 
+### With unique icon per item
+
+```ts file='./TreeViewWithIconPerItem.tsx'
+
+```
+
 ### With badges
 
 ```ts file='./TreeViewWithBadges.tsx'

package/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+
+export const TreeViewWithIconPerItem: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+  const options: TreeViewDataItem[] = [
+    {
+      name: 'Github accounts',
+      id: 'iconPerItem-Github',
+      icon: <GithubIcon />,
+      children: [
+        {
+          name: 'Account 1',
+          id: 'iconPerItem-Acc1'
+        },
+        {
+          name: 'Account 2',
+          id: 'iconPerItem-Acc2'
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Gitlab accounts',
+      id: 'iconPerItem-Gitlab',
+      icon: <GitlabIcon />,
+      children: [
+        {
+          name: 'Account 3',
+          id: 'iconPerItem-Acc3'
+        }
+      ]
+    },
+    {
+      name: 'Google accounts',
+      id: 'iconPerItem-Google',
+      icon: <GoogleIcon />,
+      children: [
+        {
+          name: 'Account 4',
+          id: 'iconPerItem-Acc4'
+        }
+      ]
+    }
+  ];
+  return (
+    <TreeView
+      aria-label="Tree View with unique icon per item example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
+};

package/src/components/Truncate/Truncate.tsx

@@ -88,7 +88,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     if (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement) {
       setParentElement(subParentRef.current.parentElement.parentElement);
     }
-  }, [textRef, subParentRef]);
+  }, [textRef, subParentRef, textElement, parentElement]);
 
   React.useEffect(() => {
     if (textElement && parentElement && !observer.current) {
@@ -106,7 +106,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         observer();
       };
     }
-  }, [textElement, parentElement]);
+  }, [textElement, parentElement, trailingNumChars, content, position]);
 
   const truncateBody = (
     <span ref={subParentRef} className={css(styles.truncate, className)} {...props}>
@@ -116,18 +116,21 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
           {position === TruncatePosition.start && <React.Fragment>&lrm;</React.Fragment>}
         </span>
       )}
-      {position === TruncatePosition.middle &&
-        content.slice(0, content.length - trailingNumChars).length > minWidthCharacters && (
-          <React.Fragment>
-            <span ref={textRef} className={styles.truncateStart}>
-              {sliceContent(content, trailingNumChars)[0]}
-            </span>
-            <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
-          </React.Fragment>
-        )}
-      {position === TruncatePosition.middle &&
-        content.slice(0, content.length - trailingNumChars).length <= minWidthCharacters &&
-        content}
+      {position === TruncatePosition.middle && content.length - trailingNumChars > minWidthCharacters && (
+        <React.Fragment>
+          <span ref={textRef} className={styles.truncateStart}>
+            {sliceContent(content, trailingNumChars)[0]}
+          </span>
+          <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
+        </React.Fragment>
+      )}
+      {position === TruncatePosition.middle && content.length - trailingNumChars <= minWidthCharacters && (
+        <React.Fragment>
+          <span ref={textRef} className={styles.truncateStart}>
+            {content}
+          </span>
+        </React.Fragment>
+      )}
     </span>
   );
 

package/src/components/Truncate/__tests__/Truncate.test.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
+import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, position, children, ...props }) => (
@@ -112,6 +113,21 @@ test('renders different content when trailingNumChars is passed with middle trun
   expect(end).toHaveClass(styles.truncateEnd);
 });
 
+test('renders full content when trailingNumChars exceeds the length of the original string using middle truncate', () => {
+  render(
+    <Truncate
+      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'} // 75 chars
+      trailingNumChars={80}
+      position="middle"
+    />
+  );
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.');
+
+  expect(start).toHaveClass(styles.truncateStart);
+  expect(start).not.toHaveClass(styles.truncateEnd);
+});
+
 test('renders tooltip position', () => {
   render(<Truncate content={''} tooltipPosition="top" />);