@patternfly/react-core 4.217.4 → 4.219.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.217.4",
+  "version": "4.219.1",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.68.4",
-    "@patternfly/react-styles": "^4.67.4",
-    "@patternfly/react-tokens": "^4.69.4",
+    "@patternfly/react-icons": "^4.70.1",
+    "@patternfly/react-styles": "^4.69.1",
+    "@patternfly/react-tokens": "^4.71.1",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "ba782c2941a816480fc345e27ce9f15782a81298"
+  "gitHead": "7a00f2e2733a593e840464c786f7096e004d02f1"
 }

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -5,6 +5,8 @@ cssPrefix: pf-c-expandable-section
 propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
 ## Examples
 
 ### Basic
@@ -178,3 +180,48 @@ class SimpleExpandableSection extends React.Component {
   }
 }
 ```
+
+### With custom toggle content
+
+By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
+
+```js
+import React from "react";
+import { ExpandableSection, Badge } from "@patternfly/react-core";
+import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
+
+class CustomExpandableSection extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isExpanded: false
+    };
+    this.onToggle = (isExpanded) => {
+      this.setState({
+        isExpanded
+      });
+    };
+  }
+
+  render() {
+    const { isExpanded } = this.state;
+    return (
+      <ExpandableSection
+        toggleContent={
+          <div>
+            <span>You can also use icons </span>
+            <CheckCircleIcon />
+            <span> or badges </span>
+            <Badge isRead={true}>4</Badge>
+            <span> !</span>
+          </div>
+        }
+        onToggle={this.onToggle}
+        isExpanded={isExpanded}
+      >
+        This content is visible only when the component is expanded.
+      </ExpandableSection>
+    );
+  }
+}
+```

package/src/components/FileUpload/FileUploadField.tsx

@@ -78,6 +78,10 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   containerRef?: React.Ref<HTMLDivElement>;
   /** Text area text changed */
   onTextChange?: (text: string) => void;
+  /** Callback for when focus is lost on the text area field */
+  onTextAreaBlur?: (event?: any) => void;
+  /** Placeholder string to display in the empty text area field */
+  textAreaPlaceholder?: string;
 }
 
 export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
@@ -90,6 +94,8 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   onClearButtonClick = () => {},
   onTextAreaClick,
   onTextChange,
+  onTextAreaBlur,
+  textAreaPlaceholder = '',
   className = '',
   isDisabled = false,
   isReadOnly = false,
@@ -169,6 +175,8 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             value={value as string}
             onChange={onTextAreaChange}
             onClick={onTextAreaClick}
+            onBlur={onTextAreaBlur}
+            placeholder={textAreaPlaceholder}
           />
         )}
         {isLoading && (

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -59,6 +59,7 @@ exports[`simple fileupload 1`] = `
         class="pf-c-form-control pf-m-resize-vertical"
         id="simple-text-file"
         name="simple-text-file"
+        placeholder=""
       />
     </div>
     <input

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -58,6 +58,7 @@ exports[`simple fileuploadfield 1`] = `
         class="pf-c-form-control pf-m-resize-vertical"
         id="custom-file-upload"
         name="custom-file-upload"
+        placeholder=""
       />
     </div>
     <p>

package/src/components/FileUpload/examples/FileUpload.md

@@ -268,7 +268,8 @@ class CustomFileUpload extends React.Component {
       isLoading: false,
       isDragActive: false,
       hideDefaultPreview: false,
-      children: false
+      children: false,
+      hasPlaceholderText: false
     };
     this.handleTextAreaChange = value => {
       this.setState({ value });
@@ -283,11 +284,12 @@ class CustomFileUpload extends React.Component {
       isLoading,
       isDragActive,
       hideDefaultPreview,
-      children
+      children,
+      hasPlaceholderText
     } = this.state;
     return (
       <div>
-        {['filename', 'isClearButtonDisabled', 'isDragActive', 'isLoading', 'hideDefaultPreview', 'children'].map(
+        {['filename', 'isClearButtonDisabled', 'isDragActive', 'isLoading', 'hideDefaultPreview', 'children', 'hasPlaceholderText'].map(
           stateKey => (
             <Checkbox
               key={stateKey}
@@ -321,6 +323,7 @@ class CustomFileUpload extends React.Component {
           isDragActive={isDragActive}
           hideDefaultPreview={hideDefaultPreview}
           browseButtonText="Upload"
+          textAreaPlaceholder={hasPlaceholderText ? "File preview" : ''}
         >
           {children && (
             <div className="pf-u-m-md">(A custom preview of the uploaded file can be passed as children)</div>

package/src/components/Modal/ModalBoxTitle.tsx

@@ -37,7 +37,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
   titleLabel = '',
   ...props
 }: ModalBoxTitleProps) => {
-  const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
+  const [hasTooltip, setHasTooltip] = React.useState(false);
   const h1 = React.useRef<HTMLHeadingElement>();
   const label = titleLabel || (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleLabel);
   const variantIcons = {
@@ -50,7 +50,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
   const CustomIcon = !isVariantIcon(titleIconVariant) && titleIconVariant;
 
   useIsomorphicLayoutEffect(() => {
-    setIsTooltipVisible(h1.current && h1.current.offsetWidth < h1.current.scrollWidth);
+    setHasTooltip(h1.current && h1.current.offsetWidth < h1.current.scrollWidth);
   }, []);
 
   const content = (
@@ -70,12 +70,6 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
     </h1>
   );
 
-  return isTooltipVisible ? (
-    <Tooltip content={title} isVisible>
-      {content}
-    </Tooltip>
-  ) : (
-    content
-  );
+  return hasTooltip ? <Tooltip content={title}>{content}</Tooltip> : content;
 };
 ModalBoxTitle.displayName = 'ModalBoxTitle';

package/src/components/Slider/Slider.tsx

@@ -235,9 +235,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (!areCustomStepsContinuous && customSteps) {
       let percentage = newPercentage;
       if (customSteps[customSteps.length - 1].value !== 100) {
-        const numSteps = customSteps.length - 1;
-        const percentagePerStep = 100 / numSteps;
-        percentage = newPercentage / percentagePerStep;
+        percentage = (newPercentage * (max - min)) / 100 + min;
       }
       const stepIndex = customSteps.findIndex(stepObj => stepObj.value >= percentage);
       if (customSteps[stepIndex].value === percentage) {

package/src/components/Slider/examples/Slider.md

@@ -29,7 +29,8 @@ class DiscreteInput extends React.Component {
       value3: 25,
       value4: 50,
       value5: 50,
-      value6: 3
+      value6: 3,
+      value7: 25
     };
 
     this.steps = [
@@ -53,6 +54,15 @@ class DiscreteInput extends React.Component {
       { value: 5, label: "F" }
     ];
 
+    this.stepsDiscreteNoLinearWithMaxMin = [
+      { value: 12, label: '12' },
+      { value: 15, label: '15' },
+      { value: 25, label: '25' },
+      { value: 54, label: '54' },
+      { value: 67, label: '67' },
+      { value: 86, label: '86' }
+  ];
+
     this.onChange = value => {
         this.setState({
           value1: value
@@ -88,6 +98,12 @@ class DiscreteInput extends React.Component {
           value6: value
         });
     };
+
+      this.onChange7 = value => {
+        this.setState({
+          value7: value
+        });
+    };
   }
 
   render() {
@@ -123,7 +139,18 @@ class DiscreteInput extends React.Component {
             customSteps={this.stepsDiscreteWithMax}
             onChange={this.onChange6}
           />
-          <br />
+        <br />
+        <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value7)}</Text>
+        <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
+        <Slider
+            value={this.state.value7}
+            showTicks
+            customSteps={this.stepsDiscreteNoLinearWithMaxMin}
+            onChange={this.onChange7}
+            min={12}
+            max={86}
+          />
+        <br />
       </>
     );
   }

package/src/components/Tooltip/Tooltip.tsx

@@ -63,7 +63,10 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
   enableFlip?: boolean;
   /** Delay in ms before the tooltip appears */
   entryDelay?: number;
-  /** Delay in ms before the tooltip disappears */
+  /** Delay in ms before the tooltip disappears, Avoid passing in a value of "0", as users should
+   * be given ample time to move their mouse from the trigger to the tooltip content without the content
+   * being hidden.
+   */
   exitDelay?: number;
   /**
    * The desired position to flip the tooltip to if the initial position is not possible.
@@ -149,7 +152,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   enableFlip = true,
   className = '',
   entryDelay = 300,
-  exitDelay = 0,
+  exitDelay = 300,
   appendTo = () => document.body,
   zIndex = 9999,
   maxWidth = tooltipMaxWidth.value,
@@ -318,6 +321,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       placement={position}
       onMouseEnter={triggerOnMouseenter && show}
       onMouseLeave={triggerOnMouseenter && hide}
+      onPopperMouseEnter={triggerOnMouseenter && show}
+      onPopperMouseLeave={triggerOnMouseenter && hide}
       onFocus={triggerOnFocus && show}
       onBlur={triggerOnFocus && hide}
       onDocumentClick={triggerOnClick && onDocumentClick}

package/src/helpers/Popper/Popper.tsx

@@ -95,6 +95,10 @@ export interface PopperProps {
   onTriggerEnter?: (event?: KeyboardEvent) => void;
   /** Callback function when popper is clicked */
   onPopperClick?: (event?: MouseEvent) => void;
+  /** Callback function when mouse enters popper content */
+  onPopperMouseEnter?: (event?: MouseEvent) => void;
+  /** Callback function when mouse leaves popper content */
+  onPopperMouseLeave?: (event?: MouseEvent) => void;
   /** Callback function when document is clicked */
   onDocumentClick?: (event?: MouseEvent, triggerElement?: HTMLElement, popperElement?: HTMLElement) => void;
   /** Callback function when keydown event occurs on document */
@@ -140,6 +144,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onTriggerClick,
   onTriggerEnter,
   onPopperClick,
+  onPopperMouseEnter,
+  onPopperMouseLeave,
   onDocumentKeyDown,
   enableFlip = true,
   flipBehavior = 'flip',
@@ -186,6 +192,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     addEventListener(onTriggerClick, refOrTrigger, 'click');
     addEventListener(onTriggerEnter, refOrTrigger, 'keydown');
     addEventListener(onPopperClick, popperElement, 'click');
+    addEventListener(onPopperMouseEnter, popperElement, 'mouseenter');
+    addEventListener(onPopperMouseLeave, popperElement, 'mouseleave');
     onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click');
     addEventListener(onDocumentKeyDown, document, 'keydown');
 
@@ -203,6 +211,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       removeEventListener(onTriggerClick, refOrTrigger, 'click');
       removeEventListener(onTriggerEnter, refOrTrigger, 'keydown');
       removeEventListener(onPopperClick, popperElement, 'click');
+      removeEventListener(onPopperMouseEnter, popperElement, 'mouseenter');
+      removeEventListener(onPopperMouseLeave, popperElement, 'mouseleave');
       onDocumentClick && removeEventListener(onDocumentClickCallback, document, 'click');
       removeEventListener(onDocumentKeyDown, document, 'keydown');
       observer.disconnect();
@@ -217,6 +227,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     onTriggerClick,
     onTriggerEnter,
     onPopperClick,
+    onPopperMouseEnter,
+    onPopperMouseLeave,
     onDocumentClick,
     onDocumentKeyDown,
     refElement