Apply BitDateRangePicker improvements (#12867)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs

@@ -57,6 +57,21 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? Group { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the presets' container of the BitDateRangePicker.
+    /// </summary>
+    public string? PresetsContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for each preset button of the BitDateRangePicker.
+    /// </summary>
+    public string? PresetButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the currently selected preset button of the BitDateRangePicker.
+    /// </summary>
+    public string? SelectedPresetButton { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the day-picker's wrapper of the BitDateRangePicker.
     /// </summary>
@@ -98,12 +113,12 @@ public class BitDateRangePickerClassStyles
     public string? GoToTodayIcon { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the hide time-picker button of the BitDatePicker.
+    /// Custom CSS classes/styles for the hide time-picker button of the BitDateRangePicker.
     /// </summary>
     public string? HideTimePickerButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the hide time-picker icon of the BitDatePicker.
+    /// Custom CSS classes/styles for the hide time-picker icon of the BitDateRangePicker.
     /// </summary>
     public string? HideTimePickerIcon { get; set; }
 
@@ -127,16 +142,26 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? NextMonthNavIcon { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the days grid of the BitDateRangePicker.
+    /// </summary>
+    public string? DaysGrid { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the header row of the days of the BitDateRangePicker.
     /// </summary>
     public string? DaysHeaderRow { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the header of the week numbers of the BitDateRangePicker.
+    /// Custom CSS classes/styles for the header cell of the week numbers column of the BitDateRangePicker.
     /// </summary>
     public string? WeekNumbersHeader { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for each day of the week header cell of the BitDateRangePicker.
+    /// </summary>
+    public string? WeekDayHeader { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for each row of the days of the BitDateRangePicker.
     /// </summary>
@@ -152,6 +177,16 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? DayButton { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the highlighted day buttons of the BitDateRangePicker.
+    /// </summary>
+    public string? HighlightedDayButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the day buttons inside the prospective range being hovered in the BitDateRangePicker.
+    /// </summary>
+    public string? HoveredDayButtons { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for today day button of the BitDateRangePicker.
     /// </summary>
@@ -212,23 +247,13 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? EndTimeMinuteInputContainer { get; set; }
 
-    /// <summary>
-    /// Custom CSS classes/styles for the start time's wrapper of the BitDateRangePicker.
-    /// </summary>
-    public string? StartTimeWrapper { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the end time's wrapper of the BitDateRangePicker.
-    /// </summary>
-    public string? EndTimeWrapper { get; set; }
-
     /// <summary>
     /// Custom CSS classes/styles for the time's wrapper of the BitDateRangePicker.
     /// </summary>
     public string? TimePickerWrapper { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the time's header of the BitDatePicker.
+    /// Custom CSS classes/styles for the time's header of the BitDateRangePicker.
     /// </summary>
     public string? TimePickerHeader { get; set; }
 
@@ -393,12 +418,12 @@ public class BitDateRangePickerClassStyles
     public string? YearPickerToggleButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the show time-picker button of the BitDatePicker.
+    /// Custom CSS classes/styles for the show time-picker button of the BitDateRangePicker.
     /// </summary>
     public string? ShowTimePickerButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the show time-picker icon of the BitDatePicker.
+    /// Custom CSS classes/styles for the show time-picker icon of the BitDateRangePicker.
     /// </summary>
     public string? ShowTimePickerIcon { get; set; }
 
@@ -408,7 +433,7 @@ public class BitDateRangePickerClassStyles
     public string? MonthPickerNavWrapper { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the wrapper of the time-picker's nav buttons of the BitDatePicker.
+    /// Custom CSS classes/styles for the wrapper of the time-picker's nav buttons of the BitDateRangePicker.
     /// </summary>
     public string? TimePickerNavWrapper { get; set; }
 
@@ -498,12 +523,12 @@ public class BitDateRangePickerClassStyles
     public string? YearButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the BitDatePicker's clear button.
+    /// Custom CSS classes/styles for the BitDateRangePicker's clear button.
     /// </summary>
     public string? ClearButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the BitDatePicker's clear button icon.
+    /// Custom CSS classes/styles for the BitDateRangePicker's clear button icon.
     /// </summary>
     public string? ClearButtonIcon { get; set; }
 }

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerPreset.cs

@@ -0,0 +1,45 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// Represents a shortcut that fills the BitDateRangePicker with a predefined range (e.g. "Last 7 days").
+/// </summary>
+public class BitDateRangePickerPreset
+{
+    /// <summary>
+    /// The text of the preset's button.
+    /// </summary>
+    public required string Text { get; set; }
+
+    /// <summary>
+    /// The range applied when the preset is selected.
+    /// <see cref="ValueProvider"/> takes precedence over this when both are set.
+    /// </summary>
+    public BitDateRangePickerValue? Value { get; set; }
+
+    /// <summary>
+    /// Custom function providing the range applied when the preset is selected.
+    /// Unlike <see cref="Value"/> it is evaluated on each selection, which keeps relative
+    /// ranges (e.g. "Last 7 days") correct no matter how long the page has been open.
+    /// </summary>
+    public Func<BitDateRangePickerValue?>? ValueProvider { get; set; }
+
+    /// <summary>
+    /// Whether the preset's button is enabled.
+    /// </summary>
+    public bool IsEnabled { get; set; } = true;
+
+    /// <summary>
+    /// The title of the preset's button (tooltip).
+    /// </summary>
+    public string? Title { get; set; }
+
+    /// <summary>
+    /// Custom CSS class for the preset's button.
+    /// </summary>
+    public string? Class { get; set; }
+
+    /// <summary>
+    /// Custom CSS style for the preset's button.
+    /// </summary>
+    public string? Style { get; set; }
+}

src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts

@@ -7,7 +7,7 @@ namespace BitBlazorUI {
         // The cells of every calendar grid that navigates with the keyboard: the day buttons of the
         // standalone BitCalendar and of the day picker inside the callout of a BitDatePicker, plus the
         // month and year buttons of that same callout.
-        private static _cells = '.bit-cal-dbt, .bit-dtp-dbt, .bit-dtp-pkb';
+        private static _cells = '.bit-cal-dbt, .bit-dtp-dbt, .bit-dtp-pkb, .bit-dtrp-dbt';
 
         // Everything that can hold the focus inside a calendar. The roving tabindex of the grids takes
         // every cell but one out of the tab sequence, which is why tabindex="-1" is excluded here.
@@ -32,6 +32,7 @@ namespace BitBlazorUI {
                 if (Calendars._navKeys.indexOf(e.key) === -1) return;
 
                 const target = e.target as HTMLElement | null;
+
                 if (!target || !target.closest(Calendars._cells)) return;
 
                 e.preventDefault();