@patternfly/react-core 4.276.3 → 4.276.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.276.3",
+  "version": "4.276.5",
   "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",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "91180feefa57c641752c4b5134669ffc497e8dc8"
+  "gitHead": "df6e176375bb8f52dc9b1ef06909e6a7f85d1923"
 }

package/src/components/Alert/Alert.tsx

@@ -57,8 +57,10 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   timeoutAnimation?: number;
   /** Title of the alert.  */
   title: React.ReactNode;
-  /** Sets the heading level to use for the alert title. Default is h4. */
+  /** @deprecated Sets the heading level to use for the alert title. Default is h4. */
   titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Sets the element to use as the alert title. Default is h4. */
+  component?: keyof JSX.IntrinsicElements;
   /** Adds accessible text to the alert toggle. */
   toggleAriaLabel?: string;
   /** Position of the tooltip which is displayed if text is truncated. */
@@ -99,7 +101,8 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   actionClose,
   actionLinks,
   title,
-  titleHeadingLevel: TitleHeadingLevel = 'h4',
+  titleHeadingLevel,
+  component = 'h4',
   children = '',
   className = '',
   ouiaId,
@@ -126,6 +129,14 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   );
 
   const titleRef = React.useRef(null);
+  const TitleComponent = (titleHeadingLevel || component) as any;
+  if (titleHeadingLevel !== undefined) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Alert: titleHeadingLevel is deprecated, please use the newer component prop instead to set the alert title element.'
+    );
+  }
+
   const divRef = React.useRef<HTMLDivElement>();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   React.useEffect(() => {
@@ -145,12 +156,12 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
   const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
   React.useEffect(() => {
-    timeout = timeout === true ? 8000 : Number(timeout);
-    if (timeout > 0) {
-      const timer = setTimeout(() => setTimedOut(true), timeout);
+    const calculatedTimeout = timeout === true ? 8000 : Number(timeout);
+    if (calculatedTimeout > 0) {
+      const timer = setTimeout(() => setTimedOut(true), calculatedTimeout);
       return () => clearTimeout(timer);
     }
-  }, []);
+  }, [timeout]);
   React.useEffect(() => {
     const onDocumentFocus = () => {
       if (divRef.current) {
@@ -172,10 +183,10 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
       const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation);
       return () => clearTimeout(timer);
     }
-  }, [containsFocus, isMouseOver]);
+  }, [containsFocus, isMouseOver, timeoutAnimation]);
   React.useEffect(() => {
     dismissed && onTimeout();
-  }, [dismissed]);
+  }, [dismissed, onTimeout]);
 
   const [isExpanded, setIsExpanded] = useState(false);
   const onToggleExpand = () => {
@@ -197,13 +208,13 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
     return null;
   }
   const Title = (
-    <TitleHeadingLevel
+    <TitleComponent
       {...(isTooltipVisible && { tabIndex: 0 })}
       ref={titleRef}
       className={css(styles.alertTitle, truncateTitle && styles.modifiers.truncate)}
     >
       {getHeadingContent}
-    </TitleHeadingLevel>
+    </TitleComponent>
   );
 
   return (

package/src/components/Alert/examples/Alert.md

@@ -50,8 +50,9 @@ PatternFly supports several properties and variations that can be used to add ex
 
 * As demonstrated in the 3rd and 4th variations below, use the `actionClose` property to add an `<AlertActionCloseButton>` component, which can be used to manage and customize alert dismissals. `actionClose` can be used with or without the presence of `actionLinks`.
 
-* As demonstrated in the 5th and 6th variations below, use the `titleHeadingLevel` property to set the heading level of an alert title. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
-
+* As demonstrated in the 5th and 6th variations below, use the `component` property to set the element for an alert title.  
+  * If the `description` prop is not passed in, then the `component` prop should be set to a non-heading element such as a `span` or `div`.
+  * If the `description` prop is passed in, then the `component` prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
 ```ts
 import React from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
@@ -88,8 +89,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     }
   />
   <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />} />
-  <Alert variant="success" title="h1 Success alert title" titleHeadingLevel="h1" />
-  <Alert variant="success" title="h6 Success alert title" titleHeadingLevel="h6" />
+  <Alert variant="success" title="div success alert title" component="div" />
+  <Alert variant="success" title="h6 Success alert title" component="h6" >
+    <p>Short alert description</p>
+  </Alert>
   </React.Fragment>
 ```
 ### Alert timeout

package/src/components/Chip/Chip.tsx

@@ -83,17 +83,34 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   });
 
   renderOverflowChip = () => {
-    const { children, className, onClick, ouiaId, ...props } = this.props;
-    const Component = this.props.component as any;
+    const {
+      children,
+      className,
+      onClick,
+      ouiaId,
+      textMaxWidth,
+      style,
+      component,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      tooltipPosition,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      isOverflowChip,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      closeBtnAriaLabel,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      isReadOnly,
+      ...props
+    } = this.props;
+    const Component = component as any;
     return (
       <Component
         onClick={onClick}
-        {...(this.props.textMaxWidth && {
+        {...(textMaxWidth && {
           style: this.setChipStyle(),
-          ...this.props.style
+          ...style
         })}
         className={css(styles.chip, styles.modifiers.overflow, className)}
-        {...(this.props.component === 'button' ? { type: 'button' } : {})}
+        {...(component === 'button' ? { type: 'button' } : {})}
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
         {...props}
       >
@@ -103,7 +120,20 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   };
 
   renderInnerChip(id: string) {
-    const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId, ...props } = this.props;
+    const {
+      children,
+      className,
+      onClick,
+      closeBtnAriaLabel,
+      isReadOnly,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      isOverflowChip,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      tooltipPosition,
+      component,
+      ouiaId,
+      ...props
+    } = this.props;
     const Component = component as any;
     return (
       <Component

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

@@ -8,7 +8,6 @@ exports[`Chip closable 1`] = `
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
     id="chip_one"
-    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -53,7 +52,6 @@ exports[`Chip closable with tooltip 1`] = `
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
     id="chip_one"
-    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -99,7 +97,6 @@ exports[`Chip custom max-width text 1`] = `
     data-ouia-safe="true"
     style="--pf-c-chip__text--MaxWidth: 100px;"
     textmaxwidth="100px"
-    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -140,12 +137,9 @@ exports[`Chip overflow 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-chip pf-m-overflow my-chp-cls"
-    closebtnarialabel="close"
-    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-1"
     data-ouia-component-type="PF4/OverflowChip"
     data-ouia-safe="true"
-    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -163,7 +157,6 @@ exports[`Chip readonly 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-4"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
-    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -183,7 +176,6 @@ exports[`Chip with role='gridcell' 1`] = `
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
     role="gridcell"
-    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"

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

@@ -25,7 +25,6 @@ exports[`ChipGroup chip group default 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-1"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
-            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -97,7 +96,6 @@ exports[`ChipGroup chip group with category 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-2"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
-            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -169,7 +167,6 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-9"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
-            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -241,7 +238,6 @@ exports[`ChipGroup chip group with closable category 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-3"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
-            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"

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

@@ -1859,7 +1859,6 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   data-ouia-component-id="OUIA-Generated-Chip-1"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
-                  tooltipposition="top"
                 >
                   <span
                     class="pf-c-chip__text"
@@ -1902,7 +1901,6 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   data-ouia-component-id="OUIA-Generated-Chip-2"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
-                  tooltipposition="top"
                 >
                   <span
                     class="pf-c-chip__text"

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

@@ -297,7 +297,6 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     data-ouia-component-id="OUIA-Generated-Chip-1"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
-                    tooltipposition="top"
                   >
                     <span
                       class="pf-c-chip__text"
@@ -340,7 +339,6 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     data-ouia-component-id="OUIA-Generated-Chip-2"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
-                    tooltipposition="top"
                   >
                     <span
                       class="pf-c-chip__text"