@patternfly/react-core 6.1.1-prerelease.2 → 6.2.0-prerelease.2

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":"6.1.1-prerelease.1","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":"6.2.0-prerelease.1","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":"6.1.1-prerelease.1","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":"6.2.0-prerelease.1","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":"6.1.1-prerelease.1","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":"6.2.0-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.1-prerelease.2",
+  "version": "6.2.0-prerelease.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",
@@ -46,9 +46,9 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.1.0",
-    "@patternfly/react-styles": "^6.1.0",
-    "@patternfly/react-tokens": "^6.1.0",
+    "@patternfly/react-icons": "^6.2.0-prerelease.0",
+    "@patternfly/react-styles": "^6.2.0-prerelease.0",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.0",
     "focus-trap": "7.6.2",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "9acfd98e73238e0a95cef9cc25834568637cf1b7"
+  "gitHead": "ffab2937260ccd96a62d143b33954fe2c9f1e5e4"
 }

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  Button,
+  Content,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  DataListAction,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  PageSection,
+  Title
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const DataListActionable: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isDeleted, setIsDeleted] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
+      <PageSection>
+        <Content>
+          <Title headingLevel="h1">Projects</Title>
+          <Content component="p">This is a demo that showcases PatternFly Data List</Content>
+        </Content>
+      </PageSection>
+      <PageSection>
+        <DataList aria-label="single action data list example ">
+          {!isDeleted && (
+            <DataListItem aria-labelledby="single-action-item1">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell key="primary content">
+                      <span id="single-action-item1">Single actionable Primary content</span>
+                    </DataListCell>,
+                    <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
+                  ]}
+                />
+                <DataListAction
+                  aria-labelledby="single-action-item1 single-action-action1"
+                  id="single-action-action1"
+                  aria-label="Actions"
+                >
+                  <Button
+                    onClick={() => {
+                      if (confirm('Are you sure?')) {
+                        setIsDeleted(true);
+                      }
+                    }}
+                    variant="primary"
+                    key="delete-action"
+                  >
+                    Delete
+                  </Button>
+                </DataListAction>
+              </DataListItemRow>
+            </DataListItem>
+          )}
+          <DataListItem aria-labelledby="multi-actions-item1">
+            <DataListItemRow>
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell key="primary content">
+                    <span id="multi-actions-item1">Multi actions Primary content</span>
+                  </DataListCell>,
+                  <DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="multi-actions-item1 multi-actions-action1"
+                id="multi-actions-action1"
+                aria-label="Actions"
+              >
+                <Dropdown
+                  popperProps={{ position: 'right' }}
+                  onSelect={onSelect}
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen}
+                      onClick={onToggle}
+                      variant="plain"
+                      aria-label="Data list with actions example kebab toggle"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                  isOpen={isOpen}
+                  onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+                >
+                  <DropdownList>
+                    <DropdownItem key="action">Action</DropdownItem>
+                    {/* Prevent default onClick functionality for example
+                  purposes */}
+                    <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                      Link
+                    </DropdownItem>
+                    <DropdownItem key="disabled action" isDisabled>
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem
+                      key="disabled link"
+                      isDisabled
+                      to="#"
+                      onClick={(event: any) => event.preventDefault()}
+                    >
+                      Disabled Link
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
+              </DataListAction>
+            </DataListItemRow>
+          </DataListItem>
+        </DataList>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

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

@@ -0,0 +1,190 @@
+import React from 'react';
+import {
+  Button,
+  Content,
+  ContentVariants,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  MenuToggleCheckbox,
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuItem,
+  PageSection,
+  Pagination,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  PaginationVariant
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
+
+export const DataListStaticBottomPagination: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState<number | undefined>(1);
+  const [perPage, setPerPage] = React.useState<number>(10);
+  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
+
+  const handleSetPage = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPage: number,
+    _perPage: number | undefined,
+    startIdx: number | undefined,
+    endIdx: number | undefined
+  ) => {
+    setPaginatedRows(rows?.slice(startIdx, endIdx));
+    setPage(newPage);
+  };
+
+  const handlePerPageSelect = (
+    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number | undefined,
+    startIdx: number | undefined,
+    endIdx: number | undefined
+  ) => {
+    setPaginatedRows(rows.slice(startIdx, endIdx));
+    setPage(newPage);
+    setPerPage(newPerPage);
+  };
+
+  const renderPagination = (variant: PaginationVariant, isCompact: boolean, isSticky: boolean, isStatic: boolean) => (
+    <Pagination
+      id={`datalist-${variant}-pagination`}
+      variant={variant}
+      itemCount={rows.length}
+      page={page}
+      perPage={perPage}
+      isCompact={isCompact}
+      isSticky={isSticky}
+      isStatic={isStatic}
+      onSetPage={handleSetPage}
+      onPerPageSelect={handlePerPageSelect}
+      titles={{
+        paginationAriaLabel: `${variant} pagination`
+      }}
+    />
+  );
+
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarItem>
+        <MenuToggle
+          aria-label="Select data list items"
+          splitButtonItems={[
+            <MenuToggleCheckbox
+              id="split-dropdown-checkbox"
+              key="split-dropdown-checkbox"
+              aria-label={'Select all data list items'}
+            />
+          ]}
+        ></MenuToggle>
+      </ToolbarItem>
+      <ToolbarItem>
+        <MenuToggle>Filter by creator name</MenuToggle>
+      </ToolbarItem>
+      <ToolbarItem>
+        <OverflowMenu breakpoint="md">
+          <OverflowMenuItem>
+            <Button variant="primary">Create instance</Button>
+          </OverflowMenuItem>
+          <OverflowMenuControl hasAdditionalOptions>
+            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
+              <EllipsisVIcon />
+            </MenuToggle>
+          </OverflowMenuControl>
+        </OverflowMenu>
+      </ToolbarItem>
+      <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
+        {renderPagination(PaginationVariant.top, true, false, false)}
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
+      <PageSection>
+        <Content>
+          <Content component="h1">Projects</Content>
+          <Content component="p">This is a demo that showcases PatternFly Data List</Content>
+        </Content>
+      </PageSection>
+      <PageSection isFilled>
+        <Toolbar id="toolbar-group-types">
+          <ToolbarContent>{toolbarItems}</ToolbarContent>
+        </Toolbar>
+        <DataList aria-label="Demo data list">
+          {paginatedRows.map((row, rowIndex) => {
+            const { name, threads, applications, workspaces, lastModified } = row;
+            return (
+              <DataListItem aria-labelledby={`Demo-item-${rowIndex}`} key={rowIndex}>
+                <DataListItemRow>
+                  <DataListItemCells
+                    dataListCells={[
+                      <DataListCell isFilled={false} key="buttons1">
+                        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+                          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+                            <FlexItem>
+                              <Content id={`Demo-item-${rowIndex}`} component={ContentVariants.p}>
+                                {name}
+                              </Content>
+                            </FlexItem>
+                            <FlexItem>
+                              <Content component={ContentVariants.small}>
+                                Working repo for
+                                <a href="http://www.patternfly.org/">PatternFly</a>
+                              </Content>
+                            </FlexItem>
+                          </Flex>
+                          <Flex flexWrap={{ default: 'wrap' }}>
+                            <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                              <FlexItem>
+                                <CodeBranchIcon /> {threads}
+                              </FlexItem>
+                            </Flex>
+                            <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                              <FlexItem>
+                                <CodeIcon /> {applications}
+                              </FlexItem>
+                            </Flex>
+                            <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                              <FlexItem>
+                                <CubeIcon /> {workspaces}
+                              </FlexItem>
+                            </Flex>
+                            <FlexItem> Updated {lastModified}</FlexItem>
+                          </Flex>
+                        </Flex>
+                      </DataListCell>,
+                      <DataListCell isFilled={false} alignRight key="secondary content align">
+                        <Flex>
+                          <FlexItem>
+                            <Button variant="secondary">Action</Button>
+                          </FlexItem>
+                          <FlexItem>
+                            <a href="#">Link</a>
+                          </FlexItem>
+                        </Flex>
+                      </DataListCell>
+                    ]}
+                  />
+                </DataListItemRow>
+              </DataListItem>
+            );
+          })}
+        </DataList>
+        {renderPagination(PaginationVariant.bottom, false, false, true)}
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/DataListDemo.md

@@ -15,6 +15,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
 ## Demos
 
@@ -28,3 +29,13 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 ```
+
+### Actionable
+
+```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
+```
+
+### Static bottom pagination
+
+```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
+```