@patternfly/react-core 5.2.0-prerelease.16 → 5.2.0-prerelease.18

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