@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.11

package/dist/packages/card/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Vælg\"]}");

package/dist/packages/card/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Select\"]}");

package/dist/packages/card/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Valitse\"]}");

package/dist/packages/card/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Velg\"]}");

package/dist/packages/card/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"card.button.text\":[\"Välj\"]}");

package/dist/packages/card/react.d.ts

@@ -0,0 +1,2 @@
+import { WarpCard } from './index.js';
+export declare const Card: import("@lit/react").ReactWebComponent<WarpCard, {}>;

package/dist/packages/card/react.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { WarpCard } from './index.js';
+export const Card = createComponent({
+    tagName: 'w-card',
+    elementClass: WarpCard,
+    react: React,
+});

package/dist/packages/card/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/card/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.outline{outline-style:solid}.inset-0{top:0;bottom:0;left:0;right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.\\!s-bg-selected{background-color:var(--w-s-color-background-selected)!important}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.\\!hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)!important}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.\\!active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)!important}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)}.s-border{border-color:var(--w-s-color-border)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.group:hover .group-hover\\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active)}.group:active .group-active\\:s-border-active{border-color:var(--w-s-color-border-active)}.group:active .group-active\\:s-border-selected-active{border-color:var(--w-s-color-border-selected-active)}.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200);box-shadow:var(--w-s-shadow-surface-elevated-200)}.hover\\:s-surface-elevated-200-hover:hover{background-color:var(--w-s-color-surface-elevated-200-hover);box-shadow:var(--w-s-shadow-surface-elevated-200-hover)}.active\\:s-surface-elevated-200-active:active{background-color:var(--w-s-color-surface-elevated-200-active);box-shadow:var(--w-s-shadow-surface-elevated-200-active)}.cursor-pointer{cursor:pointer}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}`;

package/dist/packages/datepicker/DatePicker.test.d.ts

@@ -0,0 +1 @@
+import '../button/index.js';

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { server, userEvent } from '@vitest/browser/context';
+import { expect, test, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import '../button/index.js'; // TODO: figure out a good way of including the required definition without bundling the button in datepicker
+import { DatePicker } from './react.js';
+test('renders the date picker component', async () => {
+    const page = render(React.createElement("form", null,
+        React.createElement(DatePicker, { label: "From date" })));
+    await expect.element(page.getByLabelText('From date')).toBeVisible();
+});
+test('can pick a date using a pointer', async () => {
+    const page = render(React.createElement("form", { "data-testid": "flight" },
+        React.createElement(DatePicker, { label: "From date", name: "from" })));
+    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
+    await page.getByRole('button').click({ force: true });
+    await page.getByRole('gridcell').nth(15).click();
+    await expect.element(page.getByLabelText('From date')).toHaveValue();
+    const formData = new FormData(page.getByTestId('flight').element());
+    expect(formData.get('from')).toBeTruthy();
+});
+test.skipIf(server.browser === 'firefox')('can pick a date using keyboard', async () => {
+    const page = render(React.createElement("form", { "data-testid": "flight" },
+        React.createElement(DatePicker, { label: "From date", name: "from" })));
+    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
+    await expect.element(page.getByTestId('calendar').query()).not.toBeVisible();
+    const toggle = page.getByRole('button').element();
+    toggle.focus();
+    await userEvent.keyboard('[Enter]');
+    await expect.element(page.getByTestId('calendar')).toBeVisible();
+    page.getByRole('gridcell').nth(15).element().focus();
+    await userEvent.keyboard('[Enter]');
+    await expect
+        .element(page.getByTestId('calendar').query(), { message: 'expected calendar to close after clicking a date' })
+        .not.toBeVisible();
+    await expect.element(page.getByLabelText('From date')).toHaveValue();
+    const formData = new FormData(page.getByTestId('flight').element());
+    expect(formData.get('from')).toBeTruthy();
+});
+test('can pick a date by typing in the input field', async () => {
+    const page = render(React.createElement("form", { "data-testid": "flight" },
+        React.createElement(DatePicker, { label: "From date", name: "from" })));
+    await expect.element(page.getByLabelText('From date')).not.toHaveValue();
+    const toggle = page.getByLabelText('From date').element();
+    toggle.focus();
+    await page.getByLabelText('From date').fill('2025-01-01');
+    await expect.element(page.getByLabelText('From date')).toHaveValue();
+    const formData = new FormData(page.getByTestId('flight').element());
+    expect(formData.get('from')).toBeTruthy();
+});
+test('allows for the controlled component pattern', async () => {
+    const spy = vi.fn();
+    const TestComponent = () => {
+        const [value, setValue] = useState('');
+        return (React.createElement("form", { "data-testid": "flight" },
+            React.createElement(DatePicker, { label: "From date", name: "from", value: value, onChange: (e) => {
+                    const nextValue = e.target.value;
+                    setValue(nextValue);
+                    spy(nextValue);
+                } })));
+    };
+    const page = render(React.createElement(TestComponent, null));
+    await page.getByRole('button').click({ force: true });
+    await page.getByRole('gridcell').nth(15).click();
+    await expect.element(page.getByLabelText('From date')).toHaveValue();
+    // Check that our controlled onChange handler got to set the value back on the element
+    expect(spy).toBeCalledWith(page.getByLabelText('From date').element().value);
+});

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

@@ -0,0 +1,107 @@
+import { LitElement } from 'lit';
+import { Locale } from 'date-fns';
+import '@warp-ds/icons/elements/calendar-16';
+import '@warp-ds/icons/elements/chevron-left-16';
+import '@warp-ds/icons/elements/chevron-right-16';
+declare const WarpDatepicker_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * An input for dates.
+ *
+ * Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
+ */
+declare class WarpDatepicker extends WarpDatepicker_base {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult[];
+    label: string;
+    /** Takes precedence over the `<html>` lang attribute. */
+    lang: string;
+    name: string;
+    value: string;
+    /**
+     * Decides the format of the date as shown in the calendar header.
+     *
+     * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+     */
+    headerFormat: string;
+    /**
+     * Decides the format of the weekday as shown above the grid of dates in the calendar.
+     *
+     * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+     */
+    weekdayFormat: string;
+    /**
+     * Lets you control if a date in the calendar should be disabled.
+     *
+     * This needs to be set on the element instance in JavaScript, not as an HTML attribute.
+     *
+     * @example
+     * ```ts
+     * import type { WarpDatepicker } from "@warp-ds/elements";
+     * import { isBefore, startOfDay } from 'date-fns';
+     *
+     * const today = startOfDay(new Date());
+     * const datePicker = document.querySelector('w-datepicker') as WarpDatepicker;
+     * datePicker.isDayDisabled = (day: Date) => isBefore(startOfDay(day), today);
+     * ```
+     */
+    isDayDisabled: (day: Date) => boolean;
+    /**
+     * Decides the format of the day in the calendar as read to screen readers.
+     *
+     * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
+     */
+    dayFormat: string;
+    isCalendarOpen: boolean;
+    navigationDate: Date;
+    /** @internal This gets picked up by the custom element manifest analyzer as a property for some reason */
+    locale: Locale;
+    get selectedDate(): Date | null;
+    get month(): Date;
+    get weeks(): import("date-fns").EachDayOfIntervalResult<{
+        start: Date;
+        end: Date;
+    }, undefined>[];
+    calendar: HTMLDivElement;
+    input: HTMLInputElement;
+    toggleButton: HTMLButtonElement;
+    wrapper: HTMLDivElement;
+    /**
+     * This is the first focusable element, needed for the modal focus trap.
+     *
+     * Don't cache this and other `@query` fields from inside the calendar modal.
+     * They work the first time, but once the calendar is closed and reopened
+     * the query will point to an element that doesn't exist anymore.
+     */
+    previousMonthButton: HTMLButtonElement;
+    todayCell: HTMLTableCellElement;
+    selectedCell: HTMLTableCellElement;
+    /**
+     * We can't use private fields (`#` prefix) for this method
+     * since we can't overwrite private field methods. We need
+     * to `.bind(this)` in the constructor because we need one
+     * stable method handler we can register and unregister on
+     * `document`, that has access to this specific instance
+     * of WarpDatepicker to control the calendar.
+     * @internal
+     */
+    private _onClickOutside;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-datepicker': WarpDatepicker;
+    }
+}
+export { WarpDatepicker };