@patternfly/react-core 4.226.0 → 4.227.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.226.0",
+  "version": "4.227.0",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.77.0",
-    "@patternfly/react-styles": "^4.76.0",
-    "@patternfly/react-tokens": "^4.78.0",
+    "@patternfly/react-icons": "^4.78.0",
+    "@patternfly/react-styles": "^4.77.0",
+    "@patternfly/react-tokens": "^4.79.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.204.2",
+    "@patternfly/patternfly": "4.204.3",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "a7097958c8ccb70a8faaf2fa401413cfa4372809"
+  "gitHead": "9ab68189931ffebc2eb1d2dd3a39ad5d8bc88b58"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -57,6 +57,11 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   onSelectToggle?: (open: boolean) => void;
   /** Flag to set browser focus on the passed date **/
   isDateFocused?: boolean;
+  /** Callback when month or year is changed */
+  onMonthChange?: (
+    newDate?: Date,
+    event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>
+  ) => void;
 }
 
 // Must be numeric given current header design
@@ -114,6 +119,7 @@ export const CalendarMonth = ({
   validators = [() => true],
   className,
   onSelectToggle = () => {},
+  onMonthChange = () => {},
   rangeStart,
   prevMonthAriaLabel = 'Previous month',
   nextMonthAriaLabel = 'Next month',
@@ -162,10 +168,11 @@ export const CalendarMonth = ({
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
-  const onMonthClick = (newDate: Date) => {
+  const onMonthClick = (newDate: Date, ev: React.MouseEvent) => {
     setFocusedDate(newDate);
     setHoveredDate(newDate);
     setShouldFocus(false);
+    onMonthChange(newDate, ev);
   };
 
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -222,7 +229,11 @@ export const CalendarMonth = ({
     <div className={css(styles.calendarMonth, className)} {...props}>
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.prevMonth)}>
-          <Button variant="plain" aria-label={prevMonthAriaLabel} onClick={() => onMonthClick(prevMonth)}>
+          <Button
+            variant="plain"
+            aria-label={prevMonthAriaLabel}
+            onClick={(ev: React.MouseEvent) => onMonthClick(prevMonth, ev)}
+          >
             <AngleLeftIcon aria-hidden={true} />
           </Button>
         </div>
@@ -240,7 +251,7 @@ export const CalendarMonth = ({
                 setIsSelectOpen(!isSelectOpen);
                 onSelectToggle(!isSelectOpen);
               }}
-              onSelect={(_ev, monthNum) => {
+              onSelect={(ev, monthNum) => {
                 // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
                 // to see the SelectOption as a child so it doesn't close the Popover.
                 setTimeout(() => {
@@ -251,6 +262,7 @@ export const CalendarMonth = ({
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
+                  onMonthChange(newDate, ev);
                 }, 0);
               }}
               variant="single"
@@ -268,18 +280,23 @@ export const CalendarMonth = ({
               aria-label={yearInputAriaLabel}
               type="number"
               value={yearFormatted}
-              onChange={year => {
+              onChange={(year: string, ev: React.FormEvent<HTMLInputElement>) => {
                 const newDate = new Date(focusedDate);
                 newDate.setFullYear(+year);
                 setFocusedDate(newDate);
                 setHoveredDate(newDate);
                 setShouldFocus(false);
+                onMonthChange(newDate, ev);
               }}
             />
           </div>
         </InputGroup>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
-          <Button variant="plain" aria-label={nextMonthAriaLabel} onClick={() => onMonthClick(nextMonth)}>
+          <Button
+            variant="plain"
+            aria-label={nextMonthAriaLabel}
+            onClick={(ev: React.MouseEvent) => onMonthClick(nextMonth, ev)}
+          >
             <AngleRightIcon aria-hidden={true} />
           </Button>
         </div>

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -8,11 +8,6 @@ beta: true
 
 ## Examples
 
-### Default
-
-```ts file="./CalendarMonthDefault.tsx"
-```
-
 ### Selectable date
 
 ```ts file="./CalendarMonthSelectableDate.tsx"

package/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx

@@ -4,10 +4,15 @@ import { CalendarMonth } from '@patternfly/react-core';
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
 
+  const onMonthChange = (newDate: Date) => {
+    // eslint-disable-next-line no-console
+    console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);
+  };
+
   return (
     <React.Fragment>
       <pre>Selected date: {date.toString()}</pre>
-      <CalendarMonth date={date} onChange={setDate} />
+      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} />
     </React.Fragment>
   );
 };

package/src/components/Dropdown/DropdownToggle.tsx

@@ -120,6 +120,7 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
           styles.modifiers.splitButton,
           splitButtonVariant === 'action' && styles.modifiers.action,
           (toggleVariant === 'primary' || isPrimary) && splitButtonVariant === 'action' && styles.modifiers.primary,
+          toggleVariant === 'secondary' && splitButtonVariant === 'action' && styles.modifiers.secondary,
           isDisabled && styles.modifiers.disabled
         )}
       >

package/src/components/Dropdown/__tests__/DropdownToggle.test.tsx

@@ -184,6 +184,24 @@ describe('DropdownToggle', () => {
       expect(asFragment()).toMatchSnapshot();
     });
 
+    test('action split button - renders secondary variant', () => {
+      const { asFragment } = render(
+        <DropdownToggle
+          id="Dropdown Toggle"
+          toggleVariant="secondary"
+          splitButtonItems={[<div key="1">test</div>]}
+          splitButtonVariant="action"
+          parentRef={document.createElement('div')}
+        >
+          Dropdown
+        </DropdownToggle>
+      );
+
+      const dropdownToggle = screen.getByRole('button').parentElement;
+
+      expect(dropdownToggle).toHaveClass('pf-m-secondary');
+    });
+
     test('class changes', () => {
       const { asFragment } = render(
         <DropdownContext.Provider

package/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap

@@ -198,7 +198,7 @@ exports[`DropdownToggle state class changes 1`] = `
   <button
     aria-expanded="false"
     class="pf-c-dropdown__toggle"
-    data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
+    data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
     data-ouia-component-type="PF4/DropdownToggle"
     data-ouia-safe="true"
     id="Dropdown Toggle"

package/src/components/Dropdown/examples/Dropdown.md

@@ -113,6 +113,11 @@ import avatarImg from '../../Avatar/examples/avatarImg.svg';
 ```ts file="./DropdownSplitButtonActionPrimary.tsx"
 ```
 
+### Split button secondary action
+
+```ts file="./DropdownSplitButtonActionSecondary.tsx"
+```
+
 ### Basic panel
 
 ```ts file="./DropdownBasicPanel.tsx"

package/src/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const DropdownSplitButtonActionSecondary: React.FunctionComponent = () => {
+  const [isActionOpen, setIsActionOpen] = React.useState(false);
+  const [isCogOpen, setIsCogOpen] = React.useState(false);
+
+  const onActionToggle = (isActionOpen: boolean) => {
+    setIsActionOpen(isActionOpen);
+  };
+  const onCogToggle = (isCogOpen: boolean) => {
+    setIsCogOpen(isCogOpen);
+  };
+
+  const onActionClick = () => {
+    window.alert('You selected an action button!');
+  };
+  const onCogClick = () => {
+    window.alert('You selected the Cog!');
+  };
+
+  const onActionFocus = () => {
+    const element = document.getElementById('toggle-split-button-action-secondary');
+    element.focus();
+  };
+  const onCogFocus = () => {
+    const element = document.getElementById('toggle-split-button-cog-secondary');
+    element.focus();
+  };
+
+  const onActionSelect = () => {
+    setIsActionOpen(false);
+    onActionFocus();
+  };
+  const onCogSelect = () => {
+    setIsCogOpen(false);
+    onCogFocus();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="action" component="button" onClick={onActionClick}>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" component="button" isDisabled onClick={onActionClick}>
+      Disabled action
+    </DropdownItem>,
+    <DropdownItem key="other action" component="button" onClick={onActionClick}>
+      Other action
+    </DropdownItem>
+  ];
+
+  const dropdownIconItems = [
+    <DropdownItem key="action" component="button" icon={<CogIcon />} onClick={onActionClick}>
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" component="button" icon={<BellIcon />} isDisabled onClick={onActionClick}>
+      Disabled action
+    </DropdownItem>,
+    <DropdownItem key="other action" component="button" icon={<CubesIcon />} onClick={onActionClick}>
+      Other action
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <Dropdown
+        onSelect={onActionSelect}
+        toggle={
+          <DropdownToggle
+            id="toggle-split-button-action-secondary"
+            splitButtonItems={[
+              <DropdownToggleAction key="action" onClick={onActionClick}>
+                Action
+              </DropdownToggleAction>
+            ]}
+            toggleVariant="secondary"
+            splitButtonVariant="action"
+            onToggle={onActionToggle}
+          />
+        }
+        isOpen={isActionOpen}
+        dropdownItems={dropdownItems}
+      />{' '}
+      <Dropdown
+        onSelect={onCogSelect}
+        toggle={
+          <DropdownToggle
+            id="toggle-split-button-cog-secondary"
+            splitButtonItems={[
+              <DropdownToggleAction key="cog-action" aria-label="Action" onClick={onCogClick}>
+                <CogIcon />
+              </DropdownToggleAction>
+            ]}
+            toggleVariant="secondary"
+            splitButtonVariant="action"
+            onToggle={onCogToggle}
+          />
+        }
+        isOpen={isCogOpen}
+        dropdownItems={dropdownIconItems}
+      />
+    </React.Fragment>
+  );
+};

package/src/components/Pagination/examples/Pagination.md

@@ -28,9 +28,9 @@ class PaginationTop extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -68,9 +68,9 @@ class PaginationBottom extends React.Component {
         page: pageNumber
       });
     };
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -149,9 +149,9 @@ class PaginationDisabled extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -193,9 +193,9 @@ class PaginationTop extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -236,9 +236,9 @@ class PaginationTop extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -279,9 +279,9 @@ class PaginationTop extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -330,9 +330,9 @@ class PaginationSticky extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }

package/src/components/Toolbar/examples/Toolbar.md

@@ -1169,9 +1169,9 @@ class ToolbarStacked extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
 

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

@@ -1,7 +1,83 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 
+jest.mock('../../Tooltip', () => ({
+  Tooltip: ({ content, position, children, ...props }) => (
+    <div data-testid="Tooltip-mock" {...props}>
+      <div data-testid="Tooltip-mock-content-container">Test {content}</div>
+      <p>{`position: ${position}`}</p>
+      {children}
+    </div>
+  )
+}));
+
+test('renders with class pf-c-truncate', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveClass('pf-c-truncate');
+});
+
+test('renders with custom class name passed via prop', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+      className='custom-classname'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveClass('custom-classname');
+});
+
+test('renders truncate with empty content', () => {
+  render(
+    <Truncate
+      content={''}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveTextContent('');
+});
+
+test('renders truncate with content', () => {
+  render(
+    <Truncate
+      content={'Test'}
+      aria-label='test-id'
+    />
+  );
+
+  const test = screen.getByLabelText('test-id');
+
+  expect(test).toHaveTextContent('Test');
+});
+
+test('only renders pf-c-truncate__start with default position', () => {
+  render(
+    <Truncate
+      content={'Testing truncate content'}
+    />
+  );
+
+  const start = screen.getByText('Testing truncate content');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+  expect(start).not.toHaveClass('pf-c-truncate__end');
+});
+
 test('renders default truncation', () => {
   const { asFragment } = render(
     <Truncate content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'} />
@@ -9,7 +85,7 @@ test('renders default truncation', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('renders start truncation', () => {
+test('renders start truncation with &lrm; at end', () => {
   const { asFragment } = render(
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
@@ -20,11 +96,74 @@ test('renders start truncation', () => {
 });
 
 test('renders middle truncation', () => {
-  const { asFragment } = render(
+  render(
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
       position={'middle'}
     />
   );
-  expect(asFragment()).toMatchSnapshot();
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est ac');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+
+  const end = screen.getByText('cumsan.');
+
+  expect(end).toHaveClass('pf-c-truncate__end');
+});
+
+test('renders different content when trailingNumChars is passed with middle truncate', () => {
+  render(
+    <Truncate
+      content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
+      trailingNumChars={3}
+      position='middle'
+    />
+  );
+
+  const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accums');
+
+  expect(start).toHaveClass('pf-c-truncate__start');
+
+  const end = screen.getByText('an.');
+
+  expect(end).toHaveClass('pf-c-truncate__end');
+});
+
+test('renders tooltip position', () => {
+  render(
+    <Truncate
+      content={''}
+      tooltipPosition='top'
+    />
+  );
+
+  const input = screen.getByText('position: top');
+  
+  expect(input).toBeVisible();
+});
+
+test('renders tooltip content', () => {
+  render(
+    <Truncate
+      content={'Another Tooltip'}
+      tooltipPosition='top'
+    />
+  );
+
+  const input = screen.getByText('Test Another Tooltip');
+
+  expect(input).toBeVisible();
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <Truncate
+      content={'Test'}
+      data-testid="test-id"
+      aria-label="labelling-id"
+    />
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveAccessibleName('labelling-id');
 });

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

@@ -2,47 +2,52 @@
 
 exports[`renders default truncation 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-c-truncate"
+  <div
+    data-testid="Tooltip-mock"
   >
-    <span
-      class="pf-c-truncate__start"
+    <div
+      data-testid="Tooltip-mock-content-container"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`renders middle truncation 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-c-truncate"
-  >
+      Test Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+    </div>
+    <p>
+      position: top
+    </p>
     <span
-      class="pf-c-truncate__start"
+      class="pf-c-truncate"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est ac
+      <span
+        class="pf-c-truncate__start"
+      >
+        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+      </span>
     </span>
-    <span
-      class="pf-c-truncate__end"
-    >
-      cumsan.
-    </span>
-  </span>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`renders start truncation 1`] = `
+exports[`renders start truncation with &lrm; at end 1`] = `
 <DocumentFragment>
-  <span
-    class="pf-c-truncate"
+  <div
+    data-testid="Tooltip-mock"
   >
+    <div
+      data-testid="Tooltip-mock-content-container"
+    >
+      Test Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
+    </div>
+    <p>
+      position: top
+    </p>
     <span
-      class="pf-c-truncate__end"
+      class="pf-c-truncate"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
+      <span
+        class="pf-c-truncate__end"
+      >
+        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
+      </span>
     </span>
-  </span>
+  </div>
 </DocumentFragment>
 `;