@patternfly/react-core 6.2.0-prerelease.2 → 6.2.0-prerelease.20

package/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelBottom.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnBottom.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx

@@ -14,7 +14,7 @@ import {
 
 export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -13,7 +13,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
 
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLDivElement>(undefined);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Dropdown/Dropdown.tsx

@@ -27,7 +27,7 @@ export interface DropdownToggleProps {
   /**  Dropdown toggle node. */
   toggleNode: React.ReactNode;
   /** Reference to the toggle. */
-  toggleRef?: React.RefObject<HTMLButtonElement>;
+  toggleRef?: React.RefObject<HTMLButtonElement | null>;
 }
 
 /**
@@ -103,15 +103,15 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: DropdownProps) => {
-  const localMenuRef = React.useRef<HTMLDivElement>();
-  const localToggleRef = React.useRef<HTMLButtonElement>();
+  const localMenuRef = React.useRef<HTMLDivElement>(undefined);
+  const localToggleRef = React.useRef<HTMLButtonElement>(undefined);
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
 
-  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement | null>) || localMenuRef;
   const toggleRef =
     typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
       ? localToggleRef
-      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
+      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement | null>);
 
   const prevIsOpen = React.useRef<boolean>(isOpen);
   React.useEffect(() => {

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -11,7 +11,7 @@ export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HT
   /** Additional classes added to the wrapper. */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** Accessible label for the dual list selector controls wrapper. */
   'aria-label'?: string;
 }

package/src/components/DualListSelector/DualListSelectorList.tsx

@@ -10,7 +10,7 @@ export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElem
   /** Content rendered inside the dual list selector list. */
   children?: React.ReactNode;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLUListElement>;
+  innerRef?: React.RefObject<HTMLUListElement | null>;
 }
 
 export const DualListSelectorListBase: React.FunctionComponent<DualListSelectorListProps> = ({

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -24,7 +24,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   /** @hide Internal field used to keep track of order of unfiltered options. */
   orderIndex?: number;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLLIElement>;
+  innerRef?: React.RefObject<HTMLLIElement | null>;
   /** Flag indicating this item is draggable for reordering. */
   isDraggable?: boolean;
   /** Accessible label for the draggable button on draggable list items. */

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -15,7 +15,7 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   /** Accessibly label for the list. */
   'aria-labelledby': string;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** @hide Options to list in the pane. */
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -138,7 +138,9 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                     e.preventDefault();
                   }
                 }}
-                ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+                ref={(elem) => {
+                  elem && (elem.indeterminate = isChecked === null);
+                }}
                 checked={isChecked || false}
                 tabIndex={-1}
                 {...checkProps}
@@ -148,7 +150,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
             <span className={css(styles.dualListSelectorItemText)}>{text}</span>
             {hasBadge && children && (
               <span className={css(styles.dualListSelectorItemCount)}>
-                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement).props.data).length}</Badge>
+                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement<any>).props.data).length}</Badge>
               </span>
             )}
           </span>

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap

@@ -94,7 +94,6 @@ exports[`EmptyState Main 1`] = `
           class="pf-v6-c-empty-state__actions"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary"
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
             data-ouia-component-type="PF6/Button"
@@ -112,7 +111,6 @@ exports[`EmptyState Main 1`] = `
           class="pf-v6-c-empty-state__actions"
         >
           <button
-            aria-disabled="false"
             aria-label="learn more action"
             class="pf-v6-c-button pf-m-link"
             data-ouia-component-id="OUIA-Generated-Button-link-1"

package/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap

@@ -22,7 +22,6 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-5"
@@ -73,7 +72,6 @@ exports[`Disclosure ExpandableSection 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-6"
         data-ouia-component-type="PF6/Button"
@@ -127,7 +125,6 @@ exports[`ExpandableSection 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-1"
         data-ouia-component-type="PF6/Button"
@@ -181,7 +178,6 @@ exports[`Renders ExpandableSection expanded 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-2"
@@ -235,7 +231,6 @@ exports[`Renders ExpandableSection indented 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-7"
@@ -289,7 +284,6 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
     >
       <button
         aria-controls="content-id"
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-4"
         data-ouia-component-type="PF6/Button"

package/src/components/FileUpload/FileUpload.tsx

@@ -179,6 +179,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
       <input
         /* hidden, necessary for react-dropzone */
         {...inputProps}
+        hidden
       />
       {children}
     </FileUploadField>

package/src/components/FileUpload/FileUploadField.tsx

@@ -43,6 +43,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   id: string;
   /** Name property for the text input. */
   name?: string;
+  /** Flag to disable the browse button. */
+  isBrowseButtonDisabled?: boolean;
   /** Flag to disable the clear button. */
   isClearButtonDisabled?: boolean;
   /** Flag to show if the field is disabled. */
@@ -114,6 +116,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   browseButtonText = 'Browse...',
   browseButtonAriaDescribedby,
   clearButtonText = 'Clear',
+  isBrowseButtonDisabled = false,
   isClearButtonDisabled = !filename && !value,
   containerRef = null as React.Ref<HTMLDivElement>,
   allowEditingUploadedText = false,
@@ -153,7 +156,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             <Button
               variant={ButtonVariant.control}
               onClick={onBrowseButtonClick}
-              isDisabled={isDisabled}
+              isDisabled={isDisabled || isBrowseButtonDisabled}
               aria-describedby={browseButtonAriaDescribedby}
             >
               {browseButtonText}

package/src/components/FileUpload/__tests__/FileUploadField.test.tsx

@@ -1,6 +1,7 @@
 import { FileUploadField } from '../FileUploadField';
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
@@ -15,6 +16,7 @@ test('simple fileuploadfield', () => {
       filenamePlaceholder="Do something custom with this!"
       onBrowseButtonClick={browserBtnClickHandler}
       onClearButtonClick={clearBtnClickHandler}
+      isBrowseButtonDisabled={false}
       isClearButtonDisabled={false}
       isLoading={false}
       isDragActive={false}
@@ -32,7 +34,7 @@ test('Renders without aria-describedby on browse button by default', () => {
   expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAccessibleDescription();
 });
 
-test('Renders without aria-describedby on browse button by default', () => {
+test('Renders with aria-describedby on browse button', () => {
   render(
     <FileUploadField id="file-upload-field" browseButtonText="Upload" browseButtonAriaDescribedby="helper-text">
       <div id="helper-text">Helper text</div>
@@ -41,3 +43,15 @@ test('Renders without aria-describedby on browse button by default', () => {
 
   expect(screen.getByRole('button', { name: 'Upload' })).toHaveAccessibleDescription('Helper text');
 });
+
+test('Browse button is enabled by default', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAttribute('disabled');
+});
+
+test('Browse button is disabled with isBrowseButtonDisabled prop', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" isBrowseButtonDisabled={true} />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).toHaveAttribute('disabled');
+});

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -37,7 +37,6 @@ exports[`simple fileupload 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-1"
             data-ouia-component-type="PF6/Button"
@@ -55,7 +54,6 @@ exports[`simple fileupload 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-2"
             data-ouia-component-type="PF6/Button"
@@ -76,7 +74,7 @@ exports[`simple fileupload 1`] = `
       class="pf-v6-c-file-upload__file-details"
     >
       <span
-        class="pf-v6-c-form-control pf-m-resize-vertical"
+        class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical"
       >
         <textarea
           aria-invalid="false"
@@ -87,6 +85,7 @@ exports[`simple fileupload 1`] = `
       </span>
     </div>
     <input
+      hidden=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -36,7 +36,6 @@ exports[`simple fileuploadfield 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-1"
             data-ouia-component-type="PF6/Button"
@@ -54,7 +53,6 @@ exports[`simple fileuploadfield 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-2"
             data-ouia-component-type="PF6/Button"
@@ -74,7 +72,7 @@ exports[`simple fileuploadfield 1`] = `
       class="pf-v6-c-file-upload__file-details"
     >
       <span
-        class="pf-v6-c-form-control pf-m-resize-vertical"
+        class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical"
       >
         <textarea
           aria-invalid="false"

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -4,6 +4,7 @@ import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Chec
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const properties = [
     'filename',
+    'isBrowseButtonDisabled',
     'isClearButtonDisabled',
     'isDragActive',
     'isLoading',
@@ -15,6 +16,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
 
   const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState(false);
+  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = React.useState(true);
   const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);
   const [isLoading, setIsLoading] = React.useState(false);
   const [isDragActive, setIsDragActive] = React.useState(false);
@@ -24,6 +26,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
   const [checkedState, setCheckedState] = React.useState([
     filename,
+    isBrowseButtonDisabled,
     isClearButtonDisabled,
     isLoading,
     isDragActive,
@@ -44,6 +47,10 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         checked ? setFilename(true) : setFilename(false);
         break;
 
+      case 'isBrowseButtonDisabled':
+        checked ? setIsBrowseButtonDisabled(true) : setIsBrowseButtonDisabled(false);
+        break;
+
       case 'isClearButtonDisabled':
         checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);
         break;
@@ -109,6 +116,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         filenamePlaceholder="Do something custom with this!"
         onBrowseButtonClick={() => alert('Browse button clicked!')}
         onClearButtonClick={() => alert('Clear button clicked!')}
+        isBrowseButtonDisabled={isBrowseButtonDisabled}
         isClearButtonDisabled={isClearButtonDisabled}
         isLoading={isLoading}
         isDragActive={isDragActive}

package/src/components/Form/FormGroup.tsx

@@ -14,7 +14,7 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   /** Additional label information displayed after the label. */
   labelInfo?: React.ReactNode;
   /** A help button for the label. We recommend using FormGroupLabelHelp element as a help icon button. The help button should be wrapped or linked to our popover component. */
-  labelHelp?: React.ReactElement;
+  labelHelp?: React.ReactElement<any>;
   /** Sets the FormGroup required. */
   isRequired?: boolean;
   /** Sets the FormGroup isInline. */

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`Check expandable form field group example against snapshot 1`] = `
         class="pf-v6-c-form__field-group-toggle-button"
       >
         <button
-          aria-disabled="false"
           aria-expanded="true"
           aria-label="toggle"
           aria-labelledby="title-text-id2 generated-id"
@@ -75,7 +74,6 @@ exports[`Check expandable form field group example against snapshot 1`] = `
         class="pf-v6-c-form__field-group-header-actions"
       >
         <button
-          aria-disabled="false"
           class="pf-v6-c-button pf-m-primary"
           data-ouia-component-id="OUIA-Generated-Button-primary-2"
           data-ouia-component-type="PF6/Button"
@@ -124,7 +122,6 @@ exports[`Check form field group example against snapshot 1`] = `
         class="pf-v6-c-form__field-group-header-actions"
       >
         <button
-          aria-disabled="false"
           class="pf-v6-c-button pf-m-primary"
           data-ouia-component-id="OUIA-Generated-Button-primary-1"
           data-ouia-component-type="PF6/Button"

package/src/components/JumpLinks/JumpLinks.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
 import sidebarStyles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
-import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
-import { JumpLinksList } from './JumpLinksList';
-import { formatBreakpointMods } from '../../helpers/util';
-import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links__toggle_Display';
-import { canUseDOM } from '../../helpers/util';
+import { Button } from '../Button';
+import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
+import { JumpLinksList } from './JumpLinksList';
+import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -22,7 +21,7 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   /** Adds an accessible label to the internal nav element. Defaults to the value of the label prop. */
   'aria-label'?: string;
   /** 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>;
+  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement | null>;
   /** 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. */
@@ -46,6 +45,8 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   toggleAriaLabel?: string;
   /** Class for nav */
   className?: string;
+  /** Whether the current entry in the navigation history should be replaced when a JumpLinksItem is clicked. By default a new entry will be pushed to the navigation history. */
+  shouldReplaceNavHistory?: boolean;
 }
 
 // Recursively find JumpLinkItems and return an array of all their scrollNodes
@@ -92,6 +93,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   alwaysShowLabel = true,
   toggleAriaLabel = 'Toggle jump links',
   className,
+  shouldReplaceNavHistory = false,
   ...props
 }: JumpLinksProps) => {
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
@@ -100,7 +102,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   const [isExpanded, setIsExpanded] = React.useState(isExpandedProp);
   // Boolean to disable scroll listener from overriding active state of clicked jumplink
   const isLinkClicked = React.useRef(false);
-  const navRef = React.useRef<HTMLElement>();
+  const navRef = React.useRef<HTMLElement>(undefined);
 
   let scrollableElement: HTMLElement;
 
@@ -111,7 +113,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       } else if (typeof scrollableRef === 'function') {
         return scrollableRef();
       }
-      return (scrollableRef as React.RefObject<HTMLElement>).current;
+      return (scrollableRef as React.RefObject<HTMLElement | null>).current;
     } else if (scrollableSelector) {
       return document.querySelector(scrollableSelector) as HTMLElement;
     }
@@ -207,7 +209,11 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                     scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
                   }
                   newScrollItem.focus();
-                  window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  if (shouldReplaceNavHistory) {
+                    window.history.replaceState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  } else {
+                    window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  }
                   ev.preventDefault();
                   setActiveIndex(itemIndex);
                 }