@patternfly/react-core 4.258.1 → 4.258.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.258.1",
+  "version": "4.258.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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "4c1b8219539ce61aa45bfefc935af732129404a5"
+  "gitHead": "5d975fb9b5ae712c8de40a931b913ee1f9ecfeb7"
 }

package/src/components/ContextSelector/ContextSelector.tsx

@@ -95,7 +95,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     footer: null as React.ReactNode,
     isPlain: false,
     isText: false,
-    isFlipEnabled: false,
+    isFlipEnabled: true,
     removeFindDomNode: false
   };
   constructor(props: ContextSelectorProps) {
@@ -145,15 +145,10 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     const uniqueId = id || getUniqueId();
     const toggleId = `pf-context-selector-toggle-id-${uniqueId}`;
     const screenReaderLabelId = `pf-context-selector-label-id-${uniqueId}`;
+    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
 
     const menuContainer = (
-      <div
-        className={css(styles.contextSelectorMenu)}
-        // This removes the `position: absolute`styling from the `.pf-c-context-selector__menu`
-        // allowing the menu to flip correctly
-        {...(isFlipEnabled && { style: { position: 'revert' } })}
-        id={uniqueId}
-      >
+      <div className={css(styles.contextSelectorMenu, isStatic && styles.modifiers.static)} id={uniqueId}>
         {isOpen && (
           <FocusTrap
             active={!disableFocusTrap}

package/src/components/Dropdown/Dropdown.tsx

@@ -77,7 +77,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   alignments,
   contextProps,
   menuAppendTo = 'inline',
-  isFlipEnabled = false,
+  isFlipEnabled = true,
   removeFindDomNode = false,
   ...props
 }: DropdownProps) => (

package/src/components/Dropdown/DropdownWithContext.tsx

@@ -30,7 +30,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
     onSelect: (): void => undefined,
     autoFocus: true,
     menuAppendTo: 'inline',
-    isFlipEnabled: false
+    isFlipEnabled: true
   };
 
   constructor(props: DropdownProps & OUIAProps) {
@@ -93,15 +93,14 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       renderedContent = React.Children.toArray(children);
     }
     const openedOnEnter = this.openedOnEnter;
+    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
     return (
       <DropdownContext.Consumer>
         {({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
           const BaseComponent = baseComponent as any;
           const menuContainer = (
             <DropdownMenu
-              // This removes the `position: absolute` styling from the `.pf-c-dropdown__menu`
-              // allowing the menu to flip correctly
-              {...(isFlipEnabled && { style: { position: 'revert', minWidth: 'min-content' } })}
+              className={css(isStatic && styles.modifiers.static)}
               setMenuComponentRef={this.setMenuComponentRef}
               component={component}
               isOpen={isOpen}

package/src/components/Pagination/OptionsToggle.tsx

@@ -44,7 +44,6 @@ export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
   widgetId?: string;
 }
 
-let toggleId = 0;
 export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   itemsTitle = 'items',
   optionsToggle,
@@ -95,7 +94,7 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
         onToggle={onToggle}
         isDisabled={isDisabled || (itemCount && itemCount <= 0)}
         isOpen={isOpen}
-        id={`${widgetId}-toggle-${toggleId++}`}
+        {...(widgetId && { id: `${widgetId}-toggle` })}
         className={isDiv ? styles.optionsMenuToggleButton : toggleClasses}
         parentRef={parentRef}
         aria-haspopup="listbox"

package/src/components/Pagination/Pagination.tsx

@@ -177,7 +177,6 @@ const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
   }
 };
 
-let paginationId = 0;
 export class Pagination extends React.Component<PaginationProps, { ouiaStateId: string }> {
   static displayName = 'Pagination';
   paginationRef = React.createRef<HTMLDivElement>();
@@ -211,7 +210,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
     itemsStart: null,
     itemsEnd: null,
     perPageOptions: defaultPerPageOptions,
-    widgetId: 'pagination-options-menu',
+    widgetId: 'options-menu',
     onSetPage: () => undefined,
     onPerPageSelect: () => undefined,
     onFirstClick: () => undefined,
@@ -319,7 +318,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
           isSticky && styles.modifiers.sticky,
           className
         )}
-        id={`${widgetId}-${paginationId++}`}
+        {...(widgetId && { id: `${widgetId}-${variant}-pagination` })}
         {...getOUIAProps(Pagination.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         {...props}
       >
@@ -356,7 +355,7 @@ export class Pagination extends React.Component<PaginationProps, { ouiaStateId:
           lastPage={lastPage}
           onPerPageSelect={onPerPageSelect}
           dropDirection={dropDirection}
-          widgetId={widgetId}
+          widgetId={`${widgetId}-${variant}`}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
           perPageComponent={perPageComponent}

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -161,7 +161,7 @@ export class PaginationOptionsMenu extends React.Component<PaginationOptionsMenu
     return (
       <DropdownContext.Provider
         value={{
-          id: widgetId,
+          ...(widgetId && { id: widgetId }),
           onSelect: this.onSelect,
           toggleIndicatorClass:
             perPageComponent === 'div' ? styles.optionsMenuToggleButtonIcon : styles.optionsMenuToggleIcon,

package/src/components/Pagination/__tests__/Generated/__snapshots__/OptionsToggle.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`OptionsToggle should match snapshot (auto-generated) 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
-      id="''-toggle-0"
+      id="''-toggle"
       type="button"
     >
       <span

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

@@ -112,6 +112,13 @@ describe('Pagination', () => {
       const { asFragment } = render(<Pagination perPageComponent="button" itemCount={20} />);
       expect(asFragment()).toMatchSnapshot();
     });
+
+    test('should not update generated options menu id on rerenders', () => {
+      const { rerender } = render(<Pagination titles={{optionsToggle: "test label"}} perPageComponent="button" itemCount={20}/>);
+      const id = screen.getByLabelText("test label").getAttribute("id");
+      rerender(<Pagination titles={{optionsToggle: "test label"}}  perPageComponent="button" itemCount={20} />);
+      expect(screen.getByLabelText("test label")).toHaveAttribute("id", id);
+    });
   });
 
   describe('API', () => {

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

@@ -7,7 +7,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-12"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-13"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -36,7 +36,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-12"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -206,7 +206,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-8"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-9"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -249,7 +249,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-9"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -419,7 +419,7 @@ exports[`Pagination component render custom start end 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-10"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-11"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -462,7 +462,7 @@ exports[`Pagination component render custom start end 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-10"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -630,7 +630,7 @@ exports[`Pagination component render empty per page options 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-9"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-10"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -801,7 +801,7 @@ exports[`Pagination component render last page 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-7"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-8"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -844,7 +844,7 @@ exports[`Pagination component render last page 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-8"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -1014,7 +1014,7 @@ exports[`Pagination component render limited number of pages 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-5"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-6"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1057,7 +1057,7 @@ exports[`Pagination component render limited number of pages 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-6"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -1230,7 +1230,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-1"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-1"
+    id="options-menu-bottom-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1261,7 +1261,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-1"
+          id="options-menu-bottom-toggle"
           type="button"
         >
           <span
@@ -1431,7 +1431,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-2"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-4"
+    id="options-menu-bottom-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1462,7 +1462,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
           data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-4"
+          id="options-menu-bottom-toggle"
           type="button"
         >
           <span
@@ -1632,7 +1632,7 @@ exports[`Pagination component render should render correctly button variant 1`]
     data-ouia-component-id="OUIA-Generated-Pagination-top-17"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-18"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1660,7 +1660,7 @@ exports[`Pagination component render should render correctly button variant 1`]
         data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
         data-ouia-component-type="PF4/DropdownToggle"
         data-ouia-safe="true"
-        id="pagination-options-menu-toggle-17"
+        id="options-menu-top-toggle"
         type="button"
       >
         <span
@@ -1841,7 +1841,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-2"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-2"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -1884,7 +1884,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-2"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -1980,7 +1980,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-4"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-5"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2024,7 +2024,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
           disabled=""
-          id="pagination-options-menu-toggle-5"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -2197,7 +2197,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-3"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-3"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2240,7 +2240,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-3"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -2410,7 +2410,7 @@ exports[`Pagination component render should render correctly top 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-1"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-0"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2453,7 +2453,7 @@ exports[`Pagination component render should render correctly top 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-0"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -2623,7 +2623,7 @@ exports[`Pagination component render titles 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-11"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-12"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2666,7 +2666,7 @@ exports[`Pagination component render titles 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-11"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -2836,7 +2836,7 @@ exports[`Pagination component render up drop direction 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-13"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-14"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -2879,7 +2879,7 @@ exports[`Pagination component render up drop direction 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-13"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span
@@ -3049,7 +3049,7 @@ exports[`Pagination component render zero results 1`] = `
     data-ouia-component-id="OUIA-Generated-Pagination-top-6"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-7"
+    id="options-menu-top-pagination"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -3092,7 +3092,7 @@ exports[`Pagination component render zero results 1`] = `
           data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-7"
+          id="options-menu-top-toggle"
           type="button"
         >
           <span

package/src/components/Pagination/examples/PaginationBottom.tsx

@@ -22,7 +22,7 @@ export const PaginationBottom: React.FunctionComponent = () => {
     <Pagination
       perPageComponent="button"
       itemCount={333}
-      widgetId="pagination-options-menu-bottom"
+      widgetId="bottom-example"
       perPage={perPage}
       page={page}
       variant={PaginationVariant.bottom}

package/src/components/Pagination/examples/PaginationCompact.tsx

@@ -25,7 +25,7 @@ export const PaginationCompact: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="compact-example"
       onPerPageSelect={onPerPageSelect}
       isCompact
     />

package/src/components/Pagination/examples/PaginationDisabled.tsx

@@ -25,7 +25,7 @@ export const PaginationDisabled: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="disabled-example"
       onPerPageSelect={onPerPageSelect}
       isDisabled
     />

package/src/components/Pagination/examples/PaginationIndeterminate.tsx

@@ -30,7 +30,7 @@ export const PaginationIndeterminate: React.FunctionComponent = () => {
           <b>many</b>
         </React.Fragment>
       )}
-      widgetId="pagination-indeterminate"
+      widgetId="indeterminate-example"
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}

package/src/components/Pagination/examples/PaginationNoItems.tsx

@@ -25,7 +25,7 @@ export const PaginationNoItems: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="no-items-example"
       onPerPageSelect={onPerPageSelect}
     />
   );

package/src/components/Pagination/examples/PaginationOnePage.tsx

@@ -25,7 +25,7 @@ export const PaginationOnePage: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="one-page-example"
       onPerPageSelect={onPerPageSelect}
     />
   );

package/src/components/Pagination/examples/PaginationSticky.tsx

@@ -33,7 +33,7 @@ export const PaginationSticky: React.FunctionComponent = () => {
             perPage={perPage}
             page={page}
             onSetPage={onSetPage}
-            widgetId="pagination-options-menu-top"
+            widgetId="sticky-example"
             onPerPageSelect={onPerPageSelect}
             isSticky
           >

package/src/components/Pagination/examples/PaginationTop.tsx

@@ -25,7 +25,7 @@ export const PaginationTop: React.FunctionComponent = () => {
       perPage={perPage}
       page={page}
       onSetPage={onSetPage}
-      widgetId="pagination-options-menu-top"
+      widgetId="top-example"
       onPerPageSelect={onPerPageSelect}
     />
   );

package/src/components/Select/Select.tsx

@@ -266,7 +266,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isInputFilterPersisted: false,
     isCreateSelectOptionObject: false,
     shouldResetOnSelect: true,
-    isFlipEnabled: false,
+    isFlipEnabled: true,
     removeFindDomNode: false
   };
 
@@ -1258,11 +1258,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       }
     }
 
+    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
     const innerMenu = (
       <SelectMenu
-        // This removes the `position: absolute` styling from the `.pf-c-select__menu`
-        // allowing the menu to flip correctly
-        {...(isFlipEnabled && { style: { position: 'revert' } })}
+        className={css(isStatic && styles.modifiers.static)}
         {...props}
         isGrouped={isGrouped}
         selected={selections}