@patternfly/react-core 6.5.0-prerelease.39 → 6.5.0-prerelease.40

package/src/components/Checkbox/Checkbox.tsx

@@ -2,8 +2,8 @@ import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
-import { getUniqueId } from '../../helpers/util';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { ASTERISK } from '../../helpers/htmlConstants';
 
 export interface CheckboxProps
@@ -52,12 +52,7 @@ export interface CheckboxProps
 // tslint:disable-next-line:no-empty
 const defaultOnChange = () => {};
 
-interface CheckboxState {
-  ouiaStateId: string;
-  descriptionId: string;
-}
-
-class Checkbox extends Component<CheckboxProps, CheckboxState> {
+class Checkbox extends Component<CheckboxProps> {
   static displayName = 'Checkbox';
   static defaultProps: PickOptional<CheckboxProps> = {
     className: '',
@@ -70,14 +65,6 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     ouiaSafe: true
   };
 
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(Checkbox.displayName),
-      descriptionId: getUniqueId('pf-checkbox-description')
-    };
-  }
-
   private handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
     this.props.onChange(event, event.currentTarget.checked);
   };
@@ -120,76 +107,81 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
-    // Handle aria-describedby logic
-    let ariaDescribedByValue: string | undefined;
-    if (ariaDescribedBy !== undefined) {
-      ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
-    } else if (description) {
-      ariaDescribedByValue = this.state.descriptionId;
-    }
+    return (
+      <SSRSafeIds prefix="pf-checkbox-description-" ouiaComponentType="Checkbox">
+        {(descriptionId, generatedOuiaId) => {
+          let ariaDescribedByValue: string | undefined;
+          if (ariaDescribedBy !== undefined) {
+            ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
+          } else if (description) {
+            ariaDescribedByValue = descriptionId;
+          }
 
-    const inputRendered = (
-      <input
-        {...props}
-        className={css(styles.checkInput, inputClassName)}
-        type="checkbox"
-        onChange={this.handleChange}
-        aria-invalid={!isValid}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedByValue}
-        disabled={isDisabled}
-        required={isRequired}
-        ref={(elem) => {
-          elem && (elem.indeterminate = isChecked === null);
-        }}
-        {...checkedProps}
-        {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-      />
-    );
+          const inputRendered = (
+            <input
+              {...props}
+              className={css(styles.checkInput, inputClassName)}
+              type="checkbox"
+              onChange={this.handleChange}
+              aria-invalid={!isValid}
+              aria-label={ariaLabel}
+              aria-describedby={ariaDescribedByValue}
+              disabled={isDisabled}
+              required={isRequired}
+              ref={(elem) => {
+                elem && (elem.indeterminate = isChecked === null);
+              }}
+              {...checkedProps}
+              {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+            />
+          );
 
-    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
+          const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
 
-    const Label = wrapWithLabel ? 'span' : 'label';
-    const labelRendered = label ? (
-      <Label
-        className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
-        htmlFor={!wrapWithLabel ? props.id : undefined}
-      >
-        {label}
-        {isRequired && (
-          <span className={css(styles.checkLabelRequired)} aria-hidden="true">
-            {ASTERISK}
-          </span>
-        )}
-      </Label>
-    ) : null;
+          const Label = wrapWithLabel ? 'span' : 'label';
+          const labelRendered = label ? (
+            <Label
+              className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
+              htmlFor={!wrapWithLabel ? props.id : undefined}
+            >
+              {label}
+              {isRequired && (
+                <span className={css(styles.checkLabelRequired)} aria-hidden="true">
+                  {ASTERISK}
+                </span>
+              )}
+            </Label>
+          ) : null;
 
-    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
+          const WrapperComponent = component ?? (wrapWithLabel ? 'label' : 'div');
 
-    checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
-    return (
-      <Component
-        className={css(styles.check, !label && styles.modifiers.standalone, className)}
-        htmlFor={wrapWithLabel ? props.id : undefined}
-      >
-        {labelPosition === 'start' ? (
-          <>
-            {labelRendered}
-            {inputRendered}
-          </>
-        ) : (
-          <>
-            {inputRendered}
-            {labelRendered}
-          </>
-        )}
-        {description && (
-          <span id={this.state.descriptionId} className={css(styles.checkDescription)}>
-            {description}
-          </span>
-        )}
-        {body && <span className={css(styles.checkBody)}>{body}</span>}
-      </Component>
+          checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
+          return (
+            <WrapperComponent
+              className={css(styles.check, !label && styles.modifiers.standalone, className)}
+              htmlFor={wrapWithLabel ? props.id : undefined}
+            >
+              {labelPosition === 'start' ? (
+                <>
+                  {labelRendered}
+                  {inputRendered}
+                </>
+              ) : (
+                <>
+                  {inputRendered}
+                  {labelRendered}
+                </>
+              )}
+              {description && (
+                <span id={descriptionId} className={css(styles.checkDescription)}>
+                  {description}
+                </span>
+              )}
+              {body && <span className={css(styles.checkBody)}>{body}</span>}
+            </WrapperComponent>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

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

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-42"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r2j:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`Matches snapshot 1`] = `
     <button
       aria-label="Copyable input"
       class="pf-v6-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-1"
+      data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       id="button-id"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Matches snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-button pf-m-control"
-    data-ouia-component-id="OUIA-Generated-Button-control-1"
+    data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     id="main-id"

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

@@ -8,7 +8,7 @@ exports[`Matches the snapshot 1`] = `
     <button
       aria-label="Home"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-9"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -61,7 +61,7 @@ exports[`Matches the snapshot with custom props 1`] = `
     <button
       aria-label="Custom home"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-10"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:rj:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"

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

@@ -8,7 +8,7 @@ exports[`Matches the snapshot 1`] = `
     <button
       aria-label="Search"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-9"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -54,7 +54,7 @@ exports[`Matches the snapshot with custom props 1`] = `
     <button
       aria-label="Custom search"
       class="pf-v6-c-button pf-m-plain pf-m-circle"
-      data-ouia-component-id="OUIA-Generated-Button-plain-10"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:rj:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"

package/src/components/DataList/DataListCheck.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { Checkbox, CheckboxProps } from '../Checkbox';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface DataListCheckProps extends Omit<CheckboxProps, 'ref' | 'id'> {
   /** Id of the DataList checkbox. */
@@ -47,23 +47,20 @@ export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
   otherControls = false,
   ...props
 }: DataListCheckProps) => {
+  const randomId = useSSRSafeId();
   const check = (
     <div className={css(styles.dataListCheck)}>
-      <GenerateId>
-        {(randomId) => (
-          <Checkbox
-            id={id ?? `datalist-check-${randomId}`}
-            isChecked={isChecked}
-            checked={checked}
-            defaultChecked={defaultChecked}
-            onChange={onChange}
-            aria-invalid={!isValid}
-            isDisabled={isDisabled}
-            isLabelWrapped
-            {...props}
-          />
-        )}
-      </GenerateId>
+      <Checkbox
+        id={id ?? `datalist-check-${randomId}`}
+        isChecked={isChecked}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onChange={onChange}
+        aria-invalid={!isValid}
+        isDisabled={isDisabled}
+        isLabelWrapped
+        {...props}
+      />
     </div>
   );
   return (

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListCheck.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`DataListCheck should match snapshot (auto-generated) 1`] = `
           aria-invalid="false"
           aria-labelledby="string"
           class="pf-v6-c-check__input"
-          data-ouia-component-id="OUIA-Generated-Checkbox-1"
+          data-ouia-component-id="OUIA-Generated-Checkbox-:r2:"
           data-ouia-component-type="PF6/Checkbox"
           data-ouia-safe="true"
           id="test"

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
         aria-expanded="false"
         aria-label="'Details'"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="string"

package/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`Renders to match snapshot 1`] = `
         aria-label="Details"
         aria-labelledby=" ex-toggle2"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="ex-toggle2"

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-7"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:rq:"
               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-7"
+            data-ouia-component-id="OUIA-Generated-Button-control-:rr:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -76,7 +76,7 @@ exports[`With popover opened 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="popover-unique_id_mock-body"
+      aria-describedby="popover-pf-:ro:-body"
       aria-label=""
       aria-modal="true"
       class="pf-v6-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
@@ -94,7 +94,7 @@ exports[`With popover opened 1`] = `
       >
         <div
           class="pf-v6-c-popover__body"
-          id="popover-unique_id_mock-body"
+          id="popover-pf-:ro:-body"
         >
           <div
             class="pf-v6-c-calendar-month"
@@ -108,7 +108,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-1"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rt:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -155,14 +155,14 @@ exports[`With popover opened 1`] = `
                   >
                     <span
                       hidden=""
-                      id="unique_id_mock"
+                      id="hidden-month-span:rs:"
                     >
                       Month
                     </span>
                     <button
                       aria-expanded="false"
                       class="pf-v6-c-menu-toggle"
-                      data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:"
                       data-ouia-component-type="PF6/MenuToggle"
                       data-ouia-safe="true"
                       style="width: 140px;"
@@ -221,7 +221,7 @@ exports[`With popover opened 1`] = `
                       <input
                         aria-invalid="false"
                         aria-label="Select year"
-                        data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r12:"
                         data-ouia-component-type="PF6/TextInput"
                         data-ouia-safe="true"
                         type="number"
@@ -237,7 +237,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-2"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:r13:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -860,7 +860,7 @@ exports[`disabled date picker 1`] = `
             <input
               aria-invalid="false"
               aria-label="disabled date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               disabled=""
@@ -877,7 +877,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-1"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
 import { formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 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';
@@ -83,6 +83,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   style,
   ...props
 }: DrawerPanelContentProps) => {
+  const panelId = useSSRSafeId('pf-drawer-panel-');
   const panel = useRef<HTMLDivElement>(undefined);
   const splitterRef = useRef<HTMLDivElement>(undefined);
   const [separatorValue, setSeparatorValue] = useState(0);
@@ -332,105 +333,99 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const isValidFocusTrap = focusTrap?.enabled && !isStatic;
   const Component = isValidFocusTrap ? FocusTrap : 'div';
 
+  const focusTrapProps = {
+    tabIndex: -1,
+    'aria-modal': true,
+    role: 'dialog',
+    active: isFocusTrapActive,
+    'aria-labelledby': focusTrap?.['aria-labelledby'] || id || panelId,
+    focusTrapOptions: {
+      fallbackFocus: () => panel.current,
+      onActivate: () => {
+        if (previouslyFocusedElement.current !== document.activeElement) {
+          previouslyFocusedElement.current = document.activeElement;
+        }
+      },
+      onDeactivate: () => {
+        previouslyFocusedElement.current &&
+          previouslyFocusedElement.current.focus &&
+          previouslyFocusedElement.current.focus();
+      },
+      clickOutsideDeactivates: true,
+      returnFocusOnDeactivate: false,
+      // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
+      // We want to prevent this in case false is ever passed in.
+      initialFocus: focusTrap?.elementToFocusOnExpand || undefined,
+      escapeDeactivates: false
+    }
+  };
+
   return (
-    <GenerateId prefix="pf-drawer-panel-">
-      {(panelId) => {
-        const focusTrapProps = {
-          tabIndex: -1,
-          'aria-modal': true,
-          role: 'dialog',
-          active: isFocusTrapActive,
-          'aria-labelledby': focusTrap?.['aria-labelledby'] || id || panelId,
-          focusTrapOptions: {
-            fallbackFocus: () => panel.current,
-            onActivate: () => {
-              if (previouslyFocusedElement.current !== document.activeElement) {
-                previouslyFocusedElement.current = document.activeElement;
-              }
-            },
-            onDeactivate: () => {
-              previouslyFocusedElement.current &&
-                previouslyFocusedElement.current.focus &&
-                previouslyFocusedElement.current.focus();
-            },
-            clickOutsideDeactivates: true,
-            returnFocusOnDeactivate: false,
-            // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
-            // We want to prevent this in case false is ever passed in.
-            initialFocus: focusTrap?.elementToFocusOnExpand || undefined,
-            escapeDeactivates: false
+    <Component
+      {...(isValidFocusTrap && focusTrapProps)}
+      id={id || panelId}
+      className={css(
+        styles.drawerPanel,
+        isResizable && styles.modifiers.resizable,
+        hasNoGlass && 'pf-m-no-glass',
+        hasNoBorder && styles.modifiers.noBorder,
+        formatBreakpointMods(widths, styles),
+        colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+        colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
+        className
+      )}
+      onTransitionEnd={(ev) => {
+        if ((ev.target as HTMLElement) === panel.current) {
+          if (!hidden && ev.nativeEvent.propertyName === 'transform') {
+            onExpand(ev);
           }
-        };
-
-        return (
-          <Component
-            {...(isValidFocusTrap && focusTrapProps)}
-            id={id || panelId}
-            className={css(
-              styles.drawerPanel,
-              isResizable && styles.modifiers.resizable,
-              hasNoGlass && 'pf-m-no-glass',
-              hasNoBorder && styles.modifiers.noBorder,
-              formatBreakpointMods(widths, styles),
-              colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
-              colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
-              className
-            )}
-            onTransitionEnd={(ev) => {
-              if ((ev.target as HTMLElement) === panel.current) {
-                if (!hidden && ev.nativeEvent.propertyName === 'transform') {
-                  onExpand(ev);
-                }
-                setIsExpandedInternal(!hidden);
-                // We also need to collapse the space when the panel is hidden to prevent automation from scrolling to it
-                if (hidden && ev.nativeEvent.propertyName === 'transform') {
-                  setShouldCollapseSpace(true);
-                }
-                if (isValidFocusTrap && ev.nativeEvent.propertyName === 'transform') {
-                  setIsFocusTrapActive((prevIsFocusTrapActive) => !prevIsFocusTrapActive);
-                }
-              }
-            }}
-            hidden={hidden}
-            style={{
-              ...((defaultSize || minSize || maxSize) && boundaryCssVars),
-              ...style
-            }}
-            {...(shouldCollapseSpace && { inert: '' })}
-            {...props}
-            ref={panel}
-          >
-            {isExpandedInternal && (
-              <Fragment>
-                {isResizable && (
-                  <Fragment>
-                    <div
-                      className={css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical)}
-                      role="separator"
-                      tabIndex={0}
-                      aria-orientation={position === 'bottom' ? 'horizontal' : 'vertical'}
-                      aria-label={resizeAriaLabel}
-                      aria-valuenow={separatorValue}
-                      aria-valuemin={0}
-                      aria-valuemax={100}
-                      aria-controls={id || panelId}
-                      onMouseDown={handleMousedown}
-                      onKeyDown={handleKeys}
-                      onTouchStart={handleTouchStart}
-                      ref={splitterRef}
-                    >
-                      <div className={css(styles.drawerSplitterHandle)} aria-hidden></div>
-                    </div>
-                    <div className={css(styles.drawerPanelMain)}>{children}</div>
-                  </Fragment>
-                )}
-                {!isResizable && children}
-              </Fragment>
-            )}
-          </Component>
-        );
+          setIsExpandedInternal(!hidden);
+          // We also need to collapse the space when the panel is hidden to prevent automation from scrolling to it
+          if (hidden && ev.nativeEvent.propertyName === 'transform') {
+            setShouldCollapseSpace(true);
+          }
+          if (isValidFocusTrap && ev.nativeEvent.propertyName === 'transform') {
+            setIsFocusTrapActive((prevIsFocusTrapActive) => !prevIsFocusTrapActive);
+          }
+        }
+      }}
+      hidden={hidden}
+      style={{
+        ...((defaultSize || minSize || maxSize) && boundaryCssVars),
+        ...style
       }}
-    </GenerateId>
+      {...(shouldCollapseSpace && { inert: '' })}
+      {...props}
+      ref={panel}
+    >
+      {isExpandedInternal && (
+        <Fragment>
+          {isResizable && (
+            <Fragment>
+              <div
+                className={css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical)}
+                role="separator"
+                tabIndex={0}
+                aria-orientation={position === 'bottom' ? 'horizontal' : 'vertical'}
+                aria-label={resizeAriaLabel}
+                aria-valuenow={separatorValue}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-controls={id || panelId}
+                onMouseDown={handleMousedown}
+                onKeyDown={handleKeys}
+                onTouchStart={handleTouchStart}
+                ref={splitterRef}
+              >
+                <div className={css(styles.drawerSplitterHandle)} aria-hidden></div>
+              </div>
+              <div className={css(styles.drawerPanelMain)}>{children}</div>
+            </Fragment>
+          )}
+          {!isResizable && children}
+        </Fragment>
+      )}
+    </Component>
   );
 };
 DrawerPanelContent.displayName = 'DrawerPanelContent';

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v6-c-drawer__panel ''"
     hidden=""
-    id="generated-id"
+    id="pf-drawer-panel-:r0:"
     inert=""
   />
 </DocumentFragment>