@patternfly/react-core 6.2.0-prerelease.10 → 6.2.0-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.0-prerelease.9","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.0-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.0-prerelease.9","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.0-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.0-prerelease.9","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.0-prerelease.11","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.10",
+  "version": "6.2.0-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",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d42afe0415af6981593e28bbecfb4d1ac620c54f"
+  "gitHead": "2cadfb9dc39636e1429ac38d738b7526ddb3adef"
 }

package/src/components/FileUpload/FileUploadField.tsx

@@ -43,6 +43,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   id: string;
   /** Name property for the text input. */
   name?: string;
+  /** Flag to disable the browse button. */
+  isBrowseButtonDisabled?: boolean;
   /** Flag to disable the clear button. */
   isClearButtonDisabled?: boolean;
   /** Flag to show if the field is disabled. */
@@ -114,6 +116,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   browseButtonText = 'Browse...',
   browseButtonAriaDescribedby,
   clearButtonText = 'Clear',
+  isBrowseButtonDisabled = false,
   isClearButtonDisabled = !filename && !value,
   containerRef = null as React.Ref<HTMLDivElement>,
   allowEditingUploadedText = false,
@@ -153,7 +156,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             <Button
               variant={ButtonVariant.control}
               onClick={onBrowseButtonClick}
-              isDisabled={isDisabled}
+              isDisabled={isDisabled || isBrowseButtonDisabled}
               aria-describedby={browseButtonAriaDescribedby}
             >
               {browseButtonText}

package/src/components/FileUpload/__tests__/FileUploadField.test.tsx

@@ -1,6 +1,7 @@
 import { FileUploadField } from '../FileUploadField';
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
@@ -15,6 +16,7 @@ test('simple fileuploadfield', () => {
       filenamePlaceholder="Do something custom with this!"
       onBrowseButtonClick={browserBtnClickHandler}
       onClearButtonClick={clearBtnClickHandler}
+      isBrowseButtonDisabled={false}
       isClearButtonDisabled={false}
       isLoading={false}
       isDragActive={false}
@@ -32,7 +34,7 @@ test('Renders without aria-describedby on browse button by default', () => {
   expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAccessibleDescription();
 });
 
-test('Renders without aria-describedby on browse button by default', () => {
+test('Renders with aria-describedby on browse button', () => {
   render(
     <FileUploadField id="file-upload-field" browseButtonText="Upload" browseButtonAriaDescribedby="helper-text">
       <div id="helper-text">Helper text</div>
@@ -41,3 +43,15 @@ test('Renders without aria-describedby on browse button by default', () => {
 
   expect(screen.getByRole('button', { name: 'Upload' })).toHaveAccessibleDescription('Helper text');
 });
+
+test('Browse button is enabled by default', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAttribute('disabled');
+});
+
+test('Browse button is disabled with isBrowseButtonDisabled prop', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" isBrowseButtonDisabled={true} />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).toHaveAttribute('disabled');
+});

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -4,6 +4,7 @@ import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Chec
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const properties = [
     'filename',
+    'isBrowseButtonDisabled',
     'isClearButtonDisabled',
     'isDragActive',
     'isLoading',
@@ -15,6 +16,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
 
   const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState(false);
+  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = React.useState(true);
   const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);
   const [isLoading, setIsLoading] = React.useState(false);
   const [isDragActive, setIsDragActive] = React.useState(false);
@@ -24,6 +26,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
   const [checkedState, setCheckedState] = React.useState([
     filename,
+    isBrowseButtonDisabled,
     isClearButtonDisabled,
     isLoading,
     isDragActive,
@@ -44,6 +47,10 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         checked ? setFilename(true) : setFilename(false);
         break;
 
+      case 'isBrowseButtonDisabled':
+        checked ? setIsBrowseButtonDisabled(true) : setIsBrowseButtonDisabled(false);
+        break;
+
       case 'isClearButtonDisabled':
         checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);
         break;
@@ -109,6 +116,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         filenamePlaceholder="Do something custom with this!"
         onBrowseButtonClick={() => alert('Browse button clicked!')}
         onClearButtonClick={() => alert('Clear button clicked!')}
+        isBrowseButtonDisabled={isBrowseButtonDisabled}
         isClearButtonDisabled={isClearButtonDisabled}
         isLoading={isLoading}
         isDragActive={isDragActive}

package/src/components/JumpLinks/JumpLinks.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
 import sidebarStyles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
-import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
-import { JumpLinksList } from './JumpLinksList';
-import { formatBreakpointMods } from '../../helpers/util';
-import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links__toggle_Display';
-import { canUseDOM } from '../../helpers/util';
+import { Button } from '../Button';
+import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
+import { JumpLinksList } from './JumpLinksList';
+import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -46,6 +45,8 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   toggleAriaLabel?: string;
   /** Class for nav */
   className?: string;
+  /** Whether the current entry in the navigation history should be replaced when a JumpLinksItem is clicked. By default a new entry will be pushed to the navigation history. */
+  shouldReplaceNavHistory?: boolean;
 }
 
 // Recursively find JumpLinkItems and return an array of all their scrollNodes
@@ -92,6 +93,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   alwaysShowLabel = true,
   toggleAriaLabel = 'Toggle jump links',
   className,
+  shouldReplaceNavHistory = false,
   ...props
 }: JumpLinksProps) => {
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
@@ -207,7 +209,11 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                     scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
                   }
                   newScrollItem.focus();
-                  window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  if (shouldReplaceNavHistory) {
+                    window.history.replaceState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  } else {
+                    window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  }
                   ev.preventDefault();
                   setActiveIndex(itemIndex);
                 }

package/src/components/Truncate/Truncate.tsx

@@ -88,7 +88,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     if (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement) {
       setParentElement(subParentRef.current.parentElement.parentElement);
     }
-  }, [textRef, subParentRef]);
+  }, [textRef, subParentRef, textElement, parentElement]);
 
   React.useEffect(() => {
     if (textElement && parentElement && !observer.current) {
@@ -106,7 +106,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         observer();
       };
     }
-  }, [textElement, parentElement]);
+  }, [textElement, parentElement, trailingNumChars, content, position]);
 
   const truncateBody = (
     <span ref={subParentRef} className={css(styles.truncate, className)} {...props}>
@@ -116,18 +116,21 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
           {position === TruncatePosition.start && <React.Fragment>&lrm;</React.Fragment>}
         </span>
       )}
-      {position === TruncatePosition.middle &&
-        content.slice(0, content.length - trailingNumChars).length > minWidthCharacters && (
-          <React.Fragment>
-            <span ref={textRef} className={styles.truncateStart}>
-              {sliceContent(content, trailingNumChars)[0]}
-            </span>
-            <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
-          </React.Fragment>
-        )}
-      {position === TruncatePosition.middle &&
-        content.slice(0, content.length - trailingNumChars).length <= minWidthCharacters &&
-        content}
+      {position === TruncatePosition.middle && content.length - trailingNumChars > minWidthCharacters && (
+        <React.Fragment>
+          <span ref={textRef} className={styles.truncateStart}>
+            {sliceContent(content, trailingNumChars)[0]}
+          </span>
+          <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
+        </React.Fragment>
+      )}
+      {position === TruncatePosition.middle && content.length - trailingNumChars <= minWidthCharacters && (
+        <React.Fragment>
+          <span ref={textRef} className={styles.truncateStart}>
+            {content}
+          </span>
+        </React.Fragment>
+      )}
     </span>
   );
 

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

@@ -1,7 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
+import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, position, children, ...props }) => (
@@ -112,6 +113,21 @@ test('renders different content when trailingNumChars is passed with middle trun
   expect(end).toHaveClass(styles.truncateEnd);
 });
 
+test('renders full content when trailingNumChars exceeds the length of the original string using middle truncate', () => {
+  render(
+    <Truncate
+      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'} // 75 chars
+      trailingNumChars={80}
+      position="middle"
+    />
+  );
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.');
+
+  expect(start).toHaveClass(styles.truncateStart);
+  expect(start).not.toHaveClass(styles.truncateEnd);
+});
+
 test('renders tooltip position', () => {
   render(<Truncate content={''} tooltipPosition="top" />);