@patternfly/react-core 5.4.0 → 5.4.2

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.4.0-prerelease.33","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.4.1","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.4.0-prerelease.33","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.4.1","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.4.0-prerelease.33","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.4.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.0",
+  "version": "5.4.2",
   "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",
@@ -62,5 +62,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "3ef073a38aea5cdb7f278b3820194444666393a3"
+  "gitHead": "fd42e20b634504ac5a60fd39d56d20a2151d2fa6"
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -127,7 +127,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
           );
           firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+        }, 10);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -70,7 +70,7 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
 interface ExpandableSectionState {
   isExpanded: boolean;
   hasToggle: boolean;
-  previousWidth: number;
+  previousWidth?: number;
 }
 
 const setLineClamp = (lines: number, element: HTMLDivElement) => {
@@ -87,7 +87,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
     super(props);
 
     this.state = {
-      isExpanded: props.isExpanded,
+      isExpanded: props.isExpanded || false,
       hasToggle: true,
       previousWidth: undefined
     };
@@ -129,6 +129,9 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   componentDidMount() {
     if (this.props.variant === ExpandableSectionVariant.truncate) {
       const expandableContent = this.expandableContentRef.current;
+      if (!expandableContent) {
+        return;
+      }
       this.setState({ previousWidth: expandableContent.offsetWidth });
       this.observer = getResizeObserver(expandableContent, this.handleResize, false);
 
@@ -143,6 +146,8 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   componentDidUpdate(prevProps: ExpandableSectionProps) {
     if (
       this.props.variant === ExpandableSectionVariant.truncate &&
+      this.props.truncateMaxLines &&
+      this.expandableContentRef.current &&
       (prevProps.truncateMaxLines !== this.props.truncateMaxLines || prevProps.children !== this.props.children)
     ) {
       const expandableContent = this.expandableContentRef.current;
@@ -171,12 +176,13 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   };
 
   resize = () => {
-    if (this.expandableContentRef.current) {
-      const { offsetWidth } = this.expandableContentRef.current;
-      if (this.state.previousWidth !== offsetWidth) {
-        this.setState({ previousWidth: offsetWidth });
-        this.checkToggleVisibility();
-      }
+    if (!this.expandableContentRef.current) {
+      return;
+    }
+    const { offsetWidth } = this.expandableContentRef.current;
+    if (this.state.previousWidth !== offsetWidth) {
+      this.setState({ previousWidth: offsetWidth });
+      this.checkToggleVisibility();
     }
   };
   handleResize = debounce(this.resize, 250);
@@ -221,7 +227,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
     if (isExpanded === undefined) {
       propOrStateIsExpanded = this.state.isExpanded;
       onToggle = (event, isOpen) => {
-        this.setState({ isExpanded: isOpen }, () => onToggleProp(event, this.state.isExpanded));
+        this.setState({ isExpanded: isOpen }, () => onToggleProp?.(event, this.state.isExpanded));
       };
     }
 
@@ -239,7 +245,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
         aria-expanded={propOrStateIsExpanded}
         aria-controls={uniqueContentId}
         id={uniqueToggleId}
-        onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
+        onClick={(event) => onToggle?.(event, !propOrStateIsExpanded)}
       >
         {variant !== ExpandableSectionVariant.truncate && (
           <span className={css(styles.expandableSectionToggleIcon)}>

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

@@ -58,6 +58,7 @@ exports[`Disclosure ExpandableSection 1`] = `
   >
     <button
       aria-controls="content-id"
+      aria-expanded="false"
       class="pf-v5-c-expandable-section__toggle"
       id="toggle-id"
       type="button"
@@ -103,6 +104,7 @@ exports[`ExpandableSection 1`] = `
   >
     <button
       aria-controls="content-id"
+      aria-expanded="false"
       class="pf-v5-c-expandable-section__toggle"
       id="toggle-id"
       type="button"
@@ -238,6 +240,7 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
   >
     <button
       aria-controls="content-id"
+      aria-expanded="false"
       class="pf-v5-c-expandable-section__toggle"
       id="toggle-id"
       type="button"

package/src/components/Select/Select.tsx

@@ -132,7 +132,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+        }, 10);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu

package/src/helpers/resizeObserver.tsx

@@ -1,4 +1,4 @@
-import { canUseDOM, debounce } from './util';
+import { canUseDOM } from './util';
 
 /**
  * This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver
@@ -83,7 +83,7 @@ export const getResizeObserver = (
         if (useRequestAnimationFrame) {
           window.requestAnimationFrame(() => {
             if (Array.isArray(entries) && entries.length > 0) {
-              debounce(handleResize, 100);
+              handleResize();
             }
           });
           // Avoid wrapping function in requestAnimationFrame if the function is debounced