@patternfly/react-core 6.0.0-alpha.39 → 6.0.0-alpha.40

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.38","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.39","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.38","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.39","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.38","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.39","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.39",
+  "version": "6.0.0-alpha.40",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -43,12 +43,13 @@
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated node_modules",
     "generate": "node scripts/copyStyles.js",
-    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
+    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json",
+    "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.14",
-    "@patternfly/react-styles": "^6.0.0-alpha.14",
-    "@patternfly/react-tokens": "^6.0.0-alpha.14",
+    "@patternfly/react-icons": "^6.0.0-alpha.15",
+    "@patternfly/react-styles": "^6.0.0-alpha.15",
+    "@patternfly/react-tokens": "^6.0.0-alpha.15",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
@@ -73,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "46db661285dacdab56d6ddc78f0cd31f56a1edea"
+  "gitHead": "296ac2be2f24ef201a347384c1561a311d0c8c54"
 }

package/scripts/cleanDistExports.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+
+const distIndexFiles = ['esm', 'js'].map((dir) => path.join(process.cwd(), 'dist', dir, 'index.js'));
+const distIndexDeclarationFiles = ['esm', 'js'].map((dir) => path.join(process.cwd(), 'dist', dir, 'index.d.ts'));
+
+[...distIndexFiles, ...distIndexDeclarationFiles].forEach((file) => {
+  const fileContents = fs.readFileSync(file, 'utf8');
+  const newFileContents = fileContents
+    .split('\n')
+    .filter((line) => !line.includes('demos'))
+    .join('\n');
+  fs.writeFileSync(file, newFileContents);
+});

package/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -183,6 +183,34 @@ test('Renders toggle icon before toggle text when togglePosition from context =
   expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
 });
 
+test('Renders toggle text before toggle icon by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>

package/src/components/Checkbox/Checkbox.tsx

@@ -137,7 +137,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     const labelRendered = label ? (
       <Label
         className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
-        htmlFor={!wrapWithLabel && props.id}
+        htmlFor={!wrapWithLabel ? props.id : undefined}
       >
         {label}
         {isRequired && (
@@ -154,7 +154,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     return (
       <Component
         className={css(styles.check, !label && styles.modifiers.standalone, className)}
-        htmlFor={wrapWithLabel && props.id}
+        htmlFor={wrapWithLabel ? props.id : undefined}
       >
         {isLabelBeforeButton ? (
           <>

package/src/components/JumpLinks/JumpLinks.tsx

@@ -21,7 +21,9 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   alwaysShowLabel?: boolean;
   /** Adds an accessible label to the internal nav element. Defaults to the value of the label prop. */
   'aria-label'?: string;
-  /** Selector for the scrollable element to spy on. Not passing a selector disables spying. */
+  /** Reference to the scrollable element to spy on. Takes precedence over scrollableSelector. Not passing a scrollableRef or scrollableSelector disables spying. */
+  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement>;
+  /** Selector for the scrollable element to spy on. Not passing a scrollableSelector or scrollableRef disables spying. */
   scrollableSelector?: string;
   /** The index of the child Jump link to make active. */
   activeIndex?: number;
@@ -81,6 +83,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   children,
   label,
   'aria-label': ariaLabel = typeof label === 'string' ? label : null,
+  scrollableRef,
   scrollableSelector,
   activeIndex: activeIndexProp = 0,
   offset = 0,
@@ -91,18 +94,29 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   className,
   ...props
 }: JumpLinksProps) => {
-  const hasScrollSpy = Boolean(scrollableSelector);
+  const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
   const [scrollItems, setScrollItems] = React.useState(hasScrollSpy ? getScrollItems(children, []) : []);
   const [activeIndex, setActiveIndex] = React.useState(activeIndexProp);
   const [isExpanded, setIsExpanded] = React.useState(isExpandedProp);
   // Boolean to disable scroll listener from overriding active state of clicked jumplink
   const isLinkClicked = React.useRef(false);
-  // Allow expanding to be controlled for a niche use case
-  React.useEffect(() => setIsExpanded(isExpandedProp), [isExpandedProp]);
   const navRef = React.useRef<HTMLElement>();
 
   let scrollableElement: HTMLElement;
 
+  const getScrollableElement = () => {
+    if (scrollableRef) {
+      if (scrollableRef instanceof HTMLElement) {
+        return scrollableRef;
+      } else if (typeof scrollableRef === 'function') {
+        return scrollableRef();
+      }
+      return (scrollableRef as React.RefObject<HTMLElement>).current;
+    } else if (scrollableSelector) {
+      return document.querySelector(scrollableSelector) as HTMLElement;
+    }
+  };
+
   const scrollSpy = React.useCallback(() => {
     if (!canUseDOM || !hasScrollSpy || !(scrollableElement instanceof HTMLElement)) {
       return;
@@ -139,14 +153,14 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   }, [scrollItems, hasScrollSpy, scrollableElement, offset]);
 
   React.useEffect(() => {
-    scrollableElement = document.querySelector(scrollableSelector) as HTMLElement;
+    scrollableElement = getScrollableElement();
     if (!(scrollableElement instanceof HTMLElement)) {
       return;
     }
     scrollableElement.addEventListener('scroll', scrollSpy);
 
     return () => scrollableElement.removeEventListener('scroll', scrollSpy);
-  }, [scrollableSelector, scrollSpy]);
+  }, [scrollableElement, scrollSpy, getScrollableElement]);
 
   React.useEffect(() => {
     scrollSpy();
@@ -174,7 +188,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
 
                 if (newScrollItem) {
                   // we have to support scrolling to an offset due to sticky sidebar
-                  const scrollableElement = document.querySelector(scrollableSelector) as HTMLElement;
+                  const scrollableElement = getScrollableElement() as HTMLElement;
                   if (scrollableElement instanceof HTMLElement) {
                     if (isResponsive(navRef.current)) {
                       // Remove class immediately so we can get collapsed height

package/src/components/MenuToggle/MenuToggle.tsx

@@ -96,7 +96,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             className={css(styles.menuToggleButton)}
             aria-expanded={isExpanded}
             onClick={onClick}
-            aria-label="Menu toggle"
+            aria-label={ariaLabel || 'Menu toggle'}
           >
             {toggleControls}
           </button>

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx

@@ -16,7 +16,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
   };
 
   return (
-    <MenuToggle variant="typeahead" isFullWidth>
+    <MenuToggle variant="typeahead" isFullWidth aria-label="Typeahead menu toggle">
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Radio/Radio.tsx

@@ -119,7 +119,7 @@ class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
     const labelRendered = label ? (
       <Label
         className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}
-        htmlFor={!wrapWithLabel && props.id}
+        htmlFor={!wrapWithLabel ? props.id : undefined}
       >
         {label}
       </Label>
@@ -130,7 +130,7 @@ class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {
     return (
       <Component
         className={css(styles.radio, !label && styles.modifiers.standalone, className)}
-        htmlFor={wrapWithLabel && props.id}
+        htmlFor={wrapWithLabel ? props.id : undefined}
       >
         {isLabelBeforeButton ? (
           <>

package/src/components/SearchInput/SearchInput.tsx

@@ -75,6 +75,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   hasWordsAttrLabel?: React.ReactNode;
   /** A suggestion for autocompleting. */
   hint?: string;
+  /** Id for the search input */
+  searchInputId?: string;
   /** @hide A reference object to attach to the input box. */
   innerRef?: React.RefObject<any>;
   /** A flag for controlling the open state of a custom advanced search implementation. */
@@ -126,6 +128,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   className,
+  searchInputId,
   value = '',
   attributes = [] as string[],
   formAdditionalItems,
@@ -298,6 +301,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
         name={name}
+        inputId={searchInputId}
       />
       {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>

package/src/components/Select/Select.tsx

@@ -70,6 +70,12 @@ export interface SelectProps extends MenuProps, OUIAProps {
   role?: string;
   /** Additional properties to pass to the popper */
   popperProps?: SelectPopperProps;
+  /** Height of the select menu */
+  menuHeight?: string;
+  /** Maximum height of select menu */
+  maxMenuHeight?: string;
+  /** Indicates if the select menu should be scrollable */
+  isScrollable?: boolean;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -87,6 +93,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   zIndex = 9999,
   role = 'listbox',
   popperProps,
+  menuHeight,
+  maxMenuHeight,
+  isScrollable,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -151,6 +160,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       }}
       isPlain={isPlain}
       selected={selected}
+      isScrollable={isScrollable}
       {...getOUIAProps(
         Select.displayName,
         props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),
@@ -158,7 +168,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       )}
       {...props}
     >
-      <MenuContent>{children}</MenuContent>
+      <MenuContent menuHeight={menuHeight} maxMenuHeight={maxMenuHeight}>
+        {children}
+      </MenuContent>
     </Menu>
   );
   return (

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -137,7 +137,14 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      variant="typeahead"
+      aria-label="Multi typeahead menu toggle"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -140,7 +140,14 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
   }, [selected]);
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      variant="typeahead"
+      aria-label="Multi typeahead checkbox menu toggle"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -147,7 +147,14 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      variant="typeahead"
+      aria-label="Multi typeahead creatable menu toggle"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -143,7 +143,14 @@ export const SelectBasic: React.FunctionComponent = () => {
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Typeahead menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -154,7 +154,14 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Typeahead creatable menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -53,6 +53,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   isExpanded?: boolean;
   /** @beta The id of the element(s) controlled by the input. Required if role has a value of "combobox". */
   'aria-controls'?: string;
+  /** The id of the input element */
+  inputId?: string;
 }
 
 const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -73,6 +75,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   role,
   isExpanded,
   'aria-controls': ariaControls,
+  inputId,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
@@ -94,6 +97,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
             disabled
             aria-hidden="true"
             value={hint}
+            id={inputId}
           />
         )}
         {icon && <span className={css(styles.textInputGroupIcon)}>{icon}</span>}
@@ -110,6 +114,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           placeholder={inputPlaceHolder}
           name={name}
           aria-activedescendant={ariaActivedescendant}
+          id={inputId}
           {...(role && { role })}
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}

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

@@ -109,6 +109,14 @@ describe('TextInputGroupMain', () => {
     expect(inputValue).toBeVisible();
   });
 
+  it('passes the inputId prop to the input', () => {
+    render(<TextInputGroupMain inputId="input-id">Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+
+    expect(input).toHaveAttribute('id', 'input-id');
+  });
+
   it('passes the placeholder prop to the input', () => {
     render(<TextInputGroupMain placeholder="placeholder text">Test</TextInputGroupMain>);
 

package/src/demos/JumpLinks.md

@@ -9,9 +9,10 @@ import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/mas
 
 JumpLinks has a scrollspy built-in to make your implementation easier. When implementing JumpLinks be sure to:
 
-1. Find the correct `scrollableSelector` for your page via [Firefox's debugging scrollable overflow](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow) or by adding `hasOverflowScroll` to a [PageSection](/components/page#pagesection) or [PageGroup](/components/page#pagegroup).
+1. Find the correct scrollable element for your page via [Firefox's debugging scrollable overflow](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow) or by adding `hasOverflowScroll` to a [PageSection](/components/page#pagesection) or [PageGroup](/components/page#pagegroup).
    - If you add `hasOverflowScroll` to a Page sub-component you should also add a relevant aria-label to that component as well.
-2. Provide `href`s to your JumpLinksItems which match the `id` of elements you want to spy on. If you wish to scroll to a different item than you're linking to use the `node` prop.
+2. Provide a reference to the scrollable element to `scrollableRef` prop or a CSS selector of the scrollable element to `scrollableSelector` prop.
+3. Provide `href`s to your JumpLinksItems which match the `id` of elements you want to spy on. If you wish to scroll to a different item than you're linking to use the `node` prop.
 
 ### Scrollspy with subsections
 
@@ -141,7 +142,7 @@ ScrollspyH2 = () => {
 
 This demo shows how jump links can be used in combination with a drawer.
 
-The `scrollableSelector` prop passed to the jump links component is an `id` that was placed on the `DrawerContent` component.
+This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component.
 
 ```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
 ```

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

@@ -16,11 +16,33 @@ import {
   SidebarContent,
   SidebarPanel,
   TextContent,
-  getResizeObserver
+  getResizeObserver,
+  DrawerContext
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
+const JumpLinksWrapper = ({ offsetHeight, headings }) => {
+  const { drawerContentRef } = React.useContext(DrawerContext);
+
+  return (
+    <JumpLinks
+      isVertical={true}
+      label="Jump to section"
+      scrollableRef={drawerContentRef}
+      offset={offsetHeight}
+      expandable={{ default: 'expandable', md: 'nonExpandable' }}
+    >
+      {headings.map((heading) => (
+        <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
+          {`${heading} section`}
+          <JumpLinksList></JumpLinksList>
+        </JumpLinksItem>
+      ))}
+    </JumpLinks>
+  );
+};
+
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
 
@@ -65,25 +87,12 @@ export const JumpLinksWithDrawer = () => {
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
       <Drawer isExpanded={isExpanded}>
-        <DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
+        <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>
             <Sidebar>
               <SidebarPanel variant="sticky">
                 <PageSection>
-                  <JumpLinks
-                    isVertical={true}
-                    label="Jump to section"
-                    scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
-                    offset={offsetHeight}
-                    expandable={{ default: 'expandable', md: 'nonExpandable' }}
-                  >
-                    {headings.map((heading) => (
-                      <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
-                        {`${heading} section`}
-                        <JumpLinksList></JumpLinksList>
-                      </JumpLinksItem>
-                    ))}
-                  </JumpLinks>
+                  <JumpLinksWrapper offsetHeight={offsetHeight} headings={headings} />
                 </PageSection>
               </SidebarPanel>
               <SidebarContent>

package/src/helpers/Popper/Popper.tsx

@@ -449,7 +449,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   React.useEffect(() => {
     // currentPopperContent = {tooltip children} || {dropdown children}
     const currentPopperContent =
-      popper?.props?.children[1]?.props?.children || popper?.props?.children?.props?.children;
+      popper?.props?.children?.[1]?.props?.children || popper?.props?.children?.props?.children;
     setPopperContent(currentPopperContent);
 
     if (currentPopperContent && popperContent && currentPopperContent !== popperContent) {

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from './components';
-export * from './demos';
 export * from './layouts';
 export * from './helpers';
 export * from './styles';

package/src/next/components/DualListSelector/DualListSelector.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { GenerateId, PickOptional } from '../../../helpers';
+import { DualListSelectorContext } from './DualListSelectorContext';
+
+/** Acts as a container for all other DualListSelector sub-components when using a
+ * composable dual list selector.
+ */
+
+export interface DualListSelectorProps {
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** ID of the dual list selector. */
+  id?: string;
+  /** Flag indicating if the dual list selector uses trees instead of simple lists. */
+  isTree?: boolean;
+  /** Content to be rendered in the dual list selector. */
+  children?: React.ReactNode;
+}
+
+class DualListSelector extends React.Component<DualListSelectorProps> {
+  static displayName = 'DualListSelector';
+  static defaultProps: PickOptional<DualListSelectorProps> = {
+    children: '',
+    isTree: false
+  };
+
+  constructor(props: DualListSelectorProps) {
+    super(props);
+  }
+
+  render() {
+    const { className, children, id, isTree, ...props } = this.props;
+
+    return (
+      <DualListSelectorContext.Provider value={{ isTree }}>
+        <GenerateId>
+          {(randomId) => (
+            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+              {children}
+            </div>
+          )}
+        </GenerateId>
+      </DualListSelectorContext.Provider>
+    );
+  }
+}
+
+export { DualListSelector };

package/src/next/components/DualListSelector/DualListSelectorContext.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export const DualListSelectorContext = React.createContext<{
+  isTree?: boolean;
+}>({ isTree: false });
+
+export const DualListSelectorListContext = React.createContext<{
+  setFocusedOption?: (id: string) => void;
+  isTree?: boolean;
+  ariaLabelledBy?: string;
+  focusedOption?: string;
+  displayOption?: (option: React.ReactNode) => boolean;
+  selectedOptions?: string[] | number[];
+  id?: string;
+  options?: React.ReactNode[];
+  isDisabled?: boolean;
+}>({});
+
+export const DualListSelectorPaneContext = React.createContext<{
+  isChosen: boolean;
+}>({ isChosen: false });