@patternfly/react-core 4.202.17 → 4.202.18

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.202.18 (2022-04-08)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.202.17 (2022-04-08)
 
 **Note:** Version bump only for package @patternfly/react-core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.17",
+  "version": "4.202.18",
   "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.17",
-    "@patternfly/react-styles": "^4.52.17",
-    "@patternfly/react-tokens": "^4.54.17",
+    "@patternfly/react-icons": "^4.53.18",
+    "@patternfly/react-styles": "^4.52.18",
+    "@patternfly/react-tokens": "^4.54.18",
     "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": "5b271e203e018bbeb24b5a854f155e06062c446b"
+  "gitHead": "fd2bf430267635cb2473b40153f591fa853b47ad"
 }

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>
+  );
+};

package/src/components/Divider/examples/Divider.md

@@ -6,96 +6,43 @@ propComponents: ['Divider']
 ---
 
 ## Examples
+
 ### Using hr
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider />
+```ts file='./DividerUsingHr.tsx'
 ```
 
 ### Using li
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core/dist';
-
-<ul>
-  <li>List item one</li>
-  <Divider component="li"/>
-  <li>List item two</li>
-</ul>
+
+```ts file='./DividerUsingLi.tsx'
 ```
 
 ### Using div
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider component="div"/>
+```ts file='./DividerUsingDiv.tsx'
 ```
 
 ### Inset medium
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
 
-<Divider inset={{default: 'insetMd'}}/>
+```ts file='./DividerInsetMedium.tsx'
 ```
 
 ### Inset at various breakpoints
-```js
-import React from 'react';
-import { Divider } from '@patternfly/react-core';
-
-<Divider
-  inset={{
-    default: 'insetMd',
-    md: 'insetNone',
-    lg: 'inset3xl',
-    xl: 'insetLg'
-  }}
-/>
+
+```ts file='./DividerInsetVariousBreakpoints.tsx'
 ```
 
 ### Vertical in flex layout
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical/>
-  <FlexItem>second item</FlexItem>
-</Flex>
+
+```ts file='./DividerVerticalFlex.tsx'
 ```
 
-### Vertical, inset medium in flex layout
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+### Vertical in flex layout, inset medium
 
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical inset={{default: 'insetMd'}}/>
-  <FlexItem>second item</FlexItem>
-</Flex>
+```ts file='./DividerVerticalFlexInsetMedium.tsx'
 ```
 
-### Vertical, inset at various breakpoints
-```js
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-<Flex>
-  <FlexItem>first item</FlexItem>
-  <Divider isVertical
-    inset={{
-      default: 'insetMd',
-      md: 'insetNone',
-      lg: 'insetSm',
-      xl: 'insetXs'
-    }}
-  />
-  <FlexItem>first item</FlexItem>
-</Flex>
+### Vertical in flex layout, inset at various breakpoints
+
+```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
 ```