Merge branch 'next' into tag-component

Author: erbilnas

docs/using-baklava-in-next.stories.mdx

@@ -52,6 +52,29 @@ In the page, import the component using `dynamic` with ssr off.
 const Button = dynamic(() => import("@/components/Button"), { ssr: false });
 ```
 
+Or you can export the component as dynamic to avoid type errors.
+
+```jsx
+
+"use client";
+
+import dynamic from 'next/dynamic';
+import type { ComponentProps } from 'react';
+import { BlButton } from "@trendyol/baklava/dist/baklava-react";
+
+type ButtonProps = ComponentProps<typeof BlButton>;
+
+const Button = (props: ButtonProps) => (
+  <BlButton {...props}>Click me!</BlButton>
+);
+
+const DynamicButton = dynamic<ButtonProps>(() =>
+  Promise.resolve(Button)
+);
+
+export default DynamicButton;
+```
+
 [Here is the demo repository](https://github.com/trendyol/baklava/tree/next/examples/next-app-router-ssr). You can also preview it live with [StackBlitz](https://stackblitz.com/github/trendyol/baklava/tree/next/examples/next-app-router-ssr).
 
 ## Using with SSR

src/components/calendar/bl-calendar.test.ts

@@ -534,7 +534,7 @@ describe("bl-calendar", () => {
 
     const setNextCalendarViewSpy = sinon.spy(element, "setNextCalendarView");
 
-    element.handleDate(new Date(2024, 2, 15));
+    element.handleDate(new Date(element.today.getFullYear()+1,2,15));
 
     expect(setNextCalendarViewSpy).to.have.been.called;
 

src/components/calendar/bl-calendar.ts

@@ -200,7 +200,12 @@ export default class BlCalendar extends DatepickerCalendarMixin {
   }
 
   checkIfSelectedDate(calendarDate: Date) {
-    return this._selectedDates?.some(date => date?.getTime() === calendarDate.getTime());
+    return this._selectedDates?.some(
+      date =>
+        date.getFullYear() === calendarDate.getFullYear() &&
+        date.getMonth() === calendarDate.getMonth() &&
+        date.getDate() === calendarDate.getDate()
+    );
   }
 
   checkIfDateIsToday(calendarDate: Date) {

src/components/datepicker/bl-datepicker.stories.mdx

@@ -134,6 +134,24 @@ You can set input width of datepicker as you wish.
   </Story>
 </Canvas>
 
+
+### Min - Max Date
+
+You can set min date or max date for the datepicker.
+
+<Canvas>
+  <Story name="Set min and max date"
+         args={{
+           type: 'single',
+           label: 'Set min and max date',
+           placeholder: 'Set min and max date',
+           minDate: `${new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 2)}`,
+           maxDate: `${new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)}`
+         }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 ## Reference
 
 <ArgsTable of="bl-datepicker" />

src/components/datepicker/bl-datepicker.test.ts

@@ -1,4 +1,4 @@
-import { aTimeout, expect, fixture, html } from "@open-wc/testing";
+import { aTimeout, elementUpdated, expect, fixture, html } from "@open-wc/testing";
 import { BlButton, BlDatePicker } from "../../baklava";
 import { CALENDAR_TYPES } from "../calendar/bl-calendar.constant";
 import sinon from "sinon";
@@ -95,11 +95,20 @@ describe("BlDatepicker", () => {
     element._selectedDates = [new Date(2023, 1, 1)];
     await element.updateComplete;
 
+    element.addEventListener("bl-datepicker-change", (event) => {
+      const customEvent = event as CustomEvent;
+
+      expect(customEvent).to.exist;
+      expect(customEvent.detail).to.deep.equal([]);
+
+    });
+
     const clearButton = element.shadowRoot?.querySelector("bl-button") as BlButton;
 
     clearButton?.click();
     await element.updateComplete;
 
+
     expect(element._selectedDates).to.deep.equal([]);
     expect(element._inputValue).to.equal("");
   });
@@ -275,16 +284,6 @@ describe("BlDatepicker", () => {
     expect(element.value).to.be.undefined;
   });
 
-  it("should warn when 'value' is not an array for multiple/range selection", async () => {
-    element = await fixture<BlDatePicker>(html`
-      <bl-datepicker type="multiple" locale="en"></bl-datepicker>`);
-    element.value = new Date();
-
-    element.firstUpdated();
-
-    expect(consoleWarnSpy.calledOnce).to.be.true;
-  });
-
   it("should not warn when value is an array for multiple/range selection", () => {
     element.type = CALENDAR_TYPES.MULTIPLE;
     element.value = [new Date(), new Date()];
@@ -376,4 +375,13 @@ describe("BlDatepicker", () => {
     expect(focusSpy.called).to.be.true;
   });
 
+  it("should call setDatePickerInput when _selectedDates changes", async () => {
+    const setDatePickerInputSpy = sinon.spy(element, "setDatePickerInput");
+
+    element.value = [new Date(2025,0,10)];
+    await elementUpdated(element);
+
+    expect(setDatePickerInputSpy).to.have.been.calledOnceWith(element._selectedDates);
+  });
+
 });

src/components/datepicker/bl-datepicker.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, html, TemplateResult } from "lit";
+import { CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { BlCalendar, BlPopover } from "../../baklava";
 import DatepickerCalendarMixin from "../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin";
@@ -147,10 +147,10 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
   }
 
   clearDatepicker() {
-    this._calendarEl.handleClearSelectedDates();
     this._selectedDates = [];
     this._inputValue = "";
     this._floatingDateCount = 0;
+    this._calendarEl.handleClearSelectedDates();
   }
 
   openPopover() {
@@ -197,6 +197,12 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
     }
   }
 
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has("_selectedDates")) {
+      this.setDatePickerInput(this._selectedDates);
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this._calendarEl?.removeEventListener("mousedown", this._onCalendarMouseDown);
@@ -242,7 +248,7 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
               variant="tertiary"
               kind="neutral"
               icon="close"
-              @click=${() => this.clearDatepicker()}
+              @click=${this.clearDatepicker}
             ></bl-button>
             <div class="action-divider"></div>`
         : "";

src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.test.ts

@@ -40,10 +40,10 @@ describe("DatepickerCalendarMixin", () => {
   });
 
   it("should set and get minDate correctly", () => {
-    const minDate = new Date("2024-01-01");
+    const minDate = new Date(2024,1,1);
 
     element.minDate = minDate;
-    expect(element.minDate).to.equal(minDate);
+    expect(element.minDate.getTime()).to.equal(minDate.getTime());
   });
 
   it("should log a warning if minDate is greater than maxDate", () => {
@@ -56,10 +56,10 @@ describe("DatepickerCalendarMixin", () => {
   });
 
   it("should set and get maxDate correctly", () => {
-    const maxDate = new Date("2024-12-31");
+    const maxDate = new Date(2024,12,31);
 
     element.maxDate = maxDate;
-    expect(element.maxDate).to.equal(maxDate);
+    expect(element.maxDate.getTime()).to.equal(maxDate.getTime());
   });
 
   it("should log a warning if maxDate is smaller than minDate", () => {

src/mixins/datepicker-calendar-mixin/datepicker-calendar-mixin.ts

@@ -34,7 +34,6 @@ export default class DatepickerCalendarMixin extends LitElement {
 
   @property({
     attribute: "disabled-dates",
-    type: Array,
     reflect: true,
   })
   set disabledDates(disabledDates: Date[] | string) {
@@ -65,10 +64,15 @@ export default class DatepickerCalendarMixin extends LitElement {
 
   @property({ type: Date, attribute: "max-date", reflect: true })
   set maxDate(maxDate: Date) {
+    if (isNaN(new Date(maxDate).getTime())) {
+      console.warn("Invalid maxDate value.");
+      return;
+    }
     if (this._minDate && this._minDate >= maxDate) {
       console.warn("maxDate cannot be smaller than minDate.");
     } else {
-      this._maxDate = maxDate;
+      this._maxDate = new Date(maxDate);
+      this.requestUpdate("maxDate", maxDate);
     }
   }
 
@@ -83,10 +87,15 @@ export default class DatepickerCalendarMixin extends LitElement {
 
   @property({ type: Date, attribute: "min-date", reflect: true })
   set minDate(minDate: Date) {
+    if (isNaN(new Date(minDate).getTime())) {
+      console.warn("Invalid minDate value.");
+      return;
+    }
     if (this._maxDate && this._maxDate <= minDate) {
       console.warn("minDate cannot be greater than maxDate.");
     } else {
-      this._minDate = minDate;
+      this._minDate = new Date(minDate);
+      this.requestUpdate("minDate", minDate);
     }
   }