@patternfly/react-core 5.1.1-prerelease.17 → 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.16","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.16","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.16","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.17",
+  "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": "026096f9f505bb31b24bb25b551ec81a743ef1fa"
+  "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/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/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(