@patternfly/react-core 6.2.0-prerelease.2 → 6.2.0-prerelease.21

package/src/components/SearchInput/SearchInput.tsx

@@ -124,6 +124,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   value?: string;
   /** Name attribue for the search input */
   name?: string;
+  /** Additional props to spread to the search input element. */
+  inputProps?: any;
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -140,7 +142,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   onSearch,
   onClear,
   onToggleAdvancedSearch,
-  isAdvancedSearchOpen,
+  isAdvancedSearchOpen = false,
   resultsCount,
   onNextClick,
   onPreviousClick,
@@ -159,6 +161,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   zIndex = 9999,
   name,
   areUtilitiesDisplayed,
+  inputProps,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -302,6 +305,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onChange={onChangeHandler}
         name={name}
         inputId={searchInputId}
+        inputProps={inputProps}
       />
       {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>

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

@@ -105,6 +105,8 @@ describe('SearchInput', () => {
         onClear={props.onClear}
       />
     );
+    const expandButton = screen.getByRole('button', { name: 'Open advanced search' });
+    expect(expandButton).toHaveAttribute('aria-expanded', 'false');
 
     await user.click(screen.getByRole('button', { name: 'Search' }));
 
@@ -139,7 +141,12 @@ describe('SearchInput', () => {
 
     await user.click(screen.getByRole('button', { name: 'Search' }));
 
-    await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    const expandButton = screen.getByRole('button', { name: 'Open advanced search' });
+    expect(expandButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(expandButton);
+    expect(expandButton).toHaveAttribute('aria-expanded', 'true');
+
     expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'));
 
     expect(props.onSearch).toHaveBeenCalled();
@@ -149,7 +156,14 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo="inline', async () => {
     const user = userEvent.setup();
 
-    render(<SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />);
+    render(
+      <SearchInput
+        data-testid="test-id"
+        attributes={[{ attr: 'test', display: 'test' }]}
+        advancedSearchDelimiter=":"
+        appendTo="inline"
+      />
+    );
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
 
@@ -160,7 +174,12 @@ describe('SearchInput', () => {
     const user = userEvent.setup();
 
     render(
-      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
+      <SearchInput
+        data-testid="test-id"
+        attributes={[{ attr: 'test', display: 'test' }]}
+        advancedSearchDelimiter=":"
+        appendTo={document.body}
+      />
     );
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
@@ -256,3 +275,8 @@ test('Utilities are rendered when areUtilitiesDisplayed is set', () => {
   render(<SearchInput {...props} areUtilitiesDisplayed resetButtonLabel="test-util-display" />);
   expect(screen.getByLabelText('test-util-display')).toBeVisible();
 });
+
+test('Additional props are spread when inputProps prop is passed', () => {
+  render(<SearchInput aria-label="Test input" inputProps={{ autofocus: 'true' }} />);
+  expect(screen.getByLabelText('Test input')).toHaveAttribute('autofocus', 'true');
+});

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

@@ -49,7 +49,6 @@ exports[`SearchInput advanced search 1`] = `
             class="pf-v6-c-text-input-group__utilities"
           >
             <button
-              aria-disabled="false"
               aria-label="Reset"
               class="pf-v6-c-button pf-m-plain"
               type="button"
@@ -79,7 +78,6 @@ exports[`SearchInput advanced search 1`] = `
         class="pf-v6-c-input-group__item pf-m-plain"
       >
         <button
-          aria-disabled="false"
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v6-c-button pf-m-control"
@@ -108,7 +106,6 @@ exports[`SearchInput advanced search 1`] = `
         class="pf-v6-c-input-group__item"
       >
         <button
-          aria-disabled="false"
           aria-label="Search"
           class="pf-v6-c-button pf-m-control"
           type="submit"
@@ -141,13 +138,6 @@ exports[`SearchInput advanced search 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class=""
-      data-popper-escaped="true"
-      data-popper-placement="bottom-start"
-      data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
-    />
   </div>
 </DocumentFragment>
 `;
@@ -202,7 +192,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
             class="pf-v6-c-text-input-group__utilities"
           >
             <button
-              aria-disabled="false"
               aria-label="Reset"
               class="pf-v6-c-button pf-m-plain"
               type="button"
@@ -232,7 +221,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
         class="pf-v6-c-input-group__item pf-m-plain"
       >
         <button
-          aria-disabled="false"
           aria-expanded="true"
           aria-label="Open advanced search"
           class="pf-v6-c-button pf-m-control pf-m-expanded"
@@ -261,7 +249,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
         class="pf-v6-c-input-group__item"
       >
         <button
-          aria-disabled="false"
           aria-label="Search"
           class="pf-v6-c-button pf-m-control"
           type="submit"
@@ -299,7 +286,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     >
       <div
         class="pf-v6-c-panel pf-m-raised"
@@ -420,7 +407,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   class="pf-v6-c-form__group-control"
                 >
                   <button
-                    aria-disabled="false"
                     class="pf-v6-c-button pf-m-link pf-m-inline"
                     type="button"
                   >
@@ -459,7 +445,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     class="pf-v6-c-form__actions"
                   >
                     <button
-                      aria-disabled="false"
                       class="pf-v6-c-button pf-m-primary"
                       type="submit"
                     >
@@ -470,7 +455,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                       </span>
                     </button>
                     <button
-                      aria-disabled="false"
                       class="pf-v6-c-button pf-m-link"
                       type="reset"
                     >
@@ -541,7 +525,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
             class="pf-v6-c-text-input-group__utilities"
           >
             <button
-              aria-disabled="false"
               aria-label="Reset"
               class="pf-v6-c-button pf-m-plain"
               type="button"
@@ -571,7 +554,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
         class="pf-v6-c-input-group__item pf-m-plain"
       >
         <button
-          aria-disabled="false"
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v6-c-button pf-m-control"
@@ -600,7 +582,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
         class="pf-v6-c-input-group__item"
       >
         <button
-          aria-disabled="false"
           aria-label="Search"
           class="pf-v6-c-button pf-m-control"
           type="submit"
@@ -633,13 +614,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
         </button>
       </div>
     </div>
-    <div
-      class=""
-      data-popper-escaped="true"
-      data-popper-placement="bottom-start"
-      data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
-    />
   </div>
 </DocumentFragment>
 `;
@@ -700,7 +674,6 @@ exports[`SearchInput search input with hint 1`] = `
             class="pf-v6-c-text-input-group__group"
           >
             <button
-              aria-disabled="false"
               aria-label="Previous"
               class="pf-v6-c-button pf-m-plain"
               type="button"
@@ -724,7 +697,6 @@ exports[`SearchInput search input with hint 1`] = `
               </span>
             </button>
             <button
-              aria-disabled="false"
               aria-label="Next"
               class="pf-v6-c-button pf-m-plain"
               type="button"
@@ -749,7 +721,6 @@ exports[`SearchInput search input with hint 1`] = `
             </button>
           </div>
           <button
-            aria-disabled="false"
             aria-label="Reset"
             class="pf-v6-c-button pf-m-plain"
             type="button"
@@ -779,7 +750,6 @@ exports[`SearchInput search input with hint 1`] = `
       class="pf-v6-c-input-group__item"
     >
       <button
-        aria-disabled="false"
         aria-label="Search"
         class="pf-v6-c-button pf-m-control"
         type="submit"
@@ -864,7 +834,6 @@ exports[`SearchInput simple search input 1`] = `
             class="pf-v6-c-text-input-group__group"
           >
             <button
-              aria-disabled="false"
               aria-label="Previous"
               class="pf-v6-c-button pf-m-plain"
               type="button"
@@ -888,7 +857,6 @@ exports[`SearchInput simple search input 1`] = `
               </span>
             </button>
             <button
-              aria-disabled="false"
               aria-label="Next"
               class="pf-v6-c-button pf-m-plain"
               type="button"
@@ -913,7 +881,6 @@ exports[`SearchInput simple search input 1`] = `
             </button>
           </div>
           <button
-            aria-disabled="false"
             aria-label="Reset"
             class="pf-v6-c-button pf-m-plain"
             type="button"
@@ -943,7 +910,6 @@ exports[`SearchInput simple search input 1`] = `
       class="pf-v6-c-input-group__item"
     >
       <button
-        aria-disabled="false"
         aria-label="Search"
         class="pf-v6-c-button pf-m-control"
         type="submit"

package/src/components/Select/Select.tsx

@@ -33,7 +33,7 @@ export interface SelectToggleProps {
   /**  Select toggle node. */
   toggleNode: React.ReactNode;
   /** Reference to the toggle. */
-  toggleRef?: React.RefObject<HTMLButtonElement>;
+  toggleRef?: React.RefObject<HTMLButtonElement | null>;
 }
 
 /**
@@ -113,14 +113,14 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: SelectProps & OUIAProps) => {
-  const localMenuRef = React.useRef<HTMLDivElement>();
-  const localToggleRef = React.useRef<HTMLButtonElement>();
+  const localMenuRef = React.useRef<HTMLDivElement>(undefined);
+  const localToggleRef = React.useRef<HTMLButtonElement>(undefined);
 
-  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement | null>) || localMenuRef;
   const toggleRef =
     typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
       ? localToggleRef
-      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
+      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement | null>);
 
   const prevIsOpen = React.useRef<boolean>(isOpen);
   React.useEffect(() => {

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -31,7 +31,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -30,7 +30,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
   const [placeholder, setPlaceholder] = React.useState('0 items selected');
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -32,7 +32,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
   const [onCreation, setOnCreation] = React.useState<boolean>(false); // Boolean to refresh filter state after new option is created
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const CREATE_NEW = 'create';
 

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -30,7 +30,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -30,7 +30,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
+  const textInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const CREATE_NEW = 'create';
 

package/src/components/SimpleList/SimpleList.tsx

@@ -11,7 +11,7 @@ export interface SimpleListProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   className?: string;
   /** Callback when an item is selected */
   onSelect?: (
-    ref: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    ref: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
     props: SimpleListItemProps
   ) => void;
   /** Indicates whether component is controlled by its internal state */
@@ -22,13 +22,13 @@ export interface SimpleListProps extends Omit<React.HTMLProps<HTMLDivElement>, '
 
 export interface SimpleListState {
   /** Ref of the current SimpleListItem */
-  currentRef: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>;
+  currentRef: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>;
 }
 
 interface SimpleListContextProps {
-  currentRef: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>;
+  currentRef: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>;
   updateCurrentRef: (
-    id: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    id: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
     props: SimpleListItemProps
   ) => void;
   isControlled: boolean;
@@ -39,7 +39,7 @@ export const SimpleListContext = React.createContext<Partial<SimpleListContextPr
 class SimpleList extends React.Component<SimpleListProps, SimpleListState> {
   static displayName = 'SimpleList';
   state = {
-    currentRef: null as React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>
+    currentRef: null as React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>
   };
 
   static defaultProps: SimpleListProps = {
@@ -49,7 +49,7 @@ class SimpleList extends React.Component<SimpleListProps, SimpleListState> {
   };
 
   handleCurrentUpdate = (
-    newCurrentRef: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    newCurrentRef: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
     itemProps: SimpleListItemProps
   ) => {
     this.setState({ currentRef: newCurrentRef });
@@ -63,7 +63,7 @@ class SimpleList extends React.Component<SimpleListProps, SimpleListState> {
 
     let isGrouped = false;
     if (children) {
-      isGrouped = (React.Children.toArray(children)[0] as React.ReactElement).type === SimpleListGroup;
+      isGrouped = (React.Children.toArray(children)[0] as React.ReactElement<any>).type === SimpleListGroup;
     }
 
     return (

package/src/components/SimpleList/examples/SimpleListUncontrolled.tsx

@@ -5,7 +5,7 @@ export const SimpleListUncontrolled: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
 
   const onSelect = (
-    selectedItem: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    selectedItem: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,
     selectedItemProps: SimpleListItemProps
   ) => {
     setActiveItem(selectedItemProps.itemId as number);

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

@@ -6,7 +6,6 @@ exports[`Verify Skip To Content 1`] = `
     class="pf-v6-c-skip-to-content"
   >
     <a
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-primary"
       data-ouia-component-id="OUIA-Generated-Button-primary-1"
       data-ouia-component-type="PF6/Button"

package/src/components/Slider/Slider.tsx

@@ -117,8 +117,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   'aria-labelledby': ariaLabelledby,
   ...props
 }: SliderProps) => {
-  const sliderRailRef = React.useRef<HTMLDivElement>();
-  const thumbRef = React.useRef<HTMLDivElement>();
+  const sliderRailRef = React.useRef<HTMLDivElement>(undefined);
+  const thumbRef = React.useRef<HTMLDivElement>(undefined);
 
   const [localValue, setValue] = useState(value);
   const [localInputValue, setLocalInputValue] = useState(inputValue);

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

@@ -552,7 +552,6 @@ exports[`slider renders slider with input actions 1`] = `
       class="pf-v6-c-slider__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Minus"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -612,7 +611,6 @@ exports[`slider renders slider with input actions 1`] = `
       class="pf-v6-c-slider__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Plus"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"

package/src/components/Tabs/OverflowTab.tsx

@@ -38,9 +38,9 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: OverflowTabProps) => {
-  const menuRef = React.useRef<HTMLDivElement>();
-  const overflowTabRef = React.useRef<HTMLButtonElement>();
-  const overflowLIRef = React.useRef<HTMLLIElement>();
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const overflowTabRef = React.useRef<HTMLButtonElement>(undefined);
+  const overflowLIRef = React.useRef<HTMLLIElement>(undefined);
 
   const [isExpanded, setIsExpanded] = React.useState(false);
 

package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap

@@ -26,7 +26,6 @@ exports[`renders tab action 1`] = `
       class="pf-v6-c-tabs__item-action"
     >
       <button
-        aria-disabled="false"
         aria-label="Tab action"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"

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

@@ -407,7 +407,6 @@ exports[`should render expandable vertical tabs 1`] = `
         class="pf-v6-c-tabs__toggle-button"
       >
         <button
-          aria-disabled="false"
           aria-labelledby="generated-id-text generated-id-button"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-3"

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

@@ -5,7 +5,7 @@ export const TabsDynamic: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
   const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
   const [newTabNumber, setNewTabNumber] = React.useState<number>(4);
-  const tabComponentRef = React.useRef<any>();
+  const tabComponentRef = React.useRef<any>(undefined);
   const firstMount = React.useRef(true);
 
   const onClose = (event: any, tabIndex: string | number) => {

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

@@ -6,7 +6,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 export const TabsHelpAndClose: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
   const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
-  const tabComponentRef = React.useRef<any>();
+  const tabComponentRef = React.useRef<any>(undefined);
   const firstMount = React.useRef(true);
 
   const onClose = (event: any, tabIndex: string | number) => {

package/src/components/TextArea/TextArea.tsx

@@ -8,7 +8,8 @@ import { FormControlIcon } from '../FormControl/FormControlIcon';
 export enum TextAreResizeOrientation {
   horizontal = 'horizontal',
   vertical = 'vertical',
-  both = 'both'
+  both = 'both',
+  none = 'none'
 }
 
 export enum TextAreaReadOnlyVariant {
@@ -37,7 +38,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   /** A callback for when the text area value changes. */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
   /** Sets the orientation to limit the resize to */
-  resizeOrientation?: 'horizontal' | 'vertical' | 'both';
+  resizeOrientation?: 'horizontal' | 'vertical' | 'both' | 'none';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
   /** @hide A reference object to attach to the text area. */
@@ -118,19 +119,20 @@ class TextAreaBase extends React.Component<TextAreaProps> {
       onFocus,
       ...props
     } = this.props;
-    const orientation = `resize${capitalize(resizeOrientation)}` as
-      | 'resizeVertical'
-      | 'resizeHorizontal'
-      | 'resizeBoth';
+    const orientation =
+      resizeOrientation !== 'none'
+        ? (`resize${capitalize(resizeOrientation)}` as 'resizeVertical' | 'resizeHorizontal' | 'resizeBoth')
+        : undefined;
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
       <span
         className={css(
           styles.formControl,
+          styles.modifiers.textarea,
           readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          resizeOrientation && styles.modifiers[orientation],
+          resizeOrientation !== 'none' && styles.modifiers[orientation],
           isDisabled && styles.modifiers.disabled,
           hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@testing-library/jest-dom';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -68,9 +69,12 @@ test('Text area is not read only by default', () => {
   expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
 });
 
-test('Renders text area with default class name only', () => {
+test('Renders text area with default class names only', () => {
   render(<TextArea aria-label="validated textarea" />);
-  expect(screen.getByRole('textbox').parentElement).toHaveClass(formControlStyles.formControl);
+
+  const formControlWrapper = screen.getByRole('textbox').parentElement;
+  expect(formControlWrapper).toHaveClass(formControlStyles.formControl);
+  expect(formControlWrapper).toHaveClass(formControlStyles.modifiers.textarea);
 });
 
 test('Renders validated text area with success className', () => {
@@ -93,6 +97,16 @@ test('Text area is not invalid by default', () => {
   expect(screen.getByRole('textbox')).not.toBeInvalid();
 });
 
+test('Renders vertically & resizable text area by default', () => {
+  render(<TextArea aria-label="vertical resize textarea" />);
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-both');
+});
+
+test('Renders vertically & resizable text area when resizeOrientation is set to both', () => {
+  render(<TextArea aria-label="vertical resize textarea" resizeOrientation="both" />);
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-both');
+});
+
 test('Renders vertically resizable text area', () => {
   render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
   expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-vertical');
@@ -103,6 +117,13 @@ test('Renders horizontally resizable text area', () => {
   expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-horizontal');
 });
 
+test('Disables resizable text area', () => {
+  render(<TextArea aria-label="disabled resize textarea" resizeOrientation="none" />);
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-vertical');
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-horizontal');
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-both');
+});
+
 test('Throws console error when no aria-label or id is given', () => {
   jest.spyOn(global.console, 'error');
 
@@ -128,7 +149,7 @@ test('Does not throw console error when aria-label is given but no id', () => {
 });
 
 test('TextArea can be accessed via passed ref', () => {
-  const testRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
+  const testRef: React.RefObject<HTMLTextAreaElement | null> = React.createRef();
   render(<TextArea ref={testRef} />);
   global.scrollTo = jest.fn();
   testRef.current?.focus();

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v6-c-form-control pf-m-resize-both pf-m-disabled custom class"
+    class="pf-v6-c-form-control pf-m-textarea pf-m-resize-both pf-m-disabled custom class"
     style="height: 6px;"
   >
     <textarea

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

@@ -38,6 +38,12 @@ propComponents: ['TextArea']
 
 ```
 
+### Not resizable
+
+```ts file="./TextAreaResizableNone.tsx"
+
+```
+
 ### Uncontrolled
 
 ```ts file="./TextAreaUncontrolled.tsx"