@patternfly/react-core 4.243.0 → 4.244.0

package/src/components/TreeView/TreeView.tsx

@@ -3,76 +3,90 @@ import { TreeViewList } from './TreeViewList';
 import { TreeViewCheckProps, TreeViewListItem } from './TreeViewListItem';
 import { TreeViewRoot } from './TreeViewRoot';
 
+/** Properties that make up a tree view data item. These properties should be passed in as an
+ * object to one of the various tree view component properties which accept TreeViewDataItem as
+ * a type.
+ */
+
 export interface TreeViewDataItem {
-  /** Internal content of a tree view item */
-  name: React.ReactNode;
-  /** Title a tree view item. Only used in Compact presentations. */
-  title?: React.ReactNode;
-  /** ID of a tree view item */
-  id?: string;
-  /** Child nodes of a tree view item */
+  /** Action of a tree view item, which can be either a button or dropdown component. */
+  action?: React.ReactNode;
+  /** Additional properties of the tree view item badge. */
+  badgeProps?: any;
+  /** Additional properties of the tree view item checkbox. */
+  checkProps?: TreeViewCheckProps;
+  /** Child nodes of a tree view item. */
   children?: TreeViewDataItem[];
-  /** Flag indicating if node is expanded by default */
+  /** Optional prop for a custom badge. */
+  customBadgeContent?: React.ReactNode;
+  /** Flag indicating if node is expanded by default. */
   defaultExpanded?: boolean;
-  /** Default icon of a tree view item */
-  icon?: React.ReactNode;
-  /** Expanded icon of a tree view item */
+  /** Expanded icon of a tree view item. */
   expandedIcon?: React.ReactNode;
-  /** Flag indicating if a tree view item has a checkbox */
-  hasCheck?: boolean;
-  /** Additional properties of the tree view item checkbox */
-  checkProps?: TreeViewCheckProps;
-  /** Flag indicating if a tree view item has a badge */
+  /** Flag indicating if a tree view item has a badge. */
   hasBadge?: boolean;
-  /** Optional prop for custom badge */
-  customBadgeContent?: React.ReactNode;
-  /** Additional properties of the tree view item badge */
-  badgeProps?: any;
-  /** Action of a tree view item, can be a Button or Dropdown */
-  action?: React.ReactNode;
+  /** Flag indicating if a tree view item has a checkbox. */
+  hasCheck?: boolean;
+  /** Default icon of a tree view item. */
+  icon?: React.ReactNode;
+  /** ID of a tree view item. */
+  id?: string;
+  /** Internal content of a tree view item. */
+  name: React.ReactNode;
+  /** Title of a tree view item. Only used in compact presentations. */
+  title?: React.ReactNode;
 }
 
+/** The main tree view component. */
+
 export interface TreeViewProps {
-  /** Data of the tree view */
+  /** Active items of tree view. */
+  activeItems?: TreeViewDataItem[];
+  /** Sets the expanded state on all tree nodes, overriding default behavior and current
+   * internal state.
+   */
+  allExpanded?: boolean;
+  /** Class to add if not passed a parentItem property. */
+  className?: string;
+  /** Comparison function for determining active items. */
+  compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean;
+  /** Data of the tree view. */
   data: TreeViewDataItem[];
-  /** ID of the tree view */
-  id?: string;
-  /** Flag indicating if the tree view is nested */
-  isNested?: boolean;
-  /** Flag indicating if all nodes in the tree view should have checkboxes */
-  hasChecks?: boolean;
-  /** Flag indicating if all nodes in the tree view should have badges */
+  /** Sets the default expanded behavior. */
+  defaultAllExpanded?: boolean;
+  /** Icon for all expanded node items. */
+  expandedIcon?: React.ReactNode;
+  /** Flag indicating if all nodes in the tree view should have badges. */
   hasBadges?: boolean;
-  /** Flag indicating if tree view has guide lines. */
+  /** Flag indicating if all nodes in the tree view should have checkboxes. */
+  hasChecks?: boolean;
+  /** Flag indicating if the tree view has guide lines. */
   hasGuides?: boolean;
-  /** Flag indicating that tree nodes should be independently selectable, even when having children */
+  /** Flag indicating if the tree view is nested. */
+  isNested?: boolean;
+  /** Flag indicating that tree nodes should be independently selectable, even when having
+   * children.
+   */
   hasSelectableNodes?: boolean;
-  /** Variant presentation styles for the tree view. */
-  variant?: 'default' | 'compact' | 'compactNoBackground';
-  /** Icon for all leaf or unexpanded node items */
+  /** Icon for all leaf or unexpanded node items. */
   icon?: React.ReactNode;
-  /** Icon for all expanded node items */
-  expandedIcon?: React.ReactNode;
-  /** Sets the expanded state on all tree nodes, overriding default behavior and current internal state */
-  allExpanded?: boolean;
-  /** Sets the default expanded behavior */
-  defaultAllExpanded?: boolean;
-  /** Callback for item selection */
-  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
-  /** Callback for item checkbox selection */
+  /** ID of the tree view. */
+  id?: string;
+  /** Callback for item checkbox selection. */
   onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
-  /** Active items of tree view */
-  activeItems?: TreeViewDataItem[];
-  /** Internal. Parent item of a TreeViewListItem */
+  /** Callback for item selection. */
+  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
+  /** Internal. Parent item of a tree view list item. */
   parentItem?: TreeViewDataItem;
-  /** Comparison function for determining active items */
-  compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean;
-  /** Class to add to add if not passed a parentItem */
-  className?: string;
-  /** Toolbar to display above the tree view */
+  /** Toolbar to display above the tree view. */
   toolbar?: React.ReactNode;
-  /** Flag indicating the TreeView should utilize memoization to help render large data sets. Setting this property requires that `activeItems` pass in an array containing every node in the selected item's path. */
+  /** Flag indicating the tree view should utilize memoization to help render large data sets.
+   * Setting this property requires that the activeItems property is passed an array containing
+   * every node in the selected item's path.
+   */
   useMemo?: boolean;
+  /** Variant presentation styles for the tree view. */
+  variant?: 'default' | 'compact' | 'compactNoBackground';
 }
 
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({

package/src/components/TreeView/TreeViewList.tsx

@@ -3,12 +3,12 @@ import { css } from '@patternfly/react-styles';
 import { Divider } from '../Divider';
 
 export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
-  /** Flag indicating if the tree view is nested under another tree view */
+  /** Child nodes of the current tree view. */
+  children: React.ReactNode;
+  /** Flag indicating if the tree view is nested under another tree view. */
   isNested?: boolean;
-  /** Toolbar to display above the tree view */
+  /** Toolbar to display above the tree view. */
   toolbar?: React.ReactNode;
-  /** Child nodes of the current tree view */
-  children: React.ReactNode;
 }
 
 export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({

package/src/components/TreeView/TreeViewListItem.tsx

@@ -11,51 +11,58 @@ export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttribut
 }
 
 export interface TreeViewListItemProps {
-  /** Internal content of a tree view item */
-  name: React.ReactNode;
-  /** Title a tree view item */
-  title: React.ReactNode;
-  /** ID of a tree view item */
-  id?: string;
-  /** Flag indicating if the node is expanded, overrides internal state */
-  isExpanded?: boolean;
-  /** Flag indicating if node is expanded by default */
-  defaultExpanded?: boolean;
-  /** Child nodes of a tree view item */
-  children?: React.ReactNode;
-  /** Callback for item selection. Note: calling event.preventDefault() will prevent the node from toggling. */
-  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
-  /** Callback for item checkbox selection */
-  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
-  /** Flag indicating if a tree view item has a checkbox */
-  hasCheck?: boolean;
-  /** Additional properties of the tree view item checkbox */
+  /** Action of a tree view item, which can be either a button or dropdown component. */
+  action?: React.ReactNode;
+  /** Active items of tree view. */
+  activeItems?: TreeViewDataItem[];
+  /** Additional properties of the tree view item badge. */
+  badgeProps?: any;
+  /** Additional properties of the tree view item checkbox. */
   checkProps?: TreeViewCheckProps;
-  /** Flag indicating if a tree view item has a badge */
-  hasBadge?: boolean;
-  /** Flag indicating that tree nodes should be independently selectable, even when having children */
-  isSelectable?: boolean;
-  /** Optional prop for custom badge */
+  /** Child nodes of a tree view item. */
+  children?: React.ReactNode;
+  /** Callback for item comparison function. */
+  compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean;
+  /** Optional prop for a custom badge. */
   customBadgeContent?: React.ReactNode;
-  /** Additional properties of the tree view item badge */
-  badgeProps?: any;
+  /** Flag indicating if node is expanded by default. */
+  defaultExpanded?: boolean;
+  /** Expanded icon of a tree view item. */
+  expandedIcon?: React.ReactNode;
+  /** Flag indicating if a tree view item has a badge. */
+  hasBadge?: boolean;
+  /** Flag indicating if a tree view item has a checkbox. */
+  hasCheck?: boolean;
+  /** Default icon of a tree view item. */
+  icon?: React.ReactNode;
+  /** ID of a tree view item. */
+  id?: string;
   /** Flag indicating if the tree view is using a compact variation. */
   isCompact?: boolean;
-  /** Active items of tree view */
-  activeItems?: TreeViewDataItem[];
-  /** Data structure of tree view item */
+  /** Flag indicating if the node is expanded, overrides internal state. */
+  isExpanded?: boolean;
+  /** Flag indicating that tree nodes should be independently selectable, even when having
+   * children.
+   */
+  isSelectable?: boolean;
+  /** Data structure of tree view item. */
   itemData?: TreeViewDataItem;
-  /** Parent item of tree view item */
+  /** Internal content of a tree view item. */
+  name: React.ReactNode;
+  /** Callback for item checkbox selection. */
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  /** Callback for item selection. Note: calling event.preventDefault() will prevent the node
+   * from toggling.
+   */
+  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  /** Parent item of tree view item. */
   parentItem?: TreeViewDataItem;
-  /** Default icon of a tree view item */
-  icon?: React.ReactNode;
-  /** Expanded icon of a tree view item */
-  expandedIcon?: React.ReactNode;
-  /** Action of a tree view item, can be a Button or Dropdown */
-  action?: React.ReactNode;
-  /** Callback for item comparison function */
-  compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean;
-  /** Flag indicating the TreeView should utilize memoization to help render large data sets. Setting this property requires that `activeItems` pass in an array containing every node in the selected item's path. */
+  /** Title of a tree view item. */
+  title: React.ReactNode;
+  /** Flag indicating the tree view should utilize memoization to help render large data sets.
+   * Setting this property requires that the activeItems property is passed an array containing
+   * every node in the selected item's path.
+   */
   useMemo?: boolean;
 }
 

package/src/components/TreeView/TreeViewRoot.tsx

@@ -5,16 +5,16 @@ import { canUseDOM } from '../../helpers/util';
 import { handleArrows } from '../../helpers';
 
 export interface TreeViewRootProps {
-  /** Child nodes of the tree view */
+  /** Child nodes of the tree view. */
   children: React.ReactNode;
-  /** Flag indicating if the tree view has checkboxes */
+  /** Class to add to add if not passed a parentItem property. */
+  className?: string;
+  /** Flag indicating if the tree view has checkboxes. */
   hasChecks?: boolean;
   /** Flag indicating if tree view has guide lines. */
   hasGuides?: boolean;
   /** Variant presentation styles for the tree view. */
   variant?: 'default' | 'compact' | 'compactNoBackground';
-  /** Class to add to add if not passed a parentItem */
-  className?: string;
 }
 
 export class TreeViewRoot extends React.Component<TreeViewRootProps> {

package/src/components/TreeView/TreeViewSearch.tsx

@@ -3,17 +3,21 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 
+/** Renders a search input for the tree view. This sub-component should be passed into the
+ * tree view component's toolbar property.
+ */
+
 export interface TreeViewSearchProps extends React.HTMLProps<HTMLInputElement> {
-  /** Callback for search input */
-  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /** Id for the search input */
-  id?: string;
-  /** Name for the search input */
-  name?: string;
-  /** Accessible label for the search input */
+  /** Accessible label for the search input. */
   'aria-label'?: string;
-  /** Classes applied to the wrapper for the search input */
+  /** Classes applied to the wrapper for the search input. */
   className?: string;
+  /** Id for the search input. */
+  id?: string;
+  /** Name for the search input. */
+  name?: string;
+  /** Callback for search input. */
+  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const TreeViewSearch: React.FunctionComponent<TreeViewSearchProps> = ({

package/src/demos/Masthead.md

@@ -3,202 +3,18 @@ id: Masthead
 section: components
 ---
 
-import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 ## Demos
 
-### Basic
+### Masthead with utilities and user dropdown menu
 
-```ts
-import React from 'react';
-import {
-  Masthead,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  Button,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem,
-  ContextSelector,
-  ContextSelectorItem,
-  Dropdown,
-  DropdownSeparator,
-  DropdownToggle,
-  KebabToggle,
-  DropdownItem,
-  Brand
-} from '@patternfly/react-core';
-import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.
 
-class BasicMasthead extends React.Component {
-  items = [
-    'My Project',
-    'OpenShift Cluster',
-    'Production Ansible',
-    'AWS',
-    'Azure',
-    'My Project 2',
-    'OpenShift Cluster',
-    'Production Ansible 2',
-    'AWS 2',
-    'Azure 2'
-  ];
-
-  state = {
-    isOpen: false,
-    isDropdownOpen: false,
-    isKebabOpen: false,
-    selected: this.items[0],
-    searchValue: '',
-    filteredItems: this.items
-  };
-
-  onToggle = (event: any, isOpen: boolean) => {
-    this.setState({
-      isOpen
-    });
-  };
-
-  onDropdownToggle = (isDropdownOpen: boolean) => {
-    this.setState({
-      isDropdownOpen
-    });
-  };
-
-  onKebabToggle = (isKebabOpen: boolean) => {
-    this.setState({
-      isKebabOpen
-    });
-  };
-
-  onSelect = (event: any, value: string) => {
-    this.setState({
-      selected: value,
-      isOpen: !this.state.isOpen
-    });
-  };
-
-  onDropdownSelect = () => {
-    this.setState({
-      isDropdownOpen: !this.state.isDropdownOpen
-    });
-  };
-
-  onKebabSelect = () => {
-    this.setState({
-      isKebabOpen: !this.state.isKebabOpen
-    });
-  };
-
-  onSearchInputChange = (value: string) => {
-    this.setState({ searchValue: value });
-  };
-
-  onSearchButtonClick = () => {
-    const filtered =
-      this.state.searchValue === ''
-        ? this.items
-        : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
-
-    this.setState({ filteredItems: filtered || [] });
-  };
-
-  render() {
-    const { isOpen, isDropdownOpen, isKebabOpen, selected, searchValue, filteredItems } = this.state;
-
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled href="www.google.com">
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem
-        key="disabled action"
-        isAriaDisabled
-        component="button"
-        tooltip="Tooltip for disabled item"
-        tooltipProps={{ position: 'top' }}
-      >
-        Disabled Action
-      </DropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-
-    return (
-      <Masthead id="basic-demo">
-        <MastheadToggle>
-          <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-            <BarsIcon />
-          </Button>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
-          </MastheadBrand>
-        </MastheadMain>
-        <MastheadContent>
-          <Toolbar id="toolbar" isFullHeight isStatic>
-            <ToolbarContent>
-              <ToolbarItem>
-                <ContextSelector
-                  toggleText={selected}
-                  onSearchInputChange={this.onSearchInputChange}
-                  isOpen={isOpen}
-                  searchInputValue={searchValue}
-                  onToggle={this.onToggle}
-                  onSelect={this.onSelect}
-                  onSearchButtonClick={this.onSearchButtonClick}
-                  screenReaderLabel="Selected Project:"
-                  isFullHeight
-                >
-                  {filteredItems.map((item, index) => (
-                    <ContextSelectorItem key={index}>{item}</ContextSelectorItem>
-                  ))}
-                </ContextSelector>
-              </ToolbarItem>
-              <ToolbarGroup alignment={{ default: 'alignRight' }}>
-                <ToolbarItem visibility={{ default: 'hidden', lg: 'visible' }}>
-                  <Dropdown
-                    onSelect={this.onDropdownSelect}
-                    toggle={
-                      <DropdownToggle id="toggle-id" onToggle={this.onDropdownToggle} toggleIndicator={CaretDownIcon}>
-                        Dropdown
-                      </DropdownToggle>
-                    }
-                    isOpen={isDropdownOpen}
-                    dropdownItems={dropdownItems}
-                    isFullHeight
-                  />
-                </ToolbarItem>
-                <ToolbarItem>
-                  <Dropdown
-                    onSelect={this.onKebabSelect}
-                    position="right"
-                    toggle={<KebabToggle onToggle={this.onKebabToggle} id="toggle-id-kebab" />}
-                    isOpen={isKebabOpen}
-                    isPlain
-                    dropdownItems={dropdownItems}
-                  />
-                </ToolbarItem>
-              </ToolbarGroup>
-            </ToolbarContent>
-          </Toolbar>
-        </MastheadContent>
-      </Masthead>
-    );
-  }
-}
+```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
 ```

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -246,6 +246,7 @@ class BasicNotificationDrawer extends React.Component {
                   variant={this.getNumberUnread() === 0 ? 'read' : 'unread'}
                   onClick={this.onCloseNotificationDrawer}
                   aria-label="Notifications"
+                  isExpanded={isDrawerExpanded}
                 >
                   <BellIcon />
                 </NotificationBadge>
@@ -812,6 +813,7 @@ class GroupedNotificationDrawer extends React.Component {
                   variant={this.getNumberUnread() === 0 ? 'read' : 'unread'}
                   onClick={this.onCloseNotificationDrawer}
                   aria-label="Notifications"
+                  isExpanded={isDrawerExpanded}
                 >
                   <BellIcon />
                 </NotificationBadge>