@patternfly/react-core 4.227.9 → 4.229.0

package/src/components/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helper
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
+import { OverflowTab } from './OverflowTab';
 import { Button } from '../Button';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, canUseDOM } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
@@ -19,6 +20,15 @@ export enum TabsComponent {
   nav = 'nav'
 }
 
+export interface HorizontalOverflowObject {
+  /** Flag which shows the count of overflowing tabs when enabled */
+  showTabCount?: boolean;
+  /** The text which displays when an overflowing tab isn't selected */
+  defaultTitleText?: string;
+  /** The aria label applied to the button which toggles the tab overflow menu */
+  toggleAriaLabel?: string;
+}
+
 export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
   /** Content rendered inside the tabs component. Must be React.ReactElement<TabProps>[] */
   children: React.ReactNode;
@@ -94,6 +104,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
   onToggle?: (isExpanded: boolean) => void;
+  /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
+  isOverflowHorizontal?: boolean | HorizontalOverflowObject;
 }
 
 const variantStyle = {
@@ -109,6 +121,7 @@ interface TabsState {
   uncontrolledActiveKey: number | string;
   uncontrolledIsExpandedLocal: boolean;
   ouiaStateId: string;
+  overflowingTabCount: number;
 }
 
 export class Tabs extends React.Component<TabsProps, TabsState> {
@@ -123,7 +136,8 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case
       uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
-      ouiaStateId: getDefaultOUIAId(Tabs.displayName)
+      ouiaStateId: getDefaultOUIAId(Tabs.displayName),
+      overflowingTabCount: 0
     };
 
     if (this.props.isVertical && this.props.expandable !== undefined) {
@@ -192,7 +206,13 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     }
   }
 
+  countOverflowingElements = (container: HTMLUListElement) => {
+    const elements = Array.from(container.children);
+    return elements.filter(element => !isElementInView(container, element as HTMLElement, false)).length;
+  };
+
   handleScrollButtons = () => {
+    const { isOverflowHorizontal: isOverflowHorizontal } = this.props;
     // add debounce to the scroll event
     clearTimeout(this.scrollTimeout);
     this.scrollTimeout = setTimeout(() => {
@@ -200,8 +220,9 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       let disableLeftScrollButton = true;
       let disableRightScrollButton = true;
       let showScrollButtons = false;
+      let overflowingTabCount = 0;
 
-      if (container && !this.props.isVertical) {
+      if (container && !this.props.isVertical && !isOverflowHorizontal) {
         // get first element and check if it is in view
         const overflowOnLeft = !isElementInView(container, container.firstChild as HTMLElement, false);
 
@@ -213,10 +234,16 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
         disableLeftScrollButton = !overflowOnLeft;
         disableRightScrollButton = !overflowOnRight;
       }
+
+      if (isOverflowHorizontal) {
+        overflowingTabCount = this.countOverflowingElements(container);
+      }
+
       this.setState({
         showScrollButtons,
         disableLeftScrollButton,
-        disableRightScrollButton
+        disableRightScrollButton,
+        overflowingTabCount
       });
     }, 100);
   };
@@ -280,8 +307,8 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   componentDidUpdate(prevProps: TabsProps) {
-    const { activeKey, mountOnEnter, children } = this.props;
-    const { shownKeys } = this.state;
+    const { activeKey, mountOnEnter, isOverflowHorizontal, children } = this.props;
+    const { shownKeys, overflowingTabCount } = this.state;
     if (prevProps.activeKey !== activeKey && mountOnEnter && shownKeys.indexOf(activeKey) < 0) {
       this.setState({
         shownKeys: shownKeys.concat(activeKey)
@@ -295,6 +322,11 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     ) {
       this.handleScrollButtons();
     }
+
+    const currentOverflowingTabCount = this.countOverflowingElements(this.tabList.current);
+    if (isOverflowHorizontal && currentOverflowingTabCount) {
+      this.setState({ overflowingTabCount: currentOverflowingTabCount + overflowingTabCount });
+    }
   }
 
   render() {
@@ -330,6 +362,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       onToggle,
       onClose,
       onAdd,
+      isOverflowHorizontal: isOverflowHorizontal,
       ...props
     } = this.props;
     const {
@@ -338,12 +371,17 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       disableRightScrollButton,
       shownKeys,
       uncontrolledActiveKey,
-      uncontrolledIsExpandedLocal
+      uncontrolledIsExpandedLocal,
+      overflowingTabCount
     } = this.state;
     const filteredChildren = (React.Children.toArray(children) as React.ReactElement<TabProps>[])
       .filter(Boolean)
       .filter(child => !child.props.isHidden);
 
+    const filteredChildrenWithoutOverflow = filteredChildren.slice(0, filteredChildren.length - overflowingTabCount);
+    const filteredChildrenOverflowing = filteredChildren.slice(filteredChildren.length - overflowingTabCount);
+    const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);
+
     const uniqueId = id || getUniqueId();
     const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
@@ -358,6 +396,9 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       }
     };
 
+    const hasOverflowTab = isOverflowHorizontal && overflowingTabCount > 0;
+    const overflowObjectProps = typeof isOverflowHorizontal === 'object' ? { ...isOverflowHorizontal } : {};
+
     return (
       <TabsContextProvider
         value={{
@@ -386,6 +427,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             hasSecondaryBorderBottom && styles.modifiers.borderBottom,
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
+            hasOverflowTab && styles.modifiers.overflow,
             className
           )}
           {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
@@ -419,27 +461,32 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
               )}
             </GenerateId>
           )}
-          <button
-            className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-            aria-label={leftScrollAriaLabel}
-            onClick={this.scrollLeft}
-            disabled={disableLeftScrollButton}
-            aria-hidden={disableLeftScrollButton}
-          >
-            <AngleLeftIcon />
-          </button>
+          {!isOverflowHorizontal && (
+            <button
+              className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
+              aria-label={leftScrollAriaLabel}
+              onClick={this.scrollLeft}
+              disabled={disableLeftScrollButton}
+              aria-hidden={disableLeftScrollButton}
+            >
+              <AngleLeftIcon />
+            </button>
+          )}
           <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
-            {filteredChildren}
+            {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
+            {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
           </ul>
-          <button
-            className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-            aria-label={rightScrollAriaLabel}
-            onClick={this.scrollRight}
-            disabled={disableRightScrollButton}
-            aria-hidden={disableRightScrollButton}
-          >
-            <AngleRightIcon />
-          </button>
+          {!isOverflowHorizontal && (
+            <button
+              className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
+              aria-label={rightScrollAriaLabel}
+              onClick={this.scrollRight}
+              disabled={disableRightScrollButton}
+              aria-hidden={disableRightScrollButton}
+            >
+              <AngleRightIcon />
+            </button>
+          )}
           {onAdd !== undefined && (
             <span className={css(styles.tabsAdd)}>
               <Button variant="plain" aria-label={addButtonAriaLabel || 'Add tab'} onClick={onAdd}>

package/src/components/Tabs/examples/Tabs.md

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject']
 ouia: true
 ---
 
@@ -410,6 +410,11 @@ class ScrollButtonsPrimaryTabs extends React.Component {
 }
 ```
 
+### Horizontal overflow
+
+```ts file="./TabsHorizontalOverflow.tsx" isBeta
+```
+
 ### Vertical
 
 ```js

package/src/components/Tabs/examples/TabsHorizontalOverflow.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
+
+export const TabsHorizontalOverflow: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [showTabCount, setShowTabCount] = React.useState(false);
+
+  const handleTabClick = (_event: any, tabIndex: string | number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        aria-label="Tabs in the horizontal overflow example"
+        role="region"
+        isOverflowHorizontal={{ showTabCount }}
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Horizontal overflow content users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>
+          Server
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>
+          System
+        </Tab>
+        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>
+          Network
+        </Tab>
+        <Tab eventKey={7} title={<TabTitleText>Tab item 7</TabTitleText>}>
+          Tab 7 section
+        </Tab>
+        <Tab eventKey={8} title={<TabTitleText>Tab item 8</TabTitleText>}>
+          Tab 8 section
+        </Tab>
+        <Tab eventKey={9} title={<TabTitleText>Tab item 9</TabTitleText>}>
+          Tab 9 section
+        </Tab>
+        <Tab eventKey={10} title={<TabTitleText>Tab item 10</TabTitleText>}>
+          Tab 10 section
+        </Tab>
+        <Tab eventKey={11} title={<TabTitleText>Tab item 11</TabTitleText>}>
+          Tab 11 section
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="Show overflowing tab count"
+          isChecked={showTabCount}
+          onChange={() => setShowTabCount(!showTabCount)}
+          aria-label="show overflow tab count variation checkbox"
+          id="toggle-show-count-overflow"
+          name="toggle-show-count-overflow"
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/TreeView/TreeView.tsx

@@ -45,6 +45,8 @@ export interface TreeViewProps {
   hasBadges?: boolean;
   /** Flag indicating if tree view has guide lines. */
   hasGuides?: 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 */
@@ -79,6 +81,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   hasChecks = false,
   hasBadges = false,
   hasGuides = false,
+  hasSelectableNodes = false,
   variant = 'default',
   defaultAllExpanded = false,
   allExpanded,
@@ -103,6 +106,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
           title={item.title}
           id={item.id}
           isExpanded={allExpanded}
+          isSelectable={hasSelectableNodes}
           defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
           onSelect={onSelect}
           onCheck={onCheck}
@@ -129,6 +133,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
                 hasChecks={hasChecks}
                 hasBadges={hasBadges}
                 hasGuides={hasGuides}
+                hasSelectableNodes={hasSelectableNodes}
                 variant={variant}
                 allExpanded={allExpanded}
                 defaultAllExpanded={defaultAllExpanded}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -33,6 +33,8 @@ export interface TreeViewListItemProps {
   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 */
   customBadgeContent?: React.ReactNode;
   /** Additional properties of the tree view item badge */
@@ -73,6 +75,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   hasBadge = false,
   customBadgeContent,
   badgeProps = { isRead: true },
+  isSelectable = false,
   isCompact,
   activeItems = [],
   itemData,
@@ -93,17 +96,27 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     }
   }, [isExpanded, defaultExpanded]);
 
-  const Component = hasCheck ? 'div' : 'button';
-  const ToggleComponent = hasCheck ? 'button' : 'div';
+  let Component: 'label' | 'div' | 'button' = 'button';
+  if (hasCheck) {
+    Component = 'label';
+  } else if (isSelectable) {
+    Component = 'div';
+  }
+
+  const ToggleComponent = hasCheck || isSelectable ? 'button' : 'span';
+
   const renderToggle = (randomId: string) => (
     <ToggleComponent
       className={css(styles.treeViewNodeToggle)}
-      onClick={() => {
-        if (hasCheck) {
+      onClick={(evt: React.MouseEvent) => {
+        if (isSelectable || hasCheck) {
           setIsExpanded(!internalIsExpanded);
         }
+        if (isSelectable) {
+          evt.stopPropagation();
+        }
       }}
-      {...(hasCheck && { 'aria-labelledby': `label-${randomId}` })}
+      {...((hasCheck || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -131,20 +144,18 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       {internalIsExpanded && (expandedIcon || icon)}
     </span>
   );
-  const renderNodeContent = (randomId: string) => {
+  const renderNodeContent = () => {
     const content = (
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
         {hasCheck ? (
-          <label className={css(styles.treeViewNodeText)} htmlFor={randomId} id={`label-${randomId}`}>
-            {name}
-          </label>
+          <span className={css(styles.treeViewNodeText)}>{name}</span>
         ) : (
           <span className={css(styles.treeViewNodeText)}>{name}</span>
         )}
       </>
     );
-    return isCompact ? <div className={css(styles.treeViewNodeContent)}>{content}</div> : content;
+    return isCompact ? <span className={css(styles.treeViewNodeContent)}>{content}</span> : content;
   };
   const badgeRendered = (
     <>
@@ -171,12 +182,13 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       tabIndex={-1}
     >
       <div className={css(styles.treeViewContent)}>
-        <GenerateId prefix="checkbox-id">
+        <GenerateId prefix={isSelectable ? 'selectable-id' : 'checkbox-id'}>
           {randomId => (
             <Component
               className={css(
                 styles.treeViewNode,
-                !children &&
+                children && (isSelectable || hasCheck) && styles.modifiers.selectable,
+                (!children || isSelectable) &&
                   activeItems &&
                   activeItems.length > 0 &&
                   activeItems.some(item => compareItems && item && compareItems(item, itemData))
@@ -186,20 +198,22 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
               onClick={(evt: React.MouseEvent) => {
                 if (!hasCheck) {
                   onSelect && onSelect(evt, itemData, parentItem);
-                  if (children && evt.isDefaultPrevented() !== true) {
+                  if (!isSelectable && children && evt.isDefaultPrevented() !== true) {
                     setIsExpanded(!internalIsExpanded);
                   }
                 }
               }}
-              tabIndex={-1}
+              tabIndex={isSelectable ? 0 : -1}
+              {...(hasCheck && { htmlFor: randomId })}
+              {...((hasCheck || (isSelectable && children)) && { id: `label-${randomId}` })}
             >
-              <div className={css(styles.treeViewNodeContainer)}>
+              <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}
                 {hasCheck && renderCheck(randomId)}
                 {icon && iconRendered}
-                {renderNodeContent(randomId)}
+                {renderNodeContent()}
                 {badgeRendered}
-              </div>
+              </span>
             </Component>
           )}
         </GenerateId>