@warp-ds/elements 2.10.0-next.14 → 2.10.0-next.15

package/dist/packages/snackbar/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

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

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

package/dist/packages/snackbar/react.js

@@ -0,0 +1,11 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Snackbar = createComponent({
+    tagName: 'w-snackbar',
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/snackbar/snackbar.d.ts

@@ -0,0 +1,132 @@
+import { LitElement } from 'lit';
+import { SnackbarDuration, type WarpSnackbarItem, type SnackbarVariant, type SnackbarActionPlacement } from '../snackbar-item/snackbar-item.js';
+export type CreateSnackbarOptions = {
+    /**
+     * Show a close button so users can dismiss the message early.
+     *
+     * Can not be turned off if duration is Long or more.
+     *
+     * Pass a click event handler if you need to react to clicks on the close button somehow.
+     * You can stop the message from closing by calling `event.preventDefault()`.
+     *
+     * @default true
+     */
+    canClose?: boolean | ((this: GlobalEventHandlers, ev: PointerEvent) => any);
+    /**
+     * Duration until the message hides automatically.
+     *
+     * If the message has an action the default `duration` is `SnackbarDuration.Long`.
+     *
+     * @default SnackbarDuration.Short
+     */
+    duration?: SnackbarDuration;
+    /**
+     * @default 'neutral'
+     */
+    variant?: SnackbarVariant;
+    /**
+     * Shows an action before the close button.
+     *
+     * Use this action as a convenience only. Ensure the result of any action in the snackbar,
+     * such as Undo, is possible to achieve elsewhere in your application.
+     */
+    action?: {
+        /**
+         * Keep action labels short.
+         *
+         * If the label includes a space the `placement` is set to `block` by default.
+         */
+        label: string;
+        /**
+         * The action button's `onclick` property.
+         */
+        onclick: (this: GlobalEventHandlers, ev: PointerEvent) => any;
+        /**
+         * Overrides the default placement of the action button.
+         *
+         * By default labels that are only one word are `inline` and labels with multiple words are `block`.
+         * If you have a particularly long word as a label you can set `placement: 'block'`.
+         */
+        placement?: SnackbarActionPlacement;
+    };
+};
+/**
+ * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
+ *
+ * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
+ *
+ * @example
+ *
+ * ```html
+ * <body>
+ * 	<w-snackbar></w-snackbar>
+ * </body>
+ * ```
+ *
+ * @example
+ *
+ * ```ts
+ * // Short message indicating an operation succeeded
+ * const snackbar = document.querySelector("w-snackbar");
+ * const snackbarItem = snackbar.create("Settings saved", { variant: "success" });
+ * ```
+ *
+ * @example
+ *
+ * ```ts
+ * // An action to undo what was just done
+ * const snackbar = document.querySelector("w-snackbar");
+ * const snackbarItem = snackbar.create("Settings saved", {
+ * 	variant: "success",
+ * 	action: {
+ * 		label: "Undo",
+ * 		onclick: () => {
+ * 			// undoSave();
+ * 		},
+ * 	},
+ * });
+ * ```
+ *
+ * @slot default - `w-snackbar-item` gets placed inside the default slot by the `create` function.
+ *
+ * @csspart container - the live region that positions messages on the screen.
+ *
+ * @cssprop --w-c-snackbar-container-gap
+ * @cssprop --w-c-snackbar-position-bottom
+ * @cssprop --w-c-snackbar-position-left
+ * @cssprop --w-c-snackbar-position-right
+ * @cssprop --w-c-snackbar-position-top
+ * @cssprop --w-c-snackbar-z-index
+ */
+export declare class WarpSnackbar extends LitElement {
+    private internals;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal */
+    _onKeydown(e: KeyboardEvent): void;
+    /**
+     * Creates a snackbar item and immediately adds it to the snackbar.
+     *
+     * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
+     *
+     * If you include an `action` in the options the default `duration` is
+     * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
+     *
+     * A `duration` of 10 seconds or longer forces the close button to be visible.
+     *
+     * The default `variant` is `neutral` which does not have an icon.
+     *
+     * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
+     *
+     * @returns The instance of `w-snackbar-item` added to the snackbar.
+     */
+    create(message: string, options?: CreateSnackbarOptions): WarpSnackbarItem;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-snackbar': WarpSnackbar;
+    }
+}

package/dist/packages/snackbar/snackbar.hydration.test.d.ts

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

package/dist/packages/snackbar/snackbar.hydration.test.js

@@ -0,0 +1,13 @@
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './snackbar.js';
+describe('w-snackbar React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-slider', {});
+        expect(warnings).toEqual([]);
+    });
+});