@patternfly/react-core 6.2.0-prerelease.19 → 6.2.0-prerelease.20

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":"6.2.0-prerelease.18","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":"6.2.0-prerelease.19","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":"6.2.0-prerelease.18","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":"6.2.0-prerelease.19","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":"6.2.0-prerelease.18","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":"6.2.0-prerelease.19","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.19",
+  "version": "6.2.0-prerelease.20",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.2.0-prerelease.3",
-    "@patternfly/react-styles": "^6.2.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.2.0-prerelease.3",
+    "@patternfly/react-icons": "^6.2.0-prerelease.4",
+    "@patternfly/react-styles": "^6.2.0-prerelease.4",
+    "@patternfly/react-tokens": "^6.2.0-prerelease.4",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.4",
+    "@patternfly/patternfly": "6.2.0-prerelease.7",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "939bec6792f720d379d5bfd9c271e4920480bcc4"
+  "gitHead": "fcc7abe033e11506a55a4f30ca2b14d94eaa9d41"
 }

package/src/components/FileUpload/FileUpload.tsx

@@ -179,6 +179,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
       <input
         /* hidden, necessary for react-dropzone */
         {...inputProps}
+        hidden
       />
       {children}
     </FileUploadField>

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

@@ -85,6 +85,7 @@ exports[`simple fileupload 1`] = `
       </span>
     </div>
     <input
+      hidden=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -66,6 +66,7 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
         <input
           /* hidden, necessary for react-dropzone */
           {...getInputProps()}
+          hidden
         />
         {children}
       </div>

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

@@ -8,6 +8,7 @@ exports[`MultipleFileUpload renders custom class names 1`] = `
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
@@ -26,6 +27,7 @@ exports[`MultipleFileUpload renders with expected class names when horizontal 1`
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
@@ -44,6 +46,7 @@ exports[`MultipleFileUpload renders with expected class names when not horizonta
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"

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> = ({
@@ -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

@@ -275,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/TextInputGroup/TextInputGroupMain.tsx

@@ -57,6 +57,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   'aria-controls'?: string;
   /** The id of the input element */
   inputId?: string;
+  /** Additional props to spread to the input element. */
+  inputProps?: any;
 }
 
 const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -78,6 +80,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   isExpanded,
   'aria-controls': ariaControls,
   inputId,
+  inputProps,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled, validated } = React.useContext(TextInputGroupContext);
@@ -121,6 +124,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(role && { role })}
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
+          {...inputProps}
         />
         {validated && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
       </span>

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

@@ -317,6 +317,11 @@ describe('TextInputGroupMain', () => {
     expect(onBlurMock).toHaveBeenCalledTimes(1);
   });
 
+  test('Additional props are spread when inputProps prop is passed', () => {
+    render(<TextInputGroupMain aria-label="Test input" inputProps={{ autofocus: 'true' }} />);
+    expect(screen.getByLabelText('Test input')).toHaveAttribute('autofocus', 'true');
+  });
+
   it('matches the snapshot', () => {
     const { asFragment } = render(<TextInputGroupMain>Test</TextInputGroupMain>);
 

package/src/demos/PasswordGenerator.md

@@ -1,6 +1,6 @@
 ---
 id: Password generator
-section: components
+section: patterns
 ---
 
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';

package/src/demos/PasswordStrength.md

@@ -1,6 +1,6 @@
 ---
 id: Password strength
-section: components
+section: patterns
 ---
 
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -13,7 +13,7 @@ import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ### Basic validation
 
-Note, the validation and password strength rules are only examples, demonstrating the changes in the UI when certain conditions are met. We expect consumers will substitute their own, more robust, validation algorithm. In this demo the password strength is determined by how often validation rules are met. A good open-source password strength estimator, recommended by InfoSec, can be found here: https://github.com/dropbox/zxcvbn
+Note, the validation and password strength rules are only examples, demonstrating the changes in the UI when certain conditions are met. We expect consumers will substitute their own, more robust, validation algorithm. In this demo the password strength is determined by how often validation rules are met. A good open-source password strength estimator, recommended by InfoSec, is [zxcvbn](https://github.com/dropbox/zxcvbn).
 
 ```ts file="./examples/PasswordStrength/PasswordStrengthDemo.tsx"
 

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import React, { JSX } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
@@ -102,7 +102,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
       >
         <TextInput
           isRequired
-          type="text"
+          type="password"
           id="password-field"
           name="password-field"
           aria-describedby="password-field-helper"