@patternfly/react-core 4.206.1 → 4.206.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.206.1",
+  "version": "4.206.4",
   "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,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.57.1",
-    "@patternfly/react-styles": "^4.56.1",
-    "@patternfly/react-tokens": "^4.58.1",
+    "@patternfly/react-icons": "^4.57.4",
+    "@patternfly/react-styles": "^4.56.4",
+    "@patternfly/react-tokens": "^4.58.4",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "b47ea7bc7c7009a62fdde9e22bd3ff74fc7b265a"
+  "gitHead": "cc80f358e790331d92df19b49df25488b095265b"
 }

package/src/components/DataList/DataListCheck.tsx

@@ -9,14 +9,20 @@ export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElemen
   isValid?: boolean;
   /** Flag to show if the DataList checkbox is disabled */
   isDisabled?: boolean;
-  /** Flag to show if the DataList checkbox is checked when it is controlled by React state.
-   * To make the DataList checkbox uncontrolled, instead use the checked prop, but do not use both.
+  /** Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid,
+   * but only use one.
+   * To make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both.
    */
   isChecked?: boolean;
+  /** Flag to show if the DataList checkbox is checked when it is controlled by React state. Both isChecked and checked are valid,
+   * but only use one.
+   * To make the DataList checkbox uncontrolled, instead use the defaultChecked prop, but do not use both.
+   */
+  checked?: boolean;
   /** Flag to set default value of DataList checkbox when it is uncontrolled by React state.
    * To make the DataList checkbox controlled, instead use the isChecked prop, but do not use both.
    */
-  checked?: boolean;
+  defaultChecked?: boolean;
   /** A callback for when the DataList checkbox selection changes */
   onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
   /** Aria-labelledby of the DataList checkbox */
@@ -33,6 +39,7 @@ export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
   isDisabled = false,
   isChecked = null,
   checked = null,
+  defaultChecked,
   otherControls = false,
   ...props
 }: DataListCheckProps) => {
@@ -44,8 +51,8 @@ export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
         onChange={event => onChange(event.currentTarget.checked, event)}
         aria-invalid={!isValid}
         disabled={isDisabled}
-        {...(checked !== null && { defaultChecked: checked })}
-        {...(isChecked !== null && { checked: isChecked })}
+        {...([true, false].includes(defaultChecked) && { defaultChecked })}
+        {...(![true, false].includes(defaultChecked) && { checked: isChecked || checked })}
       />
     </div>
   );

package/src/demos/DateTimePicker.md

@@ -15,18 +15,28 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 
 ```js
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, CalendarMonth, InputGroup, TextInput, Button, Popover } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  CalendarMonth,
+  InputGroup,
+  TextInput,
+  Button,
+  Popover
+} from '@patternfly/react-core';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
 DateTimePicker = () => {
   const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
   const [isTimeOpen, setIsTimeOpen] = React.useState(false);
-  const [valueDate, setValueDate] = React.useState("YYYY-MM-DD");
-  const [valueTime, setValueTime] = React.useState("HH:MM");
+  const [valueDate, setValueDate] = React.useState('MM-DD-YYYY');
+  const [valueTime, setValueTime] = React.useState('HH:MM');
   const times = Array.from(new Array(10), (_, i) => i + 8);
-  const defaultTime = "0:00";
-  const dateFormat = date => date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g,'-');
+  const defaultTime = '0:00';
+  const dateFormat = date =>
+    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
 
   const onToggleCalendar = () => {
     setIsCalendarOpen(!isCalendarOpen);
@@ -34,69 +44,75 @@ DateTimePicker = () => {
   };
 
   const onToggleTime = ev => {
-      setIsTimeOpen(!isTimeOpen);
-      setIsCalendarOpen(false);
+    setIsTimeOpen(!isTimeOpen);
+    setIsCalendarOpen(false);
   };
 
   const onSelectCalendar = newValueDate => {
-      const newValue = dateFormat(newValueDate);
-      setValueDate(newValue);
-      setIsCalendarOpen(!isCalendarOpen);
-      // setting default time when it is not picked
-      if (valueTime === "HH:MM") {
-          setValueTime(defaultTime);
-      }
+    const newValue = dateFormat(newValueDate);
+    setValueDate(newValue);
+    setIsCalendarOpen(!isCalendarOpen);
+    // setting default time when it is not picked
+    if (valueTime === 'HH:MM') {
+      setValueTime(defaultTime);
+    }
   };
 
   const onSelectTime = ev => {
-      setValueTime(ev.target.value);
-      setIsTimeOpen(!isTimeOpen);
+    setValueTime(ev.target.value);
+    setIsTimeOpen(!isTimeOpen);
   };
 
   const timeOptions = times.map(time => (
-      <DropdownItem key={time} component="button" value={`${time}:00`}>
-        {`${time}:00`}
-      </DropdownItem>
+    <DropdownItem key={time} component="button" value={`${time}:00`}>
+      {`${time}:00`}
+    </DropdownItem>
   ));
-  const calendar = (
-      <CalendarMonth
-        date={valueDate}
-        onChange={onSelectCalendar}
-      />
-  );
+  const calendar = <CalendarMonth date={valueDate} onChange={onSelectCalendar} />;
   const time = (
-      <Dropdown
-        onSelect={onSelectTime}
-        toggle={
-          <DropdownToggle aria-label="Toggle the time picker menu" toggleIndicator={null} onToggle={onToggleTime} style={{ padding: '6px 16px' }}>
-            <OutlinedClockIcon />
-          </DropdownToggle>
-        }
-        isOpen={isTimeOpen}
-        dropdownItems={timeOptions}
+    <Dropdown
+      onSelect={onSelectTime}
+      toggle={
+        <DropdownToggle
+          aria-label="Toggle the time picker menu"
+          toggleIndicator={null}
+          onToggle={onToggleTime}
+          style={{ padding: '6px 16px' }}
+        >
+          <OutlinedClockIcon />
+        </DropdownToggle>
+      }
+      isOpen={isTimeOpen}
+      dropdownItems={timeOptions}
     />
   );
   const calendarButton = (
-      <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
-          <OutlinedCalendarAltIcon />
-      </Button>
+    <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
+      <OutlinedCalendarAltIcon />
+    </Button>
   );
   return (
     <div style={{ width: '300px' }}>
-        <Popover
-            position="bottom"
-            bodyContent={calendar}
-            showClose={false}
-            isVisible={isCalendarOpen}
-            hasNoPadding
-            hasAutoWidth
-        >
-            <InputGroup>
-                <TextInput type="'datetime-local" id="date-time" aria-label="date and time picker demo" value={valueDate + ' ' + valueTime} isReadOnly/>
-                {calendarButton}
-                {time}
-            </InputGroup>
-        </Popover>
+      <Popover
+        position="bottom"
+        bodyContent={calendar}
+        showClose={false}
+        isVisible={isCalendarOpen}
+        hasNoPadding
+        hasAutoWidth
+      >
+        <InputGroup>
+          <TextInput
+            type="'datetime-local"
+            id="date-time"
+            aria-label="date and time picker demo"
+            value={valueDate + ' ' + valueTime}
+            isReadOnly
+          />
+          {calendarButton}
+          {time}
+        </InputGroup>
+      </Popover>
     </div>
   );
 };