@patternfly/react-core 5.4.0-prerelease.24 → 5.4.0-prerelease.26

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.0-prerelease.24",
+  "version": "5.4.0-prerelease.26",
   "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,15 +46,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.4.0-prerelease.9",
-    "@patternfly/react-styles": "^5.4.0-prerelease.10",
-    "@patternfly/react-tokens": "^5.4.0-prerelease.9",
+    "@patternfly/react-icons": "^5.4.0-prerelease.10",
+    "@patternfly/react-styles": "^5.4.0-prerelease.11",
+    "@patternfly/react-tokens": "^5.4.0-prerelease.10",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.4.0-prerelease.7",
+    "@patternfly/patternfly": "5.4.0-prerelease.8",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
   },
@@ -62,5 +62,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "7d2ad5ceaf08fcfda0a3a6eb0222f6f28013ef22"
+  "gitHead": "d3d18bd882ec62e99f62b5c182a6b942ef110f54"
 }

package/scripts/copyStyles.js

@@ -32,10 +32,10 @@ for (const [targetCss, baseCss] of Object.entries(baseCssFiles)) {
   const ast = parseCSS(css);
 
   // Core provides font awesome fonts and utlities. React does not use these
-  ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => {
+  ast.stylesheet.rules = ast.stylesheet.rules.filter((rule) => {
     switch (rule.type) {
       case 'rule':
-        return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel));
+        return !rule.selectors.some((sel) => unusedSelectorRegEx.test(sel));
       case 'keyframes':
         return !unusedKeyFramesRegEx.test(rule.name);
       case 'charset':
@@ -43,7 +43,7 @@ for (const [targetCss, baseCss] of Object.entries(baseCssFiles)) {
         return false;
       case 'font-face':
         // eslint-disable-next-line no-case-declarations
-        const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family');
+        const fontFamilyDecl = rule.declarations.find((decl) => decl.property === 'font-family');
         return !unusedFontFamilyRegEx.test(fontFamilyDecl.value);
       default:
         return true;

package/src/components/DragDrop/Draggable.tsx

@@ -117,7 +117,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       index
     };
     const dest =
-      hoveringDroppableId !== null && hoveringIndex !== null
+      hoveringDroppableId !== null
         ? {
             droppableId: hoveringDroppableId,
             index: hoveringIndex

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
+import { DragDrop, Draggable, Droppable, Flex } from '@patternfly/react-core';
 
 interface ItemType {
   id: string;
@@ -85,19 +85,19 @@ export const DragDropMultipleLists: React.FunctionComponent = () => {
 
   return (
     <DragDrop onDrop={onDrop}>
-      <Split hasGutter>
+      <Flex alignItems={{ default: 'alignItemsStretch' }} flexWrap={{ default: 'nowrap' }}>
         {Object.entries(items).map(([key, subitems]) => (
-          <SplitItem key={key} style={{ flex: 1 }}>
-            <Droppable zone="multizone" droppableId={key}>
+          <Flex key={key} fullWidth={{ default: 'fullWidth' }} alignItems={{ default: 'alignItemsStretch' }}>
+            <Droppable zone="multizone" droppableId={key} style={{ flexGrow: '1' }}>
               {(subitems as ItemType[]).map(({ id, content }) => (
                 <Draggable key={id} style={{ padding: '8px' }}>
                   {content}
                 </Draggable>
               ))}
             </Droppable>
-          </SplitItem>
+          </Flex>
         ))}
-      </Split>
+      </Flex>
     </DragDrop>
   );
 };

package/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx

@@ -3,31 +3,17 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { UserIcon } from '@patternfly/react-icons';
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
 import { Spinner } from '../../../Spinner/Spinner';
 
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <EmptyStateIcon
-      color={'string'}
-      title={'string'}
-      className={"''"}
-      icon={UserIcon}
-    />
-  );
+  const { asFragment } = render(<EmptyStateIcon color={'string'} title={'string'} className={"''"} icon={UserIcon} />);
   expect(asFragment()).toMatchSnapshot();
 });
 
 it('EmptyStateIcon should match snapshot for variant container', () => {
-  const { asFragment } = render(
-    <EmptyStateIcon
-      color={'string'}
-      title={'string'}
-      className={"''"}
-      icon={Spinner}
-    />
-  );
+  const { asFragment } = render(<EmptyStateIcon color={'string'} title={'string'} className={"''"} icon={Spinner} />);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/MenuToggle/MenuToggle.tsx

@@ -201,13 +201,12 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
         >
           {splitButtonOptions?.items}
           <button
-            className={css(styles.menuToggleButton)}
+            className={css(styles.menuToggleButton, children && styles.modifiers.text)}
             type="button"
             aria-expanded={isExpanded}
             aria-label={ariaLabel}
             disabled={isDisabled}
             onClick={onClick}
-            {...(children && { style: { display: 'flex', paddingLeft: 'var(--pf-v5-global--spacer--sm)' } })}
             {...otherProps}
             {...ouiaProps}
           >

package/src/components/OverflowMenu/__tests__/Generated/OverflowMenuDropdownItem.test.tsx

@@ -6,9 +6,7 @@ import { OverflowMenuDropdownItem } from '../../OverflowMenuDropdownItem';
 
 describe('OverflowMenuDropdownItem', () => {
   it('should match snapshot', () => {
-    const { asFragment } = render(
-        <OverflowMenuDropdownItem itemId="id" children={'any'} isShared={false} />
-    );
+    const { asFragment } = render(<OverflowMenuDropdownItem itemId="id" children={'any'} isShared={false} />);
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Pagination/Pagination.tsx

@@ -169,6 +169,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** @beta The container to append the pagination options menu to. */
+  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
@@ -229,6 +231,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ouiaSafe = true,
   usePageInsets,
   inset,
+  menuAppendTo,
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
@@ -337,6 +340,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
           containerRef={containerRef}
+          appendTo={menuAppendTo}
         />
       )}
       <Navigation

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -52,7 +52,10 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  /** React ref for the container to append the options menu to. This is a static ref provided by the main pagination component. */
   containerRef?: React.RefObject<HTMLDivElement>;
+  /** @beta The container to append the pagination options menu to. Overrides the containerRef prop. */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -76,7 +79,8 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   itemsTitle = '',
   toggleTemplate,
   onPerPageSelect = () => null as any,
-  containerRef
+  containerRef,
+  appendTo
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
@@ -208,6 +212,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     </Menu>
   );
 
+  const containerToAppendTo = appendTo ?? (containerRef?.current || undefined);
   return (
     <Popper
       trigger={toggle}
@@ -216,7 +221,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
       popperRef={menuRef}
       isVisible={isOpen}
       direction={dropDirection}
-      appendTo={containerRef?.current || undefined}
+      appendTo={containerToAppendTo}
       minWidth={minWidth !== undefined ? minWidth : 'revert'}
     />
   );

package/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx

@@ -29,8 +29,8 @@ it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
         <React.Fragment>
           <b>
             {firstIndex} - {lastIndex}
-          </b>Custom toggle template
-          of<b>{itemCount}</b> {itemsTitle}
+          </b>
+          Custom toggle template of<b>{itemCount}</b> {itemsTitle}
         </React.Fragment>
       )}
       onPerPageSelect={() => null as any}