@patternfly/react-core 4.227.7 → 4.228.0

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

@@ -9,6 +9,8 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Adds disabled styling and a disabled context value which text input group main hooks into for the input itself */
   isDisabled?: boolean;
+  /** Flag to indicate the toggle has no border or background */
+  isPlain?: boolean;
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -21,6 +23,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   children,
   className,
   isDisabled,
+  isPlain,
   innerRef,
   ...props
 }: TextInputGroupProps) => {
@@ -30,7 +33,12 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
     <TextInputGroupContext.Provider value={{ isDisabled }}>
       <div
         ref={textInputGroupRef}
-        className={css(styles.textInputGroup, isDisabled && styles.modifiers.disabled, className)}
+        className={css(
+          styles.textInputGroup,
+          isDisabled && styles.modifiers.disabled,
+          isPlain && styles.modifiers.plain,
+          className
+        )}
         {...props}
       >
         {children}

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -37,7 +37,7 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   value?: string | number;
   /** Placeholder value for the input */
   placeholder?: string;
-  /** @hide A reference object to attach to the input box */
+  /** A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
 

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>