@patternfly/react-core 5.2.0-prerelease.32 → 5.2.0-prerelease.33

package/dist/dynamic/deprecated/components/Wizard/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-wizard-deprecated-dynamic","main":"../../../../js/deprecated/components/Wizard/index.js","module":"../../../../esm/deprecated/components/Wizard/index.js","typings":"../../../../esm/deprecated/components/Wizard/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-wizard-deprecated-dynamic","main":"../../../../js/deprecated/components/Wizard/index.js","module":"../../../../esm/deprecated/components/Wizard/index.js","typings":"../../../../esm/deprecated/components/Wizard/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/deprecated/components/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-components-deprecated-dynamic","main":"../../../js/deprecated/components/index.js","module":"../../../esm/deprecated/components/index.js","typings":"../../../esm/deprecated/components/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-components-deprecated-dynamic","main":"../../../js/deprecated/components/index.js","module":"../../../esm/deprecated/components/index.js","typings":"../../../esm/deprecated/components/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-focustrap.js-dynamic","main":"../../../../js/helpers/FocusTrap/FocusTrap.js","module":"../../../../esm/helpers/FocusTrap/FocusTrap.js","typings":"../../../../esm/helpers/FocusTrap/FocusTrap.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-focustrap.js-dynamic","main":"../../../../js/helpers/FocusTrap/FocusTrap.js","module":"../../../../esm/helpers/FocusTrap/FocusTrap.js","typings":"../../../../esm/helpers/FocusTrap/FocusTrap.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/GenerateId/GenerateId/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-generateid.js-dynamic","main":"../../../../js/helpers/GenerateId/GenerateId.js","module":"../../../../esm/helpers/GenerateId/GenerateId.js","typings":"../../../../esm/helpers/GenerateId/GenerateId.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-generateid.js-dynamic","main":"../../../../js/helpers/GenerateId/GenerateId.js","module":"../../../../esm/helpers/GenerateId/GenerateId.js","typings":"../../../../esm/helpers/GenerateId/GenerateId.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/KeyboardHandler/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-keyboardhandler.js-dynamic","main":"../../../js/helpers/KeyboardHandler.js","module":"../../../esm/helpers/KeyboardHandler.js","typings":"../../../esm/helpers/KeyboardHandler.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-keyboardhandler.js-dynamic","main":"../../../js/helpers/KeyboardHandler.js","module":"../../../esm/helpers/KeyboardHandler.js","typings":"../../../esm/helpers/KeyboardHandler.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/OUIA/ouia/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-ouia.js-dynamic","main":"../../../../js/helpers/OUIA/ouia.js","module":"../../../../esm/helpers/OUIA/ouia.js","typings":"../../../../esm/helpers/OUIA/ouia.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-ouia.js-dynamic","main":"../../../../js/helpers/OUIA/ouia.js","module":"../../../../esm/helpers/OUIA/ouia.js","typings":"../../../../esm/helpers/OUIA/ouia.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/Popper/Popper/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-popper.js-dynamic","main":"../../../../js/helpers/Popper/Popper.js","module":"../../../../esm/helpers/Popper/Popper.js","typings":"../../../../esm/helpers/Popper/Popper.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-popper.js-dynamic","main":"../../../../js/helpers/Popper/Popper.js","module":"../../../../esm/helpers/Popper/Popper.js","typings":"../../../../esm/helpers/Popper/Popper.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/constants/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-constants.js-dynamic","main":"../../../js/helpers/constants.js","module":"../../../esm/helpers/constants.js","typings":"../../../esm/helpers/constants.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-constants.js-dynamic","main":"../../../js/helpers/constants.js","module":"../../../esm/helpers/constants.js","typings":"../../../esm/helpers/constants.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/datetimeUtils/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-datetimeutils.js-dynamic","main":"../../../js/helpers/datetimeUtils.js","module":"../../../esm/helpers/datetimeUtils.js","typings":"../../../esm/helpers/datetimeUtils.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-datetimeutils.js-dynamic","main":"../../../js/helpers/datetimeUtils.js","module":"../../../esm/helpers/datetimeUtils.js","typings":"../../../esm/helpers/datetimeUtils.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/favorites/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-favorites.js-dynamic","main":"../../../js/helpers/favorites.js","module":"../../../esm/helpers/favorites.js","typings":"../../../esm/helpers/favorites.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-favorites.js-dynamic","main":"../../../js/helpers/favorites.js","module":"../../../esm/helpers/favorites.js","typings":"../../../esm/helpers/favorites.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/fileUtils/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-fileutils.js-dynamic","main":"../../../js/helpers/fileUtils.js","module":"../../../esm/helpers/fileUtils.js","typings":"../../../esm/helpers/fileUtils.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-fileutils.js-dynamic","main":"../../../js/helpers/fileUtils.js","module":"../../../esm/helpers/fileUtils.js","typings":"../../../esm/helpers/fileUtils.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/htmlConstants/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-htmlconstants.js-dynamic","main":"../../../js/helpers/htmlConstants.js","module":"../../../esm/helpers/htmlConstants.js","typings":"../../../esm/helpers/htmlConstants.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-htmlconstants.js-dynamic","main":"../../../js/helpers/htmlConstants.js","module":"../../../esm/helpers/htmlConstants.js","typings":"../../../esm/helpers/htmlConstants.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers-dynamic","main":"../../js/helpers/index.js","module":"../../esm/helpers/index.js","typings":"../../esm/helpers/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-helpers-dynamic","main":"../../js/helpers/index.js","module":"../../esm/helpers/index.js","typings":"../../esm/helpers/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/resizeObserver/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-resizeobserver.js-dynamic","main":"../../../js/helpers/resizeObserver.js","module":"../../../esm/helpers/resizeObserver.js","typings":"../../../esm/helpers/resizeObserver.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-resizeobserver.js-dynamic","main":"../../../js/helpers/resizeObserver.js","module":"../../../esm/helpers/resizeObserver.js","typings":"../../../esm/helpers/resizeObserver.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/typeUtils/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-typeutils.js-dynamic","main":"../../../js/helpers/typeUtils.js","module":"../../../esm/helpers/typeUtils.js","typings":"../../../esm/helpers/typeUtils.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-typeutils.js-dynamic","main":"../../../js/helpers/typeUtils.js","module":"../../../esm/helpers/typeUtils.js","typings":"../../../esm/helpers/typeUtils.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/useInterval/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-useinterval.js-dynamic","main":"../../../js/helpers/useInterval.js","module":"../../../esm/helpers/useInterval.js","typings":"../../../esm/helpers/useInterval.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-useinterval.js-dynamic","main":"../../../js/helpers/useInterval.js","module":"../../../esm/helpers/useInterval.js","typings":"../../../esm/helpers/useInterval.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/useIsomorphicLayout/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-useisomorphiclayout.js-dynamic","main":"../../../js/helpers/useIsomorphicLayout.js","module":"../../../esm/helpers/useIsomorphicLayout.js","typings":"../../../esm/helpers/useIsomorphicLayout.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-useisomorphiclayout.js-dynamic","main":"../../../js/helpers/useIsomorphicLayout.js","module":"../../../esm/helpers/useIsomorphicLayout.js","typings":"../../../esm/helpers/useIsomorphicLayout.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/useUnmountEffect/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-useunmounteffect.js-dynamic","main":"../../../js/helpers/useUnmountEffect.js","module":"../../../esm/helpers/useUnmountEffect.js","typings":"../../../esm/helpers/useUnmountEffect.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-useunmounteffect.js-dynamic","main":"../../../js/helpers/useUnmountEffect.js","module":"../../../esm/helpers/useUnmountEffect.js","typings":"../../../esm/helpers/useUnmountEffect.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/helpers/util/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-util.js-dynamic","main":"../../../js/helpers/util.js","module":"../../../esm/helpers/util.js","typings":"../../../esm/helpers/util.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-util.js-dynamic","main":"../../../js/helpers/util.js","module":"../../../esm/helpers/util.js","typings":"../../../esm/helpers/util.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/layouts/Bullseye/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-bullseye-dynamic","main":"../../../js/layouts/Bullseye/index.js","module":"../../../esm/layouts/Bullseye/index.js","typings":"../../../esm/layouts/Bullseye/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-bullseye-dynamic","main":"../../../js/layouts/Bullseye/index.js","module":"../../../esm/layouts/Bullseye/index.js","typings":"../../../esm/layouts/Bullseye/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/layouts/Flex/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-flex-dynamic","main":"../../../js/layouts/Flex/index.js","module":"../../../esm/layouts/Flex/index.js","typings":"../../../esm/layouts/Flex/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-flex-dynamic","main":"../../../js/layouts/Flex/index.js","module":"../../../esm/layouts/Flex/index.js","typings":"../../../esm/layouts/Flex/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/layouts/Gallery/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-gallery-dynamic","main":"../../../js/layouts/Gallery/index.js","module":"../../../esm/layouts/Gallery/index.js","typings":"../../../esm/layouts/Gallery/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-gallery-dynamic","main":"../../../js/layouts/Gallery/index.js","module":"../../../esm/layouts/Gallery/index.js","typings":"../../../esm/layouts/Gallery/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/layouts/Grid/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-grid-dynamic","main":"../../../js/layouts/Grid/index.js","module":"../../../esm/layouts/Grid/index.js","typings":"../../../esm/layouts/Grid/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-grid-dynamic","main":"../../../js/layouts/Grid/index.js","module":"../../../esm/layouts/Grid/index.js","typings":"../../../esm/layouts/Grid/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/layouts/Level/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-level-dynamic","main":"../../../js/layouts/Level/index.js","module":"../../../esm/layouts/Level/index.js","typings":"../../../esm/layouts/Level/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-level-dynamic","main":"../../../js/layouts/Level/index.js","module":"../../../esm/layouts/Level/index.js","typings":"../../../esm/layouts/Level/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/layouts/Split/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-split-dynamic","main":"../../../js/layouts/Split/index.js","module":"../../../esm/layouts/Split/index.js","typings":"../../../esm/layouts/Split/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-split-dynamic","main":"../../../js/layouts/Split/index.js","module":"../../../esm/layouts/Split/index.js","typings":"../../../esm/layouts/Split/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/layouts/Stack/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-stack-dynamic","main":"../../../js/layouts/Stack/index.js","module":"../../../esm/layouts/Stack/index.js","typings":"../../../esm/layouts/Stack/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-stack-dynamic","main":"../../../js/layouts/Stack/index.js","module":"../../../esm/layouts/Stack/index.js","typings":"../../../esm/layouts/Stack/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/dynamic/next/components/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-components-next-dynamic","main":"../../../js/next/components/index.js","module":"../../../esm/next/components/index.js","typings":"../../../esm/next/components/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-components-next-dynamic","main":"../../../js/next/components/index.js","module":"../../../esm/next/components/index.js","typings":"../../../esm/next/components/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/dist/esm/components/Dropdown/DropdownItem.d.ts

@@ -29,5 +29,5 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
     /** Props for adding a tooltip to a menu item */
     tooltipProps?: TooltipProps;
 }
-export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 //# sourceMappingURL=DropdownItem.d.ts.map

package/dist/js/components/Dropdown/DropdownItem.d.ts

@@ -29,5 +29,5 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
     /** Props for adding a tooltip to a menu item */
     tooltipProps?: TooltipProps;
 }
-export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 //# sourceMappingURL=DropdownItem.d.ts.map

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.31","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.32","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.32",
+  "version": "5.2.0-prerelease.33",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "32dfd8953bf1e7b690ba669422574e493e831ae5"
+  "gitHead": "716c894bb9cdf46dee11628d732e2dc9281c9a79"
 }

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -0,0 +1,397 @@
+import React from 'react';
+import {
+  Button,
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListCell,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+  ToolbarExpandIconWrapper,
+  ToolbarContent,
+  SearchInput,
+  Tooltip,
+  Icon,
+  PageSection,
+  PageSectionVariants,
+  Text,
+  TextContent
+} from '@patternfly/react-core';
+
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const DataListExpandableControlInToolbar: React.FunctionComponent = () => {
+  const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [isOpen3, setIsOpen3] = React.useState(false);
+  const [allExpanded, setAllExpanded] = React.useState(false);
+
+  const onToggleAll = () => {
+    setAllExpanded((prevAllExpanded) => !prevAllExpanded);
+
+    if (!allExpanded) {
+      setExpanded(['ex-toggle1', 'ex-toggle2', 'ex-toggle3']);
+    } else {
+      setExpanded([]);
+    }
+  };
+
+  const onToggle1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const onToggle3 = () => {
+    setIsOpen3(!isOpen3);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(false);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(false);
+  };
+
+  const onSelect3 = () => {
+    setIsOpen3(false);
+  };
+
+  const renderToolbar = () => (
+    <React.Fragment>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarGroup>
+            <ToolbarItem variant="expand-all" isAllExpanded={allExpanded}>
+              <Tooltip
+                position="right"
+                content={
+                  <div>
+                    {allExpanded && 'Collapse all rows'}
+                    {!allExpanded && 'Expand all rows'}
+                  </div>
+                }
+              >
+                <Button
+                  onClick={onToggleAll}
+                  variant="plain"
+                  aria-label={allExpanded ? 'Collapse all rows' : 'Expand all rows'}
+                >
+                  <Icon shouldMirrorRTL>
+                    <ToolbarExpandIconWrapper>
+                      <AngleRightIcon />
+                    </ToolbarExpandIconWrapper>
+                  </Icon>
+                </Button>
+              </Tooltip>
+            </ToolbarItem>
+            <ToolbarItem>
+              <SearchInput aria-label="search input example" />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button variant="secondary">Action</Button>
+            </ToolbarItem>
+            <ToolbarItem variant="separator" />
+            <ToolbarItem>
+              <Button variant="primary">Action</Button>
+            </ToolbarItem>
+          </ToolbarGroup>
+        </ToolbarContent>
+      </Toolbar>
+    </React.Fragment>
+  );
+
+  const toggle = (id: string) => {
+    const index = expanded.indexOf(id);
+    const newExpanded =
+      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
+    setExpanded(newExpanded);
+    if (newExpanded.length === 3) {
+      setAllExpanded(true);
+    } else if (newExpanded.length === 0) {
+      setAllExpanded(false);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}>
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Projects</Text>
+            <Text component="p">This is a demo that showcases PatternFly Data List</Text>
+          </TextContent>
+        </PageSection>
+        <PageSection isFilled>
+          {renderToolbar()}
+
+          <DataList aria-label="Expandable data list example">
+            <DataListItem aria-labelledby="ex-item1" isExpanded={expanded.includes('ex-toggle1')}>
+              <DataListItemRow>
+                <DataListToggle
+                  onClick={() => toggle('ex-toggle1')}
+                  isExpanded={expanded.includes('ex-toggle1')}
+                  id="ex-toggle1"
+                  aria-controls="ex-expand1"
+                />
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isIcon key="icon">
+                      <CodeBranchIcon />
+                    </DataListCell>,
+                    <DataListCell key="primary content">
+                      <div id="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="ex-item1 ex-action1"
+                  id="ex-action1"
+                  aria-label="Actions"
+                  isPlainButtonAction
+                >
+                  <Dropdown
+                    isOpen={isOpen1}
+                    onSelect={onSelect1}
+                    popperProps={{ position: 'right' }}
+                    onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        onClick={onToggle1}
+                        isExpanded={isOpen1}
+                        variant="plain"
+                        aria-label="Primary content kebab toggle"
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>
+                      <DropdownItem value={0} key="action1">
+                        Action
+                      </DropdownItem>
+                      <DropdownItem
+                        value={1}
+                        key="link1"
+                        to="#default-link2"
+                        // Prevent the default onClick functionality for example purposes
+                        onClick={(ev: React.MouseEvent) => ev.preventDefault()}
+                      >
+                        Link
+                      </DropdownItem>
+                      <DropdownItem value={2} isDisabled key="disabled action1">
+                        Disabled Action
+                      </DropdownItem>
+                      <DropdownItem value={3} isDisabled key="disabled link1" to="#default-link4">
+                        Disabled Link
+                      </DropdownItem>
+                    </DropdownList>
+                  </Dropdown>
+                </DataListAction>
+              </DataListItemRow>
+              <DataListContent
+                aria-label="Primary Content Details"
+                id="ex-expand1"
+                isHidden={!expanded.includes('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="ex-item2" isExpanded={expanded.includes('ex-toggle2')}>
+              <DataListItemRow>
+                <DataListToggle
+                  onClick={() => toggle('ex-toggle2')}
+                  isExpanded={expanded.includes('ex-toggle2')}
+                  id="ex-toggle2"
+                  aria-controls="ex-expand2"
+                />
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isIcon key="icon">
+                      <CodeBranchIcon />
+                    </DataListCell>,
+                    <DataListCell key="secondary content">
+                      <div id="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="ex-item2 ex-action2"
+                  id="ex-action2"
+                  aria-label="Actions"
+                  isPlainButtonAction
+                >
+                  <Dropdown
+                    isOpen={isOpen2}
+                    onSelect={onSelect2}
+                    popperProps={{ position: 'right' }}
+                    onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        onClick={onToggle2}
+                        isExpanded={isOpen2}
+                        variant="plain"
+                        aria-label="Secondary content kebab toggle"
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>
+                      <DropdownItem value={0} key="action2">
+                        Action
+                      </DropdownItem>
+                      <DropdownItem
+                        value={1}
+                        key="link2"
+                        to="#default-link2"
+                        // Prevent the default onClick functionality for example purposes
+                        onClick={(ev: React.MouseEvent) => ev.preventDefault()}
+                      >
+                        Link
+                      </DropdownItem>
+                      <DropdownItem value={2} isDisabled key="disabled action2">
+                        Disabled Action
+                      </DropdownItem>
+                      <DropdownItem value={3} isDisabled key="disabled link2" to="#default-link4">
+                        Disabled Link
+                      </DropdownItem>
+                    </DropdownList>
+                  </Dropdown>
+                </DataListAction>
+              </DataListItemRow>
+              <DataListContent
+                aria-label="Primary Content Details"
+                id="ex-expand2"
+                isHidden={!expanded.includes('ex-toggle2')}
+              >
+                <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="ex-item3" isExpanded={expanded.includes('ex-toggle3')}>
+              <DataListItemRow>
+                <DataListToggle
+                  onClick={() => toggle('ex-toggle3')}
+                  isExpanded={expanded.includes('ex-toggle3')}
+                  id="ex-toggle3"
+                  aria-controls="ex-expand3"
+                />
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isIcon key="icon">
+                      <CodeBranchIcon />
+                    </DataListCell>,
+                    <DataListCell key="tertiary content">
+                      <div id="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="ex-item3 ex-action3"
+                  id="ex-action3"
+                  aria-label="Actions"
+                  isPlainButtonAction
+                >
+                  <Dropdown
+                    isOpen={isOpen3}
+                    onSelect={onSelect3}
+                    popperProps={{ position: 'right' }}
+                    onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        onClick={onToggle3}
+                        isExpanded={isOpen3}
+                        variant="plain"
+                        aria-label="Tertiary content kebab toggle"
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>
+                      <DropdownItem value={0} key="action3">
+                        Action
+                      </DropdownItem>
+                      <DropdownItem
+                        value={1}
+                        key="link3"
+                        to="#default-link2"
+                        // Prevent the default onClick functionality for example purposes
+                        onClick={(ev: React.MouseEvent) => ev.preventDefault()}
+                      >
+                        Link
+                      </DropdownItem>
+                      <DropdownItem value={2} isDisabled key="disabled action3">
+                        Disabled Action
+                      </DropdownItem>
+                      <DropdownItem value={3} isDisabled key="disabled link3" to="#default-link4">
+                        Disabled Link
+                      </DropdownItem>
+                    </DropdownList>
+                  </Dropdown>
+                </DataListAction>
+              </DataListItemRow>
+              <DataListContent
+                aria-label="Primary Content Details"
+                id="ex-expand3"
+                isHidden={!expanded.includes('ex-toggle3')}
+                hasNoPadding
+              >
+                This expanded section has no padding.
+              </DataListContent>
+            </DataListItem>
+          </DataList>
+        </PageSection>
+      </DashboardWrapper>
+    </React.Fragment>
+  );
+};