@patternfly/react-core 4.271.1 → 4.272.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.271.1",
+  "version": "4.272.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",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "541f76a7ca04fc3206d75f13648dda8cc92c9e15"
+  "gitHead": "98f8a725aca70798a70fa397ac93e3f870a32b29"
 }

package/src/components/Alert/examples/Alert.md

@@ -360,4 +360,4 @@ Alerts that are asynchronously appended into dynamic [alert groups](/components/
 
 This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the [https://www.patternfly.org/v4/components/alert/accessibility](alert accessibility) for more information.
 ```ts file="AlertAsyncLiveRegion.tsx"
-```
+```

package/src/components/LoginPage/LoginPage.tsx

@@ -35,7 +35,7 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   loginTitle: string;
   /** Subtitle for the login main body header of the login page */
   loginSubtitle?: string;
-  /** @beta Header utilities for the login main body header of the login page */
+  /** Header utilities for the login main body header of the login page */
   headerUtilities?: React.ReactNode;
   /** Content rendered inside of login main footer band to display a sign up for account message */
   signUpForAccountMessage?: React.ReactNode;

package/src/components/Menu/MenuItem.tsx

@@ -24,7 +24,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
-  /** @beta Flag indicating the item has a checkbox */
+  /** Flag indicating the item has a checkbox */
   hasCheck?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;

package/src/components/SearchInput/SearchInput.tsx

@@ -130,6 +130,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   submitSearchButtonLabel?: string;
   /** Value of the search input. */
   value?: string;
+  /** Name attribue for the search input */
+  name?: string;
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -164,6 +166,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   removeFindDomNode = false,
   zIndex = 9999,
   type = 'text',
+  name,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -304,6 +307,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
         type={type}
+        name={name}
       />
       {renderUtilities && (
         <TextInputGroupUtilities>

package/src/components/Select/Select.tsx

@@ -73,7 +73,7 @@ export interface SelectProps
   isCreateOptionOnTop?: boolean;
   /** Flag indicating if placeholder styles should be applied */
   hasPlaceholderStyle?: boolean;
-  /** @beta Flag indicating if the creatable option should set its value as a SelectOptionObject */
+  /** Flag indicating if the creatable option should set its value as a SelectOptionObject */
   isCreateSelectOptionObject?: boolean;
   /** Value to indicate if the select is modified to show that validation state.
    * If set to success, select will be modified to indicate valid state.
@@ -81,7 +81,7 @@ export interface SelectProps
    * If set to warning, select will be modified to indicate warning state.
    */
   validated?: 'success' | 'warning' | 'error' | 'default';
-  /** @beta Loading variant to display either the spinner or the view more text button */
+  /** Loading variant to display either the spinner or the view more text button */
   loadingVariant?: 'spinner' | SelectViewMoreObject;
   /** Text displayed in typeahead select to prompt the user to create an item */
   createText?: string;
@@ -165,7 +165,7 @@ export interface SelectProps
   chipGroupComponent?: React.ReactNode;
   /** Flag for retaining keyboard-entered value in typeahead text field when focus leaves input away */
   isInputValuePersisted?: boolean;
-  /** @beta Flag for retaining filter results on blur from keyboard-entered typeahead text */
+  /** Flag for retaining filter results on blur from keyboard-entered typeahead text */
   isInputFilterPersisted?: boolean;
   /** Flag indicating the typeahead input value should reset upon selection */
   shouldResetOnSelect?: boolean;

package/src/components/Tabs/Tabs.tsx

@@ -42,11 +42,11 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   defaultActiveKey?: number | string;
   /** Callback to handle tab selection */
   onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
-  /** @beta Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
+  /** Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
   onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
-  /** @beta Callback for the add button. Passing this property inserts the add button */
+  /** Callback for the add button. Passing this property inserts the add button */
   onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  /** @beta Aria-label for the add button */
+  /** Aria-label for the add button */
   addButtonAriaLabel?: string;
   /** Uniquely identifies the tabs */
   id?: string;

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

@@ -141,15 +141,15 @@ The tooltip should also have the `id` prop passed in. The value given to this pr
 
 To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable the add button, pass the `onAdd` property to `Tabs`. Aria labels may be controlled manually by passing `closeButtonAriaLabel` to `Tab` and `addButtonAriaLabel` to `Tabs`.
 
-```ts file="./TabsDynamic.tsx" isBeta
+```ts file="./TabsDynamic.tsx" 
 ```
 
 ### Help action
 
-```ts file="./TabsHelp.tsx" isBeta
+```ts file="./TabsHelp.tsx"
 ```
 
 ### Help and close actions
 
-```ts file="./TabsHelpAndClose.tsx" isBeta
+```ts file="./TabsHelpAndClose.tsx"
 ```

package/src/components/TextArea/examples/TextArea.md

@@ -56,5 +56,5 @@ propComponents: ['TextArea']
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```ts isBeta file="./TextAreaIconSprite.tsx"
+```ts file="./TextAreaIconSprite.tsx"
 ```

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -39,6 +39,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   placeholder?: string;
   /** A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
+  /** Name for the input */
+  name?: string;
 }
 
 export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -54,6 +56,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   value: inputValue,
   placeholder: inputPlaceHolder,
   innerRef,
+  name,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
@@ -89,6 +92,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
           onBlur={onBlur}
           value={inputValue || ''}
           placeholder={inputPlaceHolder}
+          name={name}
         />
       </span>
     </div>

package/src/components/TimePicker/TimePicker.tsx

@@ -42,7 +42,14 @@ export interface TimePickerProps
   /** True if the time is 24 hour time. False if the time is 12 hour time */
   is24Hour?: boolean;
   /** Optional event handler called each time the value in the time picker input changes. */
-  onChange?: (time: string, hour?: number, minute?: number, seconds?: number, isValid?: boolean) => void;
+  onChange?: (
+    event: React.FormEvent<HTMLInputElement>,
+    time: string,
+    hour?: number,
+    minute?: number,
+    seconds?: number,
+    isValid?: boolean
+  ) => void;
   /** Optional validator can be provided to override the internal time validator. */
   validateTime?: (time: string) => boolean;
   /** Id of the time picker */
@@ -389,7 +396,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const { delimiter, is24Hour, includeSeconds, setIsOpen } = this.props;
     const time = parseTime(e.target.textContent, timeRegex, delimiter, !is24Hour, includeSeconds);
     if (time !== timeState) {
-      this.onInputChange(time);
+      this.onInputChange(time, e);
     }
 
     this.inputRef.current.focus();
@@ -407,12 +414,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     e.stopPropagation();
   };
 
-  onInputChange = (newTime: string) => {
+  onInputChange = (newTime: string, event: React.FormEvent<HTMLInputElement>) => {
     const { onChange } = this.props;
     const { timeRegex } = this.state;
 
     if (onChange) {
       onChange(
+        event,
         newTime,
         getHours(newTime, timeRegex),
         getMinutes(newTime, timeRegex),

package/src/components/TimePicker/__tests__/TimePicker.test.tsx

@@ -35,7 +35,14 @@ describe('TimePicker', () => {
       render(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
 
       await user.type(screen.getByLabelText('time picker'), String(inputProps.value));
-      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
+      expect(onChange).toHaveBeenCalledWith(
+        expect.any(Object),
+        inputProps.value,
+        expects.hour,
+        expects.minutes,
+        expects.seconds,
+        true
+      );
     };
 
     test('should return the correct value using the AM/PM pattern - midnight', async () => {

package/src/components/TimePicker/examples/TimePicker.md

@@ -19,7 +19,7 @@ import React from 'react';
 import { TimePicker } from '@patternfly/react-core';
 
 SimpleTimePicker = () => {
-  const onChange = (time, hour, minute, seconds, isValid) => {
+  const onChange = (_event, time, hour, minute, seconds, isValid) => {
     console.log('time', time);
     console.log('hour', hour);
     console.log('minute', minute);

package/src/components/Wizard/Wizard.tsx

@@ -112,6 +112,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled. Can be used to set browser focus in the drawer. */
+  onExpandDrawer?: () => void;
 }
 
 interface WizardState {
@@ -149,7 +151,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     isOpen: undefined,
     isNavExpandable: false,
     hasDrawer: false,
-    isDrawerExpanded: false
+    isDrawerExpanded: false,
+    onExpandDrawer: () => undefined as any
   };
   private titleId: string;
   private descriptionId: string;
@@ -408,6 +411,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       onCurrentStepChanged,
       hasDrawer,
       isDrawerExpanded,
+      onExpandDrawer,
       ...rest
       /* eslint-enable @typescript-eslint/no-unused-vars */
     } = this.props;
@@ -539,6 +543,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
           <WizardToggle
             hasDrawer={hasDrawer}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             mainAriaLabel={mainAriaLabel}
             isInPage={isOpen === undefined}
             mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}

package/src/components/Wizard/WizardBody.tsx

@@ -22,6 +22,7 @@ export interface WizardBodyProps {
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
   /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
@@ -32,6 +33,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   mainComponent = 'div',
   hasDrawer,
   isDrawerExpanded,
+  onExpandDrawer,
   activeStep
 }: WizardBodyProps) => {
   const MainComponent = mainComponent;
@@ -40,7 +42,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
       <WizardDrawerWrapper
         hasDrawer={hasDrawer && activeStep.drawerPanelContent}
         wrapper={(children: React.ReactNode) => (
-          <Drawer isInline isExpanded={isDrawerExpanded}>
+          <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpandDrawer}>
             <DrawerContent panelContent={activeStep.drawerPanelContent}>{children}</DrawerContent>
           </Drawer>
         )}

package/src/components/Wizard/WizardToggle.tsx

@@ -33,6 +33,8 @@ export interface WizardToggleProps {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
@@ -48,7 +50,8 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
   mainAriaLabel = null,
   isInPage = true,
   hasDrawer,
-  isDrawerExpanded
+  isDrawerExpanded,
+  onExpandDrawer
 }: WizardToggleProps) => {
   let activeStepIndex;
   let activeStepName;
@@ -99,6 +102,7 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
             hasNoBodyPadding={hasNoBodyPadding}
             activeStep={activeStep}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             hasDrawer={hasDrawer}
           >
             {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}

package/src/components/Wizard/examples/WizardWithDrawer.tsx

@@ -14,6 +14,10 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
 
   const drawerRef = React.useRef<HTMLSpanElement>(null);
 
+  const onExpandDrawer = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
   const onOpenClick = () => {
     setIsDrawerExpanded(true);
   };
@@ -117,6 +121,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
       <Wizard
         height={400}
         isDrawerExpanded={isDrawerExpanded}
+        onExpandDrawer={onExpandDrawer}
         hasDrawer
         navAriaLabel={`${title} steps`}
         steps={steps}

package/src/demos/DatePicker/DatePicker.md

@@ -80,7 +80,7 @@ DateTimeRangePicker = () => {
     }
   };
   
-  const onFromTimeChange = (time, hour, minute) => {
+  const onFromTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(from)) {
       const updatedFromDate = new Date(from);
       updatedFromDate.setHours(hour);
@@ -99,7 +99,7 @@ DateTimeRangePicker = () => {
     }
   };
   
-  const onToTimeChange = (time, hour, minute) => {
+  const onToTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(to)) {
       const updatedToDate = new Date(to);
       updatedToDate.setHours(hour);

package/src/demos/Wizard/WizardDemo.md

@@ -289,6 +289,7 @@ class WizardModalWithDrawerDemo extends React.Component {
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
+          onExpandDrawer={this.onExpand}
           mainAriaLabel={`${title} content`}
           titleId="wiz-modal-demo-title"
           descriptionId="wiz-modal-demo-description"
@@ -539,6 +540,7 @@ class WizardModalWithDrawerDemo extends React.Component {
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
+          onExpandDrawer={this.onExpand}
           mainAriaLabel={`${title} content`}
           titleId="wiz-modal-demo-title"
           descriptionId="wiz-modal-demo-description"
@@ -877,6 +879,7 @@ class FullPageWizard extends React.Component {
             <Wizard
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
+              onExpandDrawer={this.onExpand}
               navAriaLabel={`${title} steps`}
               mainAriaLabel={`${title} content`}
               steps={steps}
@@ -1194,6 +1197,7 @@ class FullPageWizard extends React.Component {
             <Wizard
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
+              onExpandDrawer={this.onExpand}
               navAriaLabel={`${title} steps`}
               mainAriaLabel={`${title} content`}
               steps={steps}

package/src/next/components/Wizard/examples/WizardKitchenSink.tsx

@@ -76,14 +76,21 @@ const CustomWizardFooter = () => {
 
 const StepContentWithDrawer = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
+
+  const onWizardExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
 
   return (
-    <Drawer isInline isExpanded={isDrawerExpanded}>
+    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
       <DrawerContent
         panelContent={
           <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
             <DrawerHead>
-              <span tabIndex={isDrawerExpanded ? 0 : -1}>drawer content</span>
+              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+                drawer content
+              </span>
               <DrawerActions>
                 <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />
               </DrawerActions>