@patternfly/react-core 5.2.0-prerelease.9 → 5.3.0-prerelease.1

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

@@ -1,34 +1,98 @@
-import { Divider } from '../Divider';
-import { Flex, FlexItem } from '../../../layouts/Flex';
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { Divider } from '../Divider';
+import styles from '@patternfly/react-styles/css/components/Divider/divider';
 
-test('divider using hr', () => {
-  const { asFragment } = render(<Divider />);
-  expect(asFragment()).toMatchSnapshot();
+test(`Renders with only the class name ${styles.divider} by default`, () => {
+  render(<Divider />);
+  expect(screen.getByRole('separator')).toHaveClass(styles.divider, { exact: true });
 });
 
-test('divider using li', () => {
-  const { asFragment } = render(<Divider component="li" />);
-  expect(asFragment()).toMatchSnapshot();
+test('Renders with horizontal rule by default', () => {
+  render(<Divider />);
+  expect(screen.getByRole('separator')).toContainHTML('<hr class="pf-v5-c-divider" />');
 });
 
-test('divider using div', () => {
-  const { asFragment } = render(<Divider component="div" />);
-  expect(asFragment()).toMatchSnapshot();
+test('Renders with element passed to component prop', () => {
+  render(<Divider component="li" />);
+  expect(screen.getByRole('separator')?.tagName).toBe('LI');
+});
+
+test('Test default orientation (vertical divider)', () => {
+  render(<Divider orientation={{ default: 'vertical' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical');
+});
+
+test('Test sm orientation', () => {
+  render(<Divider orientation={{ sm: 'horizontal' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-sm');
+});
+
+test('Test md orientation', () => {
+  render(<Divider orientation={{ md: 'vertical' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical-on-md');
+});
+
+test('Test lg orientation', () => {
+  render(<Divider orientation={{ lg: 'horizontal' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-lg');
+});
+
+test('Test xl orientation', () => {
+  render(<Divider orientation={{ xl: 'vertical' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-vertical-on-xl');
+});
+
+test('Test 2xl orientation', () => {
+  render(<Divider orientation={{ '2xl': 'horizontal' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-horizontal-on-2xl');
+});
+
+test('Test default inset', () => {
+  render(<Divider inset={{ default: 'insetNone' }} />);
+  expect(screen.getByRole('separator')).toHaveClass('pf-m-inset-none');
 });
 
-test('vertical divider', () => {
-  const { asFragment } = render(
-    <Flex>
-      <FlexItem>first item</FlexItem>
+test(`Test all insets`, () => {
+  const insetValues = Object.values([
+    'insetNone',
+    'insetXs',
+    'insetSm',
+    'insetMd',
+    'insetLg',
+    'insetXl',
+    'inset2xl',
+    'inset3xl'
+  ] as ['insetNone', 'insetXs', 'insetSm', 'insetMd', 'insetLg', 'insetXl', 'inset2xl', 'inset3xl']);
+
+  insetValues.forEach((insetValue) => {
+    render(
       <Divider
-        orientation={{
-          default: 'vertical'
+        inset={{
+          default: insetValue,
+          sm: insetValue,
+          md: insetValue,
+          lg: insetValue,
+          xl: insetValue,
+          '2xl': insetValue
         }}
       />
-      <FlexItem>second item</FlexItem>
-    </Flex>
-  );
+    );
+  });
+  const modifiers = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+
+  modifiers.forEach((modifier, index) => {
+    const smClass = `pf-m-inset-${modifier}-on-sm`;
+    const mdClass = `pf-m-inset-${modifier}-on-md`;
+    const lgClass = `pf-m-inset-${modifier}-on-lg`;
+    const xlClass = `pf-m-inset-${modifier}-on-xl`;
+    const xl2Class = `pf-m-inset-${modifier}-on-2xl`;
+
+    expect(screen.getAllByRole('separator')[index]).toHaveClass(smClass, mdClass, lgClass, xlClass, xl2Class);
+  });
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Divider />);
   expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,49 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`divider using div 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-divider"
-    role="separator"
-  />
-</DocumentFragment>
-`;
-
-exports[`divider using hr 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <hr
     class="pf-v5-c-divider"
   />
 </DocumentFragment>
 `;
-
-exports[`divider using li 1`] = `
-<DocumentFragment>
-  <li
-    class="pf-v5-c-divider"
-    role="separator"
-  />
-</DocumentFragment>
-`;
-
-exports[`vertical divider 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-l-flex"
-  >
-    <div
-      class=""
-    >
-      first item
-    </div>
-    <hr
-      class="pf-v5-c-divider pf-m-vertical"
-    />
-    <div
-      class=""
-    >
-      second item
-    </div>
-  </div>
-</DocumentFragment>
-`;

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

@@ -2,10 +2,10 @@
 id: Drag and drop
 section: components
 propComponents: [DragDrop, Draggable, Droppable, DraggableItemPosition]
-beta: true
+title: Drag and drop
 ---
 
-You can use the `DragDrop` component to move items in or between lists. The `DragDrop` component should contain `Droppable` components which contain `Draggable` components.
+You can use the `<DragDrop>` component to move items in or between lists. The `<DragDrop>` component should contain `<Droppable>` components which contain `<Draggable>` components.
 
 ```ts noLive
 import React from 'react';
@@ -35,9 +35,11 @@ Note: Keyboard accessibility and screen reader accessibility are still in develo
 ### Basic
 
 ```ts file="./DragDropBasic.tsx"
+
 ```
 
 ### Multiple lists
 
 ```ts file="./DragDropMultipleLists.tsx"
+
 ```

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

@@ -20,14 +20,14 @@ const getItems = (count: number) =>
   }));
 
 const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
-  const result = list;
+  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));
+  const [items, setItems] = React.useState<ItemType[]>(getItems(10));
 
   function onDrop(source: SourceType, dest: DestinationType) {
     if (dest) {
@@ -42,8 +42,8 @@ export const DragDropBasic: React.FunctionComponent = () => {
   return (
     <DragDrop onDrop={onDrop}>
       <Droppable>
-        {items.map(({ content }, i) => (
-          <Draggable key={i} style={{ padding: '8px' }}>
+        {items.map(({ id, content }) => (
+          <Draggable key={id} style={{ padding: '8px' }}>
             {content}
           </Draggable>
         ))}

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

@@ -11,6 +11,11 @@ interface SourceType {
   index: number;
 }
 
+interface MultipleListState {
+  items1: ItemType[];
+  items2: ItemType[];
+}
+
 interface DestinationType extends SourceType {}
 
 const getItems = (count: number, startIndex: number) =>
@@ -35,7 +40,7 @@ const move = (source: ItemType[], destination: ItemType[], sourceIndex: number,
 };
 
 export const DragDropMultipleLists: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState({
+  const [items, setItems] = React.useState<MultipleListState>({
     items1: getItems(10, 0),
     items2: getItems(5, 10)
   });
@@ -84,7 +89,7 @@ export const DragDropMultipleLists: React.FunctionComponent = () => {
         {Object.entries(items).map(([key, subitems]) => (
           <SplitItem key={key} style={{ flex: 1 }}>
             <Droppable zone="multizone" droppableId={key}>
-              {subitems.map(({ id, content }) => (
+              {(subitems as ItemType[]).map(({ id, content }) => (
                 <Draggable key={id} style={{ padding: '8px' }}>
                   {content}
                 </Draggable>

package/src/components/DragDrop/index.ts

@@ -1,3 +1,4 @@
 export * from './DragDrop';
 export * from './Draggable';
 export * from './Droppable';
+export * from './DroppableContext';

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
-import { formatBreakpointMods } from '../../helpers/util';
+import { formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
 import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
@@ -111,7 +111,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     if (isInline && (position === 'end' || position === 'right')) {
       if (isRTL) {
@@ -198,7 +198,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   };
 
   const handleControlMove = (e: MouseEvent | TouchEvent, controlPosition: number) => {
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     e.stopPropagation();
     if (!isResizing) {
@@ -264,7 +264,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const callbackMouseUp = React.useCallback(handleMouseup, []);
 
   const handleKeys = (e: React.KeyboardEvent) => {
-    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+    const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     const key = e.key;
     if (

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

@@ -10,7 +10,7 @@ import {
   DrawerPanelContent
 } from '../';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { KeyTypes } from '../../../helpers';
 
@@ -134,13 +134,9 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
 
   const panelContent = (
     <TestContext.Provider value={{}}>
-      <DrawerPanelContent
-        isResizable
-      >
+      <DrawerPanelContent isResizable>
         <DrawerHead>
-          <span>
-            drawer-panel
-          </span>
+          <span>drawer-panel</span>
           <DrawerActions>
             <DrawerCloseButton />
           </DrawerActions>
@@ -163,4 +159,4 @@ test('Resizeable DrawerPanelContent can be wrapped in a context without causing
   await user.keyboard(`{${KeyTypes.ArrowLeft}}`);
 
   expect(consoleError).not.toHaveBeenCalled();
-})
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -19,6 +19,8 @@ export interface DropdownPopperProps {
   enableFlip?: boolean;
   /** The container to append the popper to. Defaults to 'inline'. */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface DropdownToggleProps {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Dropdown } from '../../Dropdown';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 jest.mock('../../Menu');
@@ -176,7 +176,7 @@ test('onOpenChange is called when passed and user presses tab key', async () =>
     </Dropdown>
   );
 
-  //focus dropdown
+  // focus dropdown
   const dropdown = screen.getByRole('button', { name: 'Dropdown' });
   await user.click(dropdown);
   await user.keyboard('{Tab}');
@@ -194,7 +194,7 @@ test('onOpenChange is called when passed and user presses esc key', async () =>
     </Dropdown>
   );
 
-  //focus dropdown
+  // focus dropdown
   const dropdown = screen.getByRole('button', { name: 'Dropdown' });
   await user.click(dropdown);
   await user.keyboard('{Escape}');

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -87,6 +87,8 @@ The dual list selector can also be built in a composable manner to make customiz
 
 ### Composable with drag and drop
 
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-next-demos).
+
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
 
 - wrap the `DualListSelectorPane` in a `DragDrop` component
@@ -99,7 +101,7 @@ This example only allows reordering the contents of the "chosen" pane with drag
   - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
     event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
 
 ```ts file="DualListSelectorComposableDragDrop.tsx"
 

package/src/components/DualListSelector/index.ts

@@ -1,7 +1,9 @@
 export * from './DualListSelector';
+export * from './DualListSelectorContext';
 export * from './DualListSelectorControl';
 export * from './DualListSelectorControlsWrapper';
 export * from './DualListSelectorPane';
 export * from './DualListSelectorList';
 export * from './DualListSelectorListItem';
 export * from './DualListSelectorTree';
+export * from './DualListSelectorContext';

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -143,7 +143,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   componentDidUpdate(prevProps: ExpandableSectionProps) {
     if (
       this.props.variant === ExpandableSectionVariant.truncate &&
-      prevProps.truncateMaxLines !== this.props.truncateMaxLines
+      (prevProps.truncateMaxLines !== this.props.truncateMaxLines || prevProps.children !== this.props.children)
     ) {
       const expandableContent = this.expandableContentRef.current;
       setLineClamp(this.props.truncateMaxLines, expandableContent);

package/src/components/FileUpload/FileUploadField.tsx

@@ -37,6 +37,8 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   hideDefaultPreview?: boolean;
   /** Unique id for the text area. Also used to generate ids for accessible labels. */
   id: string;
+  /** Name property for the text input. */
+  name?: string;
   /** Flag to disable the clear button. */
   isClearButtonDisabled?: boolean;
   /** Flag to show if the field is disabled. */
@@ -84,6 +86,7 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
 
 export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   id,
+  name,
   type,
   value = '',
   filename = '',
@@ -135,7 +138,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
               readOnlyVariant="default" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
               isDisabled={isDisabled}
               id={`${id}-filename`}
-              name={`${id}-filename`}
+              name={name || `${id}-filename`}
               aria-label={filenameAriaLabel}
               placeholder={filenamePlaceholder}
               aria-describedby={`${id}-browse-button`}
@@ -172,7 +175,6 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             resizeOrientation={TextAreResizeOrientation.vertical}
             validated={validated}
             id={id}
-            name={id}
             aria-label={ariaLabel}
             value={value as string}
             onChange={onTextAreaChange}

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -76,7 +76,6 @@ exports[`simple fileupload 1`] = `
           aria-invalid="false"
           aria-label="File upload"
           id="simple-text-file"
-          name="simple-text-file"
           placeholder=""
         />
       </span>

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -74,7 +74,6 @@ exports[`simple fileuploadfield 1`] = `
           aria-invalid="false"
           aria-label="File upload"
           id="custom-file-upload"
-          name="custom-file-upload"
           placeholder=""
         />
       </span>

package/src/components/Form/__tests__/FormContext.test.tsx

@@ -3,9 +3,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FormContextConsumer, FormContextProvider } from '../FormContext';
 
-const customRender = (ui, initialValues?: Record<string, any>) => {
-  return render(<FormContextProvider initialValues={initialValues}>{ui}</FormContextProvider>);
-};
+const customRender = (ui, initialValues?: Record<string, any>) =>
+  render(<FormContextProvider initialValues={initialValues}>{ui}</FormContextProvider>);
 
 test('consumers can show all values from "values" provided by "initialValues"', () => {
   const initialValues = { fieldOneId: 'some value', fieldTwoId: 'some other value' };
@@ -63,9 +62,9 @@ test('sets a new value for a single field using setValue', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ getValue, setValue }) => {
-        return <input onChange={(event) => setValue('someId', event.target.value)} value={getValue('someId')} />;
-      }}
+      {({ getValue, setValue }) => (
+        <input onChange={(event) => setValue('someId', event.target.value)} value={getValue('someId')} />
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -86,16 +85,14 @@ test('using setValues, consumers can set multiple values at once', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ values, setValues }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setValues(newValues)} />
-            {Object.entries(values).map(([fieldId, value]) => (
-              <span key={fieldId}>{`${fieldId}: ${value}`}</span>
-            ))}
-          </>
-        );
-      }}
+      {({ values, setValues }) => (
+        <>
+          <input type="checkbox" onClick={() => setValues(newValues)} />
+          {Object.entries(values).map(([fieldId, value]) => (
+            <span key={fieldId}>{`${fieldId}: ${value}`}</span>
+          ))}
+        </>
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -129,14 +126,12 @@ test('sets a new error for a single field using setError', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ errors, setError }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setError('someId', 'some error!')} />
-            {`Error: ${errors.someId}`}
-          </>
-        );
-      }}
+      {({ errors, setError }) => (
+        <>
+          <input type="checkbox" onClick={() => setError('someId', 'some error!')} />
+          {`Error: ${errors.someId}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 
@@ -150,16 +145,14 @@ test('using setErrors, consumers can set multiple errors at once', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ errors, setErrors }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setErrors(newErrors)} />
-            {Object.entries(errors).map(([fieldId, error]) => (
-              <span key={fieldId}>{`${fieldId}: ${error}`}</span>
-            ))}
-          </>
-        );
-      }}
+      {({ errors, setErrors }) => (
+        <>
+          <input type="checkbox" onClick={() => setErrors(newErrors)} />
+          {Object.entries(errors).map(([fieldId, error]) => (
+            <span key={fieldId}>{`${fieldId}: ${error}`}</span>
+          ))}
+        </>
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -175,14 +168,12 @@ test('sets a new touched state for a single field using setTouched', async () =>
 
   customRender(
     <FormContextConsumer>
-      {({ touched, setTouched }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setTouched('someId', true)} />
-            {`isTouched: ${touched.someId}`}
-          </>
-        );
-      }}
+      {({ touched, setTouched }) => (
+        <>
+          <input type="checkbox" onClick={() => setTouched('someId', true)} />
+          {`isTouched: ${touched.someId}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 
@@ -195,14 +186,12 @@ test("can get a single field's touched state by using isTouched", async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ touched, setTouched, isTouched }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setTouched('someId', !touched.someId)} />
-            {`isTouched: ${isTouched('someId')}`}
-          </>
-        );
-      }}
+      {({ touched, setTouched, isTouched }) => (
+        <>
+          <input type="checkbox" onClick={() => setTouched('someId', !touched.someId)} />
+          {`isTouched: ${isTouched('someId')}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 

package/src/components/Form/__tests__/FormFieldGroup.test.tsx

@@ -50,7 +50,7 @@ test('Verify console error logged when there is no aria-label or title', () => {
       header={<FormFieldGroupHeader titleDescription="Field group 4 description text." actions={<Button />} />}
     />
   );
-  const { asFragment } = render(FieldGroup);
+  render(FieldGroup);
   expect(consoleErrorMock).toHaveBeenCalled();
 });
 

package/src/components/Form/__tests__/FormGroup.test.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { ValidatedOptions } from '../../../helpers/constants';
 import { FormGroup } from '../FormGroup';
 import { Form } from '../Form';
 

package/src/components/Form/__tests__/FormHelperText.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { FormHelperText } from '../FormHelperText';
 
 describe('FormHelperText', () => {