@patternfly/react-core 6.2.0-prerelease.32 → 6.2.0-prerelease.34

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

@@ -5,7 +5,7 @@ propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'To
 section: components
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
@@ -113,11 +113,18 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 
 ```
 
-## Examples with toolbar spacers
+## Examples with spacers and wrapping
 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 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".
 
+### Toolbar content wrapping
+The toolbar content section will wrap by default, but you can set the `rowRap` property to `noWrap` to make it not wrap.
+
+```ts file="./ToolbarContentWrap.tsx"
+
+```
+
 ### Toolbar group spacers
 
 ```ts file="./ToolbarGroupSpacers.tsx"

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   MenuToggle,
   MenuToggleElement,
@@ -15,11 +15,11 @@ import {
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [riskIsExpanded, setRiskIsExpanded] = useState(false);
+  const [riskSelected, setRiskSelected] = useState('');
 
   const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
   const riskOptions = ['Risk', 'Low', 'Medium', 'High'];

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   MenuToggle,
   MenuToggleElement,
@@ -15,12 +15,12 @@ import {
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [riskIsExpanded, setRiskIsExpanded] = useState(false);
+  const [riskSelected, setRiskSelected] = useState('');
 
   const toggleIsExpanded = () => {
     setIsExpanded(!isExpanded);

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

@@ -0,0 +1,35 @@
+import { Fragment } from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
+import { Button, SearchInput } from '@patternfly/react-core';
+
+export const ToolbarItems: React.FunctionComponent = () => {
+  const items = (
+    <Fragment>
+      <ToolbarItem>
+        <SearchInput aria-label="Items example search input" />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem variant="separator" />
+      <ToolbarItem>
+        <Button variant="primary">Action</Button>
+      </ToolbarItem>
+    </Fragment>
+  );
+
+  return (
+    <Toolbar id="toolbar-items-example">
+      <ToolbarContent rowWrap={{ default: 'nowrap' }}>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Toolbar,
   ToolbarItem,
@@ -20,9 +20,9 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 
 export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState<boolean>(false);
-  const [riskIsExpanded, setRiskIsExpanded] = React.useState<boolean>(false);
-  const [filters, setFilters] = React.useState({
+  const [statusIsExpanded, setStatusIsExpanded] = useState<boolean>(false);
+  const [riskIsExpanded, setRiskIsExpanded] = useState<boolean>(false);
+  const [filters, setFilters] = useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });

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

@@ -76,7 +76,7 @@ export const ToolbarGroupSpacers: React.FunctionComponent = () => {
 
   const groupRowGapItems = (
     <Fragment>
-      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+      <ToolbarGroup rowGap={{ default: 'rowGapNone' }} rowWrap={{ default: 'wrap' }}>
         <ToolbarItem>
           <Button variant="secondary">No Row Gap</Button>
         </ToolbarItem>
@@ -103,7 +103,7 @@ export const ToolbarGroupSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
         <ToolbarItem variant="separator"></ToolbarItem>
       </ToolbarGroup>
-      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+      <ToolbarGroup rowGap={{ default: 'rowGapSm' }} rowWrap={{ default: 'wrap' }}>
         <ToolbarItem>
           <Button variant="secondary">Small Row Gap</Button>
         </ToolbarItem>
@@ -130,7 +130,7 @@ export const ToolbarGroupSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
         <ToolbarItem variant="separator"></ToolbarItem>
       </ToolbarGroup>
-      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+      <ToolbarGroup rowGap={{ default: 'rowGapXl' }} rowWrap={{ default: 'wrap' }}>
         <ToolbarItem>
           <Button variant="secondary">Extra Large Row Gap</Button>
         </ToolbarItem>

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   MenuToggle,
@@ -20,12 +20,12 @@ export const ToolbarGroups: React.FunctionComponent = () => {
   const secondOptions = ['1', '2', '3'];
   const thirdOptions = ['I', 'II', 'III'];
 
-  const [firstIsExpanded, setFirstIsExpanded] = React.useState(false);
-  const [firstSelected, setFirstSelected] = React.useState('');
-  const [secondIsExpanded, setSecondIsExpanded] = React.useState(false);
-  const [secondSelected, setSecondSelected] = React.useState('');
-  const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false);
-  const [thirdSelected, setThirdSelected] = React.useState('');
+  const [firstIsExpanded, setFirstIsExpanded] = useState(false);
+  const [firstSelected, setFirstSelected] = useState('');
+  const [secondIsExpanded, setSecondIsExpanded] = useState(false);
+  const [secondSelected, setSecondSelected] = useState('');
+  const [thirdIsExpanded, setThirdIsExpanded] = useState(false);
+  const [thirdSelected, setThirdSelected] = useState('');
 
   const onToggle = (filterName: string) => {
     switch (filterName) {

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

@@ -5,7 +5,7 @@ import { Button } from '@patternfly/react-core';
 export const ToolbarItemSpacers: React.FunctionComponent = () => {
   const itemGapItems = (
     <Fragment>
-      <ToolbarGroup className="pf-m-wrap">
+      <ToolbarGroup rowWrap={{ default: 'wrap' }}>
         <ToolbarItem gap={{ default: 'gapNone' }}>
           <Button variant="secondary">No Gap</Button>
           <Button variant="secondary">No Gap</Button>
@@ -26,7 +26,7 @@ export const ToolbarItemSpacers: React.FunctionComponent = () => {
 
   const itemColumnGapItems = (
     <Fragment>
-      <ToolbarGroup className="pf-m-wrap">
+      <ToolbarGroup rowWrap={{ default: 'wrap' }}>
         <ToolbarItem columnGap={{ default: 'columnGapNone' }}>
           <Button variant="secondary">No Column Gap</Button>
           <Button variant="secondary">No Column Gap</Button>
@@ -48,17 +48,17 @@ export const ToolbarItemSpacers: React.FunctionComponent = () => {
   const itemRowGapItems = (
     <Fragment>
       <ToolbarGroup>
-        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+        <ToolbarItem rowGap={{ default: 'rowGapNone' }} rowWrap={{ default: 'wrap' }}>
           <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' }}>
+        <ToolbarItem rowGap={{ default: 'rowGapSm' }} rowWrap={{ default: 'wrap' }}>
           <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' }}>
+        <ToolbarItem rowGap={{ default: 'rowGapXl' }} rowWrap={{ default: 'wrap' }}>
           <Button variant="secondary">Extra Large Row Gap</Button>
           <Button variant="secondary">Extra Large Row Gap</Button>
         </ToolbarItem>

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -32,14 +32,14 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   const resourceOptions = ['All resources', 'Deployment', 'Pod'];
   const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
 
-  const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
-  const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false);
-  const [resourceSelected, setResourceSelected] = React.useState('');
-  const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState('');
-  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
+  const [kebabIsOpen, setKebabIsOpen] = useState(false);
+  const [resourceIsExpanded, setResourceIsExpanded] = useState(false);
+  const [resourceSelected, setResourceSelected] = useState('');
+  const [statusIsExpanded, setStatusIsExpanded] = useState(false);
+  const [statusSelected, setStatusSelected] = useState('');
+  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(20);
 
   const onKebabToggle = () => {
     setKebabIsOpen(!kebabIsOpen);

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

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
 
 export const ToolbarSticky: React.FunctionComponent = () => {
-  const [isSticky, setIsSticky] = React.useState(true);
-  const [showEvenOnly, setShowEvenOnly] = React.useState(true);
+  const [isSticky, setIsSticky] = useState(true);
+  const [showEvenOnly, setShowEvenOnly] = useState(true);
   const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
   const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
 

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Dropdown,
@@ -25,14 +25,14 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState('');
-  const [isStatusExpanded, setIsStatusExpanded] = React.useState(false);
-  const [isRiskExpanded, setIsRiskExpanded] = React.useState(false);
-  const [filters, setFilters] = React.useState({
+  const [inputValue, setInputValue] = useState('');
+  const [isStatusExpanded, setIsStatusExpanded] = useState(false);
+  const [isRiskExpanded, setIsRiskExpanded] = useState(false);
+  const [filters, setFilters] = useState({
     risk: ['Low'],
     status: ['New', 'Pending']
   });
-  const [isKebabOpen, setIsKebabOpen] = React.useState(false);
+  const [isKebabOpen, setIsKebabOpen] = useState(false);
 
   const onInputChange = (newValue: string) => {
     setInputValue(newValue);

package/src/components/Tooltip/examples/Tooltip.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-tooltip
 propComponents: ['Tooltip']
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import './TooltipExamples.css';

package/src/components/Tooltip/examples/TooltipIcon.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tooltip, Button } from '@patternfly/react-core';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const TooltipIcon: React.FunctionComponent = () => {
-  const [showSuccessContent, setShowSuccessContent] = React.useState(false);
+  const [showSuccessContent, setShowSuccessContent] = useState(false);
   const copyText: string = 'Copy to clipboard';
   const doneCopyText: string = 'Successfully copied to clipboard!';
 

package/src/components/Tooltip/examples/TooltipOptions.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Button,
   Tooltip,
@@ -12,18 +13,18 @@ import {
 } from '@patternfly/react-core';
 
 export const TooltipOptions: React.FunctionComponent = () => {
-  const [trigger, setTrigger] = React.useState(['mouseenter', 'focus']);
-  const [isVisible, setIsVisible] = React.useState(true);
-  const [contentLeftAligned, setContentLeftAligned] = React.useState(false);
-  const [enableFlip, setEnableFlip] = React.useState(true);
-  const [position, setPosition] = React.useState<TooltipPosition>(TooltipPosition.top);
-  const [positionSelectOpen, setPositionSelectOpen] = React.useState(false);
-  const [flipSelectOpen, setFlipSelectOpen] = React.useState(false);
-  const [flipBehavior, setFlipBehavior] = React.useState('flip');
-  const [entryDelayInput, setEntryDelayInput] = React.useState(0);
-  const [exitDelayInput, setExitDelayInput] = React.useState(0);
-  const [animationDuration, setAnimationDuration] = React.useState(300);
-  const tipBoxRef = React.useRef(null);
+  const [trigger, setTrigger] = useState(['mouseenter', 'focus']);
+  const [isVisible, setIsVisible] = useState(true);
+  const [contentLeftAligned, setContentLeftAligned] = useState(false);
+  const [enableFlip, setEnableFlip] = useState(true);
+  const [position, setPosition] = useState<TooltipPosition>(TooltipPosition.top);
+  const [positionSelectOpen, setPositionSelectOpen] = useState(false);
+  const [flipSelectOpen, setFlipSelectOpen] = useState(false);
+  const [flipBehavior, setFlipBehavior] = useState('flip');
+  const [entryDelayInput, setEntryDelayInput] = useState(0);
+  const [exitDelayInput, setExitDelayInput] = useState(0);
+  const [animationDuration, setAnimationDuration] = useState(300);
+  const tipBoxRef = useRef(null);
 
   const scrollToRef = (ref: React.RefObject<any>) => {
     if (ref && ref.current) {
@@ -32,7 +33,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     scrollToRef(tipBoxRef);
   }, []);
 

package/src/components/Tooltip/examples/TooltipReactRef.tsx

@@ -1,7 +1,8 @@
+import { useRef } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 
 export const TooltipReactRef: React.FunctionComponent = () => {
-  const tooltipRef = React.useRef<HTMLButtonElement>(null);
+  const tooltipRef = useRef<HTMLButtonElement>(null);
   return (
     <div style={{ margin: '100px' }}>
       <button aria-describedby="tooltip-ref1" ref={tooltipRef}>

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

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
 
 ## Examples

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

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewMultiselectable: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>([]);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>([]);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

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

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewSelectableNodes: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     setActiveItems([treeViewItem]);

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

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewSingleSelectable: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [allExpanded, setAllExpanded] = React.useState<boolean>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [allExpanded, setAllExpanded] = useState<boolean>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   TreeView,
   Button,
@@ -12,8 +13,8 @@ import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const TreeViewWithActionItems: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

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

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewBadges: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

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

@@ -1,9 +1,10 @@
+import { useEffect, useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewWithCheckboxes: React.FunctionComponent = () => {
-  const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
+  const [checkedItems, setCheckedItems] = useState<TreeViewDataItem[]>([]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // eslint-disable-next-line no-console
     console.log('Checked items: ', checkedItems);
   }, [checkedItems]);

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

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewCustomBadges: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

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

@@ -1,10 +1,11 @@
+import { useState } 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 [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

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

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 
 export const TreeViewWithIcons: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

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

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
 
 export const TreeViewWithMemoization: React.FunctionComponent = () => {
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [allExpanded, setAllExpanded] = React.useState(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [allExpanded, setAllExpanded] = useState(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     const filtered: TreeViewDataItem[] = [];

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -71,9 +72,9 @@ export const TreeViewWithSearch: React.FunctionComponent = () => {
     }
   ];
 
-  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
-  const [filteredItems, setFilteredItems] = React.useState(options);
-  const [isFiltered, setIsFiltered] = React.useState(false);
+  const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
+  const [filteredItems, setFilteredItems] = useState(options);
+  const [isFiltered, setIsFiltered] = useState(false);
 
   const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
     // Ignore folders for selection

package/src/components/Truncate/Truncate.tsx

@@ -17,7 +17,7 @@ const truncateStyles = {
 
 const minWidthCharacters: number = 12;
 
-interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
+export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
   /** Class to add to outer span */
   className?: string;
   /** Text to truncate */
@@ -42,6 +42,11 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @hide The element whose parent to reference when calculating whether truncation should occur. This must be an ancestor
+   * of the ClipboardCopy, and must have a valid width value. For internal use only, do not use as it is not part of the public API
+   * and is subject to change.
+   */
+  refToGetParent?: React.RefObject<any>;
 }
 
 const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
@@ -52,6 +57,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   tooltipPosition = 'top',
   trailingNumChars = 7,
   content,
+  refToGetParent,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(true);
@@ -85,8 +91,11 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
       setTextElement(textRef.current);
     }
 
-    if (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement) {
-      setParentElement(subParentRef.current.parentElement.parentElement);
+    if (
+      (refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement.parentElement)) &&
+      !parentElement
+    ) {
+      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement.parentElement);
     }
   }, [textRef, subParentRef, textElement, parentElement]);
 

package/src/components/Wizard/examples/Wizard.md

@@ -20,6 +20,7 @@ propComponents:
   ]
 ---
 
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
 import {
 FormGroup,
 TextInput,

package/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Form,
   FormGroup,
@@ -49,8 +50,8 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 };
 
 export const WizardEnabledOnFormValidation: React.FunctionComponent = () => {
-  const [ageValue, setAgeValue] = React.useState('Thirty');
-  const [isSubAFormValid, setIsSubAFormValid] = React.useState(false);
+  const [ageValue, setAgeValue] = useState('Thirty');
+  const [isSubAFormValid, setIsSubAFormValid] = useState(false);
 
   const onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);
 

package/src/components/Wizard/examples/WizardGetCurrentStep.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   DescriptionList,
   DescriptionListGroup,
@@ -33,7 +34,7 @@ const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepTy
 );
 
 export const GetCurrentStepWizard: React.FunctionComponent = () => {
-  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+  const [currentStep, setCurrentStep] = useState<WizardStepType>();
 
   const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
     setCurrentStep(currentStep);

package/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Drawer,
   DrawerContent,
@@ -15,9 +16,9 @@ import {
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 const StepContentWithDrawer: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
   const { activeStep } = useWizardContext();
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onWizardExpand = () => drawerRef.current && drawerRef.current.focus();