@patternfly/react-core 4.235.6 → 4.236.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.235.6",
+  "version": "4.236.0",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.86.6",
-    "@patternfly/react-styles": "^4.85.6",
-    "@patternfly/react-tokens": "^4.87.6",
+    "@patternfly/react-icons": "^4.87.0",
+    "@patternfly/react-styles": "^4.86.0",
+    "@patternfly/react-tokens": "^4.88.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "e688e3b26385dc09280dca250d72a733ce18b52a"
+  "gitHead": "a4b7c93b2fad078f13a177a886317bbb054f4922"
 }

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

@@ -106,7 +106,7 @@ describe('Dropdown', () => {
       <Dropdown
         dropdownItems={dropdownItems}
         toggle={
-          <DropdownToggle id="Dropdown Toggle" isPrimary>
+          <DropdownToggle id="Dropdown Toggle" toggleVariant="primary">
             Dropdown
           </DropdownToggle>
         }

package/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx

@@ -46,7 +46,7 @@ export const DropdownPrimaryToggle: React.FunctionComponent = () => {
     <Dropdown
       onSelect={onSelect}
       toggle={
-        <DropdownToggle id="toggle-primary" isPrimary onToggle={onToggle}>
+        <DropdownToggle id="toggle-primary" toggleVariant="primary" onToggle={onToggle}>
           Dropdown
         </DropdownToggle>
       }

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -37,7 +37,8 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   tooltipProps = {} as any,
   ...props
 }: DualListSelectorControlProps) => {
-  const ref = innerRef || React.useRef(null);
+  const privateRef = React.useRef(null);
+  const ref = innerRef || privateRef;
   return (
     <div className={css('pf-c-dual-list-selector__controls-item', className)} {...props}>
       <Button

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -23,7 +23,8 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
   'aria-label': ariaLabel = 'Controls for moving options between lists',
   ...props
 }: DualListSelectorControlsWrapperProps) => {
-  const wrapperRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const wrapperRef = innerRef || ref;
   // Adds keyboard navigation to the dynamically built dual list selector controls. Works when controls are dynamically built
   // as well as when they are passed in via children.
   const handleKeys = (event: KeyboardEvent) => {

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -47,7 +47,8 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   draggableButtonAriaLabel = 'Reorder option',
   ...props
 }: DualListSelectorListItemProps) => {
-  const ref = innerRef || React.useRef<HTMLLIElement>(null);
+  const privateRef = React.useRef<HTMLLIElement>(null);
+  const ref = innerRef || privateRef;
   const { setFocusedOption } = React.useContext(DualListSelectorListContext);
 
   return (

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -42,7 +42,8 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   ...props
 }: DualListSelectorListWrapperProps) => {
   const [focusedOption, setFocusedOption] = React.useState('');
-  const menuRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const menuRef = innerRef || ref;
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // sets up keyboard focus handling for the dual list selector menu child of the pane. This keyboard

package/src/components/InputGroup/InputGroup.tsx

@@ -25,7 +25,8 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
     (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
   ) as React.ReactElement<{ id: string }>;
 
-  const inputGroupRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const inputGroupRef = innerRef || ref;
 
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>

package/src/components/MenuToggle/MenuToggle.tsx

@@ -124,7 +124,13 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
     };
 
     if (isTypeahead) {
-      return <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles)} {...componentProps} />;
+      return (
+        <div
+          ref={innerRef as React.Ref<HTMLDivElement>}
+          className={css(commonStyles, styles.modifiers.typeahead)}
+          {...componentProps}
+        />
+      );
     }
 
     if (splitButtonOptions) {

package/src/components/Page/PageSection.tsx

@@ -65,6 +65,8 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
    * This prop should also be passed in if a heading is not being used to describe the content of the page section.
    */
   'aria-label'?: string;
+  /** Sets the base component to render. Defaults to section */
+  component?: keyof JSX.IntrinsicElements;
 }
 
 const variantType = {
@@ -98,6 +100,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   hasShadowBottom = false,
   hasOverflowScroll = false,
   'aria-label': ariaLabel,
+  component = 'section',
   ...props
 }: PageSectionProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
@@ -109,8 +112,10 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
     }
   }, [hasOverflowScroll, ariaLabel]);
 
+  const Component = component as any;
+
   return (
-    <section
+    <Component
       {...props}
       className={css(
         variantType[type],
@@ -133,7 +138,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
       {!isWidthLimited && children}
-    </section>
+    </Component>
   );
 };
 PageSection.displayName = 'PageSection';

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -128,3 +128,15 @@ test('Logs a warning in the console when an aria-label is not included with hasO
 
   expect(consoleWarning).toHaveBeenCalled();
 });
+
+test('Renders as a section by default', () => {
+  render(<PageSection>test</PageSection>);
+
+  expect(screen.getByText('test')).toHaveProperty('nodeName', 'SECTION');
+});
+
+test('Renders as other elements when a different element type is passed using the component prop', () => {
+  render(<PageSection component="main">test</PageSection>);
+
+  expect(screen.getByRole('main')).toHaveTextContent('test');
+});

package/src/components/SearchInput/SearchInput.tsx

@@ -125,7 +125,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState(value);
   const searchInputRef = React.useRef(null);
-  const searchInputInputRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const searchInputInputRef = innerRef || ref;
 
   React.useEffect(() => {
     setSearchValue(value);

package/src/components/TextInputGroup/TextInputGroup.tsx

@@ -27,7 +27,8 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   innerRef,
   ...props
 }: TextInputGroupProps) => {
-  const textInputGroupRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const textInputGroupRef = innerRef || ref;
 
   return (
     <TextInputGroupContext.Provider value={{ isDisabled }}>

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -57,7 +57,8 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
-  const textInputGroupInputInputRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const textInputGroupInputInputRef = innerRef || ref;
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event.currentTarget.value, event);

package/src/next/components/Wizard/WizardToggle.tsx

@@ -84,95 +84,97 @@ export const WizardToggle = ({
         );
       });
 
-  const wizardNav = isCustomWizardNav(nav)
-    ? nav(isNavOpen, steps, activeStep, goToStepByIndex)
-    : React.useMemo(() => {
-        const props = {
-          isOpen: isNavOpen,
-          'aria-label': nav?.ariaLabel || 'Wizard nav',
-          ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
-        };
+  const wizardNav = React.useMemo(() => {
+    if (isCustomWizardNav(nav)) {
+      return nav(isNavOpen, steps, activeStep, goToStepByIndex);
+    }
+
+    const props = {
+      isOpen: isNavOpen,
+      'aria-label': nav?.ariaLabel || 'Wizard nav',
+      ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
+    };
 
-        return (
-          <WizardNav {...props}>
-            {steps.map((step, index) => {
-              const stepIndex = index + 1;
-              const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
-
-              if (isWizardParentStep(step)) {
-                let firstSubStepIndex;
-                let hasActiveChild = false;
-
-                const subNavItems = step.subStepIds?.map((subStepId, index) => {
-                  const subStep = steps.find(step => step.id === subStepId);
-                  const subStepIndex = steps.indexOf(subStep) + 1;
-
-                  if (index === 0) {
-                    firstSubStepIndex = subStepIndex;
-                  }
-
-                  if (activeStep?.id === subStep.id) {
-                    hasActiveChild = true;
-                  }
-
-                  return subStep.navItem ? (
-                    <React.Fragment key={subStep.id}>{subStep.navItem}</React.Fragment>
-                  ) : (
-                    <WizardNavItem
-                      key={subStep.id}
-                      id={subStep.id}
-                      content={subStep.name}
-                      isCurrent={activeStep?.id === subStep.id}
-                      isDisabled={subStep.isDisabled || (nav?.forceStepVisit && !subStep.visited)}
-                      step={subStepIndex}
-                      onNavItemClick={goToStepByIndex}
-                    />
-                  );
-                });
-
-                const hasEnabledChildren = React.Children.toArray(subNavItems).some(
-                  child => React.isValidElement(child) && !child.props.isDisabled
-                );
-
-                return (
-                  stepNavItem || (
-                    <WizardNavItem
-                      key={step.id}
-                      id={step.id}
-                      content={step.name}
-                      isExpandable={nav?.isExpandable}
-                      isCurrent={hasActiveChild}
-                      isDisabled={!hasEnabledChildren}
-                      step={firstSubStepIndex}
-                      onNavItemClick={goToStepByIndex}
-                    >
-                      <WizardNav {...props} returnList>
-                        {subNavItems}
-                      </WizardNav>
-                    </WizardNavItem>
-                  )
-                );
+    return (
+      <WizardNav {...props}>
+        {steps.map((step, index) => {
+          const stepIndex = index + 1;
+          const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
+
+          if (isWizardParentStep(step)) {
+            let firstSubStepIndex;
+            let hasActiveChild = false;
+
+            const subNavItems = step.subStepIds?.map((subStepId, index) => {
+              const subStep = steps.find(step => step.id === subStepId);
+              const subStepIndex = steps.indexOf(subStep) + 1;
+
+              if (index === 0) {
+                firstSubStepIndex = subStepIndex;
               }
 
-              if (isWizardBasicStep(step)) {
-                return (
-                  stepNavItem || (
-                    <WizardNavItem
-                      key={step.id}
-                      id={step.id}
-                      content={step.name}
-                      isCurrent={activeStep?.id === step.id}
-                      isDisabled={step.isDisabled || (nav?.forceStepVisit && !step.visited)}
-                      step={stepIndex}
-                      onNavItemClick={goToStepByIndex}
-                    />
-                  )
-                );
+              if (activeStep?.id === subStep.id) {
+                hasActiveChild = true;
               }
-            })}
-          </WizardNav>
-        );
-      }, [activeStep?.id, goToStepByIndex, isNavOpen, nav, steps]);
+
+              return subStep.navItem ? (
+                <React.Fragment key={subStep.id}>{subStep.navItem}</React.Fragment>
+              ) : (
+                <WizardNavItem
+                  key={subStep.id}
+                  id={subStep.id}
+                  content={subStep.name}
+                  isCurrent={activeStep?.id === subStep.id}
+                  isDisabled={subStep.isDisabled || (nav?.forceStepVisit && !subStep.visited)}
+                  step={subStepIndex}
+                  onNavItemClick={goToStepByIndex}
+                />
+              );
+            });
+
+            const hasEnabledChildren = React.Children.toArray(subNavItems).some(
+              child => React.isValidElement(child) && !child.props.isDisabled
+            );
+
+            return (
+              stepNavItem || (
+                <WizardNavItem
+                  key={step.id}
+                  id={step.id}
+                  content={step.name}
+                  isExpandable={nav?.isExpandable}
+                  isCurrent={hasActiveChild}
+                  isDisabled={!hasEnabledChildren}
+                  step={firstSubStepIndex}
+                  onNavItemClick={goToStepByIndex}
+                >
+                  <WizardNav {...props} returnList>
+                    {subNavItems}
+                  </WizardNav>
+                </WizardNavItem>
+              )
+            );
+          }
+
+          if (isWizardBasicStep(step)) {
+            return (
+              stepNavItem || (
+                <WizardNavItem
+                  key={step.id}
+                  id={step.id}
+                  content={step.name}
+                  isCurrent={activeStep?.id === step.id}
+                  isDisabled={step.isDisabled || (nav?.forceStepVisit && !step.visited)}
+                  step={stepIndex}
+                  onNavItemClick={goToStepByIndex}
+                />
+              )
+            );
+          }
+        })}
+      </WizardNav>
+    );
+  }, [activeStep?.id, goToStepByIndex, isNavOpen, nav, steps]);
 
   return (
     <>