@warp-ds/elements 2.3.0-next.9 → 2.3.1

package/dist/packages/datepicker/datepicker.react.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 import { DatePicker } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "label" | "onchange" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "input" | "name" | "value" | "updated" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "month" | "locale" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
+    render(args: Omit<React.HTMLAttributes<import("./datepicker").WarpDatepicker>, "label" | "onchange" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "input" | "name" | "value" | "updated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "month" | "locale" | "calendar" | "wrapper" | "headerFormat" | "weekdayFormat" | "isDayDisabled" | "dayFormat" | "isCalendarOpen" | "navigationDate" | "selectedDate" | "weeks" | "toggleButton" | "previousMonthButton" | "todayCell" | "selectedCell"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
     } & Partial<Omit<import("./datepicker").WarpDatepicker, keyof HTMLElement>> & React.RefAttributes<import("./datepicker").WarpDatepicker>): React.JSX.Element;

package/dist/packages/datepicker/datepicker.test.js

@@ -60,3 +60,30 @@ test('can pick a date by typing in the input field', async () => {
     const formData = new FormData(page.getByTestId('flight').element());
     expect(formData.get('from')).toBeTruthy();
 });
+test('can reset datepicker by resetting surrounding form', async () => {
+    const label = 'Test label';
+    render(html `
+    <form>
+      <w-datepicker
+        label=${label}
+        name="test"
+        value="2025-01-01"
+      >
+      </w-datepicker>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wDatepicker = document.querySelector('w-datepicker');
+    // sanity
+    expect(form).not.toBeNull();
+    expect(wDatepicker).not.toBeNull();
+    // Initial value is "2025-01-01"
+    expect(wDatepicker.value).toBe('2025-01-01');
+    // Change the value to "definitely not 2025-01-01"
+    wDatepicker.value = 'definitely not 2025-01-01';
+    expect(wDatepicker.value).toBe('definitely not 2025-01-01');
+    // Reset the form
+    form.reset();
+    // Value should be reset back to "2025-01-01"
+    expect(wDatepicker.value).toBe('2025-01-01');
+});