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

package/dist/packages/utils/element-collapse.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Transitions an element from 0 to a detected height
+ * Will return a Promise when no 'done' callback is provided
+ * @type {(el: HTMLElement, done?: function) => void | Promise<void>}
+ */
+export const expand: (el: HTMLElement, done?: Function) => void | Promise<void>;
+/**
+ * Transitions an element from a detected height to 0
+ * Will return a Promise when no 'done' callback is provided
+ * @type {(el: HTMLElement, done?: function) => void | Promise<void>}
+ */
+export const collapse: (el: HTMLElement, done?: Function) => void | Promise<void>;

package/dist/packages/utils/element-collapse.js

@@ -0,0 +1,92 @@
+const windowExists = (typeof window !== 'undefined');
+let prefersMotion = true;
+if (windowExists) {
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const callback = ({ matches }) => prefersMotion = !matches;
+    // older browsers don't support the new API, and the old API is deprecated
+    if (query.addEventListener)
+        query.addEventListener('change', callback);
+    callback(query);
+}
+const removeTransition = el => {
+    el.style.transition = null;
+    el.style.backfaceVisibility = null;
+    el.style.overflow = null;
+};
+const addTransition = (el) => {
+    // we set timing to something insanely short
+    // when reducing motion so the after-* hooks still fire
+    const timing = 'var(--w-expansion-duration, var(--f-expansion-duration, 0.3s))';
+    el.style.transition = `height ${timing}`;
+    el.style.backfaceVisibility = 'hidden';
+    el.style.overflow = 'hidden';
+};
+const getAfterExpandCallback = (el, done) => () => {
+    el.style.height = 'auto';
+    el.style.overflow = null;
+    if (done)
+        done();
+};
+const getAfterCollapseCallback = (done) => () => {
+    if (done)
+        done();
+};
+/**
+ * Transitions an element from 0 to a detected height
+ * Will return a Promise when no 'done' callback is provided
+ * @type {(el: HTMLElement, done?: function) => void | Promise<void>}
+ */
+export const expand = (el, done) => {
+    const returnPromise = (() => {
+        if (!done)
+            return new Promise(r => { done = r; });
+    })();
+    if (!prefersMotion) {
+        el.style.height = 'auto';
+        if (done)
+            done();
+        return returnPromise;
+    }
+    const afterExpandCallback = getAfterExpandCallback(el, done);
+    removeTransition(el);
+    el.style.height = 'auto';
+    const dest = el.scrollHeight;
+    windowExists && requestAnimationFrame(() => {
+        el.addEventListener('transitionend', afterExpandCallback, { once: true });
+        el.style.height = '0px';
+        el.style.transitionTimingFunction = 'ease-out';
+        addTransition(el);
+        requestAnimationFrame(() => el.style.height = dest + 'px');
+    });
+    if (returnPromise)
+        return returnPromise;
+};
+/**
+ * Transitions an element from a detected height to 0
+ * Will return a Promise when no 'done' callback is provided
+ * @type {(el: HTMLElement, done?: function) => void | Promise<void>}
+ */
+export const collapse = (el, done) => {
+    const returnPromise = (() => {
+        if (!done)
+            return new Promise(r => { done = r; });
+    })();
+    if (!prefersMotion) {
+        el.style.height = '0px';
+        if (done)
+            done();
+        return returnPromise;
+    }
+    const afterCollapseCallback = getAfterCollapseCallback(done);
+    removeTransition(el);
+    const original = el.scrollHeight;
+    windowExists && requestAnimationFrame(() => {
+        el.addEventListener('transitionend', afterCollapseCallback, { once: true });
+        el.style.height = original + 'px';
+        el.style.transitionTimingFunction = 'ease-in';
+        addTransition(el);
+        requestAnimationFrame(() => el.style.height = '0px');
+    });
+    if (returnPromise)
+        return returnPromise;
+};

package/dist/packages/utils/expand-transition.js

@@ -1,6 +1,6 @@
-import { collapse, expand } from 'element-collapse';
 import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { collapse, expand } from './element-collapse.js';
 class ExpandTransition extends LitElement {
     static { this.properties = {
         show: {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0-next.13",
+  "version": "2.10.0-next.14",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2356,6 +2356,58 @@
             "events": []
           }
         },
+        {
+          "name": "w-snackbar-item",
+          "description": "An item to show in a `w-snackbar`.\n\nSee the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.\n---\n\n\n### **Methods:**\n - **close(): _void_** - Remove the snackbar item from the document.\n\nMoves focus to the last focused element outside of the snackbar item, if available.\n\n### **Slots:**\n - **default** - the snackbar message.\n- **icon** - icon preceeding the message.\n- **action** - action following the message.\n\n### **CSS Properties:**\n - **--w-c-snackbar-item-radius** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-max-width** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-min-width** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-padding** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-bg** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-bg-active** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-bg-hover** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-color** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-color-active** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-action-color-hover** - undefined _(default: undefined)_\n- **--w-c-snackbar-item-box-shadow** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **item** - the container wrapping the message, icon and actions.\n- **icon** - the icon for the variant.\n- **message** - the default slot, body of the snackbar item.\n- **action** - close and action button.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "action-placement",
+              "description": "The placement of the action and close buttons.",
+              "value": { "type": "'inline' | 'block'", "default": "'inline'" }
+            },
+            {
+              "name": "duration",
+              "description": "How long the message should stay in the document before removing itself.",
+              "value": { "type": "number" }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "the snackbar message." },
+            { "name": "icon", "description": "icon preceeding the message." },
+            { "name": "action", "description": "action following the message." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "actionPlacement",
+                "description": "The placement of the action and close buttons.",
+                "type": "'inline' | 'block'"
+              },
+              {
+                "name": "duration",
+                "description": "How long the message should stay in the document before removing itself.",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-snackbar",
+          "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n---\n\n\n### **Methods:**\n - **create(message: _string_, options: _CreateSnackbarOptions_): __** - Creates a snackbar item and immediately adds it to the snackbar.\n\nBy default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).\n\nIf you include an `action` in the options the default `duration` is\nset to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter. \n\nA `duration` of 10 seconds or longer forces the close button to be visible.\n\nThe default `variant` is `neutral` which does not have an icon.\n\nSet `duration` to `SnackbarDuration.Infinite` if you want a persistent message.\n\n### **Slots:**\n - **default** - `w-snackbar-item` gets placed inside the default slot by the `create` function.\n\n### **CSS Properties:**\n - **--w-c-snackbar-container-gap** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-bottom** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-left** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-right** - undefined _(default: undefined)_\n- **--w-c-snackbar-position-top** - undefined _(default: undefined)_\n- **--w-c-snackbar-z-index** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - the live region that positions messages on the screen.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "default",
+              "description": "`w-snackbar-item` gets placed inside the default slot by the `create` function."
+            }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "w-step",
           "description": "Individual step component that shows a single step in a process\n---\n",
@@ -2732,8 +2784,41 @@
       ]
     },
     "css": {
-      "properties": [],
-      "pseudo-elements": []
+      "properties": [
+        { "name": "--w-c-snackbar-item-radius" },
+        { "name": "--w-c-snackbar-item-max-width" },
+        { "name": "--w-c-snackbar-item-min-width" },
+        { "name": "--w-c-snackbar-item-padding" },
+        { "name": "--w-c-snackbar-item-bg" },
+        { "name": "--w-c-snackbar-item-action-bg-active" },
+        { "name": "--w-c-snackbar-item-action-bg-hover" },
+        { "name": "--w-c-snackbar-item-color" },
+        { "name": "--w-c-snackbar-item-action-color-active" },
+        { "name": "--w-c-snackbar-item-action-color-hover" },
+        { "name": "--w-c-snackbar-item-box-shadow" },
+        { "name": "--w-c-snackbar-container-gap" },
+        { "name": "--w-c-snackbar-position-bottom" },
+        { "name": "--w-c-snackbar-position-left" },
+        { "name": "--w-c-snackbar-position-right" },
+        { "name": "--w-c-snackbar-position-top" },
+        { "name": "--w-c-snackbar-z-index" }
+      ],
+      "pseudo-elements": [
+        {
+          "name": "part(item)",
+          "description": "the container wrapping the message, icon and actions."
+        },
+        { "name": "part(icon)", "description": "the icon for the variant." },
+        {
+          "name": "part(message)",
+          "description": "the default slot, body of the snackbar item."
+        },
+        { "name": "part(action)", "description": "close and action button." },
+        {
+          "name": "part(container)",
+          "description": "the live region that positions messages on the screen."
+        }
+      ]
     }
   }
 }