@patternfly/react-core 6.0.0-alpha.14 → 6.0.0-alpha.16

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.13","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.15","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.13","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.15","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.13","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.15","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.14",
+  "version": "6.0.0-alpha.16",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.7",
-    "@patternfly/react-styles": "^6.0.0-alpha.7",
-    "@patternfly/react-tokens": "^6.0.0-alpha.7",
+    "@patternfly/react-icons": "^6.0.0-alpha.8",
+    "@patternfly/react-styles": "^6.0.0-alpha.8",
+    "@patternfly/react-tokens": "^6.0.0-alpha.8",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.51",
+    "@patternfly/patternfly": "6.0.0-alpha.63",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "536a4df37add26c0cc00d5ba65fe62772aabf63f"
+  "gitHead": "33b82ec94f4742d6ffca49a9ac03cb5593a2b34a"
 }

package/src/components/Card/Card.tsx

@@ -87,9 +87,11 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isSelectableRaised = false,
   isSelected = false,
   isDisabledRaised = false,
-  isFlat = false,
+  // TODO: Update with issue #9991
+  // isFlat = false,
   isExpanded = false,
-  isRounded = false,
+  // TODO: Update with issue #9991
+  // isRounded = false,
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
@@ -112,12 +114,13 @@ export const Card: React.FunctionComponent<CardProps> = ({
   }
 
   const getSelectableModifiers = () => {
-    if (isDisabledRaised) {
-      return css(styles.modifiers.nonSelectableRaised);
-    }
-    if (isSelectableRaised) {
-      return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
-    }
+    // TODO: Update with issue #9991
+    // if (isDisabledRaised) {
+    //   return css(styles.modifiers.nonSelectableRaised);
+    // }
+    // if (isSelectableRaised) {
+    //   return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
+    // }
     if (isSelectable && isClickable) {
       return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
     }
@@ -185,8 +188,9 @@ export const Card: React.FunctionComponent<CardProps> = ({
           styles.card,
           isCompact && styles.modifiers.compact,
           isExpanded && styles.modifiers.expanded,
-          isFlat && styles.modifiers.flat,
-          isRounded && styles.modifiers.rounded,
+          // TODO: Update with issue #9991
+          // isFlat && styles.modifiers.flat,
+          // isRounded && styles.modifiers.rounded,
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,

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

@@ -69,12 +69,14 @@ describe('Card', () => {
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
-  test('card with isDisabledRaised applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isDisabledRaised applied', () => {
     render(<Card isDisabledRaised>disabled raised card</Card>);
     expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
   });
 
-  test('card with isSelectableRaised applied - not change', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isSelectableRaised applied - not change', () => {
     render(<Card isSelectableRaised>raised selectable card</Card>);
 
     const card = screen.getByText('raised selectable card');
@@ -82,7 +84,8 @@ describe('Card', () => {
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
-  test('card with isSelectableRaised and isSelected applied ', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isSelectableRaised and isSelected applied ', () => {
     render(
       <Card isSelected isSelectableRaised>
         raised selected card
@@ -95,7 +98,8 @@ describe('Card', () => {
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
-  test('card with isFlat applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isFlat applied', () => {
     render(<Card isFlat>flat card</Card>);
     expect(screen.getByText('flat card')).toHaveClass('pf-m-flat');
   });
@@ -105,7 +109,8 @@ describe('Card', () => {
     expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded');
   });
 
-  test('card with isRounded applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isRounded applied', () => {
     render(<Card isRounded>rounded card</Card>);
     expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded');
   });

package/src/components/Card/examples/CardWithModifiers.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
-  const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
+  // TODO: Update with issue #9991 removed isFlat and isRounded
+  const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
   const [modifiers, setModifiers] = React.useState({});
 
   return (

package/src/components/Drawer/Drawer.tsx

@@ -4,7 +4,6 @@ import { css } from '@patternfly/react-styles';
 
 export enum DrawerColorVariant {
   default = 'default',
-  light200 = 'light-200',
   noBackground = 'no-background'
 }
 

package/src/components/Drawer/DrawerContent.tsx

@@ -12,7 +12,7 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
@@ -30,7 +30,6 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       <div
         className={css(
           styles.drawerContent,
-          colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
           colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
           className
         )}

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -55,7 +55,7 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
     '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';
   };
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
   /** Adds and customizes a focus trap on the drawer panel content. */
   focusTrap?: DrawerPanelFocusTrapObject;
 }
@@ -366,7 +366,6 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               isResizable && styles.modifiers.resizable,
               hasNoBorder && styles.modifiers.noBorder,
               formatBreakpointMods(widths, styles),
-              colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
               colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
               className
             )}

package/src/components/Drawer/DrawerSection.tsx

@@ -9,7 +9,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content to be rendered in the drawer section. */
   children?: React.ReactNode;
   /** Color variant of the background of the drawer Section */
-  colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  colorVariant?: DrawerColorVariant | 'no-background' | 'default';
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
@@ -22,7 +22,6 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   <div
     className={css(
       styles.drawerSection,
-      colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
       colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
       className
     )}

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

@@ -6,7 +6,6 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelBody,
-  DrawerColorVariant,
   DrawerPanelContent
 } from '../';
 import React from 'react';
@@ -71,14 +70,15 @@ test(`Drawer expands from bottom`, () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test(`Drawer has resizable css and color variants`, () => {
+// TODO: Update/renable with issue #9979
+xtest(`Drawer has resizable css and color variants`, () => {
   const panelContent = (
     <DrawerPanelContent
       isResizable
       minSize={'200px'}
       defaultSize={'300px'}
       maxSize={'400px'}
-      colorVariant={DrawerColorVariant.light200}
+      // colorVariant={DrawerColorVariant.light200}
     >
       <DrawerHead>
         <span>drawer-panel</span>

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

@@ -133,7 +133,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                     aria-disabled="false"
                     aria-label="Close drawer panel"
                     class="pf-v5-c-button pf-m-plain"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-5"
                     data-ouia-component-type="PF5/Button"
                     data-ouia-safe="true"
                     type="button"

package/src/components/Drawer/examples/DrawerSecondaryBackground.tsx

@@ -46,7 +46,8 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
   };
 
   const panelContent = (
-    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+    // TODO:  need to update with issue #9979. Removed light color variant for secondary panel.
+    <DrawerPanelContent colorVariant={DrawerColorVariant.default}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel
@@ -92,11 +93,11 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
         Toggle drawer
       </Button>
       <Drawer isExpanded={isExpanded} onExpand={onExpand}>
-        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
-          drawer-section
-        </DrawerSection>
+        {/* TODO: MAy need to update with issue #9979. Removed light color variant for secondary panel. */}
+        <DrawerSection colorVariant={DrawerColorVariant.default}>drawer-section</DrawerSection>
         <DrawerContent
-          colorVariant={contentSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}
+          // TODO:  need to update with issue #9979. Removed light color variant for secondary section.
+          colorVariant={DrawerColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>

package/src/components/NumberInput/NumberInput.tsx

@@ -106,7 +106,8 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
 
   return (
     <div
-      className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)}
+      // TODO: Update with issue #9978. Removed "validated !== 'default' && styles.modifiers.status" from classname to get build to work
+      className={css(styles.numberInput, className)}
       {...(widthChars && {
         style: {
           [cssFormControlWidthChars.name]: widthChars,

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

@@ -663,7 +663,7 @@ exports[`numberInput renders disabled 1`] = `
 exports[`numberInput renders error validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"
@@ -777,7 +777,7 @@ exports[`numberInput renders error validated 1`] = `
 exports[`numberInput renders success validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"
@@ -1180,7 +1180,7 @@ exports[`numberInput renders value 1`] = `
 exports[`numberInput renders warning validated 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-number-input pf-m-status"
+    class="pf-v5-c-number-input"
   >
     <div
       class="pf-v5-c-input-group"

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { MenuToggle } from '../MenuToggle';
@@ -210,7 +211,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   return (
-    <div ref={containerRef}>
+    <div className={css(styles.paginationPageMenu)} ref={containerRef}>
       <Popper
         trigger={toggle}
         triggerRef={toggleRef}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -2,7 +2,9 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    class="pf-v5-c-pagination__page-menu"
+  >
     <button
       aria-expanded="false"
       aria-haspopup="listbox"

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

@@ -119,11 +119,6 @@ describe('Pagination', () => {
       render(<Pagination data-testid="pagination-insets" usePageInsets />);
       expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
     });
-
-    test('page insets', () => {
-      render(<Pagination data-testid="pagination-insets" usePageInsets />);
-      expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
-    });
   });
 
   describe('API', () => {

package/src/components/Pagination/__tests__/PaginationOptionsMenu.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PaginationOptionsMenu } from '../PaginationOptionsMenu';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
+
+jest.mock('../../../helpers/Popper/Popper');
+
+test('renders pagination options menu', () => {
+  render(
+    <div data-testid="options-menu">
+      <PaginationOptionsMenu toggleTemplate="Test" />
+    </div>
+  );
+
+  expect(screen.getByTestId('options-menu').children[0]).toBeVisible();
+});
+
+test(`renders with class ${styles.paginationPageMenu} by default`, () => {
+  render(<PaginationOptionsMenu toggleTemplate="Test" />);
+
+  // Mocked Popper is rendered with data-testid="mock-wrapper"
+  expect(screen.getByTestId('mock-wrapper').parentElement).toHaveClass(styles.paginationPageMenu);
+});