@patternfly/react-core 4.207.0 → 4.208.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.207.0",
+  "version": "4.208.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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.58.0",
-    "@patternfly/react-styles": "^4.57.0",
-    "@patternfly/react-tokens": "^4.59.0",
+    "@patternfly/react-icons": "^4.59.2",
+    "@patternfly/react-styles": "^4.58.2",
+    "@patternfly/react-tokens": "^4.60.2",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.192.1",
+    "@patternfly/patternfly": "4.192.4",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "70622790d9c915dfa53396a29fafb8d1e888f3cf"
+  "gitHead": "657b6120e44b7d79febe3164284e7444efd385be"
 }

package/src/components/Divider/Divider.tsx

@@ -14,7 +14,7 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The component type to use */
   component?: 'hr' | 'li' | 'div';
-  /** Flag to indicate the divider is vertical (must be in a flex layout) */
+  /** @deprecated Use `orientation` instead. Flag to indicate the divider is vertical (must be in a flex layout) */
   isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
@@ -25,6 +25,15 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
     xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
     '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
   };
+  /** Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout. */
+  orientation?: {
+    default?: 'vertical' | 'horizontal';
+    sm?: 'vertical' | 'horizontal';
+    md?: 'vertical' | 'horizontal';
+    lg?: 'vertical' | 'horizontal';
+    xl?: 'vertical' | 'horizontal';
+    '2xl'?: 'vertical' | 'horizontal';
+  };
 }
 
 export const Divider: React.FunctionComponent<DividerProps> = ({
@@ -32,6 +41,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
   component = DividerVariant.hr,
   isVertical = false,
   inset,
+  orientation,
   ...props
 }: DividerProps) => {
   const Component: any = component;
@@ -42,6 +52,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
         styles.divider,
         isVertical && styles.modifiers.vertical,
         formatBreakpointMods(inset, styles),
+        formatBreakpointMods(orientation, styles),
         className
       )}
       {...(component !== 'hr' && { role: 'separator' })}

package/src/components/Divider/__tests__/Divider.test.tsx

@@ -22,7 +22,11 @@ test('vertical divider', () => {
   const { asFragment } = render(
     <Flex>
       <FlexItem>first item</FlexItem>
-      <Divider isVertical />
+      <Divider
+        orientation={{
+          default: 'vertical'
+        }}
+      />
       <FlexItem>second item</FlexItem>
     </Flex>
   );

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

@@ -46,3 +46,9 @@ propComponents: ['Divider']
 
 ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
 ```
+
+### Switch orientation at various breakpoints
+
+```ts file='./DividerOrientationVariousBreakpoints.tsx'
+```
+

package/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider
+      orientation={{
+        default: 'vertical',
+        sm: 'horizontal',
+        md: 'vertical',
+        lg: 'horizontal',
+        xl: 'vertical',
+        '2xl': 'horizontal'
+      }}
+    />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);

package/src/components/Divider/examples/DividerVerticalFlex.tsx

@@ -4,7 +4,11 @@ import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 export const DividerVerticalFlex: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
-    <Divider isVertical />
+    <Divider
+      orientation={{
+        default: 'vertical'
+      }}
+    />
     <FlexItem>second item</FlexItem>
   </Flex>
 );

package/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx

@@ -4,7 +4,12 @@ import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
-    <Divider isVertical inset={{ default: 'insetMd' }} />
+    <Divider
+      orientation={{
+        default: 'vertical'
+      }}
+      inset={{ default: 'insetMd' }}
+    />
     <FlexItem>second item</FlexItem>
   </Flex>
 );

package/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx

@@ -5,7 +5,9 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
   <Flex>
     <FlexItem>first item</FlexItem>
     <Divider
-      isVertical
+      orientation={{
+        default: 'vertical'
+      }}
       inset={{
         default: 'insetMd',
         md: 'insetNone',
@@ -13,6 +15,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
         xl: 'insetXs'
       }}
     />
-    <FlexItem>first item</FlexItem>
+    <FlexItem>second item</FlexItem>
   </Flex>
 );

package/src/components/DragDrop/examples/DragDrop.md

@@ -1,175 +1,43 @@
 ---
 id: Drag and drop
 section: components
-propComponents: [
-  DragDrop,
-  Draggable,
-  Droppable,
-  DraggableItemPosition
-]
+propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
 beta: true
 ---
 
-You can use `DragDrop` to move items in or between lists. `DragDrop`s should contain `Droppable`s which contain `Draggable`s.
+You can use the `DragDrop` component to move items in or between lists. The `DragDrop` component should contain `Droppable` components which contain `Draggable` components.
 
-```js noLive
+```ts noLive
 import React from 'react';
 import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
 
-<DragDrop> {/* DragDrop houses the context for dragging and dropping */}
-  <Droppable>
-    <Draggable>
-      You can put anything here! It will be wrapped in a styled div.
-    </Draggable>
-    <Draggable>
-      You can have as many Draggables as you like.
-    </Draggable>
-  </Droppable>
-  <Droppable> {/* You can also have many droppables! */}
-    <Draggable />
-  </Droppable>
-</DragDrop>
+const DragDropCodeSample: React.FunctionComponent = () => (
+  <DragDrop>
+    {' '}
+    {/* DragDrop houses the context for dragging and dropping */}
+    <Droppable>
+      <Draggable>You can put anything here! It will be wrapped in a styled div.</Draggable>
+      <Draggable>You can have as many Draggables as you like.</Draggable>
+    </Droppable>
+    <Droppable>
+      {' '}
+      {/* You can also have many droppables! */}
+      <Draggable />
+    </Droppable>
+  </DragDrop>
+);
 ```
+
 Note: Keyboard accessibility and screen reader accessibility are still in development.
 
 ## Examples
-### Basic
-
-```js
-import React from 'react';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
-
-const getItems = count =>
-  Array.from({ length: count }, (v, k) => k).map(k => ({
-    id: `item-${k}`,
-    content: `item ${k} `.repeat(k === 4 ? 20 : 1)
-  }));
-
-const reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-  return result;
-};
-
-Basic = () => {
-  const [items, setItems] = React.useState(getItems(10));
-
-  function onDrop(source, dest) {
-    if (dest) {
-      const newItems = reorder(
-        items,
-        source.index,
-        dest.index
-      );
-      setItems(newItems);
 
-      return true;
-    }
-    return false;
-  }
+### Basic
 
-  return (
-    <DragDrop onDrop={onDrop}>
-      <Droppable>
-        {items.map(({ id, content }, i) =>
-          <Draggable key={i} style={{ padding: '8px' }}>
-            {content}
-          </Draggable>
-        )}
-      </Droppable>
-    </DragDrop>
-  );
-}
+```ts file="./DragDropBasic.tsx"
 ```
 
 ### Multiple lists
 
-```js
-import React from 'react';
-import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
-
-const getItems = (count, start) =>
-  Array.from({ length: count }, (v, k) => k).map(k => ({
-    id: `item-${k + start}`,
-    content: `item ${k + start} `.repeat(k === 4 ? 20 : 1)
-  }));
-
-const reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-  return result;
-};
-
-const move = (source, destination, sourceIndex, destIndex) => {
-  const sourceClone = Array.from(source);
-  const destClone = Array.from(destination);
-  const [removed] = sourceClone.splice(sourceIndex, 1);
-  destClone.splice(destIndex, 0, removed);
-  return [sourceClone, destClone];
-};
-
-MultiList = () => {
-  const [items, setItems] = React.useState({
-    items1: getItems(10, 0),
-    items2: getItems(5, 10)
-  });
-
-  function onDrop(source, dest) {
-    console.log(source, dest);
-    if (dest) {
-      if (source.droppableId === dest.droppableId) {
-        const newItems = reorder(
-          source.droppableId === 'items1' ? items.items1 : items.items2,
-          source.index,
-          dest.index
-        );
-        if (source.droppableId === 'items1') {
-          setItems({
-            items1: newItems,
-            items2: items.items2
-          });
-        } else {
-          setItems({
-            items1: items.items1,
-            items2: newItems
-          });
-        }
-      } else {
-        const [newItems1, newItems2] = move(
-          source.droppableId === 'items1' ? items.items1 : items.items2,
-          dest.droppableId   === 'items1' ? items.items1 : items.items2,
-          source.index,
-          dest.index
-        );
-        setItems({
-          items1: source.droppableId === 'items1' ? newItems1 : newItems2,
-          items2: dest.droppableId   === 'items1' ? newItems1 : newItems2
-        });
-      }
-      return true;
-    }
-    return false;
-  }
-
-  return (
-    <DragDrop onDrop={onDrop}>
-      <Split hasGutter>
-        {Object.entries(items).map(([key, subitems]) =>
-          <SplitItem key={key} style={{ flex: 1 }}>
-            <Droppable zone="multizone" droppableId={key}>
-              {subitems.map(({ id, content }, i) =>
-                <Draggable key={id} style={{ padding: '8px' }}>
-                  {content}
-                </Draggable>
-              )}
-            </Droppable>
-          </SplitItem>
-        )}
-      </Split>
-    </DragDrop>
-  );
-}
+```ts file="./DragDropMultipleLists.tsx"
 ```
-

package/src/components/DragDrop/examples/DragDropBasic.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';
+
+interface ItemType {
+  id: string;
+  content: string;
+}
+
+interface SourceType {
+  droppableId: string;
+  index: number;
+}
+
+interface DestinationType extends SourceType {}
+
+const getItems = (count: number) =>
+  Array.from({ length: count }, (_, idx) => idx).map(idx => ({
+    id: `item-${idx}`,
+    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
+  }));
+
+const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
+  const result = list;
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+export const DragDropBasic: React.FunctionComponent = () => {
+  const [items, setItems] = React.useState(getItems(10));
+
+  function onDrop(source: SourceType, dest: DestinationType) {
+    if (dest) {
+      const newItems = reorder(items, source.index, dest.index);
+      setItems(newItems);
+
+      return true;
+    }
+    return false;
+  }
+
+  return (
+    <DragDrop onDrop={onDrop}>
+      <Droppable>
+        {items.map(({ content }, i) => (
+          <Draggable key={i} style={{ padding: '8px' }}>
+            {content}
+          </Draggable>
+        ))}
+      </Droppable>
+    </DragDrop>
+  );
+};

package/src/components/DragDrop/examples/DragDropMultipleLists.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
+
+interface ItemType {
+  id: string;
+  content: string;
+}
+
+interface SourceType {
+  droppableId: string;
+  index: number;
+}
+
+interface DestinationType extends SourceType {}
+
+const getItems = (count: number, startIndex: number) =>
+  Array.from({ length: count }, (_, idx) => idx + startIndex).map(idx => ({
+    id: `item-${idx}`,
+    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
+  }));
+
+const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
+  const result = list;
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+const move = (source: ItemType[], destination: ItemType[], sourceIndex: number, destIndex: number) => {
+  const sourceClone = source;
+  const destClone = destination;
+  const [removed] = sourceClone.splice(sourceIndex, 1);
+  destClone.splice(destIndex, 0, removed);
+  return [sourceClone, destClone];
+};
+
+export const DragDropMultipleLists: React.FunctionComponent = () => {
+  const [items, setItems] = React.useState({
+    items1: getItems(10, 0),
+    items2: getItems(5, 10)
+  });
+
+  function onDrop(source: SourceType, dest: DestinationType) {
+    // eslint-disable-next-line no-console
+    console.log(source, dest);
+    if (dest) {
+      if (source.droppableId === dest.droppableId) {
+        const newItems = reorder(
+          source.droppableId === 'items1' ? items.items1 : items.items2,
+          source.index,
+          dest.index
+        );
+        if (source.droppableId === 'items1') {
+          setItems({
+            items1: newItems,
+            items2: items.items2
+          });
+        } else {
+          setItems({
+            items1: items.items1,
+            items2: newItems
+          });
+        }
+      } else {
+        const [newItems1, newItems2] = move(
+          source.droppableId === 'items1' ? items.items1 : items.items2,
+          dest.droppableId === 'items1' ? items.items1 : items.items2,
+          source.index,
+          dest.index
+        );
+        setItems({
+          items1: source.droppableId === 'items1' ? newItems1 : newItems2,
+          items2: dest.droppableId === 'items1' ? newItems1 : newItems2
+        });
+      }
+      return true;
+    }
+    return false;
+  }
+
+  return (
+    <DragDrop onDrop={onDrop}>
+      <Split hasGutter>
+        {Object.entries(items).map(([key, subitems]) => (
+          <SplitItem key={key} style={{ flex: 1 }}>
+            <Droppable zone="multizone" droppableId={key}>
+              {subitems.map(({ id, content }) => (
+                <Draggable key={id} style={{ padding: '8px' }}>
+                  {content}
+                </Draggable>
+              ))}
+            </Droppable>
+          </SplitItem>
+        ))}
+      </Split>
+    </DragDrop>
+  );
+};

package/src/components/Page/examples/Page.md

@@ -264,11 +264,10 @@ class FillPage extends React.Component {
     return (
       <Page header={Header} sidebar={Sidebar}>
         <PageSection>A default page section</PageSection>
-        <PageSection isFilled={true}>
-          This section fills the available space.
-        </PageSection>
+        <PageSection isFilled={true}>This section fills the available space.</PageSection>
         <PageSection isFilled={false}>
-          This section is set to not fill the available space, since the last page section is set to fill the available space by default.
+          This section is set to not fill the available space, since the last page section is set to fill the available
+          space by default.
         </PageSection>
       </Page>
     );
@@ -590,7 +589,7 @@ class VerticalPage extends React.Component {
 }
 ```
 
-### Centered content
+### Centered section
 
 ```js
 import React from 'react';
@@ -607,7 +606,9 @@ import {
   PageToggleButton,
   Toolbar,
   ToolbarContent,
-  ToolbarItem
+  ToolbarItem,
+  Card,
+  CardBody
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
@@ -639,7 +640,16 @@ CenterAlignedPageSection = () => {
   return (
     <Page header={Header}>
       <PageSection isWidthLimited isCenterAligned>
-        Page section width limited, centered.
+        <Card>
+          <CardBody>
+            When a width limited page section is wider than the value of
+            <code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
+            <br />
+            <br />
+            The content in this example is placed in a card to better illustrate how the section behaves when it is
+            centered. A card is not required to center a page section.
+          </CardBody>
+        </Card>
       </PageSection>
     </Page>
   );