@patternfly/react-core 4.251.4 → 4.252.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.251.4",
+  "version": "4.252.1",
   "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",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.92.7",
-    "@patternfly/react-styles": "^4.91.7",
-    "@patternfly/react-tokens": "^4.93.7",
+    "@patternfly/react-icons": "^4.92.8",
+    "@patternfly/react-styles": "^4.91.8",
+    "@patternfly/react-tokens": "^4.93.8",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.218.0",
+    "@patternfly/patternfly": "4.219.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "449291fb1b567dc14afd99890cda544bfbe5f4ba"
+  "gitHead": "40db44d5598d9bcd5b729613a570fdc1887126b2"
 }

package/src/components/DataList/DataListToggle.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonProps, ButtonVariant } from '../Button';
 
 export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the DataList cell */
@@ -19,6 +19,8 @@ export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
   'aria-label'?: string;
   /** Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. */
   'aria-controls'?: string;
+  /** Additional properties spread to the toggle button */
+  buttonProps?: ButtonProps;
 }
 
 export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
@@ -28,6 +30,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
   'aria-label': ariaLabel = 'Details',
   rowid = '',
   id,
+  buttonProps,
   ...props
 }: DataListToggleProps) => (
   <div className={css(styles.dataListItemControl, className)} {...props}>
@@ -39,6 +42,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
         aria-label={ariaLabel}
         aria-labelledby={ariaLabel !== 'Details' ? null : `${rowid} ${id}`}
         aria-expanded={isExpanded}
+        {...buttonProps}
       >
         <div className={css(styles.dataListToggleIcon)}>
           <AngleRightIcon />

package/src/components/DataList/examples/DataList.md

@@ -51,6 +51,11 @@ import { css } from '@patternfly/react-styles';
 ```ts file="./DataListExpandable.tsx"
 ```
 
+### Mixed expandable
+
+```ts file="./DataListMixedExpandable.tsx"
+```
+
 ### Width modifiers
 
 ```ts file="./DataListWidthModifiers.tsx"

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListCell,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+
+export const DataListMixedExpandable: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [isOpen3, setIsOpen3] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']);
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const onToggle3 = isOpen3 => {
+    setIsOpen3(isOpen3);
+  };
+
+  const onSelect3 = () => {
+    setIsOpen3(!isOpen3);
+  };
+
+  const toggle = id => {
+    const index = expanded.indexOf(id);
+    const newExpanded =
+      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
+    setExpanded(newExpanded);
+  };
+
+  return (
+    <React.Fragment>
+      <DataList aria-label="Mixed expandable data list example">
+        <DataListItem aria-labelledby="m-ex-item1" isExpanded={expanded.includes('m-ex-toggle1')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('m-ex-toggle1')}
+              isExpanded={expanded.includes('m-ex-toggle1')}
+              id="m-ex-toggle1"
+              aria-controls="m-ex-expand1"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="primary content">
+                  <div id="m-ex-item1">Primary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                  <a href="#">link</a>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="m-ex-item1 m-ex-action1"
+              id="m-ex-action1"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen1}
+                onSelect={onSelect1}
+                toggle={<KebabToggle onToggle={onToggle1} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="First expandable content details"
+            id="m-ex-expand1"
+            isHidden={!expanded.includes('m-ex-toggle1')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+        <DataListItem aria-labelledby="m-ex-item2">
+          <DataListItemRow>
+            <DataListToggle
+              id="m-ex-toggle2"
+              buttonProps={{
+                disabled: true,
+                'aria-hidden': 'true',
+                style: { visibility: 'hidden' }
+              }}
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <div id="m-ex-item2">Secondary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content3">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="m-ex-item2 mex-action2"
+              id="m-ex-action2"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen2}
+                onSelect={onSelect2}
+                toggle={<KebabToggle onToggle={onToggle2} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-labelledby="m-ex-item3" isExpanded={expanded.includes('m-ex-toggle3')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('m-ex-toggle3')}
+              isExpanded={expanded.includes('m-ex-toggle3')}
+              id="m-ex-toggle3"
+              aria-controls="m-ex-expand3"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="tertiary content">
+                  <div id="m-ex-item3">Tertiary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="m-ex-item3 m-ex-action3"
+              id="m-ex-action3"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen3}
+                onSelect={onSelect3}
+                toggle={<KebabToggle onToggle={onToggle3} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="Third expandable content details"
+            id="m-ex-expand3"
+            isHidden={!expanded.includes('m-ex-toggle3')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+};

package/src/components/SimpleList/examples/SimpleList.md

@@ -9,120 +9,16 @@ propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 
 ### Simple list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
-
-class SimpleListDemo extends React.Component {
-  onSelect(selectedItem, selectedItemProps) {
-    console.log('new selection SimpleListDemo', selectedItem, selectedItemProps);
-  }
-
-  render() {
-    const items = [
-      <SimpleListItem key="item1" isActive>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" component="a" href="#">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3">List item 3</SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} aria-label="Simple List Example">
-        {items}
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListBasic.tsx"
 ```
 
 ### Grouped list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
-
-class SimpleListGroupDemo extends React.Component {
-  onSelect(selectedItem, selectedItemProps) {
-    console.log('new selection SimpleListGroupDemo', selectedItem, selectedItemProps);
-  }
-
-  render() {
-    const group1Items = [
-      <SimpleListItem key="item1" isActive>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" id="test 2">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3">List item 3</SimpleListItem>,
-      <SimpleListItem key="item4">List item 4</SimpleListItem>
-    ];
-
-    const group2Items = [
-      <SimpleListItem key="item5">List item 1</SimpleListItem>,
-      <SimpleListItem key="item6" component="a" href="#">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item7" component="a" href="#">
-        List item 3
-      </SimpleListItem>,
-      <SimpleListItem key="item8">List item 4</SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} aria-label="Grouped List Example">
-        <SimpleListGroup title="Group 1" id="group-1">
-          {group1Items}
-        </SimpleListGroup>
-        <SimpleListGroup title="Group 2" id="group-2">
-          {group2Items}
-        </SimpleListGroup>
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListGrouped.tsx"
 ```
 
 ### Uncontrolled simple list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
-
-class SimpleListUncontrolledDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onSelect = (selectedItem, selectedItemProps) => {
-      console.log('new selection SimpleListUncontrolledDemo', selectedItem, selectedItemProps);
-      this.setState({ activeItem: selectedItemProps.itemId });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    const items = [
-      <SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
-        List item 3
-      </SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
-        {items}
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListUncontrolled.tsx"
 ```
+

package/src/components/SimpleList/examples/SimpleListBasic.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+
+export const SimpleListBasic: React.FunctionComponent = () => {
+  const items = [
+    <SimpleListItem key="item1" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3">List item 3</SimpleListItem>
+  ];
+
+  return <SimpleList aria-label="Simple List Example">{items}</SimpleList>;
+};

package/src/components/SimpleList/examples/SimpleListGrouped.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
+
+export const SimpleListGrouped: React.FunctionComponent = () => {
+  const group1Items = [
+    <SimpleListItem key="item1" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2">List item 2</SimpleListItem>,
+    <SimpleListItem key="item3">List item 3</SimpleListItem>,
+    <SimpleListItem key="item4">List item 4</SimpleListItem>
+  ];
+
+  const group2Items = [
+    <SimpleListItem key="item5">List item 1</SimpleListItem>,
+    <SimpleListItem key="item6" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item7" component="a" href="#">
+      List item 3
+    </SimpleListItem>,
+    <SimpleListItem key="item8">List item 4</SimpleListItem>
+  ];
+
+  return (
+    <SimpleList aria-label="Grouped simple list example">
+      <SimpleListGroup title="Group 1" id="group-1">
+        {group1Items}
+      </SimpleListGroup>
+      <SimpleListGroup title="Group 2" id="group-2">
+        {group2Items}
+      </SimpleListGroup>
+    </SimpleList>
+  );
+};

package/src/components/SimpleList/examples/SimpleListUncontrolled.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';
+
+export const SimpleListUncontrolled: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (
+    selectedItem: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    selectedItemProps: SimpleListItemProps
+  ) => {
+    setActiveItem(selectedItemProps.itemId as number);
+  };
+
+  const items = [
+    <SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
+      List item 3
+    </SimpleListItem>
+  ];
+
+  return (
+    <SimpleList onSelect={onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
+      {items}
+    </SimpleList>
+  );
+};