@patternfly/react-core 6.0.0-alpha.29 → 6.0.0-alpha.30

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.0.0-alpha.28","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.0.0-alpha.29","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.0.0-alpha.28","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.0.0-alpha.29","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.0.0-alpha.28","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.0.0-alpha.29","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.29",
+  "version": "6.0.0-alpha.30",
   "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",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "7205b29995cc7d458b96724eb13e6aef2ccb2f81"
+  "gitHead": "a0d48218e63cd489c8b59556e59989559ba8ba65"
 }

package/src/components/JumpLinks/JumpLinks.tsx

@@ -162,7 +162,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
             const itemIndex = jumpLinkIndex++;
             const scrollItem = scrollItems[itemIndex];
             return React.cloneElement(child as React.ReactElement<JumpLinksItemProps>, {
-              onClick(ev: React.MouseEvent<HTMLAnchorElement>) {
+              onClick(ev: React.MouseEvent) {
                 isLinkClicked.current = true;
                 // Items might have rendered after this component. Do a quick refresh.
                 let newScrollItems;
@@ -193,7 +193,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                     scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
                   }
                   newScrollItem.focus();
-                  window.history.pushState('', '', ev.currentTarget.href);
+                  window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
                   ev.preventDefault();
                   setActiveIndex(itemIndex);
                 }

package/src/components/JumpLinks/JumpLinksItem.tsx

@@ -2,18 +2,19 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
 import { JumpLinksList } from './JumpLinksList';
+import { Button, ButtonVariant } from '../Button';
 
 export interface JumpLinksItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick'> {
   /** Whether this item is active. Parent JumpLinks component sets this when passed a `scrollableSelector`. */
   isActive?: boolean;
   /** Href for this link */
-  href?: string;
+  href: string;
   /** Selector or HTMLElement to spy on */
   node?: string | HTMLElement;
   /** Text to be rendered inside span */
   children?: React.ReactNode;
   /** Click handler for anchor tag. Parent JumpLinks components tap into this. */
-  onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
+  onClick?: (ev: React.MouseEvent) => void;
   /** Class to add to li */
   className?: string;
 }
@@ -38,9 +39,11 @@ export const JumpLinksItem: React.FunctionComponent<JumpLinksItemProps> = ({
       {...(isActive && { 'aria-current': 'location' })}
       {...props}
     >
-      <a className={styles.jumpLinksLink} href={href} onClick={onClick}>
-        <span className={styles.jumpLinksLinkText}>{children}</span>
-      </a>
+      <span className={styles.jumpLinksLink}>
+        <Button variant={ButtonVariant.link} component="a" href={href} onClick={onClick}>
+          <span className={styles.jumpLinksLinkText}>{children}</span>
+        </Button>
+      </span>
       {sublists}
     </li>
   );

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

@@ -7,9 +7,11 @@ import { JumpLinksList } from '../JumpLinksList';
 test('simple jumplinks', () => {
   const { asFragment } = render(
     <JumpLinks>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -18,9 +20,11 @@ test('simple jumplinks', () => {
 test('jumplinks centered', () => {
   const { asFragment } = render(
     <JumpLinks isCentered>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -29,9 +33,11 @@ test('jumplinks centered', () => {
 test('jumplinks with label', () => {
   const { asFragment } = render(
     <JumpLinks isCentered label="Jump to section">
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -40,9 +46,11 @@ test('jumplinks with label', () => {
 test('vertical with label', () => {
   const { asFragment } = render(
     <JumpLinks isVertical alwaysShowLabel label="Jump to section">
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -51,17 +59,19 @@ test('vertical with label', () => {
 test('expandable vertical with subsection', () => {
   const { asFragment } = render(
     <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">
         Section with active subsection
         <JumpLinksList>
-          <JumpLinksItem isActive>Active subsection</JumpLinksItem>
-          <JumpLinksItem>Inactive subsection</JumpLinksItem>
-          <JumpLinksItem>Inactive subsection</JumpLinksItem>
+          <JumpLinksItem href="#" isActive>
+            Active subsection
+          </JumpLinksItem>
+          <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
+          <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
         </JumpLinksList>
       </JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();