@patternfly/react-core 4.206.6 → 4.207.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.206.6",
+  "version": "4.207.0",
   "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.6",
-    "@patternfly/react-styles": "^4.56.6",
-    "@patternfly/react-tokens": "^4.58.6",
+    "@patternfly/react-icons": "^4.58.0",
+    "@patternfly/react-styles": "^4.57.0",
+    "@patternfly/react-tokens": "^4.59.0",
     "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": "5e76a80a71eb15e178e22d50d422768884af51b2"
+  "gitHead": "70622790d9c915dfa53396a29fafb8d1e888f3cf"
 }

package/src/components/CodeBlock/CodeBlockCode.tsx

@@ -5,14 +5,20 @@ import { css } from '@patternfly/react-styles';
 export interface CodeBlockCodeProps extends React.HTMLProps<HTMLPreElement> {
   /** Code rendered inside the code block */
   children?: React.ReactNode;
+  /** Additional classes passed to the code block pre wrapper */
+  className?: string;
+  /** Additional classes passed to the code block code */
+  codeClassName?: string;
 }
 
 export const CodeBlockCode: React.FunctionComponent<CodeBlockCodeProps> = ({
   children = null,
+  className,
+  codeClassName,
   ...props
 }: CodeBlockCodeProps) => (
-  <pre className={css(styles.codeBlockPre)} {...props}>
-    <code className={css(styles.codeBlockCode)}>{children}</code>
+  <pre className={css(styles.codeBlockPre, className)} {...props}>
+    <code className={css(styles.codeBlockCode, codeClassName)}>{children}</code>
   </pre>
 );
 

package/src/demos/DateTimePicker.md

@@ -13,107 +13,5 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 
 ### Date and time picker
 
-```js
-import React from 'react';
-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('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 onToggleCalendar = () => {
-    setIsCalendarOpen(!isCalendarOpen);
-    setIsTimeOpen(false);
-  };
-
-  const onToggleTime = ev => {
-    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 onSelectTime = ev => {
-    setValueTime(ev.target.value);
-    setIsTimeOpen(!isTimeOpen);
-  };
-
-  const timeOptions = times.map(time => (
-    <DropdownItem key={time} component="button" value={`${time}:00`}>
-      {`${time}:00`}
-    </DropdownItem>
-  ));
-  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}
-    />
-  );
-  const calendarButton = (
-    <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>
-    </div>
-  );
-};
+```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
 ```

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+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';
+
+export const DateTimePicker: React.FunctionComponent = () => {
+  const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
+  const [isTimeOpen, setIsTimeOpen] = React.useState(false);
+  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) =>
+    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
+
+  const onToggleCalendar = () => {
+    setIsCalendarOpen(!isCalendarOpen);
+    setIsTimeOpen(false);
+  };
+
+  const onToggleTime = (_value: boolean, _event: any) => {
+    setIsTimeOpen(!isTimeOpen);
+    setIsCalendarOpen(false);
+  };
+
+  const onSelectCalendar = (newValueDate: Date) => {
+    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: React.SyntheticEvent<HTMLDivElement>) => {
+    setValueTime(ev.currentTarget.textContent);
+    setIsTimeOpen(!isTimeOpen);
+  };
+
+  const timeOptions = times.map(time => (
+    <DropdownItem key={time} component="button" value={`${time}:00`}>
+      {`${time}:00`}
+    </DropdownItem>
+  ));
+
+  const calendar = <CalendarMonth date={new 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}
+    />
+  );
+
+  const calendarButton = (
+    <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="text"
+            id="date-time"
+            aria-label="date and time picker demo"
+            value={valueDate + ' ' + valueTime}
+            isReadOnly
+          />
+          {calendarButton}
+          {time}
+        </InputGroup>
+      </Popover>
+    </div>
+  );
+};