@patternfly/react-core 4.200.2 → 4.201.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.200.2",
+  "version": "4.201.2",
   "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.51.2",
-    "@patternfly/react-styles": "^4.50.2",
-    "@patternfly/react-tokens": "^4.52.2",
+    "@patternfly/react-icons": "^4.52.2",
+    "@patternfly/react-styles": "^4.51.2",
+    "@patternfly/react-tokens": "^4.53.2",
     "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": "78e64c6891ebd263e6c35a9d70d95759aba3c7ad"
+  "gitHead": "c7164830706215f812e1982fdad6c9903229e71f"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -45,7 +45,7 @@ export interface CalendarFormat {
 
 export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Month/year to base other dates around */
-  date: Date;
+  date?: Date;
   /** Callback when date is selected */
   onChange?: (date: Date) => void;
   /** Functions that returns if a date is valid and selectable */
@@ -60,8 +60,8 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
 const yearFormat = (date: Date) => date.getFullYear();
 
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
-  const selectedDate = new Date(year, month);
-  const firstDayOfWeek = new Date(selectedDate);
+  const defaultDate = new Date(year, month);
+  const firstDayOfWeek = new Date(defaultDate);
   firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + weekStart);
   // We will always show 6 weeks like google calendar
   // Assume we just want the numbers for now...
@@ -90,7 +90,7 @@ export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
 const today = new Date();
 
 export const CalendarMonth = ({
-  date: dateProp = today,
+  date: dateProp,
   locale = undefined,
   monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }),
   weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }),
@@ -110,6 +110,7 @@ export const CalendarMonth = ({
 }: CalendarProps) => {
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+  const [selectedDate, setSelectedDate] = React.useState(new Date(dateProp));
   // eslint-disable-next-line prefer-const
   let [focusedDate, setFocusedDate] = React.useState(new Date(dateProp));
   if (!isValidDate(focusedDate)) {
@@ -118,7 +119,7 @@ export const CalendarMonth = ({
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
-  const [shouldFocus, setShouldFocus] = React.useState(true);
+  const [shouldFocus, setShouldFocus] = React.useState(false);
 
   const isValidated = (date: Date) => validators.every(validator => validator(date));
   const focusedDateValidated = isValidated(focusedDate);
@@ -126,7 +127,8 @@ export const CalendarMonth = ({
     if (!(isValidDate(dateProp) && isSameDate(focusedDate, dateProp))) {
       setFocusedDate(dateProp);
     }
-  }, [dateProp, focusedDate]);
+  }, [dateProp]);
+
   useEffect(() => {
     // When using header controls don't move focus
     if (shouldFocus) {
@@ -136,7 +138,7 @@ export const CalendarMonth = ({
     } else {
       setShouldFocus(true);
     }
-  }, [focusedDate, focusedDateValidated, shouldFocus]);
+  }, [focusedDate]);
 
   const onMonthClick = (newDate: Date) => {
     setFocusedDate(newDate);
@@ -275,7 +277,7 @@ export const CalendarMonth = ({
               {week.map(({ date, isValid }, index) => {
                 const dayFormatted = dayFormat(date);
                 const isToday = isSameDate(date, today);
-                const isSelected = isValidDate(dateProp) && isSameDate(date, dateProp);
+                const isSelected = isValidDate(selectedDate) && isSameDate(date, selectedDate);
                 const isFocused = isSameDate(date, focusedDate);
                 const isAdjacentMonth = date.getMonth() !== focusedDate.getMonth();
                 let isInRange = false;
@@ -312,7 +314,11 @@ export const CalendarMonth = ({
                         !isValid && styles.modifiers.disabled
                       )}
                       type="button"
-                      onClick={() => onChange(date)}
+                      onClick={() => {
+                        setSelectedDate(date);
+                        setFocusedDate(date);
+                        onChange(date);
+                      }}
                       onMouseOver={() => setHoveredDate(date)}
                       tabIndex={isFocused ? 0 : -1}
                       disabled={!isValid}

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -12,203 +12,10 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ### Basic
 
-```js
-import React from 'react';
-import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-
-class BasicCodeBlock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.timer = null;
-
-    this.state = {
-      copied: false
-    };
-
-    this.clipboardCopyFunc = (event, text) => {
-      const clipboard = event.currentTarget.parentElement;
-      const el = document.createElement('textarea');
-      el.value = text.toString();
-      clipboard.appendChild(el);
-      el.select();
-      document.execCommand('copy');
-      clipboard.removeChild(el);
-    };
-
-    this.onClick = (event, text) => {
-      if (this.timer) {
-        window.clearTimeout(this.timer);
-        this.setState({ copied: false });
-      }
-      this.clipboardCopyFunc(event, text);
-      this.setState({ copied: true }, () => {
-        this.timer = window.setTimeout(() => {
-          this.setState({ copied: false });
-          this.timer = null;
-        }, 1000);
-      });
-    };
-  }
-
-  render() {
-    const code = `apiVersion: helm.openshift.io/v1beta1/
-kind: HelmChartRepository
-metadata:
-name: azure-sample-repo
-spec:
-connectionConfig:
-url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
-
-    const actions = (
-      <React.Fragment>
-        <CodeBlockAction>
-          <ClipboardCopyButton
-            id="copy-button"
-            textId="code-content"
-            aria-label="Copy to clipboard"
-            onClick={e => this.onClick(e, code)}
-            exitDelay={600}
-            maxWidth="110px"
-            variant="plain"
-          >
-            {this.state.copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
-          </ClipboardCopyButton>
-        </CodeBlockAction>
-        <CodeBlockAction>
-          <Button variant="plain" aria-label="Play icon">
-            <PlayIcon />
-          </Button>
-        </CodeBlockAction>
-      </React.Fragment>
-    );
-
-    return (
-      <CodeBlock actions={actions}>
-        <CodeBlockCode id="code-content">{code}</CodeBlockCode>
-      </CodeBlock>
-    );
-  }
-}
+```ts file="./CodeBlockBasic.tsx"
 ```
 
 ### Expandable
 
-```js
-import React from 'react';
-import {
-  CodeBlock,
-  CodeBlockAction,
-  CodeBlockCode,
-  ClipboardCopyButton,
-  ExpandableSection,
-  ExpandableSectionToggle,
-  Button
-} from '@patternfly/react-core';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-
-class BasicCodeBlock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.timer = null;
-
-    this.state = {
-      isExpanded: false,
-      copied: false
-    };
-
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-
-    this.clipboardCopyFunc = (event, text) => {
-      const clipboard = event.currentTarget.parentElement;
-      const el = document.createElement('textarea');
-      el.value = text.toString();
-      clipboard.appendChild(el);
-      el.select();
-      document.execCommand('copy');
-      clipboard.removeChild(el);
-    };
-
-    this.onClick = (event, text) => {
-      if (this.timer) {
-        window.clearTimeout(this.timer);
-        this.setState({ copied: false });
-      }
-      this.clipboardCopyFunc(event, text);
-      this.setState({ copied: true }, () => {
-        this.timer = window.setTimeout(() => {
-          this.setState({ copied: false });
-          this.timer = null;
-        }, 1000);
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-
-    const copyBlock = `apiVersion: helm.openshift.io/v1beta1/
-kind: HelmChartRepository
-metadata:
-name: azure-sample-repo
-spec:
-connectionConfig:
-url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
-
-    const code = `apiVersion: helm.openshift.io/v1beta1/
-kind: HelmChartRepository
-metadata:
-name: azure-sample-repo`;
-    const expandedCode = `spec:
-connectionConfig:
-url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
-
-    const actions = (
-      <React.Fragment>
-        <CodeBlockAction>
-          <ClipboardCopyButton
-            id="copy-button"
-            textId="code-content"
-            aria-label="Copy to clipboard"
-            onClick={e => this.onClick(e, copyBlock)}
-            exitDelay={600}
-            maxWidth="110px"
-            variant="plain"
-          >
-            {this.state.copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
-          </ClipboardCopyButton>
-        </CodeBlockAction>
-        <CodeBlockAction>
-          <Button variant="plain" aria-label="Play icon">
-            <PlayIcon />
-          </Button>
-        </CodeBlockAction>
-      </React.Fragment>
-    );
-    return (
-      <CodeBlock actions={actions}>
-        <CodeBlockCode>
-          {code}
-          <ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand">
-            {expandedCode}
-          </ExpandableSection>
-        </CodeBlockCode>
-        <ExpandableSectionToggle
-          isExpanded={isExpanded}
-          onToggle={this.onToggle}
-          contentId="code-block-expand"
-          direction="up"
-        >
-          {isExpanded ? 'Show Less' : 'Show More'}
-        </ExpandableSectionToggle>
-      </CodeBlock>
-    );
-  }
-}
+```ts file="./CodeBlockExpandable.tsx"
 ```

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+
+export const BasicCodeBlock: React.FunctionComponent = () => {
+  const [copied, setCopied] = React.useState(false);
+
+  const clipboardCopyFunc = (event, text) => {
+    const clipboard = event.currentTarget.parentElement;
+    const el = document.createElement('textarea');
+    el.value = text.toString();
+    clipboard.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    clipboard.removeChild(el);
+  };
+
+  const onClick = (event, text) => {
+    clipboardCopyFunc(event, text);
+    setCopied(true);
+  };
+
+  const code = `apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+name: azure-sample-repo0oooo00ooo
+spec:
+connectionConfig:
+url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
+
+  const actions = (
+    <React.Fragment>
+      <CodeBlockAction>
+        <ClipboardCopyButton
+          id="copy-button"
+          textId="code-content"
+          aria-label="Copy to clipboard"
+          onClick={e => onClick(e, code)}
+          exitDelay={600}
+          maxWidth="110px"
+          variant="plain"
+        >
+          {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
+        </ClipboardCopyButton>
+      </CodeBlockAction>
+      <CodeBlockAction>
+        <Button variant="plain" aria-label="Play icon">
+          <PlayIcon />
+        </Button>
+      </CodeBlockAction>
+    </React.Fragment>
+  );
+
+  return (
+    <CodeBlock actions={actions}>
+      <CodeBlockCode id="code-content">{code}</CodeBlockCode>
+    </CodeBlock>
+  );
+};

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  ClipboardCopyButton,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  Button
+} from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+
+export const ExpandableCodeBlock: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+
+  const onToggle = isExpanded => {
+    setIsExpanded(isExpanded);
+  };
+
+  const clipboardCopyFunc = (event, text) => {
+    const clipboard = event.currentTarget.parentElement;
+    const el = document.createElement('textarea');
+    el.value = text.toString();
+    clipboard.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    clipboard.removeChild(el);
+  };
+
+  const onClick = (event, text) => {
+    clipboardCopyFunc(event, text);
+    setCopied(true);
+  };
+
+  const copyBlock = `apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+name: azure-sample-repo
+spec:
+connectionConfig:
+url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
+
+  const code = `apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+name: azure-sample-repo`;
+  const expandedCode = `spec:
+connectionConfig:
+url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
+
+  const actions = (
+    <React.Fragment>
+      <CodeBlockAction>
+        <ClipboardCopyButton
+          id="copy-button"
+          textId="code-content"
+          aria-label="Copy to clipboard"
+          onClick={e => onClick(e, copyBlock)}
+          exitDelay={600}
+          maxWidth="110px"
+          variant="plain"
+        >
+          {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
+        </ClipboardCopyButton>
+      </CodeBlockAction>
+      <CodeBlockAction>
+        <Button variant="plain" aria-label="Play icon">
+          <PlayIcon />
+        </Button>
+      </CodeBlockAction>
+    </React.Fragment>
+  );
+
+  return (
+    <CodeBlock actions={actions}>
+      <CodeBlockCode>
+        {code}
+        <ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand">
+          {expandedCode}
+        </ExpandableSection>
+      </CodeBlockCode>
+      <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId="code-block-expand" direction="up">
+        {isExpanded ? 'Show Less' : 'Show More'}
+      </ExpandableSectionToggle>
+    </CodeBlock>
+  );
+};