@patternfly/react-core 5.2.0-prerelease.15 → 5.2.0-prerelease.17

package/src/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ChipGroup chip group default 1`] = `
+exports[`chip group renders to match snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Chip group category"
@@ -20,321 +20,10 @@ exports[`ChipGroup chip group default 1`] = `
         <li
           class="pf-v5-c-chip-group__list-item"
         >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-1"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-1"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="close"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-1"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
-                >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
+          chips
         </li>
       </ul>
     </div>
   </div>
 </DocumentFragment>
 `;
-
-exports[`ChipGroup chip group with category 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-2"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-2"
-      >
-        category
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-2"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-2"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-3"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="close"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-3"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
-                >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ChipGroup chip group with category and tooltip 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-12"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-12"
-      >
-        A very long category name
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-12"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-9"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-13"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                aria-labelledby="remove_pf-random-id-13 pf-random-id-13"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="close"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-13"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
-                >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ChipGroup chip group with closable category 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-4"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-4"
-      >
-        category
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-4"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-3"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-5"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="close"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-5"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
-                >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div
-      class="pf-v5-c-chip-group__close"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="Close chip group"
-        aria-labelledby="remove_group_pf-random-id-4 pf-random-id-4"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="Close chip group"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_group_pf-random-id-4"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 512 512"
-          width="1em"
-        >
-          <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;

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/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/Menu/Menu.tsx

@@ -311,7 +311,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             noHorizontalArrowHandling={
               document.activeElement &&
               (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-                document.activeElement.classList.contains(dropdownStyles.dropdownToggle))
+                document.activeElement.classList.contains(dropdownStyles.dropdownToggle) ||
+                document.activeElement.tagName === 'INPUT')
             }
             noEnterHandling
             noSpaceHandling

package/src/components/Menu/MenuContainer.tsx

@@ -14,6 +14,8 @@ export interface MenuPopperProps {
   maxWidth?: string | 'trigger';
   /** Enable to flip the popper when it reaches the boundary */
   enableFlip?: boolean;
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 export interface MenuContainerProps {
   /** Menu to be rendered */

package/src/components/Nav/NavList.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { isElementInView } from '../../helpers/util';
+import { getLanguageDirection, isElementInView } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -112,7 +112,7 @@ class NavList extends React.Component<NavListProps> {
 
   componentDidMount() {
     this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
-    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.navList.current);
     this.handleScrollButtons();
   }
 
@@ -121,7 +121,7 @@ class NavList extends React.Component<NavListProps> {
   }
 
   componentDidUpdate() {
-    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.navList.current);
   }
 
   render() {

package/src/components/Select/Select.tsx

@@ -25,6 +25,8 @@ export interface SelectPopperProps {
    * appendTo={document.getElementById('target')}
    */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface SelectToggleProps {

package/src/components/Slider/Slider.tsx

@@ -8,6 +8,7 @@ import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 import cssSliderValue from '@patternfly/react-tokens/dist/esm/c_slider_value';
 import cssFormControlWidthChars from '@patternfly/react-tokens/dist/esm/c_slider__value_c_form_control_width_chars';
+import { getLanguageDirection } from '../../helpers/util';
 
 /** Properties for creating custom steps in a slider. These properties should be passed in as
  * an object within an array to the slider component's customSteps property.
@@ -125,7 +126,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   let isRTL: boolean;
 
   React.useEffect(() => {
-    isRTL = window.getComputedStyle(sliderRailRef.current).getPropertyValue('direction') === 'rtl';
+    isRTL = getLanguageDirection(sliderRailRef.current) === 'rtl';
   });
 
   React.useEffect(() => {

package/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helpers/util';
+import { getUniqueId, isElementInView, formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
@@ -333,7 +333,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       if (canUseDOM) {
         window.addEventListener('resize', this.handleScrollButtons, false);
       }
-      this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
+      this.direction = getLanguageDirection(this.tabList.current);
       // call the handle resize function to check if scroll buttons should be shown
       this.handleScrollButtons();
     }
@@ -381,7 +381,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       this.setState({ showScrollButtons: false });
     }
 
-    this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.tabList.current);
   }
 
   render() {

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);
@@ -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

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/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;
+};