@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -26,7 +26,7 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Suggestion that will show up like a placeholder even with text in the input */
   hint?: string;
   /** Callback for when there is a change in the input field*/
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Callback for when the input field is focused*/
   onFocus?: (event?: any) => void;
   /** Callback for when focus is lost on the input field*/
@@ -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);
@@ -61,7 +64,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   const textInputGroupInputInputRef = innerRef || ref;
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
-    onChange(event.currentTarget.value, event);
+    onChange(event, event.currentTarget.value);
   };
 
   return (
@@ -89,6 +92,7 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
           onBlur={onBlur}
           value={inputValue || ''}
           placeholder={inputPlaceHolder}
+          name={name}
         />
       </span>
     </div>

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -27,7 +27,7 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
   const showSearchIcon = !currentChips.length;
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
-  const handleInputChange = (value: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
   };
 

package/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx

@@ -7,7 +7,7 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = React.useState('');
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
-  const handleInputChange = (value: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
   };
 

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 */
@@ -386,7 +393,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();
@@ -404,12 +411,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);