@warp-ds/elements 2.10.0-next.9 → 2.10.1-next.1

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

@@ -1,12 +1,44 @@
-import React from 'react';
-import { WarpModal } from './modal.js';
-export { ModalFooter } from '../modal-footer/react.js';
-export { ModalHeader } from '../modal-header/react.js';
+import React from "react";
+import type { WarpModal } from "./modal.js";
+export { ModalFooter } from "../modal-footer/react.js";
+export { ModalHeader } from "../modal-header/react.js";
+/**
+ * Modals (or dialogs) display important information that users need to acknowledge.
+ *
+ * If you keep the <code>open</code> state, listen to <code>onHidden</code> so you can update the state when the user clicks the backdrop, close button, or presses <kbd>Escape</kbd>.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+ *
+ * @example
+ * ```jsx
+ * const [open, setOpen] = useState(false);
+ * return (
+ *   <>
+ *     <Button variant="primary" onClick={() => setOpen(true)}>
+ *       Open modal
+ *     </Button>
+ *     <Modal show={open} id="example-modal-one" onHidden={() => setOpen(false)} onShown={() => setOpen(true)}>
+ *       <ModalHeader slot="header" title="An example modal" />
+ *       <div slot="content">
+ *         <p>
+ *           <!-- modal content -->
+ *         </p>
+ *       </div>
+ *       <ModalFooter slot="footer">
+ *         <Button variant="primary" id="modal-close-button-one" onClick={() => setOpen(false)}>
+ *           OK
+ *         </Button>
+ *       </ModalFooter>
+ *     </Modal>
+ *   </>
+ * );
+ * ```
+ */
 export declare const Modal: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpModal>, "open" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "render" | "renderOptions" | "show" | "close" | "contentId" | "ignoreBackdropClicks" | "onShown" | "onshown" | "onHidden" | "onhidden" | "handleSlotChange"> & {
-    onShown?: (e: Event) => void;
-    onshown?: (e: Event) => void;
-    onHidden?: (e: Event) => void;
-    onhidden?: (e: Event) => void;
+    onShown?: ((e: CustomEvent<any>) => void) | undefined;
+    onshown?: ((e: CustomEvent<any>) => void) | undefined;
+    onHidden?: ((e: CustomEvent<any>) => void) | undefined;
+    onhidden?: ((e: CustomEvent<any>) => void) | undefined;
 } & Partial<Omit<WarpModal, keyof HTMLElement>> & React.RefAttributes<WarpModal>, "ref">, "content-id" | "ignore-backdrop-clicks"> & {
     contentId?: string;
     ignoreBackdropClicks?: boolean;

package/dist/packages/modal/react.js

@@ -1,27 +1,59 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
-export { ModalFooter } from '../modal-footer/react.js';
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
+export { ModalFooter } from "../modal-footer/react.js";
 // Re-export from split packages
-export { ModalHeader } from '../modal-header/react.js';
+export { ModalHeader } from "../modal-header/react.js";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 const BaseModal = createComponent({
-    tagName: 'w-modal',
+    tagName: "w-modal",
     elementClass: Component,
     react: React,
     events: {
-        onShown: 'shown',
-        onshown: 'shown',
-        onHidden: 'hidden',
-        onhidden: 'hidden',
+        onShown: "shown",
+        onshown: "shown",
+        onHidden: "hidden",
+        onhidden: "hidden",
     },
 });
+/**
+ * Modals (or dialogs) display important information that users need to acknowledge.
+ *
+ * If you keep the <code>open</code> state, listen to <code>onHidden</code> so you can update the state when the user clicks the backdrop, close button, or presses <kbd>Escape</kbd>.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+ *
+ * @example
+ * ```jsx
+ * const [open, setOpen] = useState(false);
+ * return (
+ *   <>
+ *     <Button variant="primary" onClick={() => setOpen(true)}>
+ *       Open modal
+ *     </Button>
+ *     <Modal show={open} id="example-modal-one" onHidden={() => setOpen(false)} onShown={() => setOpen(true)}>
+ *       <ModalHeader slot="header" title="An example modal" />
+ *       <div slot="content">
+ *         <p>
+ *           <!-- modal content -->
+ *         </p>
+ *       </div>
+ *       <ModalFooter slot="footer">
+ *         <Button variant="primary" id="modal-close-button-one" onClick={() => setOpen(false)}>
+ *           OK
+ *         </Button>
+ *       </ModalFooter>
+ *     </Modal>
+ *   </>
+ * );
+ * ```
+ */
 export const Modal = React.forwardRef(({ contentId, ignoreBackdropClicks, ...props }, ref) => React.createElement(BaseModal, {
     ...props,
-    ...(contentId !== undefined ? { 'content-id': contentId } : {}),
-    ...(ignoreBackdropClicks ? { 'ignore-backdrop-clicks': true } : {}),
+    ...(contentId !== undefined ? { "content-id": contentId } : {}),
+    ...(ignoreBackdropClicks ? { "ignore-backdrop-clicks": true } : {}),
     ref,
 }));
-Modal.displayName = 'Modal';
+Modal.displayName = "Modal";

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

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

package/dist/packages/modal/styles.js

@@ -0,0 +1,171 @@
+import { css } from "lit";
+export const styles = css `
+	:host {
+		--_backdrop-bg: var(
+			--w-c-modal-backdrop-color,
+			light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.75))
+		);
+		--_background-color: var(--w-c-modal-bg, var(--w-s-color-background));
+		--_box-shadow: var(--w-c-modal-box-shadow, var(--w-shadow-l));
+		--_color: var(--w-c-modal-color, var(--w-s-color-text));
+		--_height: var(
+			--w-c-modal-height,
+			var(--w-modal-height) /* --w-modal-height kept for backwards compat */
+		);
+		--_max-height: var(
+			--w-c-modal-max-height,
+			var(--w-modal-max-height, 80%)
+				/* --w-modal-max-height kept for backwards compat */
+		);
+		--_min-height: var(
+			--w-c-modal-min-height,
+			var(--w-modal-min-heigh)
+				/* --w-modal-min-height kept for backwards compat */
+		);
+		--_translate-distance: var(
+			--w-c-modal-translate-distance,
+			var(--w-modal-translate-distance, 100%)
+				/* --w-modal-translate-distance kept for backwards compat */
+		);
+		--_width: var(
+			--w-c-modal-width,
+			var(--w-modal-width, 640px)
+				/* --w-modal-width kept for backwards compat */
+		);
+	}
+
+	[part="dialog"] {
+		background-color: transparent;
+		border-width: 0;
+		align-items: flex-end;
+		inset: 0rem;
+		height: unset;
+		max-height: unset;
+		max-width: unset;
+		width: unset;
+		margin: auto;
+		padding: 0rem;
+		backface-visibility: hidden;
+	}
+
+	[part="dialog"]::backdrop {
+		background: var(--_backdrop-bg);
+	}
+
+	[part="wrapper"] {
+		will-change: height;
+		border-radius: 8px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		position: relative;
+		background-color: var(--_background-color);
+		color: var(--_color);
+		box-shadow: var(--_box-shadow);
+		height: var(--_height);
+		max-height: var(--_max-height);
+		min-height: var(--_min-height);
+		width: var(--_width);
+		backface-visibility: hidden;
+		padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
+		transition-property: all;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		transition-duration: 150ms;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	[part="content"] {
+		display: block;
+		flex-shrink: 1;
+		flex-grow: 1;
+		overflow-x: hidden;
+		overflow-y: auto;
+		position: relative;
+		margin-bottom: 0rem;
+		padding-left: 1.6rem;
+		padding-right: 1.6rem;
+	}
+
+	@media (min-width: 480px) {
+		[part="dialog"] {
+			--w-c-modal-translate-distance: 50%;
+			place-content: center;
+			place-items: center;
+		}
+		[part="wrapper"] {
+			margin-left: 1.6rem;
+			margin-right: 1.6rem;
+			padding-bottom: 3.2rem;
+		}
+		[part="content"] {
+			padding-left: 3.2rem;
+			padding-right: 3.2rem;
+		}
+	}
+
+	@media (max-width: 479.9px) {
+		[part="wrapper"] {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+
+	[part="dialog"][open] {
+		animation: w-modal-in 0.3s ease-in-out forwards;
+		display: flex;
+		position: fixed;
+	}
+
+	[part="dialog"].close {
+		animation: w-modal-out 0.3s ease-in-out forwards;
+	}
+
+	[part="dialog"][open]::backdrop {
+		animation: backdrop-in 0.3s ease-in-out forwards;
+	}
+
+	[part="dialog"].close::backdrop {
+		animation: backdrop-out 0.3s ease-in-out forwards;
+	}
+
+	/* shouldn't need two (in/out) animations declared here, but reversing is being weird */
+	@keyframes w-modal-in {
+		from {
+			transform: translateY(var(--_translate-distance));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	@keyframes w-modal-out {
+		from {
+			transform: translateY(0);
+			opacity: 1;
+		}
+		to {
+			transform: translateY(var(--_translate-distance));
+			opacity: 0;
+		}
+	}
+
+	@keyframes backdrop-in {
+		from {
+			background: transparent;
+		}
+		to {
+			background: var(--_backdrop-bg);
+		}
+	}
+
+	@keyframes backdrop-out {
+		from {
+			background: var(--_backdrop-bg);
+		}
+		to {
+			background: transparent;
+		}
+	}
+`;

package/dist/packages/modal/util.js

@@ -5,14 +5,16 @@ export const CanCloseMixin = (superClass) => class extends superClass {
         this._close = null;
     }
     close() {
+        // @ts-expect-error This should blow up so users implement the mixin
         this._close();
     }
 };
 export const ProvidesCanCloseToSlotsMixin = (superClass) => class extends superClass {
     // HACK: slot-props don't seem to exist and neither does the context pattern for this
-    /** @param {Event} evt */
     handleSlotChange(evt) {
+        // @ts-expect-error It's fine, everything's fine
         const children = evt.target.assignedNodes({ flatten: true });
+        // @ts-expect-error It's fine, everything's fine
         for (const child of children.filter((e) => e.patchClose)) {
             // @ts-expect-error users have to implement the close method
             child._close = () => this.close();

package/dist/packages/modal-footer/modal-footer.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 declare const WarpModalFooter_base: import("../modal/util.js").Constructor<{
     close: () => void;
 }> & import("../modal/util.js").Constructor<{
@@ -7,12 +7,23 @@ declare const WarpModalFooter_base: import("../modal/util.js").Constructor<{
 /**
  * The footer section of a modal, typically where you place actions.
  *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
+ *
  * @parent w-modal
+ *
+ * @csspart footer - the container for slotted items (children).
+ *
+ * @cssprop --w-c-modal-footer-gap -  adjusts the flex gap between actions in the footer.
  */
 export declare class WarpModalFooter extends WarpModalFooter_base {
-    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
 }
 /** @deprecated Exported for backwards compatibility. Use WarpModalFooter. */
 export declare const ModalFooter: typeof WarpModalFooter;
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-modal-footer": WarpModalFooter;
+    }
+}
 export {};