@patternfly/react-core 5.1.1-prerelease.17 → 5.1.1-prerelease.19

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.18","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.18","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.18","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.17",
+  "version": "5.1.1-prerelease.19",
   "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",
@@ -45,15 +45,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.1.1-prerelease.6",
-    "@patternfly/react-styles": "^5.1.1-prerelease.6",
-    "@patternfly/react-tokens": "^5.1.1-prerelease.6",
+    "@patternfly/react-icons": "^5.1.1-prerelease.7",
+    "@patternfly/react-styles": "^5.1.1-prerelease.7",
+    "@patternfly/react-tokens": "^5.1.1-prerelease.7",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0-prerelease.28",
+    "@patternfly/patternfly": "5.1.0-prerelease.32",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "026096f9f505bb31b24bb25b551ec81a743ef1fa"
+  "gitHead": "262e474df57437fead3a7c4e995a96c68eb8f9ef"
 }

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

@@ -63,10 +63,14 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   isVertical?: boolean;
   /** Disables border bottom tab styling on tabs. Defaults to false. To remove the bottom border, set this prop to true. */
   hasNoBorderBottom?: boolean;
-  /** Aria-label for the left scroll button */
+  /** @deprecated Please use backScrollAriaLabel. Aria-label for the left scroll button */
   leftScrollAriaLabel?: string;
-  /** Aria-label for the right scroll button */
+  /** @deprecated Please use forwardScrollAriaLabel. Aria-label for the right scroll button */
   rightScrollAriaLabel?: string;
+  /** Aria-label for the back scroll button */
+  backScrollAriaLabel?: string;
+  /** Aria-label for the forward scroll button */
+  forwardScrollAriaLabel?: string;
   /** Determines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region */
   component?: 'div' | 'nav';
   /** Provides an accessible label for the tabs. Labels should be unique for each set of tabs that are present on a page. When component is set to nav, this prop should be defined to differentiate the tabs from other navigation regions on the page. */
@@ -127,8 +131,8 @@ interface TabsState {
    * shown and rendering must be stopped after they stop being shown to preserve CSS transitions.
    */
   renderScrollButtons: boolean;
-  disableLeftScrollButton: boolean;
-  disableRightScrollButton: boolean;
+  disableBackScrollButton: boolean;
+  disableForwardScrollButton: boolean;
   shownKeys: (string | number)[];
   uncontrolledActiveKey: number | string;
   uncontrolledIsExpandedLocal: boolean;
@@ -140,14 +144,15 @@ class Tabs extends React.Component<TabsProps, TabsState> {
   static displayName = 'Tabs';
   tabList = React.createRef<HTMLUListElement>();
   leftScrollButtonRef = React.createRef<HTMLButtonElement>();
+  private direction = 'ltr';
   constructor(props: TabsProps) {
     super(props);
     this.state = {
       enableScrollButtons: false,
       showScrollButtons: false,
       renderScrollButtons: false,
-      disableLeftScrollButton: true,
-      disableRightScrollButton: true,
+      disableBackScrollButton: true,
+      disableForwardScrollButton: true,
       shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case
       uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
@@ -177,7 +182,9 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     isBox: false,
     hasNoBorderBottom: false,
     leftScrollAriaLabel: 'Scroll left',
+    backScrollAriaLabel: 'Scroll back',
     rightScrollAriaLabel: 'Scroll right',
+    forwardScrollAriaLabel: 'Scroll forward',
     component: TabsComponent.div,
     mountOnEnter: false,
     unmountOnExit: false,
@@ -232,8 +239,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     clearTimeout(this.scrollTimeout);
     this.scrollTimeout = setTimeout(() => {
       const container = this.tabList.current;
-      let disableLeftScrollButton = true;
-      let disableRightScrollButton = true;
+      let disableBackScrollButton = true;
+      let disableForwardScrollButton = true;
       let enableScrollButtons = false;
       let overflowingTabCount = 0;
 
@@ -246,8 +253,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
 
         enableScrollButtons = overflowOnLeft || overflowOnRight;
 
-        disableLeftScrollButton = !overflowOnLeft;
-        disableRightScrollButton = !overflowOnRight;
+        disableBackScrollButton = !overflowOnLeft;
+        disableForwardScrollButton = !overflowOnRight;
       }
 
       if (isOverflowHorizontal) {
@@ -256,14 +263,14 @@ class Tabs extends React.Component<TabsProps, TabsState> {
 
       this.setState({
         enableScrollButtons,
-        disableLeftScrollButton,
-        disableRightScrollButton,
+        disableBackScrollButton,
+        disableForwardScrollButton,
         overflowingTabCount
       });
     }, 100);
   };
 
-  scrollLeft = () => {
+  scrollBack = () => {
     // find first Element that is fully in view on the left, then scroll to the element before it
     if (this.tabList.current) {
       const container = this.tabList.current;
@@ -278,12 +285,18 @@ class Tabs extends React.Component<TabsProps, TabsState> {
         }
       }
       if (lastElementOutOfView) {
-        container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls left to go back
+          container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls right to go back
+          container.scrollLeft += lastElementOutOfView.scrollWidth;
+        }
       }
     }
   };
 
-  scrollRight = () => {
+  scrollForward = () => {
     // find last Element that is fully in view on the right, then scroll to the element after it
     if (this.tabList.current) {
       const container = this.tabList.current as any;
@@ -297,7 +310,13 @@ class Tabs extends React.Component<TabsProps, TabsState> {
         }
       }
       if (firstElementOutOfView) {
-        container.scrollLeft += firstElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls right to go forward
+          container.scrollLeft += firstElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls left to go forward
+          container.scrollLeft -= firstElementOutOfView.scrollWidth;
+        }
       }
     }
   };
@@ -314,6 +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');
       // call the handle resize function to check if scroll buttons should be shown
       this.handleScrollButtons();
     }
@@ -360,6 +380,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     } else if (prevState.enableScrollButtons && !enableScrollButtons) {
       this.setState({ showScrollButtons: false });
     }
+
+    this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction');
   }
 
   render() {
@@ -376,6 +398,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       hasNoBorderBottom,
       leftScrollAriaLabel,
       rightScrollAriaLabel,
+      backScrollAriaLabel,
+      forwardScrollAriaLabel,
       'aria-label': ariaLabel,
       component,
       ouiaId,
@@ -400,8 +424,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     const {
       showScrollButtons,
       renderScrollButtons,
-      disableLeftScrollButton,
-      disableRightScrollButton,
+      disableBackScrollButton,
+      disableForwardScrollButton,
       shownKeys,
       uncontrolledActiveKey,
       uncontrolledIsExpandedLocal,
@@ -497,10 +521,10 @@ class Tabs extends React.Component<TabsProps, TabsState> {
             <button
               type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-              aria-label={leftScrollAriaLabel}
-              onClick={this.scrollLeft}
-              disabled={disableLeftScrollButton}
-              aria-hidden={disableLeftScrollButton}
+              aria-label={backScrollAriaLabel || leftScrollAriaLabel}
+              onClick={this.scrollBack}
+              disabled={disableBackScrollButton}
+              aria-hidden={disableBackScrollButton}
               ref={this.leftScrollButtonRef}
             >
               <AngleLeftIcon />
@@ -514,10 +538,10 @@ class Tabs extends React.Component<TabsProps, TabsState> {
             <button
               type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-              aria-label={rightScrollAriaLabel}
-              onClick={this.scrollRight}
-              disabled={disableRightScrollButton}
-              aria-hidden={disableRightScrollButton}
+              aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
+              onClick={this.scrollForward}
+              disabled={disableForwardScrollButton}
+              aria-hidden={disableForwardScrollButton}
             >
               <AngleRightIcon />
             </button>

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(