@patternfly/react-core 5.0.0-alpha.75 → 5.0.0-alpha.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.75",
+  "version": "5.0.0-alpha.77",
   "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/createSubpaths.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.0.0-alpha.10",
-    "@patternfly/react-styles": "^5.0.0-alpha.7",
-    "@patternfly/react-tokens": "^5.0.0-alpha.6",
+    "@patternfly/react-icons": "^5.0.0-alpha.11",
+    "@patternfly/react-styles": "^5.0.0-alpha.8",
+    "@patternfly/react-tokens": "^5.0.0-alpha.7",
     "focus-trap": "7.4.0",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.37",
+    "@patternfly/patternfly": "5.0.0-alpha.41",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "b435e6a59738166738da0b2cdddd930b30a305d8"
+  "gitHead": "d9ed9a48d6cd077867203e29d39218feb24d6dd2"
 }

package/src/components/DataList/DataListItem.tsx

@@ -82,7 +82,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
               className={css(
                 styles.dataListItem,
                 isExpanded && styles.modifiers.expanded,
-                isSelectable && styles.modifiers.selectable,
+                isSelectable && styles.modifiers.clickable,
                 selectedDataListItemId && isSelected && styles.modifiers.selected,
                 className
               )}

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -172,7 +172,6 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                   }
                   isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}
-                  type="search"
                 />
               )}
             </div>

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

@@ -1130,7 +1130,7 @@ exports[`DualListSelector with search inputs 1`] = `
                 <input
                   aria-label="Available search input"
                   class="pf-c-text-input-group__text-input"
-                  type="search"
+                  type="text"
                   value=""
                 />
               </span>
@@ -1375,7 +1375,7 @@ exports[`DualListSelector with search inputs 1`] = `
                 <input
                   aria-label="Chosen search input"
                   class="pf-c-text-input-group__text-input"
-                  type="search"
+                  type="text"
                   value=""
                 />
               </span>

package/src/components/FileUpload/FileUpload.tsx

@@ -76,7 +76,7 @@ export interface FileUploadProps
   /** A callback for when a selected file starts loading. */
   onReadStarted?: (fileHandle: File) => void;
   /** Text area text changed. */
-  onTextChange?: (text: string) => void;
+  onTextChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, text: string) => void;
 }
 
 export const FileUpload: React.FunctionComponent<FileUploadProps> = ({

package/src/components/FileUpload/FileUploadField.tsx

@@ -77,7 +77,7 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
    * of the file upload component. */
   onTextAreaClick?: (event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => void;
   /** Text area text changed. */
-  onTextChange?: (text: string) => void;
+  onTextChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, text: string) => void;
   /** Placeholder string to display in the empty text area field. */
   textAreaPlaceholder?: string;
 }
@@ -114,8 +114,8 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
 
   ...props
 }: FileUploadFieldProps) => {
-  const onTextAreaChange = (newValue: string) => {
-    onTextChange?.(newValue);
+  const onTextAreaChange = (event: React.ChangeEvent<HTMLTextAreaElement>, newValue: string) => {
+    onTextChange?.(event, newValue);
   };
   return (
     <div
@@ -169,7 +169,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             name={id}
             aria-label={ariaLabel}
             value={value as string}
-            onChange={onTextAreaChange}
+            onChange={(value, event) => onTextAreaChange(event, value)}
             onClick={onTextAreaClick}
             onBlur={onTextAreaBlur}
             placeholder={textAreaPlaceholder}

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -30,7 +30,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     hasPlaceholderText
   ]);
 
-  const handleTextAreaChange = (value: string) => {
+  const handleTextAreaChange = (_event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => {
     setValue(value);
   };
 

package/src/components/FileUpload/examples/FileUploadSimpleText.tsx

@@ -10,7 +10,11 @@ export const SimpleTextFileUpload: React.FunctionComponent = () => {
     setFilename(file.name);
   };
 
-  const handleTextOrDataChange = (value: string) => {
+  const handleTextChange = (_event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => {
+    setValue(value);
+  };
+
+  const handleDataChange = (value: string) => {
     setValue(value);
   };
 
@@ -35,8 +39,8 @@ export const SimpleTextFileUpload: React.FunctionComponent = () => {
       filename={filename}
       filenamePlaceholder="Drag and drop a file or upload one"
       onFileInputChange={handleFileInputChange}
-      onDataChange={handleTextOrDataChange}
-      onTextChange={handleTextOrDataChange}
+      onDataChange={handleDataChange}
+      onTextChange={handleTextChange}
       onReadStarted={handleFileReadStarted}
       onReadFinished={handleFileReadFinished}
       onClearClick={handleClear}

package/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx

@@ -10,7 +10,11 @@ export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
     setFilename(file.name);
   };
 
-  const handleTextOrDataChange = (value: string) => {
+  const handleTextChange = (_event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => {
+    setValue(value);
+  };
+
+  const handleDataChange = (value: string) => {
     setValue(value);
   };
 
@@ -35,8 +39,8 @@ export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
       filename={filename}
       filenamePlaceholder="Drag and drop a file or upload one"
       onFileInputChange={handleFileInputChange}
-      onDataChange={handleTextOrDataChange}
-      onTextChange={handleTextOrDataChange}
+      onDataChange={handleDataChange}
+      onTextChange={handleTextChange}
       onReadStarted={handleFileReadStarted}
       onReadFinished={handleFileReadFinished}
       onClearClick={handleClear}

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -11,7 +11,11 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
     setFilename(file.name);
   };
 
-  const handleTextOrDataChange = (value: string) => {
+  const handleTextChange = (_event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => {
+    setValue(value);
+  };
+
+  const handleDataChange = (value: string) => {
     setValue(value);
   };
 
@@ -43,8 +47,8 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           filename={filename}
           filenamePlaceholder="Drag and drop a file or upload one"
           onFileInputChange={handleFileInputChange}
-          onDataChange={handleTextOrDataChange}
-          onTextChange={handleTextOrDataChange}
+          onDataChange={handleDataChange}
+          onTextChange={handleTextChange}
           onReadStarted={handleFileReadStarted}
           onReadFinished={handleFileReadFinished}
           onClearClick={handleClear}

package/src/components/Menu/examples/MenuFilterDrilldown.tsx

@@ -109,7 +109,6 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
                       ref={searchRef}
                       value={startInput}
                       aria-label="Filter menu items"
-                      type="search"
                       onChange={(_event, value) => handleStartTextInputChange(value)}
                     />
                   </MenuSearchInput>

package/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx

@@ -48,7 +48,6 @@ export const MenuFilteringWithSearchInput: React.FunctionComponent = () => {
           <SearchInput
             value={input}
             aria-label="Filter menu items"
-            type="search"
             onChange={(_event, value) => handleTextInputChange(value)}
           />
         </MenuSearchInput>

package/src/components/SearchInput/SearchInput.tsx

@@ -70,19 +70,6 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   hasWordsAttrLabel?: React.ReactNode;
   /** A suggestion for autocompleting. */
   hint?: string;
-  /** Type of the input */
-  type?:
-    | 'text'
-    | 'date'
-    | 'datetime-local'
-    | 'email'
-    | 'month'
-    | 'number'
-    | 'password'
-    | 'search'
-    | 'tel'
-    | 'time'
-    | 'url';
   /** @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. */
@@ -162,7 +149,6 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   isDisabled = false,
   appendTo,
   zIndex = 9999,
-  type = 'text',
   name,
   ...props
 }: SearchInputProps) => {
@@ -305,7 +291,6 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         aria-label={ariaLabel}
         onKeyDown={onEnter}
         onChange={onChangeHandler}
-        type={type}
         name={name}
       />
       {renderUtilities && (

package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -251,7 +251,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuSearch>
         <MenuSearchInput>
-          <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
+          <SearchInput aria-label="Filter menu items" onChange={(_event, value) => onTextChange(value)} />
         </MenuSearchInput>
       </MenuSearch>
       <Divider />

package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -118,8 +118,8 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
     </MenuToggle>
   );
 
-  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: string) => {
-    setSelected(itemId);
+  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: string | number) => {
+    setSelected(itemId.toString());
     setIsOpen(!isOpen);
   };
 
@@ -153,7 +153,6 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
           <InputGroup>
             <SearchInput
               value={searchInputValue}
-              type="search"
               placeholder="Search"
               onChange={(_event, value) => onSearchInputChange(value)}
               onKeyPress={onEnterPressed}

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -333,7 +333,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuSearchInput>
-        <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
+        <SearchInput aria-label="Filter menu items" onChange={(_event, value) => onTextChange(value)} />
       </MenuSearchInput>
       <Divider />
       <MenuContent>

package/src/deprecated/components/ContextSelector/ContextSelector.tsx

@@ -148,7 +148,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
           >
             <div className={css(styles.contextSelectorMenuSearch)}>
               <SearchInput
-                type="search"
                 submitSearchButtonLabel={searchButtonAriaLabel}
                 placeholder={searchInputPlaceholder}
                 onChange={onSearchInputChange}

package/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap

@@ -111,7 +111,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
                     aria-label="Search input"
                     class="pf-c-text-input-group__text-input"
                     placeholder="Search"
-                    type="search"
+                    type="text"
                     value=""
                   />
                 </span>
@@ -274,7 +274,7 @@ exports[`ContextSelector Renders in strict mode 1`] = `
                     aria-label="Search input"
                     class="pf-c-text-input-group__text-input"
                     placeholder="Search"
-                    type="search"
+                    type="text"
                     value=""
                   />
                 </span>