feat: closeOnchange rangePicker

src/components/rangeInput/index.tsx

@@ -35,6 +35,8 @@ const InputRangePicker = forwardRef<HTMLInputElement, InputRangePickerProps>(
       placeholder,
       presets = true,
       onClear: inputOnClear,
+      closeOnChange,
+
       ...rest
     } = inputRangePickerProps;
     const isRtl = (locale || "fa") === "fa";
@@ -85,6 +87,7 @@ const InputRangePicker = forwardRef<HTMLInputElement, InputRangePickerProps>(
           locale,
           onDayChange,
           defaultValue,
+          onClose: closeOnChange ? onClose : undefined,
         }}
       >
         {({

src/core/context/range/rangeProvider.tsx

@@ -108,6 +108,7 @@ export const RangeProvider = ({ children, props }: RangeProviderProps) => {
     formatProp: propsState.format,
     valueProp: props.value,
     defaultValueProp: props.defaultValue,
+    onClose: props.onClose,
   });
 
   useEffect(() => {

src/core/context/range/useRangeReducer.tsx

@@ -25,6 +25,7 @@ interface RangeDateReducerType {
   onMonthChangeProp?: RangePickerProps["onMonthChange"];
   onYearChangeProp?: RangePickerProps["onYearChange"];
   locale: Locale;
+  onClose?: () => void;
 }
 
 type Offsets = [number, number];
@@ -70,6 +71,7 @@ export const useRangeReducer = ({
   onMonthChangeProp,
   onYearChangeProp,
   locale,
+  onClose,
 }: RangeDateReducerType) => {
   const isJalaali = locale === "fa";
   const [offsets, setOffset] = useState<Offsets>([0, 0]);
@@ -272,6 +274,7 @@ export const useRangeReducer = ({
 
         if (payload.startDate.day !== 0 && payload.endDate.day !== 0) {
           onChangeProp?.(dates, formattedDates(dates));
+          onClose?.();
         }
 
         setRangeInputValue([
@@ -280,7 +283,14 @@ export const useRangeReducer = ({
         ]);
       }
     },
-    [formatProp, formattedDates, isJalaali, onChangeProp, rangeState.startDate],
+    [
+      formatProp,
+      formattedDates,
+      isJalaali,
+      onChangeProp,
+      rangeState.startDate,
+      onClose,
+    ],
   );
 
   /** Callback function that updates the selected day range and dispatches an action. */

src/core/interfaces/range.interface.ts

@@ -169,6 +169,9 @@ export interface RangePickerProps {
   style?: React.CSSProperties;
 
   className?: string;
+  closeOnChange?: boolean;
+  /** Callback to close popup */
+  onClose?: () => void;
 }
 
 interface RangePanelProps
@@ -269,4 +272,6 @@ export interface InputRangePickerProps extends InputRangePickerPickable {
   wrapperClassName?: string;
 
   wrapperStyle?: CSSProperties;
+  /** Whether close the popup after value change */
+  closeOnChange?: boolean;
 }