@patternfly/react-core 6.6.2 → 6.7.0-prerelease.2

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

@@ -55,6 +55,9 @@ exports[`Matches the snapshot with drawer 1`] = `
   >
     <div
       class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
+      data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
+      data-ouia-component-type="PF6/Drawer"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-drawer__main"

package/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap

@@ -4,6 +4,9 @@ exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
+    data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"

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

@@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
             <input
               aria-invalid="false"
               aria-label="Date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:rq:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r11:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               placeholder="YYYY-MM-DD"
@@ -37,7 +37,7 @@ exports[`With popover opened 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:rr:"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r12:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -64,10 +64,13 @@ exports[`With popover opened 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="popover-pf-:ro:-body"
+      aria-describedby="popover-pf-:ru:-body"
       aria-label=""
       aria-modal="true"
       class="pf-v6-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
+      data-ouia-component-id="OUIA-Generated-Popover-:rv:"
+      data-ouia-component-type="PF6/Popover"
+      data-ouia-safe="true"
       data-popper-escaped="true"
       data-popper-placement="bottom"
       data-popper-reference-hidden="true"
@@ -82,10 +85,13 @@ exports[`With popover opened 1`] = `
       >
         <div
           class="pf-v6-c-popover__body"
-          id="popover-pf-:ro:-body"
+          id="popover-pf-:ru:-body"
         >
           <div
             class="pf-v6-c-calendar-month"
+            data-ouia-component-id="OUIA-Generated-CalendarMonth-:r13:"
+            data-ouia-component-type="PF6/CalendarMonth"
+            data-ouia-safe="true"
           >
             <div
               class="pf-v6-c-calendar-month__header"
@@ -96,7 +102,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Previous month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rt:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:r15:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -131,14 +137,15 @@ exports[`With popover opened 1`] = `
                   >
                     <span
                       hidden=""
-                      id="hidden-month-span:rs:"
+                      id="hidden-month-span:r14:"
                     >
                       Month
                     </span>
                     <button
                       aria-expanded="false"
+                      aria-haspopup="menu"
                       class="pf-v6-c-menu-toggle"
-                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r18:"
                       data-ouia-component-type="PF6/MenuToggle"
                       data-ouia-safe="true"
                       style="width: 140px;"
@@ -185,7 +192,7 @@ exports[`With popover opened 1`] = `
                       <input
                         aria-invalid="false"
                         aria-label="Select year"
-                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r12:"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
                         data-ouia-component-type="PF6/TextInput"
                         data-ouia-safe="true"
                         type="number"
@@ -201,7 +208,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Next month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r13:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:r1b:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -812,7 +819,7 @@ exports[`disabled date picker 1`] = `
             <input
               aria-invalid="false"
               aria-label="disabled date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               disabled=""
@@ -829,7 +836,7 @@ exports[`disabled date picker 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r4:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""

package/src/components/DescriptionList/DescriptionList.tsx

@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
-import { formatBreakpointMods } from '../../helpers';
+import { formatBreakpointMods, useOUIAProps, OUIAProps } from '../../helpers';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
 import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
 import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
@@ -13,7 +13,7 @@ export interface BreakpointModifiers {
   '2xl'?: string;
 }
 
-export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElement>, 'type'> {
+export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElement>, 'type'>, OUIAProps {
   /** Anything that can be rendered inside of the list */
   children?: React.ReactNode;
   /** Additional classes added to the list */
@@ -71,6 +71,10 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: string;
     '2xl'?: string;
   };
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const setBreakpointModifiers = (prefix: string, modifiers: BreakpointModifiers) => {
@@ -99,8 +103,11 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   horizontalTermWidthModifier,
   orientation,
   style,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DescriptionListProps) => {
+  const ouiaProps = useOUIAProps(DescriptionList.displayName, ouiaId, ouiaSafe);
   if (isAutoFit && autoFitMinModifier) {
     style = {
       ...style,
@@ -139,6 +146,7 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
       )}
       style={style}
       {...props}
+      {...ouiaProps}
     >
       {children}
     </dl>

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

@@ -4,7 +4,7 @@ import { DescriptionList } from '../DescriptionList';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 
 test('Renders to match snapshot', () => {
-  const { asFragment } = render(<DescriptionList />);
+  const { asFragment } = render(<DescriptionList ouiaId="ouia-id" />);
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -155,3 +155,23 @@ test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () =
     `--${styles.descriptionList}--GridTemplateColumns--min: 50px; --${styles.descriptionList}--GridTemplateColumns--min-on-sm: 50px; --${styles.descriptionList}--GridTemplateColumns--min-on-md: 100px; --${styles.descriptionList}--GridTemplateColumns--min-on-lg: 150px; --${styles.descriptionList}--GridTemplateColumns--min-on-xl: 200px; --${styles.descriptionList}--GridTemplateColumns--min-on-2xl: 300px;`
   );
 });
+
+test('Renders with custom ouiaId', () => {
+  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-component-type', 'PF6/DescriptionList');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(<DescriptionList aria-label="list" ouiaId="test-id" ouiaSafe={false} />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-safe', 'false');
+});

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

@@ -4,6 +4,9 @@ exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <dl
     class="pf-v6-c-description-list"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/DescriptionList"
+    data-ouia-safe="true"
   />
 </DocumentFragment>
 `;

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -20,7 +20,7 @@ import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescriptio
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
-import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
 import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
 import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
 
@@ -29,66 +29,79 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
 ### Basic
 
 ```ts file='./DescriptionListBasic.tsx'
+
 ```
 
 ### Term help text
 
 ```ts file='./DescriptionListWithTermHelpText.tsx'
+
 ```
 
 ### Default 2 col
 
 ```ts file='./DescriptionListDefaultTwoCol.tsx'
+
 ```
 
 ### Default 3 col on lg
 
 ```ts file='./DescriptionListDefaultThreeColLg.tsx'
+
 ```
 
 ### Horizontal
 
 ```ts file='./DescriptionListHorizontal.tsx'
+
 ```
 
 ### Horizontal using custom term width modifier
 
 ```ts file='./DescriptionListHorizontalCustomTermWidth.tsx'
+
 ```
 
 ### Horizontal 2 col
 
 ```ts file='./DescriptionListHorizontalTwoCol.tsx'
+
 ```
 
 ### Horizontal 3 col on lg
 
 ```ts file='./DescriptionListHorizontalThreeColLg.tsx'
+
 ```
 
 ### Compact
 
 ```ts file='./DescriptionListCompact.tsx'
+
 ```
 
 ### Compact horizontal
 
 ```ts file='./DescriptionListCompactHorizontal.tsx'
+
 ```
 
 ### Fluid horizontal
 
 ```ts file='./DescriptionListFluidHorizontal.tsx'
+
 ```
 
 ### Column fill
 
 ```ts file='./DescriptionListColumnFill.tsx'
+
 ```
 
 ### Large display size
 
 ```ts file='./DescriptionListWithLargeDisplaySize.tsx'
+
 ```
 
 ## Responsive column definitions
@@ -96,16 +109,19 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
 ### Default responsive columns
 
 ```ts file='./DescriptionListDefaultResponsiveColumns.tsx'
+
 ```
 
 ### Horizontal responsive columns
 
 ```ts file='./DescriptionListHorizontalResponsiveColumns.tsx'
+
 ```
 
 ### Responsive horizontal, vertical group layout
 
 ```ts file='./DescriptionListResponsiveHoriVertGroup.tsx'
+
 ```
 
 ## Auto-column-width
@@ -113,11 +129,13 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
 ### Default auto column width
 
 ```ts file='./DescriptionListDefaultAutoColumn.tsx'
+
 ```
 
 ### Horizontal auto column width
 
 ```ts file='./DescriptionListHorizontalAutoColumn.tsx'
+
 ```
 
 ## Inline grid
@@ -125,6 +143,7 @@ import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-l
 ### Default inline grid
 
 ```ts file='./DescriptionListDefaultInlineGrid.tsx'
+
 ```
 
 ## Card variants
@@ -134,21 +153,25 @@ A [card component](/components/card) can be used in place of a description list
 ### Description list with card
 
 ```ts file='./DescriptionListWithCard.tsx'
+
 ```
 
 ### Description list with large display size and card
 
 ```ts file='./DescriptionListWithLargeDisplaySizeAndCard.tsx'
+
 ```
 
 ### Display size with card, three column on large breakpoint
 
 ```ts file='./DescriptionListDisplaySizeAndCardThreeColumn.tsx'
+
 ```
 
 ### Display size with card, horizontal, modified term width
 
 ```ts file='./DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx'
+
 ```
 
 ## Auto fit
@@ -156,16 +179,19 @@ A [card component](/components/card) can be used in place of a description list
 ### Auto-fit basic
 
 ```ts file='./DescriptionListAutoFitBasic.tsx'
+
 ```
 
 ### Auto-fit, min width modified grid template columns
 
 ```ts file='./DescriptionListAutoFitMinWidthModified.tsx'
+
 ```
 
 ### Auto-fit, min width modified, responsive grid template columns
 
 ```ts file='./DescriptionListAutoFitMinWidthResponsive.tsx'
+
 ```
 
 ## With icons
@@ -173,4 +199,5 @@ A [card component](/components/card) can be used in place of a description list
 ### Icons on terms
 
 ```ts file='./DescriptionListIconsOnTerms.tsx'
+
 ```

package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx

@@ -8,7 +8,7 @@ import {
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
-import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import RhUiKeyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-key-icon';
 import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
 import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
 
@@ -25,7 +25,7 @@ export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
       </DescriptionListDescription>
     </DescriptionListGroup>
     <DescriptionListGroup>
-      <DescriptionListTerm icon={<KeyIcon />}>Labels</DescriptionListTerm>
+      <DescriptionListTerm icon={<RhUiKeyIcon />}>Labels</DescriptionListTerm>
       <DescriptionListDescription>example</DescriptionListDescription>
     </DescriptionListGroup>
     <DescriptionListGroup>

package/src/components/Drawer/Drawer.tsx

@@ -1,6 +1,7 @@
 import { createContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
+import { useOUIAProps, OUIAProps } from '../../helpers';
 
 export enum DrawerColorVariant {
   default = 'default',
@@ -11,7 +12,7 @@ export enum DrawerColorVariant {
   noBackground = 'no-background'
 }
 
-export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
+export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Additional classes added to the Drawer. */
   className?: string;
   /** Content rendered in the drawer panel */
@@ -22,12 +23,18 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   isInline?: boolean;
   /** @beta Indicates if the drawer will have pill styles */
   isPill?: boolean;
+  /** @beta Positions the drawer as fixed to fill the viewport. Place the drawer after Page as a sibling. */
+  isViewport?: boolean;
   /** Indicates if the drawer will always show both content and panel. */
   isStatic?: boolean;
   /** Position of the drawer panel. left and right are deprecated, use start and end instead. */
   position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export interface DrawerContextProps {
@@ -38,6 +45,7 @@ export interface DrawerContextProps {
   drawerRef?: React.RefObject<HTMLDivElement | null>;
   drawerContentRef?: React.RefObject<HTMLDivElement | null>;
   isInline: boolean;
+  isViewport: boolean;
 }
 
 export const DrawerContext = createContext<Partial<DrawerContextProps>>({
@@ -47,7 +55,8 @@ export const DrawerContext = createContext<Partial<DrawerContextProps>>({
   position: 'end',
   drawerRef: null,
   drawerContentRef: null,
-  isInline: false
+  isInline: false,
+  isViewport: false
 });
 
 export const Drawer: React.FunctionComponent<DrawerProps> = ({
@@ -56,22 +65,29 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isExpanded = false,
   isInline = false,
   isPill = false,
+  isViewport = false,
   isStatic = false,
   position = 'end',
   onExpand = () => {},
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DrawerProps) => {
+  const ouiaProps = useOUIAProps(Drawer.displayName, ouiaId, ouiaSafe);
   const drawerRef = useRef<HTMLDivElement>(undefined);
   const drawerContentRef = useRef<HTMLDivElement>(undefined);
 
   return (
-    <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline }}>
+    <DrawerContext.Provider
+      value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline, isViewport }}
+    >
       <div
         className={css(
           styles.drawer,
           isExpanded && styles.modifiers.expanded,
           isInline && styles.modifiers.inline,
           isPill && styles.modifiers.pill,
+          isViewport && styles.modifiers.viewport,
           isStatic && styles.modifiers.static,
           (position === 'left' || position === 'start') && styles.modifiers.panelLeft,
           position === 'bottom' && styles.modifiers.panelBottom,
@@ -79,6 +95,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
         )}
         ref={drawerRef}
         {...props}
+        {...ouiaProps}
       >
         {children}
       </div>

package/src/components/Drawer/DrawerCloseButton.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
-import { Button } from '../Button';
+import { Button, ButtonProps } from '../Button';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
@@ -10,16 +10,30 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
   onClose?: () => void;
   /** Accessible label for the drawer close button */
   'aria-label'?: string;
+  /** Additional properties spread to the close button */
+  buttonProps?: Omit<ButtonProps, 'onClick'>;
 }
 
 export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = 'Close drawer panel',
+  buttonProps,
   ...props
-}: DrawerCloseButtonProps) => (
-  <div className={css(styles.drawerClose, className)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
-  </div>
-);
+}: DrawerCloseButtonProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { onClick: _onClick, ...restButtonProps } = (buttonProps ?? {}) as ButtonProps;
+
+  return (
+    <div className={css(styles.drawerClose, className)} {...props}>
+      <Button
+        variant="plain"
+        onClick={onClose}
+        aria-label={ariaLabel}
+        icon={<RhMicronsCloseIcon />}
+        {...restButtonProps}
+      />
+    </div>
+  );
+};
 DrawerCloseButton.displayName = 'DrawerCloseButton';

package/src/components/Drawer/DrawerContent.tsx

@@ -13,7 +13,7 @@ export enum DrawerContentColorVariant {
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
   className?: string;
-  /** Content to be rendered in the drawer. */
+  /** Content to be rendered in the drawer. Can be omitted to leave the content container empty. */
   children?: React.ReactNode;
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -8,6 +8,7 @@ import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
 import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
 import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
 import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface DrawerPanelFocusTrapObject {
   /** Enables a focus trap on the drawer panel content. This will also automatically
@@ -99,7 +100,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const panel = useRef<HTMLDivElement>(undefined);
   const splitterRef = useRef<HTMLDivElement>(undefined);
   const [separatorValue, setSeparatorValue] = useState(0);
-  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } = useContext(DrawerContext);
+  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline, isViewport } =
+    useContext(DrawerContext);
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = useState(!hidden);
   const [isFocusTrapActive, setIsFocusTrapActive] = useState(false);
@@ -125,9 +127,22 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     }
   }, [isStatic, isExpanded]);
 
+  const getSizeElement = () => {
+    if (isViewport) {
+      return drawerRef?.current ?? drawerContentRef?.current;
+    }
+    return drawerContentRef?.current ?? drawerRef?.current;
+  };
+
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
+    const sizeEl = getSizeElement();
+
+    if (!sizeEl || !panel.current || !splitterRef.current || !drawerRef?.current) {
+      return 0;
+    }
+
     const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     if (isInline && (position === 'end' || position === 'right')) {
@@ -148,37 +163,23 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       }
     } else if (position === 'end' || position === 'right') {
       if (isRTL) {
-        splitterPos =
-          drawerContentRef.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().left -
-          drawerContentRef.current.getBoundingClientRect().right;
+        splitterPos = sizeEl.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize = sizeEl.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
       } else {
-        splitterPos =
-          drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().right -
-          drawerContentRef.current.getBoundingClientRect().left;
+        splitterPos = sizeEl.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize = sizeEl.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
       }
     } else if (position === 'start' || position === 'left') {
       if (isRTL) {
-        splitterPos =
-          splitterRef.current.getBoundingClientRect().left - drawerContentRef.current.getBoundingClientRect().right;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().left -
-          drawerContentRef.current.getBoundingClientRect().right;
+        splitterPos = splitterRef.current.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
+        drawerSize = sizeEl.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
       } else {
-        splitterPos =
-          splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().right -
-          drawerContentRef.current.getBoundingClientRect().left;
+        splitterPos = splitterRef.current.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
+        drawerSize = sizeEl.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
       }
     } else if (position === 'bottom') {
-      splitterPos =
-        drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().bottom - drawerContentRef.current.getBoundingClientRect().top;
+      splitterPos = sizeEl.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
+      drawerSize = sizeEl.getBoundingClientRect().bottom - sizeEl.getBoundingClientRect().top;
     }
 
     const newSplitterPos = (splitterPos / drawerSize) * 100;
@@ -408,7 +409,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
         ...((defaultSize || minSize || maxSize) && boundaryCssVars),
         ...style
       }}
-      {...(shouldCollapseSpace && { inert: '' })}
+      {...(shouldCollapseSpace && { inert: IS_INERT })}
       {...props}
       ref={panel}
     >