@patternfly/react-core 4.215.0 → 4.217.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.215.0",
+  "version": "4.217.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.66.0",
-    "@patternfly/react-styles": "^4.65.0",
-    "@patternfly/react-tokens": "^4.67.0",
+    "@patternfly/react-icons": "^4.68.0",
+    "@patternfly/react-styles": "^4.67.0",
+    "@patternfly/react-tokens": "^4.69.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": "7df23c027f02c66cd27907fb2caf63109687900b"
+  "gitHead": "a1b1c66e6c186a78cc60ce3182959cc771fc27c9"
 }

package/src/components/HelperText/HelperTextItem.tsx

@@ -29,6 +29,10 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
    * assistive technologies.
    */
   id?: string;
+  /** Text that is only accessible to screen readers in order to announce the status of a helper text item.
+   * This prop can only be used when the isDynamic prop is also passed in.
+   */
+  screenReaderText?: string;
 }
 
 const variantStyle = {
@@ -48,6 +52,7 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
   isDynamic = false,
   hasIcon = isDynamic,
   id,
+  screenReaderText = `${variant} status`,
   ...props
 }: HelperTextItemProps) => {
   const Component = component as any;
@@ -70,7 +75,11 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
           {variant === 'error' && <ExclamationCircleIcon />}
         </span>
       )}
-      <span className={css(styles.helperTextItemText)}>{children}</span>
+
+      <span className={css(styles.helperTextItemText)}>
+        {children}
+        {isDynamic && <span className="pf-u-screen-reader">: {screenReaderText};</span>}
+      </span>
     </Component>
   );
 };

package/src/components/HelperText/__tests__/__snapshots__/HelperText.test.tsx.snap

@@ -44,6 +44,11 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
         class="pf-c-helper-text__item-text"
       >
         help test text
+        <span
+          class="pf-u-screen-reader"
+        >
+          : default status;
+        </span>
       </span>
     </div>
   </div>

package/src/components/Select/Select.tsx

@@ -679,13 +679,13 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
   };
 
   handleTypeaheadKeys = (position: string, shiftKey: boolean = false) => {
-    const { isOpen, onFavorite } = this.props;
+    const { isOpen, onFavorite, isCreatable } = this.props;
     const { typeaheadCurrIndex, tabbedIntoFavoritesMenu } = this.state;
     const typeaheadActiveChild = this.getTypeaheadActiveChild(typeaheadCurrIndex);
     if (isOpen) {
       if (position === 'enter') {
         if (
-          typeaheadCurrIndex !== -1 && // do not allow selection without moving to an initial option
+          (typeaheadCurrIndex !== -1 || (isCreatable && this.refCollection.length === 1)) && // do not allow selection without moving to an initial option unless it is a single create option
           (typeaheadActiveChild || (this.refCollection[0] && this.refCollection[0][0]))
         ) {
           if (typeaheadActiveChild) {

package/src/demos/examples/DashboardHeader.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import {
+  ApplicationLauncher,
+  ApplicationLauncherItem,
   Avatar,
   Brand,
   Button,
@@ -18,14 +20,13 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
-  PageToggleButton,
-  Divider
+  PageToggleButton
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-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 AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import imgBrand from './pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
@@ -36,6 +37,7 @@ export default class DashboardHeader extends React.Component {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
       isFullKebabDropdownOpen: false,
+      isAppLauncherOpen: false,
       activeItem: 0
     };
 
@@ -74,10 +76,22 @@ export default class DashboardHeader extends React.Component {
         isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen
       });
     };
+
+    this.onAppLauncherToggle = isAppLauncherOpen => {
+      this.setState({
+        isAppLauncherOpen
+      });
+    };
+
+    this.onAppLauncherSelect = () => {
+      this.setState({
+        isAppLauncherOpen: !this.state.isAppLauncherOpen
+      });
+    };
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, isAppLauncherOpen } = this.state;
 
     const kebabDropdownItems = [
       <DropdownItem key="kebab-1">
@@ -97,21 +111,13 @@ export default class DashboardHeader extends React.Component {
       </DropdownGroup>
     ];
 
-    const fullKebabItems = [
-      <DropdownGroup key="group 2">
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user" component="button">
-          User management
-        </DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </DropdownGroup>,
-      <Divider key="divider" />,
-      <DropdownItem key="kebab-1">
-        <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem key="kebab-2">
-        <HelpIcon /> Help
-      </DropdownItem>
+    const appLauncherItems = [
+      <ApplicationLauncherItem key="application_1a" href="#">
+        Application 1 (anchor link)
+      </ApplicationLauncherItem>,
+      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+        Application 2 (button with onClick)
+      </ApplicationLauncherItem>
     ];
 
     const headerToolbar = (
@@ -123,51 +129,45 @@ export default class DashboardHeader extends React.Component {
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
             <ToolbarItem>
-              <Button aria-label="Notifications" variant={ButtonVariant.plain}>
-                <AttentionBellIcon />
-              </Button>
+              <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
             </ToolbarItem>
             <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+              <ToolbarItem visibility={{ default: 'hidden', sm: 'hidden', lg: 'visible' }}>
+                <ApplicationLauncher
+                  onSelect={this.onAppLauncherSelect}
+                  onToggle={this.onAppLauncherToggle}
+                  isOpen={isAppLauncherOpen}
+                  items={appLauncherItems}
+                />
+              </ToolbarItem>
               <ToolbarItem>
-                <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-                  <CogIcon />
-                </Button>
+                <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
               </ToolbarItem>
               <ToolbarItem>
-                <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                  <QuestionCircleIcon />
-                </Button>
+                <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
               </ToolbarItem>
             </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', sm: 'visible', md: 'visible', lg: 'hidden' }}>
+              <Dropdown
+                isPlain
+                position="right"
+                onSelect={this.onKebabDropdownSelect}
+                toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
+                isOpen={isKebabDropdownOpen}
+                dropdownItems={kebabDropdownItems}
+              />
+            </ToolbarItem>
           </ToolbarGroup>
-          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-            <Dropdown
-              isPlain
-              position="right"
-              onSelect={this.onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
-              isOpen={isKebabDropdownOpen}
-              dropdownItems={kebabDropdownItems}
-            />
-          </ToolbarItem>
-          <ToolbarItem visibility={{ default: 'visible', md: 'hidden', lg: 'hidden', xl: 'hidden', '2xl': 'hidden' }}>
-            <Dropdown
-              isPlain
-              position="right"
-              onSelect={this.onFullKebabSelect}
-              toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}
-              isOpen={isFullKebabDropdownOpen}
-              dropdownItems={fullKebabItems}
-            />
-          </ToolbarItem>
-          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+
+          <ToolbarItem visibility={{ default: 'hidden', sm: 'visible' }}>
             <Dropdown
               position="right"
+              isFullHeight
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
               toggle={
                 <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
-                  John Smith
+                  Ned Username
                 </DropdownToggle>
               }
               dropdownItems={userDropdownItems}