@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

package/src/deprecated/components/PageHeader/tests/PageHeaderToolsItem.test.tsx

@@ -9,9 +9,7 @@ import {} from '../..';
 
 it('PageHeaderToolsItem should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <PageHeaderToolsItem className={'string'} isSelected={true}>
-      children={<div>ReactNode</div>}
-    </PageHeaderToolsItem>
+    <PageHeaderToolsItem className={'string'}>children={<div>ReactNode</div>}</PageHeaderToolsItem>
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeaderToolsItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`PageHeaderToolsItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-page__header-tools-item pf-m-selected string"
+    class="pf-v5-c-page__header-tools-item string"
   >
     children=
     <div>

package/src/deprecated/components/Select/SelectMenu.tsx

@@ -214,7 +214,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
     const variantProps = {
       ref: innerRef,
       className: css(
-        !footer ? styles.selectMenu : 'pf-v5-c-select__menu-list',
+        !footer ? styles.selectMenu : `${styles.selectMenu}-list`,
         position === SelectPosition.right && styles.modifiers.alignRight,
         className
       ),

package/src/deprecated/components/Select/__tests__/Select.test.tsx

@@ -123,7 +123,7 @@ describe('Select', () => {
 
   describe('custom select filter', () => {
     test('filters properly', async () => {
-      const customFilter = (e: React.ChangeEvent<HTMLInputElement>, value: string) => {
+      const customFilter = (e: React.ChangeEvent<HTMLInputElement>, _value: string) => {
         let input: RegExp;
         try {
           input = new RegExp(e.target.value, 'i');

package/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx

@@ -29,7 +29,7 @@ describe('Wizard', () => {
       { name: 'C', id: 'step-C', component: <p>Step 4</p> },
       { name: 'D', id: 'step-D', component: <p>Step 5</p> }
     ];
-    const onBack: WizardStepFunctionType = step => {
+    const onBack: WizardStepFunctionType = (step) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const name = { step };
     };
@@ -62,7 +62,7 @@ describe('Wizard', () => {
       { name: 'C', component: <p>Step 4</p> },
       { name: 'D', component: <p>Step 5</p> }
     ];
-    const onBack: WizardStepFunctionType = step => {
+    const onBack: WizardStepFunctionType = (step) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const name = { step };
     };
@@ -289,7 +289,7 @@ test('startAtStep can be used to externally control the current step of the wiza
     const [step, setStep] = React.useState(1);
 
     const incrementStep = () => {
-      setStep(prevStep => prevStep + 1);
+      setStep((prevStep) => prevStep + 1);
     };
 
     const steps: WizardStep[] = [

package/src/deprecated/components/Wizard/examples/WizardFinished.tsx

@@ -12,6 +12,7 @@ import {
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface finishedProps {
   onClose: () => void;
@@ -41,7 +42,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   }, [percent]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -18,6 +18,7 @@ import {
   WizardFooter as WizardFooterDeprecated,
   WizardContextConsumer as WizardContextConsumerDeprecated
 } from '@patternfly/react-core/deprecated';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -50,7 +51,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   }, [percent]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/helpers/GenerateId/__tests__/GenerateId.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { GenerateId } from '../GenerateId';
 
 test('generates id', () => {
-  const { asFragment } = render(<GenerateId>{id => <div id={id}>div with random ID</div>}</GenerateId>);
+  const { asFragment } = render(<GenerateId>{(id) => <div id={id}>div with random ID</div>}</GenerateId>);
 
   expect(asFragment()).toMatchSnapshot();
 });

package/src/helpers/OUIA/__mocks__/ouia.ts

@@ -0,0 +1,6 @@
+import { OUIAProps } from '../../index';
+
+export const useOUIAProps = () => ({});
+export const getOUIAProps = () => ({});
+export const getDefaultOUIAId = () => '';
+export { OUIAProps };

package/src/helpers/Popper/Popper.tsx

@@ -5,6 +5,7 @@ import { Placement, Modifier } from './thirdparty/popper-core';
 import { clearTimeouts } from '../util';
 import { css } from '@patternfly/react-styles';
 import '@patternfly/react-styles/css/components/Popper/Popper.css';
+import { getLanguageDirection } from '../util';
 
 const hash = {
   left: 'right',
@@ -45,21 +46,6 @@ const getOppositePlacement = (placement: Placement): any =>
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 
-export const getLanguageDirection = (targetElement: HTMLElement) => {
-  const defaultDirection = 'ltr';
-  let direction = defaultDirection;
-
-  if (targetElement) {
-    direction = getComputedStyle(targetElement).getPropertyValue('direction');
-  }
-
-  if (['ltr', 'rtl'].includes(direction)) {
-    return direction as 'ltr' | 'rtl';
-  }
-
-  return defaultDirection;
-};
-
 export interface PopperProps {
   /**
    * Trigger reference element to which the popper is relatively placed to.
@@ -186,6 +172,8 @@ export interface PopperProps {
    * Lifecycle function invoked when the popper has fully transitioned in.
    */
   onShown?: () => void;
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export const Popper: React.FunctionComponent<PopperProps> = ({
@@ -224,7 +212,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onHide = () => {},
   onMount = () => {},
   onShow = () => {},
-  onShown = () => {}
+  onShown = () => {},
+  preventOverflow = false
 }) => {
   const [triggerElement, setTriggerElement] = React.useState(null);
   const [refElement, setRefElement] = React.useState<HTMLElement>(null);
@@ -289,7 +278,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
         setRefElement(triggerRef());
       }
     }
-  }, [triggerRef]);
+  }, [triggerRef, trigger]);
   React.useEffect(() => {
     // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
     if (popperRef) {
@@ -436,7 +425,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       },
       {
         name: 'preventOverflow',
-        enabled: false
+        enabled: preventOverflow
       },
       {
         // adds attribute [data-popper-reference-hidden] to the popper element which can be used to hide it using CSS
@@ -458,7 +447,9 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
    * TODO: Investigate into 3rd party libraries for a less limited/specific solution
    */
   React.useEffect(() => {
-    const currentPopperContent = popper?.props?.children[1]?.props?.children;
+    // currentPopperContent = {tooltip children} || {dropdown children}
+    const currentPopperContent =
+      popper?.props?.children[1]?.props?.children || popper?.props?.children?.props?.children;
     setPopperContent(currentPopperContent);
 
     if (currentPopperContent && popperContent && currentPopperContent !== popperContent) {

package/src/helpers/__mocks__/index.ts

@@ -0,0 +1,2 @@
+export * from '../OUIA/__mocks__/ouia';
+export * from './util';

package/src/helpers/__mocks__/util.ts

@@ -1,3 +1,5 @@
 export const getUniqueId = () => 'unique_id_mock';
 
 export const clearTimeouts = () => {};
+
+export const getLanguageDirection = () => 'ltr';

package/src/helpers/__tests__/fileUtils.test.ts

@@ -3,15 +3,12 @@ import { readFile, fileReaderType } from '../fileUtils';
 describe('readFile', () => {
   const file = new File(['File contents here'], 'testfile.txt');
 
-  test('text file', () => {
-    return expect(readFile(file, fileReaderType.text)).resolves.toBe('File contents here');
-  });
+  test('text file', () => expect(readFile(file, fileReaderType.text)).resolves.toBe('File contents here'));
 
-  test('dataURL file', () => {
-    return expect(readFile(file, fileReaderType.dataURL)).resolves.toBe('data:application/octet-stream;base64,RmlsZSBjb250ZW50cyBoZXJl');
-  });
+  test('dataURL file', () =>
+    expect(readFile(file, fileReaderType.dataURL)).resolves.toBe(
+      'data:application/octet-stream;base64,RmlsZSBjb250ZW50cyBoZXJl'
+    ));
 
-  test('rejects on unknown type', () => {
-    return expect(readFile(file, 'foo' as fileReaderType)).rejects.toBe('unknown type');
-  });
+  test('rejects on unknown type', () => expect(readFile(file, 'foo' as fileReaderType)).rejects.toBe('unknown type'));
 });

package/src/helpers/__tests__/util.test.ts

@@ -14,7 +14,7 @@ import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
 const createMockHtmlElement = (bounds: Partial<DOMRect>) =>
   ({
     getBoundingClientRect: () => bounds
-  } as HTMLElement);
+  }) as HTMLElement;
 
 test('capitalize', () => {
   expect(capitalize('foo')).toBe('Foo');

package/src/helpers/datetimeUtils.ts

@@ -1,4 +1,4 @@
 /**
  * @param {Date} date - A date to check the validity of
  */
-export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
+export const isValidDate = (date?: Date) => Boolean(date && !isNaN(date as any));

package/src/helpers/util.ts

@@ -522,3 +522,25 @@ export const clearTimeouts = (timeoutRefs: React.RefObject<any>[]) => {
     }
   });
 };
+
+/**
+ * Helper function to get the language direction of a given element, useful for figuring out if left-to-right
+ * or right-to-left specific logic should be applied.
+ *
+ * @param {HTMLElement} targetElement  - Element the helper will get the language direction of
+ * @param {'ltr' | 'rtl'} defaultDirection - Language direction to assume if one can't be determined, defaults to 'ltr'
+ * @returns {'ltr' | 'rtl'} - The language direction of the target element
+ */
+export const getLanguageDirection = (targetElement: HTMLElement, defaultDirection: 'ltr' | 'rtl' = 'ltr') => {
+  if (!targetElement) {
+    return defaultDirection;
+  }
+
+  const computedDirection = getComputedStyle(targetElement).getPropertyValue('direction');
+
+  if (['ltr', 'rtl'].includes(computedDirection)) {
+    return computedDirection as 'ltr' | 'rtl';
+  }
+
+  return defaultDirection;
+};

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './demos';
 export * from './layouts';
 export * from './helpers';
 export { BaseSizes, DeviceSizes } from './styles/sizes';

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx

@@ -23,7 +23,7 @@ describe('Bullseye', () => {
   test('allows passing in a React Component as the component', () => {
     const Component: React.FunctionComponent = () => <div>Some text</div>;
 
-    render(<Bullseye component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<Bullseye component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('Some text')).toBeInTheDocument();
   });
 });

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { Flex } from '../Flex';
 import { FlexItem } from '../FlexItem';
+import layout from '@patternfly/react-styles/css/layouts/Flex/flex';
 
 describe('Flex', () => {
   test('Simple flex with single item', () => {
@@ -134,7 +135,7 @@ describe('Flex', () => {
             </Flex>
           );
 
-          const className = screen.getByTestId('test-id').className.replace('pf-v5-l-flex', '').trim();
+          const className = screen.getByTestId('test-id').className.replace(layout.flex, '').trim();
           expect(className).not.toBe("''");
           expect(className).not.toBe('');
         })

package/src/layouts/Gallery/Gallery.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/layouts/Gallery/gallery';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMax from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_max';
 
 export interface GalleryProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the Gallery layout */
@@ -45,18 +47,16 @@ export const Gallery: React.FunctionComponent<GalleryProps> = ({
   if (minWidths) {
     Object.entries(minWidths || {}).map(
       ([breakpoint, value]) =>
-        (minWidthStyles[
-          `--pf-v5-l-gallery--GridTemplateColumns--min${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`
-        ] = value)
+        (minWidthStyles[`${cssGridTemplateColumnsMin.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] =
+          value)
     );
   }
   const maxWidthStyles: any = {};
   if (maxWidths) {
     Object.entries(maxWidths || {}).map(
       ([breakpoint, value]) =>
-        (maxWidthStyles[
-          `--pf-v5-l-gallery--GridTemplateColumns--max${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`
-        ] = value)
+        (maxWidthStyles[`${cssGridTemplateColumnsMax.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] =
+          value)
     );
   }
   const widthStyles = { ...minWidthStyles, ...maxWidthStyles };

package/src/layouts/Grid/__tests__/GridItem.test.tsx

@@ -18,7 +18,7 @@ test('adds row class', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-Object.keys(DeviceSizes).forEach(size => {
+Object.keys(DeviceSizes).forEach((size) => {
   test(`adds ${size} span class`, () => {
     const props = { [size]: 4 };
     const { asFragment } = render(<GridItem {...props} />);

package/src/components/ClipboardCopy/__tests__/Generated/ClipboardCopy.test.tsx

@@ -1,40 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { ClipboardCopy } from '../../ClipboardCopy';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('ClipboardCopy should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <ClipboardCopy
-      className={'string'}
-      hoverTip={"'Copy to clipboard'"}
-      clickTip={"'Successfully copied to clipboard!'"}
-      textAriaLabel={"'Copyable input'"}
-      toggleAriaLabel={"'Show content'"}
-      isReadOnly={false}
-      isExpanded={false}
-      isCode={false}
-      variant={'inline'}
-      position={'auto'}
-      maxWidth={"'150px'"}
-      exitDelay={1600}
-      entryDelay={100}
-      onCopy={(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
-        const clipboard = event.currentTarget.parentElement;
-        const el = document.createElement('input');
-        el.value = text.toString();
-        clipboard.appendChild(el);
-        el.select();
-        document.execCommand('copy');
-        clipboard.removeChild(el);
-      }}
-      onChange={(): any => undefined}
-      children={<div>ReactNode</div>}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-clipboard-copy string"
-    data-ouia-component-type="PF5/ClipboardCopy"
-    data-ouia-safe="true"
-  >
-    <div
-      class="pf-v5-c-clipboard-copy__group"
-    >
-      <span
-        class="pf-v5-c-form-control"
-      >
-        <input
-          aria-invalid="false"
-          aria-label="'Copyable input'"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF5/TextInput"
-          data-ouia-safe="true"
-          id="text-input-0"
-          type="text"
-          value="[object Object]"
-        />
-      </span>
-      <button
-        aria-disabled="false"
-        aria-label="'Copy to clipboard'"
-        aria-labelledby="copy-button-0 text-input-0"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="copy-button-0"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
-        >
-          <path
-            d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;