@patternfly/react-core 4.227.7 → 4.228.0

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

@@ -10,177 +10,30 @@ ouia: true
 
 ### Basic
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class SimpleSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        id="simple-switch"
-        label="Message when on"
-        labelOff="Message when off"
-        isChecked={isChecked}
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
+```ts file="./SwitchBasic.tsx"
 ```
 
 ### Reversed Layout
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class ReversedSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        id="reversed-switch"
-        label="Message when on"
-        labelOff="Message when off"
-        isChecked={isChecked}
-        onChange={this.handleChange}
-        isReversed
-      />
-    );
-  }
-}
+```ts file="./SwitchReversed.tsx"
 ```
 
 ### Without label
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class NoLabelSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch id="no-label-switch-on" aria-label="Message when on" isChecked={isChecked} onChange={this.handleChange} />
-    );
-  }
-}
+```ts file="./SwitchWithoutLabel.tsx"
 ```
 
 ### Checked with label
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-class CheckedWithLabelSwitch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isChecked: true
-    };
-    this.handleChange = isChecked => {
-      this.setState({ isChecked });
-    };
-  }
-
-  render() {
-    const { isChecked } = this.state;
-    return (
-      <Switch
-        label="Message when on"
-        labelOff="Message when off"
-        id="checked-with-label-switch-on"
-        aria-label="Message when on"
-        isChecked={isChecked}
-        hasCheckIcon
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
+```ts file="./SwitchCheckedWithLabel.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Switch
-    id="disabled-switch-on"
-    aria-label="Message when on"
-    label="Message when on"
-    labelOff="Message when off"
-    isChecked
-    isDisabled
-  />
-  <br />
-  <Switch
-    id="disabled-switch-off"
-    aria-label="Message when on"
-    label="Message when on"
-    labelOff="Message when off"
-    isChecked={false}
-    isDisabled
-  />
-  <br />
-  <Switch id="disabled-no-label-switch-on" aria-label="Message when on" isChecked isDisabled />
-  <br />
-  <Switch id="disabled-no-label-switch-off" aria-label="Message when on" isChecked={false} isDisabled />
-</React.Fragment>;
+```ts file="./SwitchDisabled.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { Switch } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Switch
-    id="uncontrolled-switch-no-label"
-    aria-label="An uncontrolled switch with no label"
-    defaultChecked={false}
-  />
-  <br />
-  <Switch
-    id="uncontrolled-switch-with-label"
-    label="An uncontrolled switch"
-    defaultChecked={false}
-  />
-</React.Fragment>;
+```ts file="./SwitchUncontrolled.tsx"
 ```

package/src/components/Switch/examples/SwitchBasic.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchBasic: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      id="simple-switch"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={isChecked}
+      onChange={handleChange}
+    />
+  );
+};

package/src/components/Switch/examples/SwitchCheckedWithLabel.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchCheckedWithLabel: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      label="Message when on"
+      labelOff="Message when off"
+      id="checked-with-label-switch-on"
+      aria-label="Message when on"
+      isChecked={isChecked}
+      hasCheckIcon
+      onChange={handleChange}
+    />
+  );
+};

package/src/components/Switch/examples/SwitchDisabled.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchDisabled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Switch
+      id="disabled-switch-on"
+      aria-label="Message when on"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked
+      isDisabled
+    />
+    <br />
+    <Switch
+      id="disabled-switch-off"
+      aria-label="Message when on"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={false}
+      isDisabled
+    />
+    <br />
+    <Switch id="disabled-no-label-switch-on" aria-label="Message when on" isChecked isDisabled />
+    <br />
+    <Switch id="disabled-no-label-switch-off" aria-label="Message when on" isChecked={false} isDisabled />
+  </React.Fragment>
+);

package/src/components/Switch/examples/SwitchReversed.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchReversed: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return (
+    <Switch
+      id="reversed-switch"
+      label="Message when on"
+      labelOff="Message when off"
+      isChecked={isChecked}
+      onChange={handleChange}
+      isReversed
+    />
+  );
+};

package/src/components/Switch/examples/SwitchUncontrolled.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchUncontrolled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Switch
+      id="uncontrolled-switch-no-label"
+      aria-label="An uncontrolled switch with no label"
+      defaultChecked={false}
+    />
+    <br />
+    <Switch id="uncontrolled-switch-with-label" label="An uncontrolled switch" defaultChecked={false} />
+  </React.Fragment>
+);

package/src/components/Switch/examples/SwitchWithoutLabel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+export const SwitchWithoutLabel: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+
+  const handleChange = (checked: boolean, _event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(checked);
+  };
+
+  return <Switch id="no-label-switch-on" aria-label="Message when on" isChecked={isChecked} onChange={handleChange} />;
+};

package/src/components/Tabs/OverflowTab.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
+import { css } from '@patternfly/react-styles';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { Popper } from '../../helpers';
+import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
+import { TabsContext } from './TabsContext';
+import { TabProps } from './Tab';
+import { TabTitleText } from './TabTitleText';
+
+export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
+  /** Additional classes added to the overflow tab */
+  className?: string;
+  /** The tabs that should be displayed in the menu */
+  overflowingTabs?: TabProps[];
+  /** 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 const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
+  className,
+  overflowingTabs = [],
+  showTabCount,
+  defaultTitleText = 'More',
+  toggleAriaLabel,
+  ...props
+}: OverflowTabProps) => {
+  const menuRef = React.useRef<HTMLDivElement>();
+  const overflowTabRef = React.useRef<HTMLButtonElement>();
+  const overflowLIRef = React.useRef<HTMLLIElement>();
+
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const { localActiveKey, handleTabClick } = React.useContext(TabsContext);
+
+  const closeMenu = () => {
+    setIsExpanded(false);
+    overflowTabRef.current.focus();
+  };
+
+  const handleMenuKeys = (ev: KeyboardEvent) => {
+    const menuContainsEventTarget = menuRef?.current?.contains(ev.target as Node);
+    if (isExpanded && menuContainsEventTarget && ev.key === 'Escape') {
+      closeMenu();
+    }
+  };
+
+  const handleClick = (ev: MouseEvent) => {
+    const clickIsOutsideMenu = !menuRef?.current?.contains(ev.target as Node);
+    const clickIsOutsideOverflowTab = !overflowTabRef?.current?.contains(ev.target as Node);
+    if (isExpanded && clickIsOutsideMenu && clickIsOutsideOverflowTab) {
+      closeMenu();
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('click', handleClick);
+    window.addEventListener('keydown', handleMenuKeys);
+
+    return () => {
+      window.removeEventListener('click', handleClick);
+      window.removeEventListener('keydown', handleMenuKeys);
+    };
+  }, [isExpanded, menuRef, overflowTabRef]);
+
+  const selectedTab = overflowingTabs.find(tab => tab.eventKey === localActiveKey);
+  const tabTitle = selectedTab?.title ? selectedTab.title : defaultTitleText;
+
+  const toggleMenu = () => {
+    setIsExpanded(prevIsExpanded => !prevIsExpanded);
+    setTimeout(() => {
+      if (menuRef?.current) {
+        const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+  };
+
+  const overflowTab = (
+    <li
+      className={css(styles.tabsItem, 'pf-m-overflow', selectedTab && styles.modifiers.current, className)}
+      role="presentation"
+      ref={overflowLIRef}
+      {...props}
+    >
+      <button
+        className={css(styles.tabsLink, isExpanded && styles.modifiers.expanded)}
+        onClick={() => toggleMenu()}
+        aria-label={toggleAriaLabel}
+        aria-haspopup="menu"
+        aria-expanded={isExpanded}
+        role="tab"
+        ref={overflowTabRef}
+      >
+        <TabTitleText>
+          {tabTitle}
+          {showTabCount && tabTitle === defaultTitleText && ` (${overflowingTabs.length})`}
+        </TabTitleText>
+        <span className={styles.tabsLinkToggleIcon}>
+          <AngleRightIcon />
+        </span>
+      </button>
+    </li>
+  );
+
+  const tabs = overflowingTabs.map(tab => (
+    <MenuItem key={tab.eventKey} itemId={tab.eventKey} isSelected={localActiveKey === tab.eventKey}>
+      {tab.title}
+    </MenuItem>
+  ));
+
+  const onTabSelect = (event: React.MouseEvent<HTMLElement, MouseEvent>, key: number | string) => {
+    closeMenu();
+    const selectedTabRef = overflowingTabs.find(tab => tab.eventKey === key).tabContentRef;
+    handleTabClick(event, key, selectedTabRef);
+  };
+
+  const overflowMenu = (
+    <Menu ref={menuRef} onSelect={(ev, itemId) => onTabSelect(ev as React.MouseEvent<HTMLElement, MouseEvent>, itemId)}>
+      <MenuContent>
+        <MenuList>{tabs}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <Popper
+      trigger={overflowTab}
+      popper={overflowMenu}
+      isVisible={isExpanded}
+      popperMatchesTriggerWidth={false}
+      appendTo={overflowLIRef.current}
+    />
+  );
+};
+
+OverflowTab.displayName = 'OverflowTab';

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