refactor(drp): address comments

Author: ddaribo

src/components/date-range-picker/date-range-picker.spec.ts

@@ -33,7 +33,6 @@ import { DateTimeUtil } from '../date-time-input/date-util.js';
 import type IgcDialogComponent from '../dialog/dialog.js';
 import IgcInputComponent from '../input/input.js';
 import IgcDateRangePickerComponent, {
-  type CustomDateRange,
   type DateRangeValue,
 } from './date-range-picker.js';
 
@@ -675,7 +674,7 @@ describe('Date range picker', () => {
       await elementUpdated(picker);
 
       expect(eventSpy).not.called;
-      expect(picker.value).to.deep.equal({ start: null, end: null });
+      expect(picker.value).to.deep.equal(null);
       expect(dateTimeInputs[0].value).to.be.null;
       expect(dateTimeInputs[1].value).to.be.null;
     });
@@ -952,25 +951,25 @@ describe('Date range picker', () => {
       });
     });
     describe('Selection via the range selection chips', () => {
-      const previousThreeDaysStart = CalendarDay.today.add('day', -3).native;
-      const nextThreeDaysEnd = CalendarDay.today.add('day', 3).native;
-
-      const customRanges: CustomDateRange[] = [
-        {
-          label: 'Previous Three Days',
-          dateRange: {
-            start: previousThreeDaysStart,
-            end: today.native,
-          },
-        },
-        {
-          label: 'Next Three Days',
-          dateRange: {
-            start: today.native,
-            end: nextThreeDaysEnd,
-          },
-        },
-      ];
+      //const previousThreeDaysStart = CalendarDay.today.add('day', -3).native;
+      //const nextThreeDaysEnd = CalendarDay.today.add('day', 3).native;
+
+      // const customRanges: CustomDateRange[] = [
+      //   {
+      //     label: 'Previous Three Days',
+      //     dateRange: {
+      //       start: previousThreeDaysStart,
+      //       end: today.native,
+      //     },
+      //   },
+      //   {
+      //     label: 'Next Three Days',
+      //     dateRange: {
+      //       start: today.native,
+      //       end: nextThreeDaysEnd,
+      //     },
+      //   },
+      // ];
 
       it('should not render any chips when usePredefinedRanges is false and there are no custom ranges added', async () => {
         picker.open = true;
@@ -988,7 +987,7 @@ describe('Date range picker', () => {
         );
 
         picker.open = true;
-        const predefinedRanges = (picker as any).predefinedRanges;
+        const predefinedRanges = (picker as any)._predefinedRanges;
         await elementUpdated(picker);
 
         const chips = picker.renderRoot.querySelectorAll('igc-chip');
@@ -1252,7 +1251,7 @@ describe('Date range picker', () => {
         await elementUpdated(picker);
 
         expect(eventSpy).not.to.be.called;
-        expect(picker.value).to.deep.equal({ start: null, end: null });
+        expect(picker.value).to.deep.equal(null);
       });
 
       it('should open the picker on calendar show icon click in dropdown mode', async () => {
@@ -1330,10 +1329,10 @@ describe('Date range picker', () => {
 
         expect(isFocused(input)).to.be.false;
         expect(eventSpy).to.be.calledWith('igcChange', {
-          detail: { start: null, end: null },
+          detail: null,
         });
         expect(picker.open).to.be.false;
-        expect(picker.value).to.deep.equal({ start: null, end: null });
+        expect(picker.value).to.deep.equal(null);
         expect(input.value).to.equal('');
       });
 

src/components/date-range-picker/date-range-picker.ts

@@ -53,6 +53,7 @@ import {
   createCounter,
   equal,
   findElementFromEventPath,
+  isEmpty,
   last,
 } from '../common/util.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
@@ -339,11 +340,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   }
 
   public get value(): DateRangeValue | null {
-    // TODO what should the default value be? null?
-    return {
-      start: this._formValue?.value?.start ?? null,
-      end: this._formValue?.value?.end ?? null,
-    };
+    return this._formValue.value;
   }
   /**
    * Renders chips with custom ranges based on the elements of the array.
@@ -627,7 +624,10 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   constructor() {
     super();
     this._formValue = createFormValueState<DateRangeValue | null>(this, {
-      initialValue: null,
+      initialValue: {
+        start: null,
+        end: null,
+      },
       transformers: defaultDateRangeTransformers,
     });
 
@@ -651,11 +651,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   protected override formResetCallback() {
     super.formResetCallback();
-    this._formValue.setValueAndFormState({
-      start: this._formValue.defaultValue?.start ?? null,
-      end: this._formValue.defaultValue?.end ?? null,
-    });
-
     this._setCalendarRangeValues();
     this._updateMaskedRangeValue();
   }
@@ -858,13 +853,18 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
       : { start: currentStart, end: newValue };
   }
 
-  // delegate the inputs validity state to the date-range-picker
+  // Delegates the validity methods of internal input elements
+  // to the component's own validation logic specific to date-range values.
+  // Checks for dirty state to avoid unnecessary validation on form reset,
+  // caused by the inputs value being set.
   private _delegateInputsValidity() {
     const inputs = this.useTwoInputs ? this._inputs : [this._input];
 
     inputs.forEach((input) => {
-      input.checkValidity = () => this.checkValidity();
-      input.reportValidity = () => this.reportValidity();
+      input.checkValidity = () =>
+        this._dirty || !this._pristine ? this.checkValidity() : true;
+      input.reportValidity = () =>
+        this._dirty || !this._pristine ? this.reportValidity() : true;
     });
   }
 
@@ -890,11 +890,11 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
         this._inputs[1].max = this._max;
       }
     }
-    if (this._disabledDates?.length > 0) {
+    if (!isEmpty(this.disabledDates)) {
       dates.push(...this.disabledDates);
     }
 
-    this._dateConstraints = dates.length > 0 ? dates : [];
+    this._dateConstraints = isEmpty(dates) ? [] : dates;
   }
 
   private _updateMaskedRangeValue() {
@@ -1066,8 +1066,9 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
       return nothing;
     }
 
-    const hasHeaderDate =
-      this._headerDateSlotItems.length > 0 ? 'header-date' : '';
+    const hasHeaderDate = isEmpty(this._headerDateSlotItems)
+      ? ''
+      : 'header-date';
 
     return html`
       <slot name="title" slot="title">
@@ -1110,13 +1111,13 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   protected renderActions() {
     const slot =
-      this._isDropDown || this._actions.length === 0 ? undefined : 'footer';
+      this._isDropDown || isEmpty(this._actions) ? undefined : 'footer';
 
     // If in dialog mode use the dialog footer slot
     return html`
       <div
         part="actions"
-        ?hidden=${this._actions.length === 0}
+        ?hidden=${isEmpty(this._actions)}
         slot=${ifDefined(slot)}
       >
         <slot name="actions"></slot>
@@ -1262,12 +1263,12 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
         ${this.renderCalendarIcon()}
         <slot
           name="prefix"
-          slot=${ifDefined(this._prefixes.length > 0 ? 'prefix' : undefined)}
+          slot=${ifDefined(isEmpty(this._prefixes) ? undefined : 'prefix')}
         ></slot>
         ${this._renderClearIcon()}
         <slot
           name="suffix"
-          slot=${ifDefined(this._suffixes.length > 0 ? 'suffix' : undefined)}
+          slot=${ifDefined(isEmpty(this._suffixes) ? undefined : 'suffix')}
         ></slot>
       </igc-input>
       ${this.renderHelperText()} ${this.renderPicker(id)}`;

src/components/date-range-picker/validators.ts

@@ -1,4 +1,5 @@
 import { calendarRange, isDateInRanges } from '../calendar/helpers.js';
+import { CalendarDay } from '../calendar/model.js';
 import type { DateRangeDescriptor } from '../calendar/types.js';
 import messages from '../common/localization/validation-en.js';
 import { formatString, last } from '../common/util.js';
@@ -68,13 +69,13 @@ export const badInputDateRangeValidator: Validator<{
   key: 'badInput',
   message: ({ value }) => formatString(messages.disabledDate, value),
   isValid: ({ value, disabledDates }) => {
-    if (!value?.start || !value?.end || !disabledDates) {
+    if (!(value?.start && value?.end && disabledDates)) {
       return true;
     }
 
-    let range = [];
+    let range: CalendarDay[] = [];
     if (value.start.getTime() === value.end.getTime()) {
-      range = [value.start];
+      range = [CalendarDay.from(value.start)];
     } else {
       range = Array.from(calendarRange({ start: value.start, end: value.end }));
       const lastDay = last(range);
@@ -83,8 +84,8 @@ export const badInputDateRangeValidator: Validator<{
       }
     }
 
-    for (let i = 0; i < range.length; i++) {
-      if (isDateInRanges(range[i], disabledDates)) {
+    for (const dateRange of range) {
+      if (isDateInRanges(dateRange, disabledDates)) {
         return false;
       }
     }