Merge branch 'xola:master' into X2-6273

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.18",
+    "version": "2.1.20",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [

src/components/DatePicker/DatePicker.css

@@ -127,7 +127,7 @@
 }
 
 /* Change the dates within the date to have the full light blue to show that it's a part of the range */
-.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
     @apply rounded-none bg-blue-lighter text-black;
 }
 
@@ -149,8 +149,8 @@
     @apply bg-transparent text-black;
 }
 
-.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled) .date,
-.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled) .date:hover {
+.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .date,
+.date-range-picker .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) .date:hover {
     @apply bg-blue-lighter text-black;
 }
 
@@ -167,7 +167,7 @@
 }
 
 /* Make the start date have a 50% light blue background towards the RIGHT side */
-.date-range-picker .DayPicker-Day--start {
+.date-range-picker .DayPicker-Day--start:not(.DayPicker-Day--outside) {
     @apply rounded-none;
     background: linear-gradient(90deg, #ffffff 40%, #d1e1ff 25%);
 }
@@ -177,7 +177,7 @@
 }
 
 /* Make the end date have a 50% light blue background towards the LEFT side */
-.date-range-picker .DayPicker-Day--end {
+.date-range-picker .DayPicker-Day--end:not(.DayPicker-Day--outside) {
     @apply rounded-none;
     background: linear-gradient(90deg, #d1e1ff 40%, #ffffff 25%); /* D1E1FF Blue lighter */
 }

src/components/DatePicker/DatePicker.jsx

@@ -183,7 +183,7 @@ export const DatePicker = ({
                 ) : null}
 
                 <DayPicker
-                    showOutsideDays
+                    showOutsideDays={!isRangeVariant}
                     className={clsx(
                         "ui-date-picker rounded-lg pt-3",
                         useDateRangeStyle ? "date-range-picker" : null,

src/components/DatePicker/DatePickerPopover.jsx

@@ -11,6 +11,7 @@ export const DatePickerPopover = ({
     value,
     variant = "single",
     dateFormat = "ddd, LL",
+    placeholder = "Select Date",
     onChange,
     children,
     classNames = {},
@@ -66,6 +67,7 @@ export const DatePickerPopover = ({
                     readOnly
                     size="medium"
                     value={value ? formatDate(value, dateFormat) : ""}
+                    placeholder={placeholder}
                     className={classNames?.input}
                     onClick={toggleVisibility}
                 />
@@ -103,7 +105,7 @@ const DefaultInput = forwardRef(({ className, ...rest }, reference) => {
                 <CalendarIcon className="z-10 inline-block" />
             </div>
 
-            <Input className={clsx("cursor-pointer px-8", className)} placeholder="Select Date" {...rest} />
+            <Input className={clsx("cursor-pointer px-8", className)} {...rest} />
 
             <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                 <DownArrowIcon className="inline-block" />

src/components/DatePicker/MonthYearSelector.jsx

@@ -5,16 +5,28 @@ import { Select } from "../Forms/Select";
 
 const today = dayjs();
 
+const getDiffInMonths = (to, from) => {
+    return 12 * (to.getFullYear() - from.getFullYear()) + (to.getMonth() - from.getMonth());
+};
+
 export const MonthYearSelector = ({ date, onChange, currentMonth }) => {
     const months = [...Array.from({ length: 12 }).keys()].map((m) => today.month(m).format("MMM"));
     // 2012 as baseline + 5 years in future
     const years = [...Array.from({ length: today.year() - 2012 + 5 + 1 }).keys()].map((y) =>
         today.year(2012 + y).format("YYYY"),
     );
 
+    /**
+     * For range date pickers, when we show multiple months, this indicates the index for selector component with respected to the first month selected in date-range picker (i.e. month selected on left side)
+     *
+     * @example
+     * If left side month is "August 2023", and we are showing this selector for "September 2023" (`date=2023-09-01T00:00:00Z`). The `selectorIndex` would be 1.
+     **/
+    const selectorIndex = getDiffInMonths(date, currentMonth);
+
     const handleMonthChange = (event) => {
         const { year, month } = event.target.form;
-        onChange(new Date(year.value, month.value));
+        onChange(new Date(year.value, Number(month.value) - selectorIndex));
     };
 
     const handleYearChange = (event) => {