@leaflink/stash 41.7.0 → 42.0.0

package/dist/Dropdown.js

@@ -1,10 +1,10 @@
-import { defineComponent as z, ref as u, useCssModule as I, watch as C, onMounted as q, onBeforeUnmount as K, computed as U, withDirectives as _, openBlock as v, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as V, toDisplayString as W, createVNode as S, createBlock as Y, Transition as F, withCtx as j, unref as M, normalizeStyle as G, vShow as H, nextTick as A } from "vue";
+import { defineComponent as R, ref as u, useCssModule as z, watch as C, onMounted as I, onBeforeUnmount as q, computed as K, withDirectives as _, openBlock as p, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as U, toDisplayString as V, createVNode as S, createBlock as W, Transition as Y, withCtx as F, unref as M, normalizeStyle as j, vShow as G, nextTick as A } from "vue";
 import { KEY_CODES as d } from "./constants.js";
-import J from "./clickoutside.js";
-import Q from "./utils/calculateElementOverflow.js";
-import { getMountPoint as X } from "./utils/helpers.js";
+import H from "./clickoutside.js";
+import J from "./utils/calculateElementOverflow.js";
+import { getMountPoint as Q } from "./utils/helpers.js";
 import B from "./Icon.js";
-import { _ as Z } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as X } from "./_plugin-vue_export-helper-dad06003.js";
 import "./capitalize-667d9f60.js";
 import "./toString-7d5bf363.js";
 import "./isObjectLike-54341556.js";
@@ -17,10 +17,10 @@ import "./_overArg-6d920d99.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
 import "./uniqueId-847efe53.js";
 import "./index-79ce320f.js";
-const ee = ["aria-expanded"], te = {
+const Z = ["aria-expanded"], ee = {
   key: 0,
   class: "tw-font-medium tw-flex tw-items-center tw-text-blue hover:tw-text-blue-700"
-}, oe = /* @__PURE__ */ z({
+}, te = /* @__PURE__ */ R({
   name: "ll-dropdown",
   __name: "Dropdown",
   props: {
@@ -33,105 +33,105 @@ const ee = ["aria-expanded"], te = {
     fluidContent: { type: Boolean, default: !1 }
   },
   emits: ["toggle", "dismiss"],
-  setup(D, { expose: $, emit: m }) {
-    const n = D, t = u(null), w = u(null), f = [], a = u(f), s = u(-1), o = u(!1), g = u({}), L = I();
+  setup(D, { expose: $, emit: v }) {
+    const a = D, t = u(null), w = u(null), f = [], s = u(f), i = u(-1), o = u(!1), g = u({}), L = z();
     C(o, (e) => {
-      e || (s.value = -1), m("toggle", e);
-    }), C(s, (e, l) => {
-      e in a.value && a.value[e].classList.add("is-highlighted"), l in a.value && a.value[l].classList.remove("is-highlighted");
-    }), q(() => {
-      var e, l, r;
-      if (n.reattach) {
-        const c = X();
+      e || (i.value = -1), v("toggle", e);
+    }), C(i, (e, l) => {
+      e in s.value && s.value[e].classList.add("is-highlighted"), l in s.value && s.value[l].classList.remove("is-highlighted");
+    }), I(() => {
+      var e, l, n;
+      if (a.reattach) {
+        const c = Q();
         t.value && c.appendChild(t.value);
       }
-      (e = t.value) != null && e.querySelector(".stash-menu") ? a.value = ((l = t.value) == null ? void 0 : l.querySelectorAll(".stash-menu-item")) ?? f : a.value = ((r = t.value) == null ? void 0 : r.querySelectorAll(".dropdown__item")) ?? f, window.addEventListener("resize", i);
-    }), K(() => {
+      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((l = t.value) == null ? void 0 : l.querySelectorAll(".stash-menu-item")) ?? f : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? f, window.addEventListener("resize", r);
+    }), q(() => {
       var e, l;
-      window.removeEventListener("resize", i), (l = (e = t.value) == null ? void 0 : e.parentNode) == null || l.removeChild(t.value);
+      window.removeEventListener("resize", r), (l = (e = t.value) == null ? void 0 : e.parentNode) == null || l.removeChild(t.value);
     });
-    function i() {
-      const e = o.value;
-      o.value = !1, e && m("dismiss");
+    function r(e) {
+      var n;
+      if (a.closeManually && ((n = t.value) != null && n.contains(e == null ? void 0 : e.target) || t.value === (e == null ? void 0 : e.target)))
+        return;
+      const l = o.value;
+      o.value = !1, l && v("dismiss");
     }
-    async function p() {
+    async function m() {
       var e;
-      o.value ? o.value = !1 : (o.value = !0, await P(), (e = t.value) == null || e.focus());
+      o.value ? o.value = !1 : (o.value = !0, await O(), (e = t.value) == null || e.focus());
     }
     function T(e) {
-      n.closeManually && e.stopPropagation();
-    }
-    function N(e) {
       if (e.keyCode === d.ESCAPE)
-        i();
-      else if (e.keyCode === d.DOWN && s.value < a.value.length - 1)
-        o.value && s.value++;
-      else if (e.keyCode === d.UP && s.value > -1)
-        o.value && s.value--;
-      else if (e.keyCode === d.ENTER && s.value !== -1)
-        o.value && a[s.value].click();
+        r();
+      else if (e.keyCode === d.DOWN && i.value < s.value.length - 1)
+        o.value && i.value++;
+      else if (e.keyCode === d.UP && i.value > -1)
+        o.value && i.value--;
+      else if (e.keyCode === d.ENTER && i.value !== -1)
+        o.value && s[i.value].click();
       else
         return;
       e.preventDefault();
     }
-    function O() {
+    function N() {
       var e;
       (e = t.value) == null || e.style.setProperty("--offset", "0");
     }
-    async function P() {
+    async function O() {
       var h, y;
       await A();
-      const e = ((h = w.value) == null ? void 0 : h.getBoundingClientRect()) || {}, l = e.top + e.height, r = {
+      const e = ((h = w.value) == null ? void 0 : h.getBoundingClientRect()) || {}, l = e.top + e.height, n = {
         x: 0,
         y: 0,
-        ...n.offset
+        ...a.offset
       };
-      n.reattach && (g.value = {
-        left: n.align === "left" ? `${Math.round(e.left) + r.x}px` : void 0,
-        right: n.align === "right" ? `${document.documentElement.clientWidth - Math.round(e.right) + r.x}px` : void 0,
-        top: `${window.scrollY + l + r.y}px`
+      a.reattach && (g.value = {
+        left: a.align === "left" ? `${Math.round(e.left) + n.x}px` : void 0,
+        right: a.align === "right" ? `${document.documentElement.clientWidth - Math.round(e.right) + n.x}px` : void 0,
+        top: `${window.scrollY + l + n.y}px`
       }, await A());
-      const c = Q(t == null ? void 0 : t.value);
+      const c = J(t == null ? void 0 : t.value);
       if (c) {
-        const R = n.align === "left" ? "-" : "";
-        (y = t.value) == null || y.style.setProperty("--offset", `${R}${c.value}`);
+        const P = a.align === "left" ? "-" : "";
+        (y = t.value) == null || y.style.setProperty("--offset", `${P}${c.value}`);
       }
     }
     return $({
-      isActive: U(() => o.value),
-      toggle: p,
-      dismiss: i
-    }), (e, l) => _((v(), k("div", {
+      isActive: K(() => o.value),
+      toggle: m,
+      dismiss: r
+    }), (e, l) => _((p(), k("div", {
       ref_key: "dropdownRef",
       ref: w,
       class: "tw-inline-block tw-relative",
       "data-test": "ll-dropdown",
-      onKeydown: N
+      onKeydown: T
     }, [
       x(e.$slots, "toggle", {
         isActive: o.value,
-        toggle: p
+        toggle: m
       }, () => [
         E("button", {
           "data-test": "button|toggle",
           "aria-expanded": o.value,
           class: b([e.label ? "button--tertiary tw-outline-none tw-min-w-auto" : "button--icon button tw-rounded"]),
-          onClick: p
+          onClick: m
         }, [
-          e.label ? (v(), k("span", te, [
-            V(W(e.label) + " ", 1),
+          e.label ? (p(), k("span", ee, [
+            U(V(e.label) + " ", 1),
             S(B, { name: "caret-down" })
-          ])) : (v(), Y(B, {
+          ])) : (p(), W(B, {
             key: 1,
             name: "ellipsis"
           }))
-        ], 10, ee)
+        ], 10, Z)
       ]),
-      S(F, {
+      S(Y, {
         name: "fade",
-        onAfterLeave: O
+        onAfterLeave: N
       }, {
-        default: j(() => [
+        default: F(() => [
           _(E("div", {
             ref_key: "contentRef",
             ref: t,
@@ -140,34 +140,33 @@ const ee = ["aria-expanded"], te = {
               M(L).content,
               e.contentClass,
               {
-                "tw-left-0 after:tw-left-6": n.align === "left",
-                "tw-right-0": n.align === "right",
-                "tw-max-w-[360px]": !n.fluidContent
+                "tw-left-0 after:tw-left-6": a.align === "left",
+                "tw-right-0": a.align === "right",
+                "tw-max-w-[360px]": !a.fluidContent
               }
             ]),
-            style: G(g.value),
-            onClick: T
+            style: j(g.value)
           }, [
             x(e.$slots, "default", {
-              dismiss: i,
+              dismiss: r,
               isActive: o.value
             })
           ], 6), [
-            [H, o.value]
+            [G, o.value]
           ])
         ]),
         _: 3
       })
     ], 32)), [
-      [M(J), i]
+      [M(H), r]
     ]);
   }
-}), le = "_content_naa5r_2", ne = {
-  content: le
+}), oe = "_content_naa5r_2", le = {
+  content: oe
 }, ae = {
-  $style: ne
-}, be = /* @__PURE__ */ Z(oe, [["__cssModules", ae]]);
+  $style: le
+}, Ee = /* @__PURE__ */ X(te, [["__cssModules", ae]]);
 export {
-  be as default
+  Ee as default
 };
 //# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit =\n    defineEmits<{\n      toggle: [isActive: boolean];\n      dismiss: [];\n    }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    next in items.value && items.value[next].classList.add('is-highlighted');\n    prev in items.value && items.value[prev].classList.remove('is-highlighted');\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      contentRef.value && target.appendChild(contentRef.value);\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    window.addEventListener('resize', dismiss);\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', dismiss);\n    contentRef.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss() {\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Prevent the dropdown from closing if a user interacts with a UI item\n   * within the dropdown `content`. By default, the dropdown will close\n   * after a user clicks something within.\n   * @param {Event} e The click event.\n   */\n  function stop(e: Event) {\n    props.closeManually && e.stopPropagation();\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1) {\n      isActive.value && itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1) {\n      isActive.value && itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1) {\n      isActive.value && items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"tw-inline-block tw-relative\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'button--tertiary tw-outline-none tw-min-w-auto' : 'button--icon button tw-rounded']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"tw-font-medium tw-flex tw-items-center tw-text-blue hover:tw-text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'tw-left-0 after:tw-left-6': props.align === 'left',\n            'tw-right-0': props.align === 'right',\n            'tw-max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n        @click=\"stop\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  .content {\n    --offset: 0;\n\n    @apply tw-shadow\n      tw-bg-white\n      tw-border\n      tw-border-solid\n      tw-border-blue\n      tw-rounded\n      tw-absolute\n      tw-z-control\n      tw-min-w-[200px];\n\n    transform: translateX(calc(var(--offset) * 1px));\n  }\n\n  /**\n  * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n  */\n  :global(.dropdown__list) {\n    @apply tw-bg-white tw-list-none tw-m-1.5 tw-p-0;\n  }\n\n  :global(.dropdown__item) {\n    @apply tw-block tw-mx-0 tw-mt-0 tw-mb-1.5 tw-w-full first:tw-mt-0 last:tw-mb-0;\n  }\n\n  :global(.dropdown__item) button {\n    @apply tw-border-none tw-text-left tw-p-1.5;\n  }\n\n  :global(.dropdown__item) :where(a, button) {\n    @apply tw-rounded\n    tw-text-ice-700\n      tw-block\n      tw-py-[10px]\n      tw-px-1.5\n      tw-w-full\n      disabled:tw-text-ice\n      disabled:tw-cursor-default\n      hover:tw-bg-ice-200\n      hover:tw-text-ice-700\n      hover:tw-no-underline\n      tw-transition-all\n      tw-duration-fast\n      tw-ease-swing;\n  }\n</style>\n"],"names":["contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","emit","next","prev","onMounted","props","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","wasOpen","toggle","calculateOffset","stop","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit =\n    defineEmits<{\n      toggle: [isActive: boolean];\n      dismiss: [];\n    }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    next in items.value && items.value[next].classList.add('is-highlighted');\n    prev in items.value && items.value[prev].classList.remove('is-highlighted');\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      contentRef.value && target.appendChild(contentRef.value);\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    window.addEventListener('resize', dismiss);\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', dismiss);\n    contentRef.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1) {\n      isActive.value && itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1) {\n      isActive.value && itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1) {\n      isActive.value && items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"tw-inline-block tw-relative\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'button--tertiary tw-outline-none tw-min-w-auto' : 'button--icon button tw-rounded']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"tw-font-medium tw-flex tw-items-center tw-text-blue hover:tw-text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'tw-left-0 after:tw-left-6': props.align === 'left',\n            'tw-right-0': props.align === 'right',\n            'tw-max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  .content {\n    --offset: 0;\n\n    @apply tw-shadow\n      tw-bg-white\n      tw-border\n      tw-border-solid\n      tw-border-blue\n      tw-rounded\n      tw-absolute\n      tw-z-control\n      tw-min-w-[200px];\n\n    transform: translateX(calc(var(--offset) * 1px));\n  }\n\n  /**\n  * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n  */\n  :global(.dropdown__list) {\n    @apply tw-bg-white tw-list-none tw-m-1.5 tw-p-0;\n  }\n\n  :global(.dropdown__item) {\n    @apply tw-block tw-mx-0 tw-mt-0 tw-mb-1.5 tw-w-full first:tw-mt-0 last:tw-mb-0;\n  }\n\n  :global(.dropdown__item) button {\n    @apply tw-border-none tw-text-left tw-p-1.5;\n  }\n\n  :global(.dropdown__item) :where(a, button) {\n    @apply tw-rounded\n    tw-text-ice-700\n      tw-block\n      tw-py-[10px]\n      tw-px-1.5\n      tw-w-full\n      disabled:tw-text-ice\n      disabled:tw-cursor-default\n      hover:tw-bg-ice-200\n      hover:tw-text-ice-700\n      hover:tw-no-underline\n      tw-transition-all\n      tw-duration-fast\n      tw-ease-swing;\n  }\n</style>\n"],"names":["contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","emit","next","prev","onMounted","props","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0EQA,IAAaC,EAAwB,IAAI,GACzCC,IAAcD,EAA2B,IAAI,GAE7CE,IAAqB,CAAA,GAErBC,IAAQH,EAAyBE,CAAkB,GACnDE,IAAYJ,EAAI,EAAE,GAClBK,IAAWL,EAAI,EAAK,GAEpBM,IAASN,EAAoB,CAAA,CAAE,GAC/BO,IAAUC;AAEV,IAAAC,EAAAJ,GAAU,CAACK,MAAQ;AACvB,MAAKA,MACHN,EAAU,QAAQ,KAGpBO,EAAK,UAAUD,CAAG;AAAA,IAAA,CACnB,GAEKD,EAAAL,GAAW,CAACQ,GAAMC,MAAS;AACvB,MAAAD,KAAAT,EAAM,SAASA,EAAM,MAAMS,CAAI,EAAE,UAAU,IAAI,gBAAgB,GAC/DC,KAAAV,EAAM,SAASA,EAAM,MAAMU,CAAI,EAAE,UAAU,OAAO,gBAAgB;AAAA,IAAA,CAC3E,GAEDC,EAAU,MAAM;;AACd,UAAIC,EAAM,UAAU;AAClB,cAAMC,IAASC;AAEf,QAAAlB,EAAW,SAASiB,EAAO,YAAYjB,EAAW,KAAK;AAAA,MACzD;AAGA,OAAImB,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,cAAc,iBAClCf,EAAM,UAAQgB,IAAApB,EAAW,UAAX,gBAAAoB,EAAkB,iBAAiB,wBAAuBjB,IAExEC,EAAM,UAAQiB,IAAArB,EAAW,UAAX,gBAAAqB,EAAkB,iBAAiB,uBAAsBlB,GAGlE,OAAA,iBAAiB,UAAUmB,CAAO;AAAA,IAAA,CAC1C,GAEDC,EAAgB,MAAM;;AACb,aAAA,oBAAoB,UAAUD,CAAO,IAC5CF,KAAAD,IAAAnB,EAAW,UAAX,gBAAAmB,EAAkB,eAAlB,QAAAC,EAA8B,YAAYpB,EAAW;AAAA,IAAK,CAC3D;AAKD,aAASsB,EAAQE,GAAe;;AAE5B,UAAAR,EAAM,mBACLG,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,SAASK,KAAA,gBAAAA,EAAO,WAA0BxB,EAAW,WAAUwB,KAAA,gBAAAA,EAAO;AAEzF;AAGF,YAAMC,IAAUnB,EAAS;AAEzB,MAAAA,EAAS,QAAQ,IAEbmB,KACFb,EAAK,SAAS;AAAA,IAElB;AAKA,mBAAec,IAAS;;AACtB,MAAIpB,EAAS,QACXA,EAAS,QAAQ,MAEjBA,EAAS,QAAQ,IACjB,MAAMqB,EAAgB,IACtBR,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB;AAAA,IAEtB;AAMA,aAASS,EAAU,GAAkB;AAC/B,UAAA,EAAE,YAAYC,EAAU;AAClB,QAAAP;eACC,EAAE,YAAYO,EAAU,QAAQxB,EAAU,QAAQD,EAAM,MAAM,SAAS;AAChF,QAAAE,EAAS,SAASD,EAAU;AAAA,eACnB,EAAE,YAAYwB,EAAU,MAAMxB,EAAU,QAAQ;AACzD,QAAAC,EAAS,SAASD,EAAU;AAAA,eACnB,EAAE,YAAYwB,EAAU,SAASxB,EAAU,UAAU;AAC9D,QAAAC,EAAS,SAASF,EAAMC,EAAU,KAAK,EAAE;;AAEzC;AAGF,QAAE,eAAe;AAAA,IACnB;AAKA,aAASyB,IAAc;;AACrB,OAAAX,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,MAAM,YAAY,YAAY;AAAA,IAClD;AAQA,mBAAeQ,IAAkB;;AAC/B,YAAMI,EAAS;AAEf,YAAMC,MAAYb,IAAAjB,EAAY,UAAZ,gBAAAiB,EAAmB,4BAA4B,CAAA,GAC3Dc,IAAMD,EAAU,MAAMA,EAAU,QAChCE,IAAS;AAAA,QACb,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAGlB,EAAM;AAAA,MAAA;AAGX,MAAIA,EAAM,aACRT,EAAO,QAAQ;AAAA,QACb,MAAMS,EAAM,UAAU,SAAS,GAAG,KAAK,MAAMgB,EAAU,IAAI,IAAIE,EAAO,CAAC,OAAO;AAAA,QAC9E,OACElB,EAAM,UAAU,UACZ,GAAG,SAAS,gBAAgB,cAAc,KAAK,MAAMgB,EAAU,KAAK,IAAIE,EAAO,CAAC,OAChF;AAAA,QACN,KAAK,GAAG,OAAO,UAAUD,IAAMC,EAAO,CAAC;AAAA,MAAA,GAEzC,MAAMH,EAAS;AAGX,YAAAI,IAAWC,EAAyBpC,KAAA,gBAAAA,EAAY,KAAK;AAE3D,UAAImC,GAAU;AACZ,cAAME,IAAYrB,EAAM,UAAU,SAAS,MAAM;AACtC,SAAAI,IAAApB,EAAA,UAAA,QAAAoB,EAAO,MAAM,YAAY,YAAY,GAAGiB,CAAS,GAAGF,EAAS,KAAK;AAAA,MAC/E;AAAA,IACF;AAEa,WAAAG,EAAA;AAAA,MACX,UAAUC,EAAS,MAAMjC,EAAS,KAAK;AAAA,MACvC,QAAAoB;AAAA,MACA,SAAAJ;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Dropdown.vue.d.ts

@@ -83,7 +83,7 @@ export default _default;
 /**
  * Dismisses the Dropdown.
  */
-declare function dismiss(): void;
+declare function dismiss(event?: Event): void;
 
 export declare type DropdownOffset = {
     x?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "41.7.0",
+  "version": "42.0.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",