@patternfly/react-core 5.2.0-prerelease.22 → 5.2.0-prerelease.24

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.21","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.23","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.21","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.23","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.21","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.23","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.22",
+  "version": "5.2.0-prerelease.24",
   "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",
@@ -45,15 +45,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.2.0-prerelease.5",
-    "@patternfly/react-styles": "^5.2.0-prerelease.3",
-    "@patternfly/react-tokens": "^5.2.0-prerelease.4",
+    "@patternfly/react-icons": "^5.2.0-prerelease.6",
+    "@patternfly/react-styles": "^5.2.0-prerelease.4",
+    "@patternfly/react-tokens": "^5.2.0-prerelease.5",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0-prerelease.3",
+    "@patternfly/patternfly": "5.2.0-prerelease.4",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5febe85c94de2dcadc32e92d30ef760fb2c45388"
+  "gitHead": "74773b08bd6b0aadb4828fb8b9b7e37aa70e449a"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -21,9 +21,10 @@ export enum ClipboardCopyVariant {
 }
 
 export interface ClipboardCopyState {
-  text: string | number;
+  text: string;
   expanded: boolean;
   copied: boolean;
+  textWhenExpanded: string;
 }
 
 export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
@@ -72,7 +73,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** A function that is triggered on clicking the copy button. */
   onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
-  onChange?: (event: React.FormEvent, text?: string | number) => void;
+  onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
   children: React.ReactNode;
   /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */
@@ -88,12 +89,12 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   timer = null as number;
   constructor(props: ClipboardCopyProps) {
     super(props);
+    const text = Array.isArray(this.props.children) ? this.props.children.join('') : (this.props.children as string);
     this.state = {
-      text: Array.isArray(this.props.children)
-        ? this.props.children.join('')
-        : (this.props.children as string | number),
+      text,
       expanded: this.props.isExpanded,
-      copied: false
+      copied: false,
+      textWhenExpanded: text
     };
   }
 
@@ -119,7 +120,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
     if (prevProps.children !== this.props.children) {
-      this.setState({ text: this.props.children as string | number });
+      this.setState({ text: this.props.children as string });
     }
   };
 
@@ -136,11 +137,16 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
     }));
   };
 
-  updateText = (event: React.FormEvent, text: string | number) => {
+  updateText = (event: React.FormEvent, text: string) => {
     this.setState({ text });
     this.props.onChange(event, text);
   };
 
+  updateTextWhenExpanded = (event: React.FormEvent, text: string) => {
+    this.setState({ textWhenExpanded: text });
+    this.props.onChange(event, text);
+  };
+
   render = () => {
     const {
       /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -229,7 +235,14 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                   {variant === 'expansion' && (
                     <ClipboardCopyToggle
                       isExpanded={this.state.expanded}
-                      onClick={this.expandContent}
+                      onClick={(_event) => {
+                        this.expandContent(_event);
+                        if (this.state.expanded) {
+                          this.setState({ text: this.state.textWhenExpanded });
+                        } else {
+                          this.setState({ textWhenExpanded: this.state.text });
+                        }
+                      }}
                       id={`${toggleIdPrefix}${id}`}
                       textId={`${textIdPrefix}${id}`}
                       contentId={`${contentIdPrefix}${id}`}
@@ -239,7 +252,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                   <TextInput
                     readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
-                    value={this.state.text as string | number}
+                    value={this.state.expanded ? this.state.textWhenExpanded : this.state.text}
                     id={`text-input-${id}`}
                     aria-label={textAriaLabel}
                     {...(isCode && { dir: 'ltr' })}
@@ -253,7 +266,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     textId={`text-input-${id}`}
                     aria-label={hoverTip}
                     onClick={(event: any) => {
-                      onCopy(event, this.state.text);
+                      onCopy(event, this.state.expanded ? this.state.textWhenExpanded : this.state.text);
                       this.setState({ copied: true });
                     }}
                     onTooltipHidden={() => this.setState({ copied: false })}
@@ -266,7 +279,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     isReadOnly={isReadOnly}
                     isCode={isCode}
                     id={`content-${id}`}
-                    onChange={this.updateText}
+                    onChange={this.updateTextWhenExpanded}
                   >
                     {this.state.text}
                   </ClipboardCopyExpanded>

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

@@ -0,0 +1,314 @@
+import React from 'react';
+import {
+  Button,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  MenuToggleCheckbox,
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuItem,
+  PageSection,
+  PageSectionVariants,
+  Pagination,
+  Text,
+  TextContent,
+  TextVariants,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { DashboardWrapper } from '@patternfly/react-core/src/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 ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+
+export const DataListBasic: React.FunctionComponent = () => {
+  const renderPagination = () => <Pagination itemCount={5} page={1} variant="top" isCompact />;
+
+  const toolbarItems = (
+    <React.Fragment>
+      <ToolbarItem variant="bulk-select">
+        <MenuToggle
+          aria-label="Select cards"
+          splitButtonOptions={{
+            items: [
+              <MenuToggleCheckbox
+                id="split-dropdown-checkbox"
+                key="split-dropdown-checkbox"
+                aria-label={'Select all cards'}
+              />
+            ]
+          }}
+        ></MenuToggle>
+      </ToolbarItem>
+      <ToolbarItem>
+        <MenuToggle>Filter by creator name</MenuToggle>
+      </ToolbarItem>
+      <ToolbarItem variant="overflow-menu">
+        <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: 'alignRight' }}>
+        {renderPagination()}
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  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>
+          <Toolbar id="toolbar-group-types">
+            <ToolbarContent>{toolbarItems}</ToolbarContent>
+          </Toolbar>
+          <DataList aria-label="Demo data list">
+            <DataListItem aria-labelledby="Demo-item1">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="buttons1">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.p}>patternfly</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>
+                            Working repo for
+                            <a href="http://www.patternfly.org/">PatternFly</a>
+                          </Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                            <FlexItem>
+                              <CodeBranchIcon /> 10
+                            </FlexItem>
+                            <FlexItem>
+                              <CodeIcon /> 4
+                            </FlexItem>
+                            <FlexItem>
+                              <CubeIcon /> 5
+                            </FlexItem>
+                            <FlexItem> Updated 2 days ago</FlexItem>
+                          </Flex>
+                        </FlexItem>
+                      </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>
+            <DataListItem aria-labelledby="Demo-item2">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="buttons2">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>patternfly-elements</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>PatternFly elements</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                            <FlexItem>
+                              <CodeBranchIcon /> 5
+                            </FlexItem>
+                            <FlexItem>
+                              <CodeIcon /> 9
+                            </FlexItem>
+                            <FlexItem>
+                              <CubeIcon /> 2
+                            </FlexItem>
+                            <FlexItem>
+                              <CheckCircleIcon />
+                              11
+                            </FlexItem>
+                            <FlexItem>
+                              <ExclamationTriangleIcon /> 4
+                            </FlexItem>
+                            <FlexItem>
+                              <TimesCircleIcon /> 1
+                            </FlexItem>
+                            <FlexItem> Updated 2 days ago</FlexItem>
+                          </Flex>
+                        </FlexItem>
+                      </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>
+            <DataListItem>
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="Demo-item3">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>patternfly-unified-design-kit</Text>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>,
+                    <DataListCell isFilled={false} alignRight key="buttons3">
+                      <Flex>
+                        <FlexItem>
+                          <Button variant="secondary">Action</Button>
+                        </FlexItem>
+                        <FlexItem>
+                          <a href="#">Link</a>
+                        </FlexItem>
+                      </Flex>
+                    </DataListCell>
+                  ]}
+                />
+              </DataListItemRow>
+            </DataListItem>
+            <DataListItem aria-labelledby="Demo-item4">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="buttons4">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>patternfly</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>
+                            Working repo for
+                            <a href="http://www.patternfly.org/">PatternFly</a>
+                          </Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                            <FlexItem>
+                              <CodeBranchIcon />
+                              10
+                            </FlexItem>
+                            <FlexItem>
+                              <CodeIcon /> 4
+                            </FlexItem>
+                            <FlexItem>
+                              <CubeIcon /> 5
+                            </FlexItem>
+                            <FlexItem> Updated 2 days ago</FlexItem>
+                          </Flex>
+                        </FlexItem>
+                      </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>
+            <DataListItem aria-labelledby="Demo-item5">
+              <DataListItemRow>
+                <DataListItemCells
+                  dataListCells={[
+                    <DataListCell isFilled={false} key="buttons5">
+                      <Flex direction={{ default: 'column' }}>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>patternfly-elements</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Text component={TextVariants.small}>PatternFly elements</Text>
+                        </FlexItem>
+                        <FlexItem>
+                          <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                            <FlexItem>
+                              <CodeBranchIcon /> 5
+                            </FlexItem>
+                            <FlexItem>
+                              <CodeIcon /> 9
+                            </FlexItem>
+                            <FlexItem>
+                              <CubeIcon /> 2
+                            </FlexItem>
+                            <FlexItem>
+                              <CheckCircleIcon /> 11
+                            </FlexItem>
+                            <FlexItem>
+                              <ExclamationTriangleIcon /> 4
+                            </FlexItem>
+                            <FlexItem>
+                              <TimesCircleIcon /> 1
+                            </FlexItem>
+                            <FlexItem> Updated 2 days ago</FlexItem>
+                          </Flex>
+                        </FlexItem>
+                      </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>
+        </PageSection>
+      </DashboardWrapper>
+    </React.Fragment>
+  );
+};

package/src/demos/DataListDemo.md

@@ -9,8 +9,20 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
 
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+
 ## Demos
 
+### Basic
+
+```js file="./DataList/examples/DataListBasic.tsx" isFullscreen
+
+```
+
 ### Expandable control in toolbar
 
 ```js