apply comments

epam · Mar 27, 2024 · 2c1237e · 2c1237e
1 parent 72180fe
commit 2c1237e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/uui/components/datePickers/RangeDatePicker.tsx b/uui/components/datePickers/RangeDatePicker.tsx
@@ -103,21 +103,17 @@ function RangeDatePickerComponent(props: RangeDatePickerProps): JSX.Element {
                         size={ props.size }
                         getPlaceholder={ props.getPlaceholder }
                         disableClear={ props.disableClear }
-                        rawProps={ {
-                            ...props.rawProps,
-                            wrapper: {
-                                onBlur: onInputWrapperBlur,
-                            },
-                        } }
+                        rawProps={ props.rawProps }
                         inFocus={ inFocus }
                         value={ value }
                         format={ format }
                         onValueChange={ onValueChange }
-                        onFocus={ (e, i) => {
+                        onBlur={ onInputWrapperBlur }
+                        onFocusInput={ (e, i) => {
                             props.onFocus?.(e, i);
                             onOpenChange(true, i);
                         } }
-                        onBlur={ props.onBlur }
+                        onBlurInput={ props.onBlur }
                     />
                 );
             } }

diff --git a/uui/components/datePickers/RangeDatePickerInput.tsx b/uui/components/datePickers/RangeDatePickerInput.tsx
@@ -25,7 +25,6 @@ export interface RangeDatePickerInputProps
     IHasCX,
     SizeMod,
     IClickable,
-    // IHasRawProps<React.HTMLAttributes<HTMLDivElement>>,
     Pick<RangeDatePickerProps, 'getPlaceholder' | 'disableClear' | 'filter' | 'id' | 'format'> {
     /**
      * rawProps as HTML attributes
@@ -39,23 +38,23 @@ export interface RangeDatePickerInputProps
          * Any HTML attributes (native or 'data-') to put on 'to' input
          */
         to?: IHasRawProps<React.HTMLAttributes<HTMLDivElement>>['rawProps'];
-        /**
-         * Any HTML attributes (native or 'data-') to put on inputs wrapper
-         */
-        wrapper?: IHasRawProps<React.HTMLAttributes<HTMLDivElement>>['rawProps'];
     };
     /**
      * Currently setting date
      */
     inFocus: RangeDatePickerInputType,
     /**
      * Handles focus event on input element
-     */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>, inputType: RangeDatePickerInputType) => void;
+    */
+    onFocusInput: (event: React.FocusEvent<HTMLInputElement>, inputType: RangeDatePickerInputType) => void;
     /**
-     * Handles blur event on input element
-     */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement, Element>, inputType: RangeDatePickerInputType) => void;
+    * Handles blur event on input element
+   */
+    onBlurInput?: (event: React.FocusEvent<HTMLInputElement, Element>, inputType: RangeDatePickerInputType) => void;
+    /**
+   * Handles blur event on root element
+   */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
 }
 
 export const RangeDatePickerInput = forwardRef<HTMLDivElement, RangeDatePickerInputProps>(({
@@ -69,8 +68,9 @@ export const RangeDatePickerInput = forwardRef<HTMLDivElement, RangeDatePickerIn
     inFocus,
     format,
     onValueChange,
-    onFocus,
     onBlur,
+    onFocusInput,
+    onBlurInput,
     onClick,
     getPlaceholder,
     filter,
@@ -107,13 +107,13 @@ export const RangeDatePickerInput = forwardRef<HTMLDivElement, RangeDatePickerIn
     };
 
     const handleFocus = (event: React.FocusEvent<HTMLInputElement>, inputType: RangeDatePickerInputType) => {
-        onFocus?.(event, inputType);
+        onFocusInput(event, inputType);
     };
 
     const handleBlur = (event: React.FocusEvent<HTMLInputElement>, inputType: 'from' | 'to') => {
-        onBlur?.(event, inputType);
-        const selectedDate = toValueDateRangeFormat(inputValue, format);
+        onBlurInput?.(event, inputType);
 
+        const selectedDate = toValueDateRangeFormat(inputValue, format);
         if (isValidRange(selectedDate) && (!filter || filter(dayjs(selectedDate[inputType])))) {
             setInputValue(toCustomDateRangeFormat(selectedDate, format));
             onValueChange(selectedDate);
@@ -147,7 +147,7 @@ export const RangeDatePickerInput = forwardRef<HTMLDivElement, RangeDatePickerIn
                     onClick?.(event);
                 }
             } }
-            { ...rawProps?.wrapper }
+            onBlur={ onBlur }
         >
             <TextInput
                 icon={ systemIcons.calendar }

diff --git a/uui/components/datePickers/__tests__/__snapshots__/RangeDatePicker.test.tsx.snap b/uui/components/datePickers/__tests__/__snapshots__/RangeDatePicker.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`RangeDataPicker should be rendered if many params defined 1`] = `
 <div
   className="dateInputGroup uui-disabled uui-readonly uui-invalid"
+  onBlur={[Function]}
   onClick={[Function]}
 >
   <div
@@ -64,6 +65,7 @@ exports[`RangeDataPicker should be rendered if many params defined 1`] = `
 exports[`RangeDataPicker should be rendered if minimum params and custom format defined 1`] = `
 <div
   className="dateInputGroup"
+  onBlur={[Function]}
   onClick={[Function]}
 >
   <div

diff --git a/uui/components/filters/FilterRangeDatePickerBody.tsx b/uui/components/filters/FilterRangeDatePickerBody.tsx
@@ -69,13 +69,13 @@ export function FilterRangeDatePickerBody(props: FilterRangeDatePickerProps) {
                         format={ format }
                         value={ value }
                         onValueChange={ onValueChange }
-                        onFocus={ (event, inputType) => {
+                        onFocusInput={ (event, inputType) => {
                             if (props.onFocus) {
                                 props.onFocus(event, inputType);
                             }
                             setInFocus(inputType);
                         } }
-                        onBlur={ props.onBlur }
+                        onBlurInput={ props.onBlur }
                     />
                     <FlexSpacer />
                     <LinkButton