@patternfly/react-core 4.217.2 → 4.218.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.217.2",
+  "version": "4.218.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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.68.2",
-    "@patternfly/react-styles": "^4.67.2",
-    "@patternfly/react-tokens": "^4.69.2",
+    "@patternfly/react-icons": "^4.69.0",
+    "@patternfly/react-styles": "^4.68.0",
+    "@patternfly/react-tokens": "^4.70.0",
     "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": "9aeee7e7186d7d8e8d572108ec54bea7bbb2bc6b"
+  "gitHead": "5a409a664a4c75aea67d0c8d3d25de641e320f9e"
 }

package/src/components/ContextSelector/ContextSelector.tsx

@@ -61,6 +61,11 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
   isText?: boolean;
   /** Flag to disable focus trap */
   disableFocusTrap?: boolean;
+  /** Flag for indicating that the context selector menu should automatically flip vertically when
+   * it reaches the boundary. This prop can only be used when the context selector component is not
+   * appended inline, e.g. `menuAppendTo="parent"`
+   */
+  isFlipEnabled?: boolean;
 }
 
 export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
@@ -83,7 +88,8 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     disableFocusTrap: false,
     footer: null as React.ReactNode,
     isPlain: false,
-    isText: false
+    isText: false,
+    isFlipEnabled: false
   };
   constructor(props: ContextSelectorProps) {
     super(props);
@@ -126,10 +132,16 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       isText,
       footer,
       disableFocusTrap,
+      isFlipEnabled,
       ...props
     } = this.props;
     const menuContainer = (
-      <div className={css(styles.contextSelectorMenu)}>
+      <div
+        className={css(styles.contextSelectorMenu)}
+        // This removes the `position: absolute`styling from the `.pf-c-context-selector__menu`
+        // allowing the menu to flip correctly
+        {...(isFlipEnabled && { style: { position: 'revert' } })}
+      >
         {isOpen && (
           <FocusTrap active={!disableFocusTrap} focusTrapOptions={{ clickOutsideDeactivates: true }}>
             <div className={css(styles.contextSelectorMenuSearch)}>

package/src/components/Dropdown/Dropdown.tsx

@@ -55,6 +55,11 @@ export interface DropdownProps
   autoFocus?: boolean;
   /** Props for extreme customization of dropdown */
   contextProps?: typeof DropdownContext;
+  /** Flag for indicating that the dropdown menu should automatically flip vertically when
+   * it reaches the boundary. This prop can only be used when the dropdown component is not
+   * appended inline, e.g. `menuAppendTo="parent"`
+   */
+  isFlipEnabled?: boolean;
 }
 
 export const Dropdown: React.FunctionComponent<DropdownProps> = ({
@@ -66,6 +71,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   alignments,
   contextProps,
   menuAppendTo = 'inline',
+  isFlipEnabled = false,
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
@@ -91,7 +97,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       ...contextProps
     }}
   >
-    <DropdownWithContext menuAppendTo={menuAppendTo} {...props} />
+    <DropdownWithContext menuAppendTo={menuAppendTo} isFlipEnabled={isFlipEnabled} {...props} />
   </DropdownContext.Provider>
 );
 Dropdown.displayName = 'Dropdown';

package/src/components/Dropdown/DropdownWithContext.tsx

@@ -29,7 +29,8 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
     direction: DropdownDirection.down,
     onSelect: (): void => undefined,
     autoFocus: true,
-    menuAppendTo: 'inline'
+    menuAppendTo: 'inline',
+    isFlipEnabled: false
   };
 
   constructor(props: DropdownProps & OUIAProps) {
@@ -75,6 +76,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       toggle,
       autoFocus,
       menuAppendTo,
+      isFlipEnabled,
       ...props
     } = this.props;
     const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
@@ -96,6 +98,9 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
           const BaseComponent = baseComponent as any;
           const menuContainer = (
             <DropdownMenu
+              // This removes the `position: absolute` styling from the `.pf-c-dropdown__menu`
+              // allowing the menu to flip correctly
+              {...(isFlipEnabled && { style: { position: 'revert', minWidth: 'min-content' } })}
               setMenuComponentRef={this.setMenuComponentRef}
               component={component}
               isOpen={isOpen}

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

@@ -173,6 +173,11 @@ export interface SelectProps
    * menuAppendTo={document.getElementById('target')}
    */
   menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
+  /** Flag for indicating that the select menu should automatically flip vertically when
+   * it reaches the boundary. This prop can only be used when the select component is not
+   * appended inline, e.g. `menuAppendTo="parent"`
+   */
+  isFlipEnabled?: boolean;
 }
 
 export interface SelectState {
@@ -245,7 +250,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isInputValuePersisted: false,
     isInputFilterPersisted: false,
     isCreateSelectOptionObject: false,
-    shouldResetOnSelect: true
+    shouldResetOnSelect: true,
+    isFlipEnabled: false
   };
 
   state: SelectState = {
@@ -978,6 +984,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       loadingVariant,
       isCreateSelectOptionObject,
       shouldResetOnSelect,
+      isFlipEnabled,
       ...props
     } = this.props;
     const {
@@ -1204,6 +1211,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
     const innerMenu = (
       <SelectMenu
+        // This removes the `position: absolute` styling from the `.pf-c-select__menu`
+        // allowing the menu to flip correctly
+        {...(isFlipEnabled && { style: { position: 'revert' } })}
         {...props}
         isGrouped={isGrouped}
         selected={selections}

package/src/components/Switch/Switch.tsx

@@ -12,12 +12,18 @@ export interface SwitchProps
   id?: string;
   /** Additional classes added to the switch */
   className?: string;
-  /** Text value for the label when on */
+  /** Text value for the visible label when on */
   label?: React.ReactNode;
-  /** Text value for the label when off */
+  /** Text value for the visible label when off */
   labelOff?: React.ReactNode;
-  /** Flag to show if the switch is checked. */
+  /** Flag to show if the switch is checked when it is controlled by React state.
+   * To make the switch uncontrolled instead use the defaultChecked prop, but do not use both.
+   */
   isChecked?: boolean;
+  /** Flag to set the default checked value of the switch when it is uncontrolled by React state.
+   * To make the switch controlled instead use the isChecked prop, but do not use both.
+   */
+  defaultChecked?: boolean;
   /** Flag to show if the switch has a check icon. */
   hasCheckIcon?: boolean;
   /** Flag to show if the switch is disabled. */
@@ -63,6 +69,7 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
       label,
       labelOff,
       isChecked,
+      defaultChecked,
       hasCheckIcon,
       isDisabled,
       onChange,
@@ -84,7 +91,8 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
           className={css(styles.switchInput)}
           type="checkbox"
           onChange={event => onChange(event.target.checked, event)}
-          checked={isChecked}
+          {...([true, false].includes(defaultChecked) && { defaultChecked })}
+          {...(![true, false].includes(defaultChecked) && { checked: isChecked })}
           disabled={isDisabled}
           aria-labelledby={isAriaLabelledBy ? `${this.id}-on` : null}
           {...props}

package/src/components/Switch/examples/Switch.md

@@ -171,24 +171,8 @@ import React from 'react';
 import { Switch } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Switch
-    id="uncontrolled-switch-on"
-    aria-label="Message when on"
-    label="Message when on"
-    labelOff="Message when off"
-    isChecked
-  />
-  <br />
-  <Switch
-    id="uncontrolled-switch-off"
-    aria-label="Message when on"
-    label="Message when on"
-    labelOff="Message when off"
-    isChecked={false}
-  />
-  <br />
-  <Switch id="uncontrolled-no-label-switch-on" aria-label="Message when on" isChecked />
+  <Switch id="uncontrolled-switch-on" label="Message when on" labelOff="Message when off" defaultChecked={false} />
   <br />
-  <Switch id="uncontrolled-no-label-switch-off" aria-label="Message when on" isChecked={false} />
+  <Switch id="uncontrolled-no-label-switch-on" aria-label="Message when on" defaultChecked={true} />
 </React.Fragment>;
 ```