@patternfly/react-core 6.2.1-prerelease.11 → 6.2.1-prerelease.12

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":"6.2.1-prerelease.10","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":"6.2.1-prerelease.11","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":"6.2.1-prerelease.10","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":"6.2.1-prerelease.11","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":"6.2.1-prerelease.10","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":"6.2.1-prerelease.11","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.11",
+  "version": "6.2.1-prerelease.12",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "87c19611176f13b41ed77950b7e6debc415f2f90"
+  "gitHead": "f4c999c9871ae063b285c4f324bdc4e82d6b7118"
 }

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -38,7 +38,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         <ClipboardCopyButton
           id="basic-copy-button"
           textId="code-content"
-          aria-label="Copy to clipboard"
+          aria-label="Copy to clipboard basic example code block"
           onClick={(e) => onClick(e, code)}
           exitDelay={copied ? 1500 : 600}
           maxWidth="110px"

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -17,6 +17,7 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
   const [isRunning, setisRunning] = useState(false);
   const runText: string = 'Run in web terminal';
   const doneRunText: string = 'Running in web terminal';
+  const toggleId: string = 'expandable-code-toggle';
 
   const onToggle = (isExpanded) => {
     setIsExpanded(isExpanded);
@@ -85,12 +86,18 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
     <CodeBlock actions={actions}>
       <CodeBlockCode>
         {code}
-        <ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand">
+        <ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand" toggleId={toggleId}>
           {expandedCode}
         </ExpandableSection>
       </CodeBlockCode>
-      <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId="code-block-expand" direction="up">
-        {isExpanded ? 'Show Less' : 'Show More'}
+      <ExpandableSectionToggle
+        isExpanded={isExpanded}
+        onToggle={onToggle}
+        contentId="code-block-expand"
+        direction="up"
+        toggleId={toggleId}
+      >
+        {isExpanded ? 'Show less expandable example content' : 'Show more expandable example content'}
       </ExpandableSectionToggle>
     </CodeBlock>
   );

package/src/components/Progress/ProgressContainer.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useEffect } from 'react';
 import progressStyle from '@patternfly/react-styles/css/components/Progress/progress';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
@@ -80,22 +80,31 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
 }: ProgressContainerProps) => {
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
-  const onMouseEnter = (event: any) => {
+  const titleRef = useRef(null);
+  const updateTooltip = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(title || event.target.innerHTML);
     } else {
       setTooltip('');
     }
   };
+
+  useEffect(() => {
+    if (tooltip !== '') {
+      titleRef.current.focus();
+    }
+  }, [tooltip]);
+
+  const _isTruncatedAndString = isTitleTruncated && typeof title === 'string';
   const Title = (
     <div
-      className={css(
-        progressStyle.progressDescription,
-        isTitleTruncated && typeof title === 'string' && progressStyle.modifiers.truncate
-      )}
+      className={css(progressStyle.progressDescription, _isTruncatedAndString && progressStyle.modifiers.truncate)}
       id={`${parentId}-description`}
-      aria-hidden="true"
-      onMouseEnter={isTitleTruncated && typeof title === 'string' ? onMouseEnter : null}
+      aria-hidden={_isTruncatedAndString ? null : 'true'}
+      onMouseEnter={_isTruncatedAndString ? updateTooltip : null}
+      onFocus={_isTruncatedAndString ? updateTooltip : null}
+      {...(_isTruncatedAndString && { tabIndex: 0 })}
+      ref={titleRef}
     >
       {title}
     </div>
@@ -103,14 +112,12 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
 
   return (
     <Fragment>
-      {title &&
-        (tooltip ? (
-          <Tooltip position={tooltipPosition} content={tooltip} isVisible>
-            {Title}
-          </Tooltip>
-        ) : (
-          Title
-        ))}
+      {title && (
+        <>
+          {tooltip && <Tooltip position={tooltipPosition} content={tooltip} isVisible triggerRef={titleRef} />}
+          {Title}
+        </>
+      )}
       {(measureLocation !== ProgressMeasureLocation.none || StatusIcon) && (
         <div className={css(progressStyle.progressStatus)} aria-hidden="true">
           {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (

package/src/components/Truncate/Truncate.tsx

@@ -109,11 +109,8 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
       setTextElement(textRef.current);
     }
 
-    if (
-      (refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement.parentElement)) &&
-      !parentElement
-    ) {
-      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement.parentElement);
+    if ((refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement)) && !parentElement) {
+      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement);
     }
   }, [textRef, subParentRef, textElement, parentElement]);
 
@@ -224,18 +221,20 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     <span
       ref={subParentRef}
       className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
+      {...(isTruncated && { tabIndex: 0 })}
       {...props}
     >
       {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}
     </span>
   );
 
-  return isTruncated ? (
-    <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content}>
+  return (
+    <>
+      {isTruncated && (
+        <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content} triggerRef={subParentRef} />
+      )}
       {truncateBody}
-    </Tooltip>
-  ) : (
-    truncateBody
+    </>
   );
 };
 

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

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
-  Tooltip: ({ content, position, children, ...props }) => (
+  Tooltip: ({ content, position, children, triggerRef, ...props }) => (
     <div data-testid="Tooltip-mock" {...props}>
       <div data-testid="Tooltip-mock-content-container">Test {content}</div>
       <p>{`position: ${position}`}</p>

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

@@ -13,27 +13,28 @@ exports[`Truncation with maxCharsDisplayed Matches snapshot with default positio
     <p>
       position: top
     </p>
+  </div>
+  <span
+    class="pf-v6-c-truncate pf-m-fixed"
+    tabindex="0"
+  >
     <span
-      class="pf-v6-c-truncate pf-m-fixed"
+      class="pf-v6-c-truncate__text"
     >
-      <span
-        class="pf-v6-c-truncate__text"
-      >
-        Tes
-      </span>
-      <span
-        aria-hidden="true"
-        class="pf-v6-c-truncate__omission"
-      >
-        …
-      </span>
-      <span
-        class="pf-v6-screen-reader"
-      >
-        t truncation content
-      </span>
+      Tes
     </span>
-  </div>
+    <span
+      aria-hidden="true"
+      class="pf-v6-c-truncate__omission"
+    >
+      …
+    </span>
+    <span
+      class="pf-v6-screen-reader"
+    >
+      t truncation content
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
@@ -50,16 +51,17 @@ exports[`renders default truncation 1`] = `
     <p>
       position: top
     </p>
+  </div>
+  <span
+    class="pf-v6-c-truncate"
+    tabindex="0"
+  >
     <span
-      class="pf-v6-c-truncate"
+      class="pf-v6-c-truncate__start"
     >
-      <span
-        class="pf-v6-c-truncate__start"
-      >
-        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
-      </span>
+      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
     </span>
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
@@ -76,15 +78,16 @@ exports[`renders start truncation with &lrm; at end 1`] = `
     <p>
       position: top
     </p>
+  </div>
+  <span
+    class="pf-v6-c-truncate"
+    tabindex="0"
+  >
     <span
-      class="pf-v6-c-truncate"
+      class="pf-v6-c-truncate__end"
     >
-      <span
-        class="pf-v6-c-truncate__end"
-      >
-        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
-      </span>
+      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
     </span>
-  </div>
+  </span>
 </DocumentFragment>
 `;