feat: focus next range on defined range click

README.md

@@ -175,6 +175,7 @@ inputRanges(`DefinedRange`, `DateRangePicker`)   | Array            | [default i
 ariaLabels                           | Object    | {}               | inserts aria-label to inner elements
 dayContentRenderer                   | Function  | null             | Function to customize the rendering of Calendar Day. given a date is supposed to return what to render.
 preventScrollToFocusedMonth          | Boolean   | false            | When two or more months are open, prevent the shift of the focused month to the left.
+focusNextRangeOnDefinedRangeClick    | Boolean  | false            | When a defined range is clicked, the next range will be focused
 
 #### Type DateRange:
  ```ts

src/components/DateRangePicker/index.tsx

@@ -52,9 +52,9 @@ export default function DateRangePicker({
   monthDisplayFormat,
   months,
   moveRangeOnFirstSelection,
-  preventScrollToFocusedMonth
+  preventScrollToFocusedMonth,
+  focusNextRangeOnDefinedRangeClick
 }: DateRangePickerProps) {
-
   const refs = React.useRef({
     styles: generateStyles([Styles, classNames])
   });
@@ -64,7 +64,6 @@ export default function DateRangePicker({
     rangePreview: undefined
   });
 
-
   return (
     <div className={classnames(refs.current.styles.dateRangePickerWrapper, className)}>
       <DefinedRange
@@ -75,9 +74,11 @@ export default function DateRangePicker({
         renderStaticRangeLabel={renderStaticRangeLabel}
         headerContent={headerContent}
         footerContent={footerContent}
+        focusNextRangeOnDefinedRangeClick={focusNextRangeOnDefinedRangeClick}
+        onRangeFocusChange={(focusedRange) => setState((s) => ({ ...s, focusedRange }))}
       />
       <DateRange
-        onRangeFocusChange={focusedRange => setState(s => ({...s, focusedRange}))}
+        onRangeFocusChange={(focusedRange) => setState((s) => ({ ...s, focusedRange }))}
         focusedRange={focusedRange || state.focusedRange}
         weekStartsOn={weekStartsOn}
         weekdayDisplayFormat={weekdayDisplayFormat}
@@ -120,6 +121,5 @@ export default function DateRangePicker({
         preventScrollToFocusedMonth={preventScrollToFocusedMonth}
       />
     </div>
-  )
-
+  );
 }

src/components/DefinedRange/index.tsx

@@ -4,6 +4,7 @@ import styles from '../../styles';
 import { defaultInputRanges, defaultStaticRanges } from '../../defaultRanges';
 import { DateRange } from '../DayCell';
 import InputRangeField from '../InputRangeField';
+import { findNextRangeIndex } from '../../utils';
 
 export type DefinedRangeProps = {
   inputRanges?: {label: string, range: (value: number) => DateRange, getCurrentValue: (range: DateRange) => number | "-" | "∞"}[],
@@ -14,9 +15,11 @@ export type DefinedRangeProps = {
   footerContent?: ReactElement,
   focusedRange?: number[],
   rangeColors?: string[],
+  focusNextRangeOnDefinedRangeClick?: boolean,
   onPreviewChange?: (value?: DateRange) => void,
   onChange?: (value: {[x: string]: DateRange}) => void,
   renderStaticRangeLabel?: (staticRange: DefinedRangeProps["staticRanges"][number]) => ReactElement
+  onRangeFocusChange?: (range: number[]) => void,
 };
 
 export default function DefinedRange({
@@ -28,9 +31,11 @@ export default function DefinedRange({
   rangeColors = ['#3d91ff', '#3ecf8e', '#fed14c'],
   ranges = [],
   focusedRange = [0, 0],
+  focusNextRangeOnDefinedRangeClick,
   onChange,
   onPreviewChange,
-  renderStaticRangeLabel
+  renderStaticRangeLabel,
+  onRangeFocusChange
 }: DefinedRangeProps) {
 
   const [state, setState] = React.useState({rangeOffset: 0, focusedInput: -1});
@@ -59,6 +64,11 @@ export default function DefinedRange({
     onChange({
       [selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range },
     });
+
+    if (focusNextRangeOnDefinedRangeClick) {
+      const nextFocusRange = [findNextRangeIndex(ranges, focusedRange[0]), 0];
+      onRangeFocusChange?.(nextFocusRange);
+    }
   }
 
   const getRangeOptionValue = (option: DefinedRangeProps['inputRanges'][number]) => {