@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/src/demos/examples/Tabs/TabsOpen.tsx

@@ -0,0 +1,185 @@
+import { useState } from 'react';
+import {
+  PageSection,
+  PageBreadcrumb,
+  Breadcrumb,
+  BreadcrumbItem,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Label,
+  LabelGroup,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const TabsOpen: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState(0);
+
+  // Toggle currently active tab
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number | string) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const tabsBreadcrumb = (
+    <PageBreadcrumb isWidthLimited>
+      <Breadcrumb>
+        <BreadcrumbItem to="#">Overview</BreadcrumbItem>
+        <BreadcrumbItem to="#">Pods</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Pod details{' '}
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </PageBreadcrumb>
+  );
+
+  const tabContent = (
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem spacer={{ default: 'spacerLg' }}>
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
+          Pod details
+        </Title>
+      </FlexItem>
+      <FlexItem>
+        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spacer={{ default: 'spacerLg' }}>
+                <FlexItem>
+                  <RhUiCheckCircleFillIcon />
+                </FlexItem>
+                <FlexItem>Running</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="teal">NS</Label>
+                </FlexItem>
+                <FlexItem>
+                  <a href="#">knative-serving-ingress</a>
+                </FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Restart policy</DescriptionListTerm>
+            <DescriptionListDescription>Always restart</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelGroup>
+                <Label>app=3scale-gateway</Label>
+                <Label>pod-template-has=6747686899</Label>
+              </LabelGroup>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
+            <DescriptionListDescription>Not configured</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod IP</DescriptionListTerm>
+            <DescriptionListDescription>10.345.2.197</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Node</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="purple">N</Label>
+                </FlexItem>
+                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at</DescriptionListTerm>
+            <DescriptionListDescription>
+              <time>Oct 15, 1:51 pm</time>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <DashboardWrapper hasNoBreadcrumb>
+      {tabsBreadcrumb}
+      <PageSection isWidthLimited aria-label="Pod header">
+        <Flex
+          spaceItems={{ default: 'spaceItemsMd' }}
+          alignItems={{ default: 'alignItemsFlexStart' }}
+          flexWrap={{ default: 'noWrap' }}
+        >
+          <FlexItem>
+            <Label color="blue">N</Label>
+          </FlexItem>
+          <FlexItem>
+            <Title headingLevel="h1" size="2xl">
+              3scale-control-fccb6ddb9-phyqv9
+            </Title>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flexNone' }}>
+            <Label icon={<RhUiInformationFillIcon />}>Running</Label>
+          </FlexItem>
+        </Flex>
+      </PageSection>
+      <PageSection type="tabs" isWidthLimited aria-label="Pod navigation tabs">
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
+          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
+          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
+          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
+          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection isWidthLimited aria-label="Pod content">
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>{tabContent}</TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>YAML panel</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Environment panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Events panel</TabContentBody>
+        </TabContent>
+        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
+          <TabContentBody>Terminal panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx

@@ -0,0 +1,228 @@
+import { useState } from 'react';
+import {
+  PageSection,
+  PageBreadcrumb,
+  Breadcrumb,
+  BreadcrumbItem,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Label,
+  LabelGroup,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
+  const [activeTabKeySecondary, setActiveTabKeySecondary] = useState<number>(10);
+
+  // Toggle currently active tab
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  // Toggle currently active secondary tab
+  const handleTabClickSecondary = (_event: React.MouseEvent<HTMLElement>, tabIndex: number) => {
+    setActiveTabKeySecondary(tabIndex);
+  };
+
+  const tabsBreadcrumb = (
+    <PageBreadcrumb isWidthLimited>
+      <Breadcrumb>
+        <BreadcrumbItem to="#">Overview</BreadcrumbItem>
+        <BreadcrumbItem to="#">Pods</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Pod details{' '}
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </PageBreadcrumb>
+  );
+
+  const tabContent = (
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem spacer={{ default: 'spacerLg' }}>
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
+          Pod details
+        </Title>
+      </FlexItem>
+      <FlexItem>
+        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spacer={{ default: 'spacerLg' }}>
+                <FlexItem>
+                  <RhUiCheckCircleFillIcon />
+                </FlexItem>
+                <FlexItem>Running</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="teal">NS</Label>
+                </FlexItem>
+                <FlexItem>
+                  <a href="#">knative-serving-ingress</a>
+                </FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Restart policy</DescriptionListTerm>
+            <DescriptionListDescription>Always restart</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelGroup>
+                <Label>app=3scale-gateway</Label>
+                <Label>pod-template-has=6747686899</Label>
+              </LabelGroup>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
+            <DescriptionListDescription>Not configured</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod IP</DescriptionListTerm>
+            <DescriptionListDescription>10.345.2.197</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Node</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="purple">N</Label>
+                </FlexItem>
+                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at</DescriptionListTerm>
+            <DescriptionListDescription>
+              <time>Oct 15, 1:51 pm</time>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <DashboardWrapper hasNoBreadcrumb>
+      {tabsBreadcrumb}
+      <PageSection isWidthLimited aria-label="Pod header">
+        <Flex
+          spaceItems={{ default: 'spaceItemsMd' }}
+          alignItems={{ default: 'alignItemsFlexStart' }}
+          flexWrap={{ default: 'noWrap' }}
+        >
+          <FlexItem>
+            <Label color="blue">N</Label>
+          </FlexItem>
+          <FlexItem>
+            <Title headingLevel="h1" size="2xl">
+              3scale-control-fccb6ddb9-phyqv9
+            </Title>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flexNone' }}>
+            <Label icon={<RhUiInformationFillIcon />}>Running</Label>
+          </FlexItem>
+        </Flex>
+      </PageSection>
+      <PageSection type="tabs" isWidthLimited aria-label="Pod navigation tabs">
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
+          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
+          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
+          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
+          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection isWidthLimited padding={{ default: 'noPadding' }} aria-label="Pod content">
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>
+            <Tabs
+              isSecondary
+              activeKey={activeTabKeySecondary}
+              onSelect={handleTabClickSecondary}
+              usePageInsets
+              id="open-with-secondary-tabs-example-tabs-list-secondary"
+            >
+              <Tab
+                eventKey={10}
+                title={<TabTitleText>Pod information</TabTitleText>}
+                tabContentId={`tabContent${10}`}
+              />
+              <Tab
+                eventKey={11}
+                title={<TabTitleText>Editable aspects</TabTitleText>}
+                tabContentId={`tabContent${11}`}
+              />
+            </Tabs>
+            <TabContent
+              key={10}
+              eventKey={10}
+              id={`tabContent${10}`}
+              activeKey={activeTabKeySecondary}
+              hidden={10 !== activeTabKeySecondary}
+            >
+              <TabContentBody hasPadding>{tabContent}</TabContentBody>
+            </TabContent>
+            <TabContent
+              key={11}
+              eventKey={11}
+              id={`tabContent${11}`}
+              activeKey={activeTabKeySecondary}
+              hidden={11 !== activeTabKeySecondary}
+            >
+              <TabContentBody>Editable aspects</TabContentBody>
+            </TabContent>
+          </TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>YAML panel</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Environment panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Events panel</TabContentBody>
+        </TabContent>
+        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
+          <TabContentBody>Terminal panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -14,7 +14,7 @@ import {
   LabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const AttributeValueFiltering: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -239,7 +239,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
                 variant="plain"
                 onClick={clearChipsAndInput}
                 aria-label="Clear button and input"
-                icon={<TimesIcon />}
+                icon={<RhMicronsCloseIcon />}
               />
             )}
           </TextInputGroupUtilities>

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -14,7 +14,7 @@ import {
   LabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const AutoCompleteSearch: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -233,7 +233,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
                 variant="plain"
                 onClick={clearChipsAndInput}
                 aria-label="Clear button for chips and input"
-                icon={<TimesIcon />}
+                icon={<RhMicronsCloseIcon />}
               />
             )}
           </TextInputGroupUtilities>

package/src/deprecated/components/Chip/Chip.tsx

@@ -1,7 +1,8 @@
 import { Component, Fragment } from 'react';
 import { TooltipPosition } from '../../../components/Tooltip';
 import { Label, LabelProps } from '../../../components/Label';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
+import { getOUIAProps, OUIAProps } from '../../../helpers';
+import { SSRSafeIds } from '../../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface ChipProps extends LabelProps, OUIAProps {
   /** Badge to add to the chip. The badge will be rendered after the chip text. */
@@ -77,26 +78,30 @@ class Chip extends Component<ChipProps> {
     } = this.props;
 
     return (
-      <Label
-        variant="outline"
-        className={className}
-        textMaxWidth={textMaxWidth}
-        tooltipPosition={tooltipPosition}
-        {...(!isReadOnly &&
-          !isOverflowChip && {
-            onClose: onClick,
-            closeBtnAriaLabel: closeBtnAriaLabel ? closeBtnAriaLabel : `Close ${children}`
-          })}
-        {...(isOverflowChip && { onClick, variant: 'overflow' })}
-        {...getOUIAProps(
-          isOverflowChip ? 'OverflowChip' : Chip.displayName,
-          ouiaId !== undefined ? ouiaId : getDefaultOUIAId(Chip.displayName)
+      <SSRSafeIds prefix="pf-" ouiaComponentType={Chip.displayName}>
+        {(_, generatedOuiaId) => (
+          <Label
+            variant="outline"
+            className={className}
+            textMaxWidth={textMaxWidth}
+            tooltipPosition={tooltipPosition}
+            {...(!isReadOnly &&
+              !isOverflowChip && {
+                onClose: onClick,
+                closeBtnAriaLabel: closeBtnAriaLabel ? closeBtnAriaLabel : `Close ${children}`
+              })}
+            {...(isOverflowChip && { onClick, variant: 'overflow' })}
+            {...getOUIAProps(
+              isOverflowChip ? 'OverflowChip' : Chip.displayName,
+              ouiaId !== undefined ? ouiaId : generatedOuiaId
+            )}
+            {...props}
+          >
+            {children}
+            {badge && <Fragment> {badge}</Fragment>}
+          </Label>
         )}
-        {...props}
-      >
-        {children}
-        {badge && <Fragment> {badge}</Fragment>}
-      </Label>
+      </SSRSafeIds>
     );
   }
 }

package/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`Matches snapshot 1`] = `
       <button
         aria-label="Close Chip text"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        data-ouia-component-id="OUIA-Generated-Button-plain-17"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r2e:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -39,11 +39,11 @@ exports[`Matches snapshot 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 352 512"
+            viewBox="0 0 20 20"
             width="1em"
           >
             <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+              d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
             />
           </svg>
         </span>

package/src/deprecated/components/DualListSelector/DualListSelectorListItem.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId } from '../../../helpers';
+import { useSSRSafeId } from '../../../helpers';
 import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
 import { Button, ButtonVariant } from '../../../components/Button';
 import { DualListSelectorListContext } from './DualListSelectorContext';
@@ -38,7 +38,7 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   orderIndex,
   children,
   className,
-  id = getUniqueId('dual-list-selector-list-item'),
+  id: idProp,
   isSelected,
   innerRef,
   isDraggable = false,
@@ -47,6 +47,8 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   draggableButtonAriaLabel = 'Reorder option',
   ...props
 }: DualListSelectorListItemProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-list-item-');
+  const id = idProp || generatedId;
   const privateRef = useRef<HTMLLIElement>(null);
   const ref = innerRef || privateRef;
   const { setFocusedOption } = useContext(DualListSelectorListContext);

package/src/deprecated/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId, handleArrows } from '../../../helpers';
+import { handleArrows, useSSRSafeId } from '../../../helpers';
 import { DualListSelectorList } from './DualListSelectorList';
 import { DualListSelectorContext, DualListSelectorListContext } from './DualListSelectorContext';
 
@@ -37,10 +37,12 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   selectedOptions = [],
   onOptionSelect,
   displayOption,
-  id = getUniqueId('dual-list-selector-list'),
+  id: idProp,
   isDisabled = false,
   ...props
 }: DualListSelectorListWrapperProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-list-');
+  const id = idProp || generatedId;
   const [focusedOption, setFocusedOption] = useState('');
   const ref = useRef(null);
   const menuRef = innerRef || ref;

package/src/deprecated/components/DualListSelector/DualListSelectorPane.tsx

@@ -2,7 +2,7 @@ import { useContext, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree';
-import { getUniqueId } from '../../../helpers';
+import { useSSRSafeId } from '../../../helpers';
 import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
 import { DualListSelectorList } from './DualListSelectorList';
@@ -88,11 +88,13 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   onSearchInputChanged,
   onSearchInputClear,
   filterOption,
-  id = getUniqueId('dual-list-selector-pane'),
+  id: idProp,
   isDisabled = false,
   listMinHeight,
   ...props
 }: DualListSelectorPaneProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-pane-');
+  const id = idProp || generatedId;
   const [input, setInput] = useState('');
   const { isTree } = useContext(DualListSelectorContext);
 

package/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/DualListSelector/dua
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTreeItemData } from './DualListSelectorTree';
 import { Badge } from '../../../components/Badge';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { flattenTree } from './treeUtils';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
@@ -119,7 +119,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                 tabIndex={-1}
               >
                 <span className={css(styles.dualListSelectorItemToggleIcon)}>
-                  <AngleRightIcon />
+                  <RhMicronsCaretDownIcon />
                 </span>
               </div>
             )}