@patternfly/react-core 5.0.0-alpha.51 → 5.0.0-alpha.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.51",
+  "version": "5.0.0-alpha.53",
   "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",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "1b1bde2cf964d501b24a499274099e1de0b60425"
+  "gitHead": "c4f0e8983765fbf06c61c96ff4ed29731087355f"
 }

package/src/components/TimePicker/TimePicker.tsx

@@ -373,9 +373,22 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
   onToggle = (isOpen: boolean) => {
     // on close, parse and validate input
     this.setState(prevState => {
-      const { timeRegex, isInvalid } = prevState;
-      const { delimiter, is24Hour, includeSeconds } = this.props;
-      const time = parseTime(prevState.timeState, timeRegex, delimiter, !is24Hour, includeSeconds);
+      const { timeRegex, isInvalid, timeState } = prevState;
+      const { delimiter, is24Hour, includeSeconds, onChange } = this.props;
+      const time = parseTime(timeState, timeRegex, delimiter, !is24Hour, includeSeconds);
+
+      // Call onChange when Enter is pressed in input and timeoption does not exist in menu
+      if (onChange && !isOpen && time !== timeState) {
+        onChange(
+          null,
+          time,
+          getHours(time, timeRegex),
+          getMinutes(time, timeRegex),
+          getSeconds(time, timeRegex),
+          this.isValid(time)
+        );
+      }
+
       return {
         isTimeOptionsOpen: isOpen,
         timeState: time,
@@ -414,7 +427,6 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
   onInputChange = (newTime: string, event: React.FormEvent<HTMLInputElement>) => {
     const { onChange } = this.props;
     const { timeRegex } = this.state;
-
     if (onChange) {
       onChange(
         event,

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

@@ -86,6 +86,28 @@ describe('TimePicker', () => {
         expects: { hour: 23, minutes: 59, seconds: null }
       });
     });
+
+    // Disabling because this test does not work on CI
+    xtest('should call onChange when pressing Enter', async () => {
+      const onChange = jest.fn();
+      const user = userEvent.setup();
+
+      render(<TimePicker onChange={onChange} aria-label="time picker" />);
+
+      // Take into account timezones when tests are ran
+      const isPM = new Date().getHours() > 12;
+
+      await user.type(screen.getByLabelText('time picker'), `11:11`);
+      await user.keyboard('[Enter]');
+      expect(onChange).toHaveBeenLastCalledWith(
+        expect.any(Object),
+        `11:11 ${isPM ? 'PM' : 'AM'}`,
+        isPM ? 23 : 11,
+        11,
+        null,
+        true
+      );
+    });
   });
 
   describe('test isInvalid', () => {

package/src/demos/CardDemos.md

@@ -8,7 +8,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-ic
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
 import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
 import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
@@ -655,7 +655,7 @@ import {
   Popover,
   Title
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
@@ -723,7 +723,7 @@ const StatusPlain: React.FunctionComponent = () => {
       <div>
         Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.
       </div>
-      <TableComposable variant="compact">
+      <Table variant="compact">
         <Thead>
           <Tr>
             <Th />
@@ -762,7 +762,7 @@ const StatusPlain: React.FunctionComponent = () => {
             </Tbody>
           );
         })}
-      </TableComposable>
+      </Table>
     </>
   );
 

package/src/demos/DatePicker/DatePicker.md

@@ -18,34 +18,35 @@ DateRangePicker = () => {
   const [from, setFrom] = React.useState();
   const [to, setTo] = React.useState();
 
-  const toValidator = date => isValidDate(from) && date >= from ? '' : 'To date must be less than from date';
-  const onFromChange = (_str, date) => {
+  const toValidator = (date) =>
+    isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';
+
+  const onFromChange = (_event, _value, date) => {
     setFrom(new Date(date));
     if (isValidDate(date)) {
       date.setDate(date.getDate() + 1);
       setTo(yyyyMMddFormat(date));
-    }
-    else {
+    } else {
       setTo('');
     }
   };
 
+  const onToChange = (_event, _value, date) => {
+    if (isValidDate(date)) {
+      setTo(yyyyMMddFormat(date));
+    }
+  };
+
   return (
     <Split>
       <SplitItem>
-        <DatePicker
-          onChange={onFromChange}
-          aria-label="Start date"
-          placeholder="YYYY-MM-DD"
-        />
-      </SplitItem>
-      <SplitItem style={{ padding: '6px 12px 0 12px' }}>
-        to
+        <DatePicker onChange={onFromChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
       </SplitItem>
+      <SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>
       <SplitItem>
         <DatePicker
           value={to}
-          onChange={date => setTo(date)}
+          onChange={onToChange}
           isDisabled={!isValidDate(from)}
           rangeStart={from}
           validators={[toValidator]}
@@ -55,23 +56,34 @@ DateRangePicker = () => {
       </SplitItem>
     </Split>
   );
-}
+};
 ```
 
 ### Date and time range picker
 
 ```js
-import { Flex, FlexItem, InputGroup, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
+import {
+  Flex,
+  FlexItem,
+  InputGroup,
+  DatePicker,
+  isValidDate,
+  TimePicker,
+  yyyyMMddFormat,
+  updateDateTime
+} from '@patternfly/react-core';
 
 DateTimeRangePicker = () => {
   const [from, setFrom] = React.useState();
   const [to, setTo] = React.useState();
 
-  const toValidator = date => {
-    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from) ? '' : 'To date must after from date';
+  const toValidator = (date) => {
+    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
+      ? ''
+      : 'The "to" date must be after the "from" date';
   };
-  
-  const onFromDateChange = (inputDate, newFromDate) => {
+
+  const onFromDateChange = (_event, inputDate, newFromDate) => {
     if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
       newFromDate.setHours(from.getHours());
       newFromDate.setMinutes(from.getMinutes());
@@ -80,7 +92,7 @@ DateTimeRangePicker = () => {
       setFrom(new Date(newFromDate));
     }
   };
-  
+
   const onFromTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(from)) {
       const updatedFromDate = new Date(from);
@@ -90,16 +102,16 @@ DateTimeRangePicker = () => {
     }
   };
 
-  const onToDateChange = (inputDate, newToDate) => {
+  const onToDateChange = (_event, inputDate, newToDate) => {
     if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
       newToDate.setHours(to.getHours());
       newToDate.setMinutes(to.getMinutes());
     }
-    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)){
+    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
       setTo(newToDate);
     }
   };
-  
+
   const onToTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(to)) {
       const updatedToDate = new Date(to);
@@ -110,24 +122,14 @@ DateTimeRangePicker = () => {
   };
 
   return (
-    <Flex direction={{default: 'column', lg: 'row'}}>
+    <Flex direction={{ default: 'column', lg: 'row' }}>
       <FlexItem>
         <InputGroup>
-          <DatePicker
-            onChange={onFromDateChange}
-            aria-label="Start date"
-            placeholder="YYYY-MM-DD"
-          />
-          <TimePicker 
-            aria-label="Start time"
-            style={{width: '150px'}} 
-            onChange={onFromTimeChange} 
-          />
+          <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+          <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
         </InputGroup>
       </FlexItem>
-      <FlexItem>
-        to
-      </FlexItem>
+      <FlexItem>to</FlexItem>
       <FlexItem>
         <InputGroup>
           <DatePicker
@@ -139,19 +141,22 @@ DateTimeRangePicker = () => {
             aria-label="End date"
             placeholder="YYYY-MM-DD"
           />
-          <TimePicker style={{width: '150px'}} onChange={onToTimeChange} isDisabled={!isValidDate(from)}/>
+          <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
         </InputGroup>
       </FlexItem>
     </Flex>
   );
-}
+};
 ```
 
-
 ### Date and time pickers in modal
+
 Modals trap focus and watch a few document level events. In order to place a date picker in a modal:
+
 - To avoid the modal's escape press event handler from overruling the date picker's escape press handlers, use the `DatePickerRef` to close the calendar when it is open and the escape key is pressed.
 - Append the calendar to the modal to keep it as close to the date picker in the DOM while maintaining correct layouts visually
   In order to place a time picker in the modal, its menu must be appended to the time picker's parent.
+
 ```ts file="./examples/DateTimePickerInModal.tsx"
+
 ```

package/src/demos/Filters/FilterDemos.md

@@ -32,7 +32,7 @@ ToolbarToggleGroup
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 ## Filtering demos
 

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -25,7 +25,7 @@ import {
   EmptyStateActions,
   EmptyStateIcon
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -649,7 +649,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -701,7 +701,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -15,7 +15,7 @@ import {
   Badge,
   Pagination
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
@@ -375,7 +375,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -419,7 +419,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -24,7 +24,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -465,7 +465,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -517,7 +517,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -23,7 +23,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -515,7 +515,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -567,7 +567,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -21,7 +21,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -488,7 +488,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -540,7 +540,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -21,7 +21,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Repository {
@@ -296,7 +296,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -348,7 +348,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -12,7 +12,7 @@ import {
   ToolbarItem,
   Pagination
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
@@ -360,7 +360,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -404,7 +404,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -41,7 +41,7 @@ import {
   ToolbarToggleGroup
 } from '@patternfly/react-core';
 import {
-  TableComposable,
+  Table,
   Thead,
   Tbody,
   Tr,
@@ -209,8 +209,8 @@ export const TablesAndTabs = () => {
     </Toolbar>
   );
 
-  const tableComposable = (
-    <TableComposable aria-label="`Composable` table">
+  const table = (
+    <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
           <Th
@@ -284,7 +284,7 @@ export const TablesAndTabs = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 
   const panelContent = (
@@ -375,7 +375,7 @@ export const TablesAndTabs = () => {
   const tabContent = (
     <Drawer isExpanded={isExpanded} isInline>
       <DrawerContent panelContent={panelContent}>
-        <DrawerContentBody>{tableComposable}</DrawerContentBody>
+        <DrawerContentBody>{table}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
   );