@patternfly/react-core 5.3.0-prerelease.4 → 5.3.0-prerelease.5

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.3.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.3.0-prerelease.4","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.3.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.3.0-prerelease.4","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.3.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.3.0-prerelease.4","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.0-prerelease.4",
+  "version": "5.3.0-prerelease.5",
   "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",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c07b540a74ca2c9a8b644cfa8bb38fd29ef4b0a7"
+  "gitHead": "59cae77313f2e11417f0ef599ccc4581a834be27"
 }

package/src/components/SearchInput/SearchInput.tsx

@@ -75,6 +75,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   hasWordsAttrLabel?: React.ReactNode;
   /** A suggestion for autocompleting. */
   hint?: string;
+  /** Id for the search input */
+  searchInputId?: string;
   /** @hide A reference object to attach to the input box. */
   innerRef?: React.RefObject<any>;
   /** A flag for controlling the open state of a custom advanced search implementation. */
@@ -126,6 +128,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   className,
+  searchInputId,
   value = '',
   attributes = [] as string[],
   formAdditionalItems,
@@ -298,6 +301,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
         name={name}
+        inputId={searchInputId}
       />
       {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>

package/src/components/Select/Select.tsx

@@ -70,6 +70,12 @@ export interface SelectProps extends MenuProps, OUIAProps {
   role?: string;
   /** Additional properties to pass to the popper */
   popperProps?: SelectPopperProps;
+  /** Height of the select menu */
+  menuHeight?: string;
+  /** Maximum height of select menu */
+  maxMenuHeight?: string;
+  /** Indicates if the select menu should be scrollable */
+  isScrollable?: boolean;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -87,6 +93,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   zIndex = 9999,
   role = 'listbox',
   popperProps,
+  menuHeight,
+  maxMenuHeight,
+  isScrollable,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -151,6 +160,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       }}
       isPlain={isPlain}
       selected={selected}
+      isScrollable={isScrollable}
       {...getOUIAProps(
         Select.displayName,
         props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),
@@ -158,7 +168,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       )}
       {...props}
     >
-      <MenuContent>{children}</MenuContent>
+      <MenuContent menuHeight={menuHeight} maxMenuHeight={maxMenuHeight}>
+        {children}
+      </MenuContent>
     </Menu>
   );
   return (

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -53,6 +53,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   isExpanded?: boolean;
   /** @beta The id of the element(s) controlled by the input. Required if role has a value of "combobox". */
   'aria-controls'?: string;
+  /** The id of the input element */
+  inputId?: string;
 }
 
 const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -73,6 +75,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   role,
   isExpanded,
   'aria-controls': ariaControls,
+  inputId,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
@@ -94,6 +97,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
             disabled
             aria-hidden="true"
             value={hint}
+            id={inputId}
           />
         )}
         {icon && <span className={css(styles.textInputGroupIcon)}>{icon}</span>}
@@ -110,6 +114,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           placeholder={inputPlaceHolder}
           name={name}
           aria-activedescendant={ariaActivedescendant}
+          id={inputId}
           {...(role && { role })}
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -109,6 +109,14 @@ describe('TextInputGroupMain', () => {
     expect(inputValue).toBeVisible();
   });
 
+  it('passes the inputId prop to the input', () => {
+    render(<TextInputGroupMain inputId="input-id">Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+
+    expect(input).toHaveAttribute('id', 'input-id');
+  });
+
   it('passes the placeholder prop to the input', () => {
     render(<TextInputGroupMain placeholder="placeholder text">Test</TextInputGroupMain>);
 

package/src/helpers/Popper/Popper.tsx

@@ -449,7 +449,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   React.useEffect(() => {
     // currentPopperContent = {tooltip children} || {dropdown children}
     const currentPopperContent =
-      popper?.props?.children[1]?.props?.children || popper?.props?.children?.props?.children;
+      popper?.props?.children?.[1]?.props?.children || popper?.props?.children?.props?.children;
     setPopperContent(currentPopperContent);
 
     if (currentPopperContent && popperContent && currentPopperContent !== popperContent) {