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

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.1.1-prerelease.15","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.1.1-prerelease.17","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.1.1-prerelease.15","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.1.1-prerelease.17","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.1.1-prerelease.15","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.1.1-prerelease.17","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.16",
+  "version": "5.1.1-prerelease.18",
   "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": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "bf516c9a45a29344c825a4d0425726e27c9e565b"
+  "gitHead": "2fa883df95ae47f12e4d5f90b6e184cbeca868a7"
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -8,7 +8,7 @@ export interface DropdownPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
   /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
@@ -17,6 +17,8 @@ export interface DropdownPopperProps {
   maxWidth?: string | 'trigger';
   /** Enable to flip the popper when it reaches the boundary */
   enableFlip?: boolean;
+  /** The container to append the popper to. Defaults to 'inline'. */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 export interface DropdownToggleProps {

package/src/components/Menu/MenuContainer.tsx

@@ -5,7 +5,7 @@ export interface MenuPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
   /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */

package/src/components/Select/Select.tsx

@@ -8,7 +8,7 @@ export interface SelectPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
   /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */

package/src/components/Slider/Slider.tsx

@@ -46,16 +46,18 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   inputAriaLabel?: string;
   /** Text label that is place after the input field. */
   inputLabel?: string | number;
-  /** Position of the input. */
-  inputPosition?: 'aboveThumb' | 'right';
+  /** Position of the input. Note "right" is deprecated. Use "end" instead*/
+  inputPosition?: 'aboveThumb' | 'right' | 'end';
   /** Value displayed in the input field. */
   inputValue?: number;
   /** Adds disabled styling, and disables the slider and the input component if present. */
   isDisabled?: boolean;
   /** Flag to show value input field. */
   isInputVisible?: boolean;
-  /** Actions placed to the left of the slider. */
+  /** @deprecated Use startActions instead. Actions placed at the start of the slider. */
   leftActions?: React.ReactNode;
+  /** Actions placed at the start of the slider. */
+  startActions?: React.ReactNode;
   /** The maximum permitted value. */
   max?: number;
   /** The minimum permitted value. */
@@ -67,8 +69,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
     inputValue?: number,
     setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>
   ) => void;
-  /** Actions placed to the right of the slider. */
+  /** @deprecated Use endActions instead. Actions placed to the right of the slider. */
   rightActions?: React.ReactNode;
+  /** Actions placed at the end of the slider. */
+  endActions?: React.ReactNode;
   /** Flag to indicate if boundaries should be shown for slider that does not have custom steps. */
   showBoundaries?: boolean;
   /** Flag to indicate if ticks should be shown for slider that does not have custom steps. */
@@ -95,10 +99,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   inputAriaLabel = 'Slider value input',
   thumbAriaLabel = 'Value',
   hasTooltipOverThumb = false,
-  inputPosition = 'right',
+  inputPosition = 'end',
   onChange,
   leftActions,
+  startActions,
   rightActions,
+  endActions,
   step = 1,
   min = 0,
   max = 100,
@@ -114,6 +120,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const [localValue, setValue] = useState(value);
   const [localInputValue, setLocalInputValue] = useState(inputValue);
 
+  let isRTL: boolean;
+
+  React.useEffect(() => {
+    isRTL = window.getComputedStyle(sliderRailRef.current).getPropertyValue('direction') === 'rtl';
+  });
+
   React.useEffect(() => {
     setValue(value);
   }, [value]);
@@ -182,7 +194,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     e.stopPropagation();
     e.preventDefault();
 
-    diff = e.clientX - thumbRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      diff = thumbRef.current.getBoundingClientRect().right - e.clientX;
+    } else {
+      diff = e.clientX - thumbRef.current.getBoundingClientRect().left;
+    }
 
     document.addEventListener('mousemove', callbackThumbMove);
     document.addEventListener('mouseup', callbackThumbUp);
@@ -191,7 +207,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const handleTouchStart = (e: React.TouchEvent) => {
     e.stopPropagation();
 
-    diff = e.touches[0].clientX - thumbRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      diff = thumbRef.current.getBoundingClientRect().right - e.touches[0].clientX;
+    } else {
+      diff = e.touches[0].clientX - thumbRef.current.getBoundingClientRect().left;
+    }
 
     document.addEventListener('touchmove', callbackThumbMove, { passive: false });
     document.addEventListener('touchend', callbackThumbUp);
@@ -216,8 +236,13 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     }
 
     const clientPosition = e.touches && e.touches.length ? e.touches[0].clientX : e.clientX;
+    let newPosition;
 
-    let newPosition = clientPosition - diff - sliderRailRef.current.getBoundingClientRect().left;
+    if (isRTL) {
+      newPosition = sliderRailRef.current.getBoundingClientRect().right - clientPosition - diff;
+    } else {
+      newPosition = clientPosition - diff - sliderRailRef.current.getBoundingClientRect().left;
+    }
 
     const end = sliderRailRef.current.offsetWidth - thumbRef.current.offsetWidth;
 
@@ -288,21 +313,43 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (!areCustomStepsContinuous && customSteps) {
       const stepIndex = customSteps.findIndex((stepObj) => stepObj.value === localValue);
       if (key === 'ArrowRight') {
-        if (stepIndex + 1 < customSteps.length) {
-          {
-            newValue = customSteps[stepIndex + 1].value;
+        if (isRTL) {
+          if (stepIndex - 1 >= 0) {
+            newValue = customSteps[stepIndex - 1].value;
+          }
+        } else {
+          if (stepIndex + 1 < customSteps.length) {
+            {
+              newValue = customSteps[stepIndex + 1].value;
+            }
           }
         }
       } else if (key === 'ArrowLeft') {
-        if (stepIndex - 1 >= 0) {
-          newValue = customSteps[stepIndex - 1].value;
+        if (isRTL) {
+          if (stepIndex + 1 < customSteps.length) {
+            {
+              newValue = customSteps[stepIndex + 1].value;
+            }
+          }
+        } else {
+          if (stepIndex - 1 >= 0) {
+            newValue = customSteps[stepIndex - 1].value;
+          }
         }
       }
     } else {
       if (key === 'ArrowRight') {
-        newValue = localValue + step <= max ? localValue + step : max;
+        if (isRTL) {
+          newValue = localValue - step >= min ? localValue - step : min;
+        } else {
+          newValue = localValue + step <= max ? localValue + step : max;
+        }
       } else if (key === 'ArrowLeft') {
-        newValue = localValue - step >= min ? localValue - step : min;
+        if (isRTL) {
+          newValue = localValue + step <= max ? localValue + step : max;
+        } else {
+          newValue = localValue - step >= min ? localValue - step : min;
+        }
       }
     }
 
@@ -347,8 +394,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     for (let i = min; i <= max; i = i + step) {
       const stepValue = getStepValue(i, min, max);
 
-      // If we boundaries but not ticks just generate the needed steps
-      // so that we don't pullute them DOM with empty divs
+      // If boundaries but not ticks just generate the needed steps
+      // so that we don't pollute them DOM with empty divs
       if (!showTicks && showBoundaries && i !== min && i !== max) {
         continue;
       }
@@ -394,7 +441,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       style={{ ...style, ...inputStyle }}
       {...props}
     >
-      {leftActions && <div className={css(styles.sliderActions)}>{leftActions}</div>}
+      {(leftActions || startActions) && <div className={css(styles.sliderActions)}>{leftActions || startActions}</div>}
       <div className={css(styles.sliderMain)}>
         <div className={css(styles.sliderRail)} ref={sliderRailRef} onClick={!isDisabled ? onSliderRailClick : null}>
           <div className={css(styles.sliderRailTrack)} />
@@ -434,8 +481,10 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
         )}
       </div>
-      {isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
-      {rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}
+      {isInputVisible && (inputPosition === 'right' || inputPosition === 'end') && (
+        <div className={css(styles.sliderValue)}>{displayInput()}</div>
+      )}
+      {(rightActions || endActions) && <div className={css(styles.sliderActions)}>{rightActions || endActions}</div>}
     </div>
   );
 };

package/src/components/Slider/_tests_/Slider.test.tsx

@@ -46,7 +46,7 @@ describe('slider', () => {
 
   test('renders slider with input', () => {
     const { asFragment } = render(
-      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="right" />
+      <Slider value={50} isInputVisible inputValue={50} inputLabel="%" inputPosition="end" />
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -62,8 +62,8 @@ describe('slider', () => {
     const { asFragment } = render(
       <Slider
         value={50}
-        leftActions={<Button variant="plain" aria-label="Minus" />}
-        rightActions={<Button variant="plain" aria-label="Plus" />}
+        startActions={<Button variant="plain" aria-label="Minus" />}
+        endActions={<Button variant="plain" aria-label="Plus" />}
       />
     );
     expect(asFragment()).toMatchSnapshot();

package/src/components/Slider/examples/SliderActions.tsx

@@ -65,12 +65,12 @@ export const SliderActions: React.FunctionComponent = () => {
       <Slider
         value={value1}
         onChange={onChange1}
-        leftActions={
+        startActions={
           <Button variant="plain" aria-label="Minus" onClick={onMinusClick}>
             <MinusIcon />
           </Button>
         }
-        rightActions={
+        endActions={
           <Button variant="plain" aria-label="Plus" onClick={onPlusClick}>
             <PlusIcon />
           </Button>
@@ -85,7 +85,7 @@ export const SliderActions: React.FunctionComponent = () => {
         inputLabel="%"
         isInputVisible
         isDisabled={isDisabled}
-        rightActions={buildAction(isDisabled)}
+        endActions={buildAction(isDisabled)}
       />
     </>
   );

package/src/components/Tabs/examples/Tabs.md

@@ -28,7 +28,7 @@ You can adjust a tab in the following ways:
 - To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`.
 - To add a tooltip to an aria-disabled tab, use the `tooltip` property. 
 
-Most tab variations can either be 'default' or 'boxed': 
+Tabs can be styled as 'default' or 'boxed': 
 
 - Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. 
 - Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
@@ -207,8 +207,6 @@ The tab its content should only be mounted when the tab is visible.
 
 To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`. 
 
-Aria labels may be controlled manually by passing the `closeButtonAriaLabel` property to a `<Tab>` and the `addButtonAriaLabel` property to `<Tabs>`.
-
 ```ts file="./TabsDynamic.tsx"
 ```
 

package/src/components/Timestamp/Timestamp.tsx

@@ -64,6 +64,10 @@ export interface TimestampProps extends React.HTMLProps<HTMLSpanElement> {
    * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
    */
   locale?: string;
+  /** Flag indicating whether the default content should be displayed as a UTC string
+   * instead of a local string.
+   */
+  shouldDisplayUTC?: boolean;
   /** Determines the format of the displayed time in the timestamp and UTC tooltip. Examples:
    * "Full" => 11:25:00 AM Eastern Daylight Time
    * "Long" => 11:25:00 AM EDT
@@ -84,6 +88,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
   displaySuffix = '',
   is12Hour,
   locale,
+  shouldDisplayUTC,
   timeFormat,
   tooltip,
   ...props
@@ -117,7 +122,6 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
     ...formatOptions,
     ...(hasTimeFormat && { timeStyle: timeFormat })
   });
-  const defaultDisplay = `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`;
 
   const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short';
   const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3);
@@ -125,8 +129,13 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
     ...formatOptions,
     ...(hasTimeFormat && { timeStyle: utcTimeFormat })
   });
-  const defaultTooltipContent = `${utcDateString}${tooltip?.suffix ? ' ' + tooltip.suffix : ' UTC'}`;
+  const defaultUTCSuffix = timeFormat === 'full' ? 'Coordinated Universal Time' : 'UTC';
+  const createUTCContent = (customSuffix: string) =>
+    `${utcDateString} ${customSuffix ? customSuffix : defaultUTCSuffix}`;
 
+  const defaultDisplay = shouldDisplayUTC
+    ? createUTCContent(displaySuffix)
+    : `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`;
   const { dateTime, ...propsWithoutDateTime } = props;
 
   const timestamp = (
@@ -143,7 +152,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
 
   return tooltip ? (
     <Tooltip
-      content={tooltip.variant === TimestampTooltipVariant.default ? defaultTooltipContent : tooltip.content}
+      content={tooltip.variant === TimestampTooltipVariant.default ? createUTCContent(tooltip.suffix) : tooltip.content}
       {...tooltip.tooltipProps}
     >
       {timestamp}

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

@@ -55,6 +55,12 @@ test('Renders passed in date with default formatting', () => {
   expect(screen.getByText('1/1/2022, 12:00:00 AM')).toBeInTheDocument();
 });
 
+test('Renders passed in date as UTC when shouldDisplayUTC is true', () => {
+  render(<Timestamp shouldDisplayUTC date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 5:00:00 AM UTC')).toBeInTheDocument();
+});
+
 test('Renders with correct datetime attribute when date is passed in', () => {
   const passedDate = new Date(2022, 0, 1);
   render(<Timestamp date={passedDate} />);

package/src/components/Timestamp/examples/Timestamp.md

@@ -12,7 +12,10 @@ beta: true
 
 By default, a timestamp will display the current date and time based on the current locale if the `date` prop is not passed in.
 
+Passing the `shouldDisplayUTC` property will display the UTC date and time instead of the current or passed in locale.
+
 ```ts file="./TimestampDefault.tsx"
+
 ```
 
 ### Basic formats
@@ -22,6 +25,7 @@ The format of the displayed content can be customized by passing in the `dateFor
 You can also pass in the `displaySuffix` prop to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format.
 
 ```ts file="./TimestampBasicFormats.tsx"
+
 ```
 
 ### Custom format
@@ -29,6 +33,7 @@ You can also pass in the `displaySuffix` prop to display a custom suffix at the
 The format of the displayed content can be further customized by passing in the `customFormat` prop. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be passed in.
 
 ```ts file="./TimestampCustomFormat.tsx"
+
 ```
 
 ### Default tooltip
@@ -38,6 +43,7 @@ To render a tooltip that displays the timestamp content as a UTC time, you can p
 You can customize the suffix of this default tooltip variant by passing in `suffix` to the `tooltip` prop.
 
 ```ts file="./TimestampDefaultTooltip.tsx"
+
 ```
 
 ### Custom content
@@ -47,6 +53,7 @@ To display custom content, such as a relative time or prefacing text, you can pa
 When also rendering a default tooltip with the `tooltip` prop, you can pass in the `dateFormat` and/or `timeFormat` props to customize the tooltip content without affecting the custom timestamp content.
 
 ```ts file="TimestampCustomContent.tsx"
+
 ```
 
 ### Custom tooltip
@@ -54,4 +61,5 @@ When also rendering a default tooltip with the `tooltip` prop, you can pass in t
 By passing in `variant="custom"` and `content` to the `tooltip` prop, you can display custom content within the timestamp's tooltip.
 
 ```ts file="TimestampCustomTooltip.tsx"
+
 ```

package/src/components/Timestamp/examples/TimestampDefault.tsx

@@ -1,4 +1,10 @@
 import React from 'react';
 import { Timestamp } from '@patternfly/react-core';
 
-export const TimestampDefault: React.FunctionComponent = () => <Timestamp />;
+export const TimestampDefault: React.FunctionComponent = () => (
+  <>
+    <Timestamp />
+    <br />
+    <Timestamp shouldDisplayUTC />
+  </>
+);

package/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx

@@ -11,7 +11,7 @@ export const TimestampDefaultTooltip: React.FunctionComponent = () => {
       <br />
       <Timestamp
         date={currentDate}
-        tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
+        tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time (UTC)' }}
       />
     </>
   );

package/src/components/Toolbar/examples/Toolbar.md

@@ -14,12 +14,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 ## Examples
 
-### TEST - remove before merging
-
-```ts file="./Test.tsx"
-
-```
-
 ### Toolbar items
 
 A toolbar can contain multiple toolbar items, like filters and buttons.

package/src/helpers/Popper/Popper.tsx

@@ -45,6 +45,21 @@ 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.
@@ -66,7 +81,7 @@ export interface PopperProps {
   /** popper direction */
   direction?: 'up' | 'down';
   /** popper position */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
   /** Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
@@ -177,7 +192,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   trigger,
   popper,
   direction = 'down',
-  position = 'left',
+  position = 'start',
   placement,
   width,
   minWidth = 'trigger',
@@ -226,6 +241,28 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const refOrTrigger = refElement || triggerElement;
   const showPopper = isVisible || internalIsVisible;
 
+  const triggerParent = ((triggerRef as React.RefObject<any>)?.current || triggerElement)?.parentElement;
+  const languageDirection = getLanguageDirection(triggerParent);
+
+  const internalPosition = React.useMemo<'left' | 'right' | 'center'>(() => {
+    const fixedPositions = { left: 'left', right: 'right', center: 'center' };
+
+    const positionMap = {
+      ltr: {
+        start: 'left',
+        end: 'right',
+        ...fixedPositions
+      },
+      rtl: {
+        start: 'right',
+        end: 'left',
+        ...fixedPositions
+      }
+    };
+
+    return positionMap[languageDirection][position] as 'left' | 'right' | 'center';
+  }, [position, languageDirection]);
+
   const onDocumentClickCallback = React.useCallback(
     (event: MouseEvent) => onDocumentClick(event, refOrTrigger, popperElement),
     [showPopper, triggerElement, refElement, popperElement, onDocumentClick]
@@ -333,15 +370,15 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       return placement;
     }
     let convertedPlacement = direction === 'up' ? 'top' : 'bottom';
-    if (position !== 'center') {
-      convertedPlacement = `${convertedPlacement}-${position === 'right' ? 'end' : 'start'}`;
+    if (internalPosition !== 'center') {
+      convertedPlacement = `${convertedPlacement}-${internalPosition === 'right' ? 'end' : 'start'}`;
     }
     return convertedPlacement as Placement;
   };
-  const getPlacementMemo = React.useMemo(getPlacement, [direction, position, placement]);
+  const getPlacementMemo = React.useMemo(getPlacement, [direction, internalPosition, placement]);
   const getOppositePlacementMemo = React.useMemo(
     () => getOppositePlacement(getPlacement()),
-    [direction, position, placement]
+    [direction, internalPosition, placement]
   );
 
   const widthMods: Modifier<'widthMods', {}> = React.useMemo(