@patternfly/react-core 4.202.16 → 4.202.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.16",
+  "version": "4.202.19",
   "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.53.16",
-    "@patternfly/react-styles": "^4.52.16",
-    "@patternfly/react-tokens": "^4.54.16",
+    "@patternfly/react-icons": "^4.53.19",
+    "@patternfly/react-styles": "^4.52.19",
+    "@patternfly/react-tokens": "^4.54.19",
     "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": "862a38b7f3fccd6f3bfb3ba754d02f03a152dc04"
+  "gitHead": "9e9d16ac392a83a7141cd1720079d46bc6bd796b"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -113,7 +113,11 @@ export const CalendarMonth = ({
   // eslint-disable-next-line prefer-const
   let [focusedDate, setFocusedDate] = React.useState(new Date(dateProp));
   if (!isValidDate(focusedDate)) {
-    focusedDate = today;
+    if (isValidDate(rangeStart)) {
+      focusedDate = rangeStart;
+    } else {
+      focusedDate = today;
+    }
   }
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
@@ -279,13 +283,15 @@ export const CalendarMonth = ({
                 const isSelected = isValidDate(dateProp) && isSameDate(date, dateProp);
                 const isFocused = isSameDate(date, focusedDate);
                 const isAdjacentMonth = date.getMonth() !== focusedDate.getMonth();
+                const isRangeStart = isValidDate(rangeStart) && isSameDate(date, rangeStart);
                 let isInRange = false;
-                let isRangeStart = false;
                 let isRangeEnd = false;
-                if (isValidDate(rangeStart) && isHoveredDateValid) {
+                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;
-                    isRangeStart = isSameDate(date, rangeStart);
                     isRangeEnd = isSameDate(date, hoveredDate);
                   }
                   // Don't handle focused dates before start dates for now.

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -17,3 +17,12 @@ beta: true
 
 ```ts file="./CalendarMonthSelectableDate.tsx"
 ```
+
+### Date range
+
+In this example, there are 2 dates selected: a range start date (via the `rangeStart` prop) and a range end date (via the `date` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `validators` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.
+
+For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](https://www.patternfly.org/v4/components/date-picker/react-demos).
+
+```ts file="./CalendarMonthDateRange.tsx"
+```

package/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CalendarMonth } from '@patternfly/react-core';
+
+export const CalendarMonthDateRange: React.FunctionComponent = () => {
+  const startDate = new Date(2020, 10, 11);
+  const endDate = new Date(2020, 10, 24);
+  const disablePreStartDates = (date: Date) => date >= startDate;
+
+  return <CalendarMonth validators={[disablePreStartDates]} date={endDate} rangeStart={startDate} />;
+};

package/src/components/ContextSelector/examples/ContextSelector.md

@@ -10,291 +10,15 @@ ouia: true
 
 ### Basic
 
-```js
-import React from 'react';
-import { Button, ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core';
-
-class SimpleContextSelector extends React.Component {
-  constructor(props) {
-    super(props);
-    this.items = [
-      {
-        text: 'Link',
-        href: '#'
-      },
-      'Action',
-      {
-        text: 'Disabled link',
-        href: '#',
-        isDisabled: true
-      },
-      {
-        text: 'Disabled action',
-        isDisabled: true
-      },
-      'My project',
-      'OpenShift cluster',
-      'Production Ansible',
-      'AWS',
-      'Azure',
-      'My project 2',
-      'OpenShift cluster ',
-      'Production Ansible 2 ',
-      'AWS 2',
-      'Azure 2'
-    ];
-
-    this.state = {
-      isOpen: false,
-      selected: this.items[0].text || this.items[0],
-      searchValue: '',
-      filteredItems: this.items
-    };
-
-    this.onToggle = (event, isOpen) => {
-      this.setState({
-        isOpen
-      });
-    };
-
-    this.onSelect = (event, value) => {
-      this.setState({
-        selected: value,
-        isOpen: !this.state.isOpen
-      });
-    };
-
-    this.onSearchInputChange = value => {
-      this.setState({ searchValue: value });
-    };
-
-    this.onSearchButtonClick = event => {
-      const filtered =
-        this.state.searchValue === ''
-          ? this.items
-          : this.items.filter(item => {
-            const str = item.text ? item.text : item;
-            return str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1;
-          });
-
-      this.setState({ filteredItems: filtered || [] });
-    };
-  }
-
-  render() {
-    const { isOpen, selected, searchValue, filteredItems } = this.state;
-    return (
-      <ContextSelector
-        toggleText={selected}
-        onSearchInputChange={this.onSearchInputChange}
-        isOpen={isOpen}
-        searchInputValue={searchValue}
-        onToggle={this.onToggle}
-        onSelect={this.onSelect}
-        onSearchButtonClick={this.onSearchButtonClick}
-        screenReaderLabel="Selected Project:"
-      >
-        {filteredItems.map((item, index) => {
-          const { text = null, href = null, isDisabled } = item;
-          return (<ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>{text || item}</ContextSelectorItem>);
-        })}
-      </ContextSelector>
-    );
-  }
-}
+```ts file="./ContextSelectorBasic.tsx"
 ```
 
 ### Plain with text
 
-```ts
-import React from 'react';
-import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
-
-interface Item {
-  text: string;
-  href?: string;
-  isDisabled?: boolean;
-}
-
-const items = [
-  {
-    text: 'Link',
-    href: '#'
-  },
-  'Action',
-  {
-    text: 'Disabled link',
-    href: '#',
-    isDisabled: true
-  },
-  {
-    text: 'Disabled action',
-    isDisabled: true
-  },
-  'My Project',
-  'OpenShift Cluster',
-  'Production Ansible',
-  'AWS',
-  'Azure',
-  'My Project 2',
-  'OpenShift Cluster ',
-  'Production Ansible 2 ',
-  'AWS 2',
-  'Azure 2'
-];
-
-const PlainTextContextSelector: React.FunctionComponent = () => {
-  const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;
-  const [isOpen, setOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState(firstItemText);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [filteredItems, setFilteredItems] = React.useState(items);
-
-  function onToggle(event: any, isOpen: boolean) {
-    setOpen(isOpen);
-  };
-
-  function onSelect(event: any, value: string) {
-    setSelected(value);
-    setOpen(!isOpen);
-  };
-
-  function onSearchInputChange(value: string) {
-    setSearchValue(value);
-  };
-
-  function onSearchButtonClick(event: React.SyntheticEvent<HTMLButtonElement>) {
-    const filtered =
-      searchValue === ''
-        ? items
-        : items.filter(item => {
-          const str = (typeof item === 'string') ? item : item.text;
-          return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
-        });
-
-    setFilteredItems(filtered || []);
-  };
-  return (
-    <ContextSelector
-      toggleText={selected}
-      onSearchInputChange={onSearchInputChange}
-      isOpen={isOpen}
-      searchInputValue={searchValue}
-      onToggle={onToggle}
-      onSelect={onSelect}
-      onSearchButtonClick={onSearchButtonClick}
-      screenReaderLabel="Selected Project:"
-      isPlain
-      isText
-    >
-      {filteredItems.map((item, index) => {
-        const [text, href = null, isDisabled = false] = (typeof item === 'string')
-          ? [item, null, false]
-          : [item.text, item.href, item.isDisabled];
-        return <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>{text}</ContextSelectorItem>;
-      })}
-    </ContextSelector>
-  );
-};
+```ts file="./ContextSelectorPlainText.tsx"
 ```
 
 ### With footer
 
-```js
-import React from 'react';
-import { Button, ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core';
-
-class FooterContextSelector extends React.Component {
-  constructor(props) {
-    super(props);
-    this.items = [
-      {
-        text: 'Link',
-        href: '#'
-      },
-      'Action',
-      {
-        text: 'Disabled link',
-        href: '#',
-        isDisabled: true
-      },
-      {
-        text: 'Disabled action',
-        isDisabled: true
-      },
-      'My project',
-      'OpenShift cluster',
-      'Production Ansible',
-      'AWS',
-      'Azure',
-      'My project 2',
-      'OpenShift cluster ',
-      'Production Ansible 2 ',
-      'AWS 2',
-      'Azure 2'
-    ];
-
-    this.state = {
-      isOpen: false,
-      selected: this.items[0].text || this.items[0],
-      searchValue: '',
-      filteredItems: this.items
-    };
-
-    this.onToggle = (event, isOpen) => {
-      this.setState({
-        isOpen
-      });
-    };
-
-    this.onSelect = (event, value) => {
-      this.setState({
-        selected: value,
-        isOpen: !this.state.isOpen
-      });
-    };
-
-    this.onSearchInputChange = value => {
-      this.setState({ searchValue: value });
-    };
-
-    this.onSearchButtonClick = event => {
-      const filtered =
-        this.state.searchValue === ''
-          ? this.items
-          : this.items.filter(item => {
-            const str = item.text ? item.text : item;
-            return str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1;
-          });
-
-      this.setState({ filteredItems: filtered || [] });
-    };
-  }
-
-  render() {
-    const { isOpen, selected, searchValue, filteredItems } = this.state;
-    return (
-      <ContextSelector
-        toggleText={selected}
-        onSearchInputChange={this.onSearchInputChange}
-        isOpen={isOpen}
-        searchInputValue={searchValue}
-        onToggle={this.onToggle}
-        onSelect={this.onSelect}
-        onSearchButtonClick={this.onSearchButtonClick}
-        screenReaderLabel="Selected Project:"
-        footer={
-          <ContextSelectorFooter>
-            <Button variant="link" isInline>Footer action</Button>
-          </ContextSelectorFooter>
-        }
-      >
-        {filteredItems.map((item, index) => {
-          const { text = null, href = null, isDisabled } = item;
-          return (<ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>{text || item}</ContextSelectorItem>);
-        })}
-      </ContextSelector>
-    );
-  }
-}
+```ts file="./ContextSelectorWithFooter.tsx"
 ```

package/src/components/ContextSelector/examples/ContextSelectorBasic.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
+
+export const ContextSelectorBasic: React.FunctionComponent = () => {
+  const items = [
+    {
+      text: 'Link',
+      href: '#'
+    },
+    'Action',
+    {
+      text: 'Disabled link',
+      href: '#',
+      isDisabled: true
+    },
+    {
+      text: 'Disabled action',
+      isDisabled: true
+    },
+    'My project',
+    'OpenShift cluster',
+    'Production Ansible',
+    'AWS',
+    'Azure',
+    'My project 2',
+    'OpenShift cluster ',
+    'Production Ansible 2 ',
+    'AWS 2',
+    'Azure 2'
+  ];
+
+  const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;
+  const [isOpen, setOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState(firstItemText);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [filteredItems, setFilteredItems] = React.useState(items);
+
+  const onToggle = (event: any, isOpen: boolean) => {
+    setOpen(isOpen);
+  };
+
+  const onSelect = (event: any, value: React.ReactNode) => {
+    setSelected(value as string);
+    setOpen(!isOpen);
+  };
+
+  const onSearchInputChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+    const filtered =
+      searchValue === ''
+        ? items
+        : items.filter(item => {
+            const str = typeof item === 'string' ? item : item.text;
+            return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
+          });
+
+    setFilteredItems(filtered || []);
+  };
+  return (
+    <ContextSelector
+      toggleText={selected}
+      onSearchInputChange={onSearchInputChange}
+      isOpen={isOpen}
+      searchInputValue={searchValue}
+      onToggle={onToggle}
+      onSelect={onSelect}
+      onSearchButtonClick={onSearchButtonClick}
+      screenReaderLabel="Selected Project:"
+    >
+      {filteredItems.map((item, index) => {
+        const [text = null, href = null, isDisabled] =
+          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        return (
+          <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
+            {text || item}
+          </ContextSelectorItem>
+        );
+      })}
+    </ContextSelector>
+  );
+};

package/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
+
+const items = [
+  {
+    text: 'Link',
+    href: '#'
+  },
+  'Action',
+  {
+    text: 'Disabled link',
+    href: '#',
+    isDisabled: true
+  },
+  {
+    text: 'Disabled action',
+    isDisabled: true
+  },
+  'My Project',
+  'OpenShift Cluster',
+  'Production Ansible',
+  'AWS',
+  'Azure',
+  'My Project 2',
+  'OpenShift Cluster ',
+  'Production Ansible 2 ',
+  'AWS 2',
+  'Azure 2'
+];
+
+export const ContextSelectorPlainText: React.FunctionComponent = () => {
+  const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;
+  const [isOpen, setOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState(firstItemText);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [filteredItems, setFilteredItems] = React.useState(items);
+  const onToggle = (event: any, isOpen: boolean) => {
+    setOpen(isOpen);
+  };
+
+  const onSelect = (event: any, value: React.ReactNode) => {
+    setSelected(value as string);
+    setOpen(!isOpen);
+  };
+
+  const onSearchInputChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+    const filtered =
+      searchValue === ''
+        ? items
+        : items.filter(item => {
+            const str = typeof item === 'string' ? item : item.text;
+            return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
+          });
+
+    setFilteredItems(filtered || []);
+  };
+  return (
+    <ContextSelector
+      toggleText={selected}
+      onSearchInputChange={onSearchInputChange}
+      isOpen={isOpen}
+      searchInputValue={searchValue}
+      onToggle={onToggle}
+      onSelect={onSelect}
+      onSearchButtonClick={onSearchButtonClick}
+      screenReaderLabel="Selected Project:"
+      isPlain
+      isText
+    >
+      {filteredItems.map((item, index) => {
+        const [text, href = null, isDisabled = false] =
+          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        return (
+          <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
+            {text}
+          </ContextSelectorItem>
+        );
+      })}
+    </ContextSelector>
+  );
+};

package/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Button, ContextSelector, ContextSelectorItem, ContextSelectorFooter } from '@patternfly/react-core';
+
+export const ContextSelectorWithFooter: React.FunctionComponent = () => {
+  const items = [
+    {
+      text: 'Link',
+      href: '#'
+    },
+    'Action',
+    {
+      text: 'Disabled link',
+      href: '#',
+      isDisabled: true
+    },
+    {
+      text: 'Disabled action',
+      isDisabled: true
+    },
+    'My project',
+    'OpenShift cluster',
+    'Production Ansible',
+    'AWS',
+    'Azure',
+    'My project 2',
+    'OpenShift cluster ',
+    'Production Ansible 2 ',
+    'AWS 2',
+    'Azure 2'
+  ];
+  const firstItemText = typeof items[0] === 'string' ? items[0] : items[0].text;
+  const [isOpen, setOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState(firstItemText);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [filteredItems, setFilteredItems] = React.useState(items);
+
+  const onToggle = (event: any, isOpen: boolean) => {
+    setOpen(isOpen);
+  };
+
+  const onSelect = (event: any, value: React.ReactNode) => {
+    setSelected(value as string);
+    setOpen(!isOpen);
+  };
+
+  const onSearchInputChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+    const filtered =
+      searchValue === ''
+        ? items
+        : items.filter(item => {
+            const str = typeof item === 'string' ? item : item.text;
+            return str.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
+          });
+
+    setFilteredItems(filtered || []);
+  };
+
+  return (
+    <ContextSelector
+      toggleText={selected}
+      onSearchInputChange={onSearchInputChange}
+      isOpen={isOpen}
+      searchInputValue={searchValue}
+      onToggle={onToggle}
+      onSelect={onSelect}
+      onSearchButtonClick={onSearchButtonClick}
+      screenReaderLabel="Selected Project:"
+      footer={
+        <ContextSelectorFooter>
+          <Button variant="link" isInline>
+            Footer action
+          </Button>
+        </ContextSelectorFooter>
+      }
+    >
+      {filteredItems.map((item, index) => {
+        const [text = null, href = null, isDisabled] =
+          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        return (
+          <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
+            {text || item}
+          </ContextSelectorItem>
+        );
+      })}
+    </ContextSelector>
+  );
+};