@patternfly/react-core 6.0.0-alpha.71 → 6.0.0-alpha.73

package/helpers/package.json

@@ -1 +1,8 @@
-{"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.70","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.72",
+  "private": true
+}

package/layouts/package.json

@@ -1 +1,8 @@
-{"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.70","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.72",
+  "private": true
+}

package/next/package.json

@@ -1 +1,8 @@
-{"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.70","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.72",
+  "private": true
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.71",
+  "version": "6.0.0-alpha.73",
   "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",
@@ -47,23 +47,22 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.25",
-    "@patternfly/react-styles": "^6.0.0-alpha.24",
-    "@patternfly/react-tokens": "^6.0.0-alpha.24",
+    "@patternfly/react-icons": "^6.0.0-alpha.27",
+    "@patternfly/react-styles": "^6.0.0-alpha.26",
+    "@patternfly/react-tokens": "^6.0.0-alpha.26",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.150",
+    "@patternfly/patternfly": "6.0.0-alpha.160",
     "case-anything": "^2.1.13",
-    "css": "^2.2.3",
-    "fs-extra": "^11.1.1",
-    "glob": "^7.1.2"
+    "css": "^3.0.0",
+    "fs-extra": "^11.2.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "74b0b00a5b489551ae02aef64d22e6f3fb3557e0"
+  "gitHead": "5ce8c9748b3f0fafa36430e68d82d0725dff2f2e"
 }

package/src/components/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Banner/banner';
 import { css } from '@patternfly/react-styles';
 
-export type BannerColor = 'red' | 'orangered' | 'orange' | 'gold' | 'green' | 'cyan' | 'blue' | 'purple';
+export type BannerColor = 'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple';
 
 export type BannerStatus = 'success' | 'warning' | 'danger' | 'info' | 'custom';
 

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

@@ -47,9 +47,9 @@ test('Renders with class name pf-m-orange when "orange" is passed to color prop'
   expect(screen.getByText('Test')).toHaveClass('pf-m-orange');
 });
 
-test('Renders with class name pf-m-gold when "gold" is passed to color prop', () => {
-  render(<Banner color="gold">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
+test('Renders with class name pf-m-yellow when "yellow" is passed to color prop', () => {
+  render(<Banner color="yellow">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-yellow');
 });
 
 test('Renders with class name pf-m-green when "green" is passed to color prop', () => {
@@ -57,9 +57,9 @@ test('Renders with class name pf-m-green when "green" is passed to color prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-green');
 });
 
-test('Renders with class name pf-m-cyan when "cyan" is passed to color prop', () => {
-  render(<Banner color="cyan">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-cyan');
+test('Renders with class name pf-m-teal when "teal" is passed to color prop', () => {
+  render(<Banner color="teal">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-teal');
 });
 
 test('Renders with class name pf-m-blue when "blue" is passed to color prop', () => {

package/src/components/Banner/examples/BannerBasic.tsx

@@ -11,11 +11,11 @@ export const BannerBasic: React.FunctionComponent = () => (
     <br />
     <Banner color="orange">Orange banner</Banner>
     <br />
-    <Banner color="gold">Gold banner</Banner>
+    <Banner color="yellow">Yellow banner</Banner>
     <br />
     <Banner color="green">Green banner</Banner>
     <br />
-    <Banner color="cyan">Cyan banner</Banner>
+    <Banner color="teal">Teal banner</Banner>
     <br />
     <Banner color="blue">Blue banner</Banner>
     <br />

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -168,7 +168,7 @@ export const CalendarMonth = ({
   const yearFormatted = yearFormat(focusedDate);
   const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
 
-  const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
+  const [hoveredDate, setHoveredDate] = React.useState<Date>(undefined);
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
   const [shouldFocus, setShouldFocus] = React.useState(false);
@@ -192,7 +192,6 @@ export const CalendarMonth = ({
 
   const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
     setFocusedDate(newDate);
-    setHoveredDate(newDate);
     setShouldFocus(false);
     onMonthChange(ev, newDate);
     setYearInput(yearFormat(newDate).toString());
@@ -212,7 +211,6 @@ export const CalendarMonth = ({
     if (newDate.getTime() !== focusedDate.getTime() && isValidated(newDate)) {
       ev.preventDefault();
       setFocusedDate(newDate);
-      setHoveredDate(newDate);
       setShouldFocus(true);
     }
   };
@@ -238,7 +236,6 @@ export const CalendarMonth = ({
       if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) {
         const newDate = changeYear(yearNum);
         setFocusedDate(newDate);
-        setHoveredDate(newDate);
         setShouldFocus(false);
 
         // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically
@@ -282,10 +279,9 @@ export const CalendarMonth = ({
       .map(({ date }) => date)[0];
     if (toFocus) {
       setFocusedDate(toFocus);
-      setHoveredDate(toFocus);
     }
   }
-  const isHoveredDateValid = isValidated(hoveredDate);
+  const isHoveredDateValid = hoveredDate && isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
 
   const calendarToRender = (
@@ -331,7 +327,6 @@ export const CalendarMonth = ({
                     onSelectToggle(false);
                     const newDate = changeMonth(Number(monthNum as string));
                     setFocusedDate(newDate);
-                    setHoveredDate(newDate);
                     setShouldFocus(false);
                     onMonthChange(ev, newDate);
                   }, 0);
@@ -369,7 +364,7 @@ export const CalendarMonth = ({
           </Button>
         </div>
       </div>
-      <table className={styles.calendarMonthCalendar}>
+      <table className={styles.calendarMonthCalendar} onMouseLeave={() => setHoveredDate(undefined)}>
         <thead className={styles.calendarMonthDays}>
           <tr>
             {calendar[0].map(({ date }, index) => (
@@ -392,16 +387,21 @@ export const CalendarMonth = ({
                 const isRangeStart = isValidDate(rangeStart) && isSameDate(date, rangeStart);
                 let isInRange = false;
                 let isRangeEnd = false;
-                if (isValidDate(rangeStart) && isValidDate(dateProp)) {
-                  isInRange = date > rangeStart && date < dateProp;
-                  isRangeEnd = isSameDate(date, dateProp);
-                } else if (isValidDate(rangeStart) && isHoveredDateValid) {
-                  if (hoveredDate > rangeStart || isSameDate(hoveredDate, rangeStart)) {
-                    isInRange = date > rangeStart && date < hoveredDate;
-                    isRangeEnd = isSameDate(date, hoveredDate);
+                if (isValidDate(rangeStart)) {
+                  let rangeEndDate: Date;
+
+                  if (isValidDate(dateProp)) {
+                    rangeEndDate = dateProp;
+                  }
+                  if (isHoveredDateValid && (!isValidDate(dateProp) || hoveredDate > dateProp)) {
+                    rangeEndDate = hoveredDate;
+                  }
+
+                  if (rangeEndDate) {
+                    isInRange = date >= rangeStart && date <= rangeEndDate;
+                    isRangeEnd = isSameDate(date, rangeEndDate);
                   }
-                  // Don't handle focused dates before start dates for now.
-                  // Core would likely need new styles
+                  // Core would likely need new styles for "is selected but disabled"
                 }
 
                 return (
@@ -412,8 +412,8 @@ export const CalendarMonth = ({
                       isAdjacentMonth && styles.modifiers.adjacentMonth,
                       isToday && styles.modifiers.current,
                       (isSelected || isRangeStart) && styles.modifiers.selected,
-                      !isValid && styles.modifiers.disabled,
-                      (isInRange || isRangeStart || isRangeEnd) && styles.modifiers.inRange,
+                      !isValid && !(isInRange || isRangeStart || isRangeEnd || isSelected) && styles.modifiers.disabled,
+                      isInRange && styles.modifiers.inRange,
                       isRangeStart && styles.modifiers.startRange,
                       isRangeEnd && styles.modifiers.endRange
                     )}

package/src/components/DatePicker/DatePicker.tsx

@@ -231,12 +231,30 @@ const DatePickerBase = (
   const createFocusSelectorString = (modifierClass: string) =>
     `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`;
   const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected);
+  const focusSelectorForSelectedEndRangeDate = createFocusSelectorString(
+    `${calendarMonthStyles.modifiers.selected}.${calendarMonthStyles.modifiers.endRange}`
+  );
   const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current);
 
+  /**
+   * Returns a CSS selector for a date button element which will receive initial focus after opening calendar popover.
+   * In case of a range picker it returns the end date, if it is selected, start date otherwise.
+   * In case of a normal datepicker it returns the selected date, if present, today otherwise.
+   */
+  const getElementSelectorToFocus = () => {
+    if (isValidDate(valueDate) && isValidDate(rangeStart)) {
+      return focusSelectorForSelectedEndRangeDate;
+    }
+    if (isValidDate(valueDate) || isValidDate(rangeStart)) {
+      return focusSelectorForSelectedDate;
+    }
+    return focusSelectorForUnselectedDate;
+  };
+
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
-        elementToFocus={isValidDate(valueDate) ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
+        elementToFocus={getElementSelectorToFocus()}
         position="bottom"
         bodyContent={
           <CalendarMonth

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

@@ -127,6 +127,9 @@ exports[`With popover opened 1`] = `
                     <button
                       aria-expanded="false"
                       class="pf-v6-c-menu-toggle"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+                      data-ouia-component-type="PF6/MenuToggle"
+                      data-ouia-safe="true"
                       style="width: 140px;"
                       type="button"
                     >

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { DrawerPanelDescription } from '../DrawerPanelDescription';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import '@testing-library/jest-dom';
 
 test(`Renders with only class ${styles.drawerDescription} by default`, () => {
   render(<DrawerPanelDescription>description content</DrawerPanelDescription>);

package/src/components/Label/Label.tsx

@@ -20,7 +20,7 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'gold';
+  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
   /** Variant of the label. */
   variant?: 'outline' | 'filled' | 'overflow' | 'add';
   /** Status of the label with a respective icon and color. Overrides the color set by the color property. */
@@ -83,13 +83,13 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
 
 const colorStyles = {
   blue: styles.modifiers.blue,
-  cyan: styles.modifiers.cyan,
+  teal: styles.modifiers.teal,
   green: styles.modifiers.green,
   orange: styles.modifiers.orange,
   purple: styles.modifiers.purple,
   red: styles.modifiers.red,
   orangered: styles.modifiers.orangered,
-  gold: styles.modifiers.gold,
+  yellow: styles.modifiers.yellow,
   grey: ''
 };
 

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

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { Label } from '../Label';
 
-const labelColors = ['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'grey'];
+const labelColors = ['blue', 'teal', 'green', 'orange', 'purple', 'red', 'grey', 'yellow'];
 
 describe('Label', () => {
   test('renders', () => {

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

@@ -225,42 +225,6 @@ exports[`Label label with close button and outline variant 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with cyan color 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-v6-c-label pf-m-cyan pf-m-filled"
-  >
-    <span
-      class="pf-v6-c-label__content"
-    >
-      <span
-        class="pf-v6-c-label__text"
-      >
-        Something
-      </span>
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Label label with cyan color with outline variant 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-v6-c-label pf-m-cyan pf-m-outline"
-  >
-    <span
-      class="pf-v6-c-label__content"
-    >
-      <span
-        class="pf-v6-c-label__text"
-      >
-        Something
-      </span>
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
 exports[`Label label with green color 1`] = `
 <DocumentFragment>
   <span
@@ -479,6 +443,42 @@ exports[`Label label with red color with outline variant 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label label with teal color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-teal pf-m-filled"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label label with teal color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-teal pf-m-outline"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Label label with truncation 1`] = `
 <DocumentFragment>
   <span
@@ -498,6 +498,42 @@ exports[`Label label with truncation 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label label with yellow color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-yellow pf-m-filled"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label label with yellow color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-yellow pf-m-outline"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Label renders 1`] = `
 <DocumentFragment>
   <span

package/src/components/Label/examples/LabelFilled.tsx

@@ -259,81 +259,81 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="cyan">Cyan</Label>
-      <Label color="cyan" icon={<CubeIcon />}>
-        Cyan icon
+      <Label color="teal">Teal</Label>
+      <Label color="teal" icon={<CubeIcon />}>
+        Teal icon
       </Label>
-      <Label color="cyan" onClose={() => Function.prototype}>
-        Cyan removable
+      <Label color="teal" onClose={() => Function.prototype}>
+        Teal removable
       </Label>
-      <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Cyan icon removable
+      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Teal icon removable
       </Label>
-      <Label color="cyan" href="#filled">
-        Cyan link
+      <Label color="teal" href="#filled">
+        Teal link
       </Label>
-      <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
-        Cyan link removable
+      <Label color="teal" href="#filled" onClose={() => Function.prototype}>
+        Teal link removable
       </Label>{' '}
-      <Label color="cyan" onClick={() => logColor('cyan')}>
-        Cyan clickable
+      <Label color="teal" onClick={() => logColor('teal')}>
+        Teal clickable
       </Label>
-      <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
-        Cyan clickable removable
+      <Label color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+        Teal clickable removable
       </Label>{' '}
-      <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Cyan label with icon that overflows
+      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Teal label with icon that overflows
       </Label>{' '}
-      <Label color="cyan" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
-        Cyan link removable (disabled)
+      <Label color="teal" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Teal link removable (disabled)
       </Label>{' '}
       <Label
-        color="cyan"
+        color="teal"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('cyan')}
+        onClick={() => logColor('teal')}
         onClose={() => Function.prototype}
       >
-        Cyan clickable removable (disabled)
+        Teal clickable removable (disabled)
       </Label>
       <br />
       <br />
-      <Label color="gold">Gold</Label>
-      <Label color="gold" icon={<CubeIcon />}>
-        Gold icon
+      <Label color="yellow">Yellow</Label>
+      <Label color="yellow" icon={<CubeIcon />}>
+        Yellow icon
       </Label>
-      <Label color="gold" onClose={() => Function.prototype}>
-        Gold removable
+      <Label color="yellow" onClose={() => Function.prototype}>
+        Yellow removable
       </Label>
-      <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Gold icon removable
+      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Yellow icon removable
       </Label>
-      <Label color="gold" href="#filled">
-        Gold link
+      <Label color="yellow" href="#filled">
+        Yellow link
       </Label>
-      <Label color="gold" href="#filled" onClose={() => Function.prototype}>
-        Gold link removable
+      <Label color="yellow" href="#filled" onClose={() => Function.prototype}>
+        Yellow link removable
       </Label>{' '}
-      <Label color="gold" onClick={() => logColor('gold')}>
-        Gold clickable
+      <Label color="yellow" onClick={() => logColor('yellow')}>
+        Yellow clickable
       </Label>
-      <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
-        Gold clickable removable
+      <Label color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+        Yellow clickable removable
       </Label>{' '}
-      <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Gold label with icon that overflows
+      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Yellow label with icon that overflows
       </Label>{' '}
-      <Label color="gold" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
-        Gold link removable (disabled)
+      <Label color="yellow" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Yellow link removable (disabled)
       </Label>{' '}
       <Label
-        color="gold"
+        color="yellow"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('gold')}
+        onClick={() => logColor('yellow')}
         onClose={() => Function.prototype}
       >
-        Gold clickable removable (disabled)
+        Yellow clickable removable (disabled)
       </Label>
       <br />
       <br />

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -182,7 +182,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           <MenuItem itemId="Orange">Orange</MenuItem>
           <MenuItem itemId="Red">Red</MenuItem>
           <MenuItem itemId="Purple">Purple</MenuItem>
-          <MenuItem itemId="Cyan">Cyan</MenuItem>
+          <MenuItem itemId="Teal">Teal</MenuItem>
         </MenuList>
       </MenuContent>
     </Menu>