@patternfly/react-core 6.0.0-prerelease.8 → 6.0.0

package/src/components/Truncate/examples/Truncate.md

@@ -1,6 +1,7 @@
 ---
 id: Truncate
 section: components
+cssPrefix: pf-v6-c-truncate
 propComponents: [Truncate]
 ---
 

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

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-v5-c-wizard
+cssPrefix: pf-v6-c-wizard
 propComponents:
   [
     'Wizard',

package/src/components/index.ts

@@ -65,7 +65,6 @@ export * from './Switch';
 export * from './Tabs';
 export * from './TextArea';
 export * from './TextInput';
-export * from './Tile';
 export * from './TimePicker';
 export * from './Timestamp';
 export * from './Title';

package/src/demos/CardDemos.md

@@ -9,13 +9,13 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-ic
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, BellIcon } from '@patternfly/react-icons';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
-import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
+import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import text from '@patternfly/react-styles/css/utilities/Text/text';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';

package/src/demos/CardView/examples/CardView.tsx

@@ -283,19 +283,17 @@ export const CardViewBasic: React.FunctionComponent = () => {
             isExpanded={splitButtonDropdownIsOpen}
             onClick={onSplitButtonToggle}
             aria-label="Select cards"
-            splitButtonOptions={{
-              items: [
-                <MenuToggleCheckbox
-                  id="split-dropdown-checkbox"
-                  key="split-dropdown-checkbox"
-                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
-                  isChecked={areAllSelected}
-                  onClick={(e) => splitCheckboxSelectAll(e)}
-                >
-                  {numSelected !== 0 && `${numSelected} selected`}
-                </MenuToggleCheckbox>
-              ]
-            }}
+            splitButtonItems={[
+              <MenuToggleCheckbox
+                id="split-dropdown-checkbox"
+                key="split-dropdown-checkbox"
+                aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                isChecked={areAllSelected}
+                onClick={(e) => splitCheckboxSelectAll(e)}
+              >
+                {numSelected !== 0 && `${numSelected} selected`}
+              </MenuToggleCheckbox>
+            ]}
           ></MenuToggle>
         )}
       >

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -38,15 +38,13 @@ export const DataListBasic: React.FunctionComponent = () => {
       <ToolbarItem variant="bulk-select">
         <MenuToggle
           aria-label="Select cards"
-          splitButtonOptions={{
-            items: [
-              <MenuToggleCheckbox
-                id="split-dropdown-checkbox"
-                key="split-dropdown-checkbox"
-                aria-label={'Select all cards'}
-              />
-            ]
-          }}
+          splitButtonItems={[
+            <MenuToggleCheckbox
+              id="split-dropdown-checkbox"
+              key="split-dropdown-checkbox"
+              aria-label={'Select all cards'}
+            />
+          ]}
         ></MenuToggle>
       </ToolbarItem>
       <ToolbarItem>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -169,12 +169,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                     </DataListCell>
                   ]}
                 />
-                <DataListAction
-                  aria-labelledby="ex-item1 ex-action1"
-                  id="ex-action1"
-                  aria-label="Actions"
-                  isPlainButtonAction
-                >
+                <DataListAction aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions">
                   <Dropdown
                     isOpen={isOpen1}
                     onSelect={onSelect1}
@@ -251,12 +246,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                     </DataListCell>
                   ]}
                 />
-                <DataListAction
-                  aria-labelledby="ex-item2 ex-action2"
-                  id="ex-action2"
-                  aria-label="Actions"
-                  isPlainButtonAction
-                >
+                <DataListAction aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions">
                   <Dropdown
                     isOpen={isOpen2}
                     onSelect={onSelect2}
@@ -333,12 +323,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                     </DataListCell>
                   ]}
                 />
-                <DataListAction
-                  aria-labelledby="ex-item3 ex-action3"
-                  id="ex-action3"
-                  aria-label="Actions"
-                  isPlainButtonAction
-                >
+                <DataListAction aria-labelledby="ex-item3 ex-action3" id="ex-action3" aria-label="Actions">
                   <Dropdown
                     isOpen={isOpen3}
                     onSelect={onSelect3}

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -209,17 +209,15 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="attribute-search-input-bulk-select"
-            key="attribute-search-input-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="attribute-search-input-bulk-select"
+          key="attribute-search-input-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -187,17 +187,15 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="checkbox-bulk-select"
-            key="checkbox-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="checkbox-bulk-select"
+          key="checkbox-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -192,17 +192,15 @@ export const FilterFaceted: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="filter-faceted-input-bulk-select"
-            key="filter-faceted-input-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="filter-faceted-input-bulk-select"
+          key="filter-faceted-input-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -189,17 +189,15 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="mixed-group-input-bulk-select"
-            key="mixed-group-input-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="mixed-group-input-bulk-select"
+          key="mixed-group-input-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -190,17 +190,15 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="same-select-group-input-bulk-select"
-            key="same-select-group-input-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="same-select-group-input-bulk-select"
+          key="same-select-group-input-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -193,17 +193,15 @@ export const FilterSearchInput: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="search-input-bulk-select"
-            key="search-input-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="search-input-bulk-select"
+          key="search-input-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -182,17 +182,15 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="single-bulk-select"
-            key="single-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="single-bulk-select"
+          key="single-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/JumpLinks.md

@@ -4,6 +4,7 @@ section: components
 ---
 
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos

package/src/demos/ProgressDemo.md

@@ -3,6 +3,8 @@ id: Progress
 section: components
 ---
 
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
 ## Demos
 
 ### Basic
@@ -10,6 +12,7 @@ section: components
 ```js
 import React from 'react';
 import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
   const [currentValue, setCurrentValue] = React.useState(0);
@@ -31,7 +34,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-v5-screen-reader" aria-live="polite">
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />
@@ -71,7 +74,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-v5-screen-reader" aria-live="polite">
+          <div className={accessibilityStyles.screenReader} aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />

package/src/demos/ProgressStepperDemo.md

@@ -3,6 +3,8 @@ id: Progress stepper
 section: components
 ---
 
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
 ## Demos
 
 ### Basic
@@ -10,6 +12,7 @@ section: components
 ```js
 import React from 'react';
 import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
   const [currentStep, setCurrentStep] = React.useState(0);
@@ -45,7 +48,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-v5-screen-reader" aria-live="polite">
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
           {steps[currentStep] && `On ${steps[currentStep].title}.`}
           {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}
         </div>

package/src/demos/examples/Card/CardNested.tsx

@@ -13,7 +13,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 

package/src/demos/examples/Card/CardStatus.tsx

@@ -27,7 +27,7 @@ import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import global_text_color_subtle from '@patternfly/react-tokens/dist/esm/global_text_color_subtle';
+import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
   const [drawerExpanded, setDrawerExpanded] = React.useState(false);
@@ -176,7 +176,7 @@ export const CardStatus: React.FunctionComponent = () => {
                 <a href="#">Operators</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: global_text_color_subtle.var }}>1 degraded</span>
+                <span style={{ color: t_global_text_color_subtle.var }}>1 degraded</span>
               </FlexItem>
             </Flex>
           </Flex>
@@ -193,7 +193,7 @@ export const CardStatus: React.FunctionComponent = () => {
                 <a href="#">Image Vulnerabilities</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: global_text_color_subtle.var }}>0 vulnerabilities</span>
+                <span style={{ color: t_global_text_color_subtle.var }}>0 vulnerabilities</span>
               </FlexItem>
             </Flex>
           </Flex>

package/src/demos/examples/Card/CardTrendDemo1.tsx

@@ -15,7 +15,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 export const CardTrendDemo1: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);

package/src/demos/examples/Card/CardTrendDemo2.tsx

@@ -10,7 +10,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 export const CardTrendDemo2: React.FunctionComponent = () => (
   <Gallery hasGutter minWidths={{ default: '360px' }}>

package/src/demos/examples/Card/CardUtilizationDemo1.tsx

@@ -12,7 +12,7 @@ import {
   Stack,
   Divider
 } from '@patternfly/react-core';
-import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 export const CardUtilizationDemo1: React.FunctionComponent = () => (
   <Gallery hasGutter minWidths={{ default: '360px' }}>

package/src/demos/examples/Card/CardUtilizationDemo2.tsx

@@ -12,7 +12,7 @@ import {
   Stack,
   Divider
 } from '@patternfly/react-core';
-import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 
 export const CardUtilizationDemo2: React.FunctionComponent = () => (
   <Gallery hasGutter minWidths={{ default: '360px' }}>

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -19,7 +19,7 @@ import {
   Icon
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
+import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';

package/src/demos/examples/Card/CardUtilizationDemo4.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Title, Gallery, GalleryItem } from '@patternfly/react-core';
-import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
 
 export const CardUtilizationDemo4: React.FunctionComponent = () => (
   <Gallery hasGutter minWidths={{ default: '360px' }}>

package/src/demos/examples/Card/CardWithAccordion.tsx

@@ -15,7 +15,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts';
+import { ChartArea, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -16,13 +16,11 @@ import {
   Sidebar,
   SidebarContent,
   SidebarPanel,
-  getResizeObserver,
   DrawerContext
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
-const JumpLinksWrapper = ({ offsetHeight, headings }) => {
+const JumpLinksWrapper = ({ headings }) => {
   const { drawerContentRef } = React.useContext(DrawerContext);
 
   return (
@@ -30,7 +28,6 @@ const JumpLinksWrapper = ({ offsetHeight, headings }) => {
       isVertical={true}
       label="Jump to section"
       scrollableRef={drawerContentRef}
-      offset={offsetHeight}
       expandable={{ default: 'expandable', md: 'nonExpandable' }}
     >
       {headings.map((heading) => (
@@ -46,23 +43,9 @@ const JumpLinksWrapper = ({ offsetHeight, headings }) => {
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
 
-  const [offsetHeight, setOffsetHeight] = React.useState(0);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const drawerRef = React.useRef();
 
-  React.useEffect(() => {
-    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
-    const drawerToggleSection = document.getElementById('drawer-toggle');
-
-    getResizeObserver(
-      masthead,
-      () => {
-        setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
-      },
-      true
-    );
-  }, []);
-
   const onCloseClick = () => {
     setIsExpanded(false);
   };
@@ -92,14 +75,14 @@ export const JumpLinksWithDrawer = () => {
             <Sidebar>
               <SidebarPanel variant="sticky">
                 <PageSection>
-                  <JumpLinksWrapper offsetHeight={offsetHeight} headings={headings} />
+                  <JumpLinksWrapper headings={headings} />
                 </PageSection>
               </SidebarPanel>
               <SidebarContent>
                 <PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }}>
                   <Button onClick={onToggleClick}>Toggle drawer</Button>
                 </PageSection>
-                <PageSection>
+                <PageSection hasOverflowScroll>
                   <Content>
                     {headings.map((heading) => (
                       <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -313,19 +313,17 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
             isExpanded={splitButtonDropdownIsOpen}
             onClick={onSplitButtonToggle}
             aria-label="Select cards"
-            splitButtonOptions={{
-              items: [
-                <MenuToggleCheckbox
-                  id="split-dropdown-checkbox"
-                  key="split-dropdown-checkbox"
-                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
-                  isChecked={areAllSelected}
-                  onClick={splitCheckboxSelectAll.bind(this)}
-                >
-                  {numSelected !== 0 && `${numSelected} selected`}
-                </MenuToggleCheckbox>
-              ]
-            }}
+            splitButtonItems={[
+              <MenuToggleCheckbox
+                id="split-dropdown-checkbox"
+                key="split-dropdown-checkbox"
+                aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                isChecked={areAllSelected}
+                onClick={splitCheckboxSelectAll.bind(this)}
+              >
+                {numSelected !== 0 && `${numSelected} selected`}
+              </MenuToggleCheckbox>
+            ]}
           ></MenuToggle>
         )}
       >

package/src/deprecated/components/Chip/examples/Chip.md

@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
+cssPrefix: ['pf-v6-c-chip', 'pf-v6-c-chip-group']
 propComponents: ['Chip', 'ChipGroup']
 ouia: true
 deprecated: true

package/src/deprecated/components/DragDrop/Draggable.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/DragDrop/drag-drop';
 import { DroppableContext } from './DroppableContext';
 import { DragDropContext } from './DragDrop';
 // import cssDraggingBackgroundColor from '@patternfly/react-tokens/dist/esm/c_draggable_m_dragging_BackgroundColor';
-const cssDraggingBackgroundColor = { name: '--pf-v5-c-draggable--m-dragging--BackgroundColor' };
+const cssDraggingBackgroundColor = { name: `--${styles.draggable}--m-dragging--BackgroundColor` };
 
 export interface DraggableProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside DragDrop */