@patternfly/react-core 4.253.0 → 4.254.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.253.0",
+  "version": "4.254.0",
   "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": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "e19bfad93c0e242c2b1416daa3b347d7f3864f2c"
+  "gitHead": "af4d7f84ea9c7397c5ad51b033d9b2247c0ddba3"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -12,13 +12,7 @@ import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 
 export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
-  const clipboard = event.currentTarget.parentElement;
-  const el = document.createElement('textarea');
-  el.value = text.toString();
-  clipboard.appendChild(el);
-  el.select();
-  document.execCommand('copy');
-  clipboard.removeChild(el);
+  navigator.clipboard.writeText(text.toString());
 };
 
 export enum ClipboardCopyVariant {
@@ -77,7 +71,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   exitDelay?: number;
   /** Delay in ms before the tooltip appears. */
   entryDelay?: number;
-  /** Delay in ms before the tooltip message switch to hover tip. */
+  /** @deprecated Delay in ms before the tooltip message switch to hover tip. */
   switchDelay?: number;
   /** A function that is triggered on clicking the copy button. */
   onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
@@ -105,6 +99,14 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       expanded: this.props.isExpanded,
       copied: false
     };
+
+    if (this.props.switchDelay !== undefined) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'ClipboardCopy: switchDelay prop has been deprecated. ' +
+          'The tooltip message will switch back to the hover tip as soon as the tooltip is hidden.'
+      );
+    }
   }
 
   static defaultProps: PickOptional<ClipboardCopyProps> = {
@@ -116,9 +118,8 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     variant: 'inline',
     position: PopoverPosition.top,
     maxWidth: '150px',
-    exitDelay: 1600,
+    exitDelay: 1500,
     entryDelay: 300,
-    switchDelay: 2000,
     onCopy: clipboardCopyFunc,
     onChange: (): any => undefined,
     textAriaLabel: 'Copyable input',
@@ -157,6 +158,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       /* eslint-disable @typescript-eslint/no-unused-vars */
       isExpanded,
       onChange, // Don't pass to <div>
+      switchDelay,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       isReadOnly,
       isCode,
@@ -164,7 +166,6 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       exitDelay,
       maxWidth,
       entryDelay,
-      switchDelay,
       onCopy,
       hoverTip,
       clickTip,
@@ -219,18 +220,10 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                       textId={`text-input-${id}`}
                       aria-label={hoverTip}
                       onClick={(event: any) => {
-                        if (this.timer) {
-                          window.clearTimeout(this.timer);
-                          this.setState({ copied: false });
-                        }
                         onCopy(event, this.state.text);
-                        this.setState({ copied: true }, () => {
-                          this.timer = window.setTimeout(() => {
-                            this.setState({ copied: false });
-                            this.timer = null;
-                          }, switchDelay);
-                        });
+                        this.setState({ copied: true });
                       }}
+                      onTooltipHidden={() => this.setState({ copied: false })}
                     >
                       {this.state.copied ? clickTip : hoverTip}
                     </ClipboardCopyButton>
@@ -272,18 +265,10 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                     textId={`text-input-${id}`}
                     aria-label={hoverTip}
                     onClick={(event: any) => {
-                      if (this.timer) {
-                        window.clearTimeout(this.timer);
-                        this.setState({ copied: false });
-                      }
                       onCopy(event, this.state.text);
-                      this.setState({ copied: true }, () => {
-                        this.timer = window.setTimeout(() => {
-                          this.setState({ copied: false });
-                          this.timer = null;
-                        }, switchDelay);
-                      });
+                      this.setState({ copied: true });
                     }}
+                    onTooltipHidden={() => this.setState({ copied: false })}
                   >
                     {this.state.copied ? clickTip : hoverTip}
                   </ClipboardCopyButton>

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -43,6 +43,8 @@ export interface ClipboardCopyButtonProps
   'aria-label'?: string;
   /** Variant of the copy button */
   variant?: 'control' | 'plain';
+  /** Callback when tooltip's hide transition has finished executing */
+  onTooltipHidden?: () => void;
 }
 
 export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonProps> = ({
@@ -56,6 +58,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   textId,
   children,
   variant = 'control',
+  onTooltipHidden = () => {},
   ...props
 }: ClipboardCopyButtonProps) => (
   <Tooltip
@@ -67,6 +70,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
     aria-live="polite"
     aria="none"
     content={<div>{children}</div>}
+    onTooltipHidden={onTooltipHidden}
   >
     <Button
       type="button"

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -6,13 +6,7 @@ export const BasicCodeBlock: React.FunctionComponent = () => {
   const [copied, setCopied] = React.useState(false);
 
   const clipboardCopyFunc = (event, text) => {
-    const clipboard = event.currentTarget.parentElement;
-    const el = document.createElement('textarea');
-    el.value = text.toString();
-    clipboard.appendChild(el);
-    el.select();
-    document.execCommand('copy');
-    clipboard.removeChild(el);
+    navigator.clipboard.writeText(text.toString());
   };
 
   const onClick = (event, text) => {
@@ -36,9 +30,10 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
           textId="code-content"
           aria-label="Copy to clipboard"
           onClick={e => onClick(e, code)}
-          exitDelay={600}
+          exitDelay={copied ? 1500 : 600}
           maxWidth="110px"
           variant="plain"
+          onTooltipHidden={() => setCopied(false)}
         >
           {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
         </ClipboardCopyButton>

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -19,13 +19,7 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
   };
 
   const clipboardCopyFunc = (event, text) => {
-    const clipboard = event.currentTarget.parentElement;
-    const el = document.createElement('textarea');
-    el.value = text.toString();
-    clipboard.appendChild(el);
-    el.select();
-    document.execCommand('copy');
-    clipboard.removeChild(el);
+    navigator.clipboard.writeText(text.toString());
   };
 
   const onClick = (event, text) => {
@@ -57,9 +51,10 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
           textId="code-content"
           aria-label="Copy to clipboard"
           onClick={e => onClick(e, copyBlock)}
-          exitDelay={600}
+          exitDelay={copied ? 1500 : 600}
           maxWidth="110px"
           variant="plain"
+          onTooltipHidden={() => setCopied(false)}
         >
           {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
         </ClipboardCopyButton>

package/src/components/Menu/MenuItem.tsx

@@ -52,6 +52,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   isSelected?: boolean;
   /** Flag indicating the item is focused */
   isFocused?: boolean;
+  /** Flag indicating the item is in danger state */
+  isDanger?: boolean;
   /** @beta Flyout menu */
   flyoutMenu?: React.ReactElement;
   /** @beta Callback function when mouse leaves trigger */
@@ -91,6 +93,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   isExternalLink = false,
   isSelected = null,
   isFocused,
+  isDanger = false,
   icon,
   actions,
   onShowFlyout,
@@ -295,6 +298,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         isLoadButton && styles.modifiers.load,
         isLoading && styles.modifiers.loading,
         isFocused && styles.modifiers.focus,
+        isDanger && styles.modifiers.danger,
         className
       )}
       onMouseOver={onMouseOver}

package/src/components/Menu/examples/Menu.md

@@ -23,6 +23,11 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 ```ts file="MenuBasic.tsx"
 ```
 
+### Danger menu item
+
+```ts file="MenuDangerMenuItem.tsx"
+```
+
 ### With icons
 
 ```ts file="MenuWithIcons.tsx"

package/src/components/Menu/examples/MenuDangerMenuItem.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Divider, Menu, MenuContent, MenuItem, MenuList } from '@patternfly/react-core';
+
+export const MenuDangerMenuItem: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number;
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(item);
+  };
+
+  return (
+    <Menu activeItemId={activeItem} onSelect={onSelect}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Action 1</MenuItem>
+          <MenuItem itemId={1}>Action 2</MenuItem>
+          <Divider component="li" />
+          <MenuItem itemId={2} isDanger>
+            Delete
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Slider/Slider.tsx

@@ -416,9 +416,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             {buildSteps()}
           </div>
         )}
-        {isInputVisible && inputPosition === 'aboveThumb' && (
-          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
-        )}
         {hasTooltipOverThumb ? (
           <Tooltip entryDelay={0} content={findAriaTextValue()}>
             {thumbComponent}
@@ -426,6 +423,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         ) : (
           thumbComponent
         )}
+        {isInputVisible && inputPosition === 'aboveThumb' && (
+          <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>}

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

@@ -475,6 +475,17 @@ exports[`slider renders slider with input above thumb 1`] = `
           </div>
         </div>
       </div>
+      <div
+        aria-disabled="false"
+        aria-label="Value"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50"
+        class="pf-c-slider__thumb"
+        role="slider"
+        tabindex="0"
+      />
       <div
         class="pf-c-slider__value pf-m-floating"
       >
@@ -498,17 +509,6 @@ exports[`slider renders slider with input above thumb 1`] = `
           </span>
         </div>
       </div>
-      <div
-        aria-disabled="false"
-        aria-label="Value"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
-        aria-valuetext="50"
-        class="pf-c-slider__thumb"
-        role="slider"
-        tabindex="0"
-      />
     </div>
   </div>
 </DocumentFragment>

package/src/components/Tooltip/Tooltip.tsx

@@ -95,6 +95,8 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
       )[];
   /** Maximum width of the tooltip (default 18.75rem) */
   maxWidth?: string;
+  /** Callback when tooltip's hide transition has finished executing */
+  onTooltipHidden?: () => void;
   /**
    * Tooltip position. Note: With 'enableFlip' set to true,
    * it will change the position if there is not enough space for the starting position.
@@ -171,6 +173,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   isAppLauncher,
   tippyProps,
   removeFindDomNode = false,
+  onTooltipHidden = () => {},
   ...rest
 }: TooltipProps) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -194,6 +197,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
 
+  const prevExitDelayRef = React.useRef<number>();
+
   const clearTimeouts = (timeoutRefs: React.RefObject<any>[]) => {
     timeoutRefs.forEach(ref => {
       if (ref.current) {
@@ -233,6 +238,21 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       hide();
     }
   }, [isVisible]);
+
+  React.useEffect(() => {
+    if (prevExitDelayRef.current < exitDelay) {
+      clearTimeouts([transitionTimerRef, hideTimerRef]);
+      hideTimerRef.current = setTimeout(() => {
+        setOpacity(0);
+        transitionTimerRef.current = setTimeout(() => {
+          setVisible(false);
+          onTooltipHidden();
+        }, animationDuration);
+      }, exitDelay);
+    }
+    prevExitDelayRef.current = exitDelay;
+  }, [exitDelay]);
+
   const show = () => {
     clearTimeouts([transitionTimerRef, hideTimerRef]);
     showTimerRef.current = setTimeout(() => {
@@ -244,7 +264,10 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     clearTimeouts([showTimerRef]);
     hideTimerRef.current = setTimeout(() => {
       setOpacity(0);
-      transitionTimerRef.current = setTimeout(() => setVisible(false), animationDuration);
+      transitionTimerRef.current = setTimeout(() => {
+        setVisible(false);
+        onTooltipHidden();
+      }, animationDuration);
     }, exitDelay);
   };
   const positionModifiers = {