@nextcloud/vue 8.5.1 → 8.6.0

package/dist/chunks/{NcActions-5K-qjttC.mjs → NcActions-bAnBpPrc.mjs}

@@ -1,18 +1,19 @@
-import "../assets/NcActions-vgT9ak04.css";
+import '../assets/NcActions-mSL9fcPO.css';
 import $ from "../Components/NcButton.mjs";
-import { N as B } from "./NcPopover-yyItaFC6.mjs";
-import { G as O } from "./GenRandomId-VodkdWbp.mjs";
-import { r as L, o as M, a as w } from "./_l10n-gZppkly8.mjs";
-import _, { computed as E } from "vue";
-import { D as P } from "./DotsHorizontal-NssXDZGM.mjs";
-import { n as F } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-L(M);
-const c = ".focusable", T = {
+import { N as M } from "./NcPopover-T4GMXmKV.mjs";
+import { G as B } from "./GenRandomId-VodkdWbp.mjs";
+import { g as F } from "./focusTrap-Py2bQ9-r.mjs";
+import { r as w, o as O, a as _ } from "./_l10n--bDJ_Qyj.mjs";
+import L, { computed as E } from "vue";
+import { D as R } from "./DotsHorizontal-IbmXTXRA.mjs";
+import { n as D } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+w(O);
+const c = ".focusable", P = {
   name: "NcActions",
   components: {
     NcButton: $,
-    DotsHorizontal: P,
-    NcPopover: B
+    DotsHorizontal: R,
+    NcPopover: M
   },
   provide() {
     return {
@@ -25,7 +26,7 @@ const c = ".focusable", T = {
        * Provide the role for NcAction* components in the NcActions content.
        * @type {import('vue').ComputedRef<boolean>}
        */
-      "NcActions:isSemanticMenu": E(() => this.isSemanticMenu)
+      "NcActions:isSemanticMenu": E(() => this.actionsMenuSemanticType === "menu")
     };
   },
   props: {
@@ -81,8 +82,8 @@ const c = ".focusable", T = {
      */
     type: {
       type: String,
-      validator(e) {
-        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(e) !== -1;
+      validator(t) {
+        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(t) !== -1;
       },
       default: null
     },
@@ -104,7 +105,7 @@ const c = ".focusable", T = {
      */
     ariaLabel: {
       type: String,
-      default: w("Actions")
+      default: _("Actions")
     },
     /**
      * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
@@ -164,56 +165,93 @@ const c = ".focusable", T = {
     return {
       opened: this.open,
       focusIndex: 0,
-      randomId: `menu-${O()}`,
-      isSemanticMenu: !1,
-      isSemanticNavigation: !1,
-      isSemanticPopoverLike: !1
+      randomId: `menu-${B()}`,
+      /**
+       * @type {'menu'|'navigation'|'dialog'|'tooltip'|''}
+       */
+      actionsMenuSemanticType: "",
+      externalFocusTrapStack: []
     };
   },
   computed: {
     triggerBtnType() {
       return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
+    },
+    withFocusTrap() {
+      return this.actionsMenuSemanticType === "dialog";
     }
   },
   watch: {
     // Watch parent prop
-    open(e) {
-      e !== this.opened && (this.opened = e);
+    open(t) {
+      t !== this.opened && (this.opened = t);
+    },
+    opened() {
+      this.intersectIntoCurrentFocusTrapStack();
     }
   },
   methods: {
+    /**
+     * Get the name of the action component
+     *
+     * @param {import('vue').VNode} action - a vnode with a NcAction* component instance
+     * @return {string} the name of the action component
+     */
+    getActionName(t) {
+      return t?.componentOptions?.Ctor?.extendOptions?.name ?? t?.componentOptions?.tag;
+    },
+    /**
+     * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
+     *
+     * However if the component has no focus trap and is used inside another focus trap - there is an issue.
+     * By default popover content is rendered in body or other container, which is likely outside the current focus trap containers.
+     * It results in broken behavior from focus-trap.
+     *
+     * We need to pause all the focus traps for opening popover and then unpause them back after closing.
+     */
+    intersectIntoCurrentFocusTrapStack() {
+      if (!this.withFocusTrap)
+        if (this.opened) {
+          this.externalFocusTrapStack = [...F()];
+          for (const t of this.externalFocusTrapStack)
+            t.pause();
+        } else {
+          for (const t of this.externalFocusTrapStack)
+            t.unpause();
+          this.externalFocusTrapStack = [];
+        }
+    },
     /**
      * Do we have exactly one Action and
      * is it allowed as a standalone element?
      *
-     * @param {Array} action The action to check
+     * @param {import('vue').VNode} action The action to check
      * @return {boolean}
      */
-    isValidSingleAction(e) {
-      const n = e?.componentOptions?.Ctor?.extendOptions?.name ?? e?.componentOptions?.tag;
-      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(n);
+    isValidSingleAction(t) {
+      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(this.getActionName(t));
     },
     /**
      * Check whether a icon prop value is an URL or not
      * @param {string} url The icon prop value
      */
-    isIconUrl(e) {
+    isIconUrl(t) {
       try {
-        return !!new URL(e, e.startsWith("/") ? window.location.origin : void 0);
+        return !!new URL(t, t.startsWith("/") ? window.location.origin : void 0);
       } catch {
         return !1;
       }
     },
     // MENU STATE MANAGEMENT
-    openMenu(e) {
+    openMenu(t) {
       this.opened || (this.opened = !0, this.$emit("update:open", !0), this.$emit("open"));
     },
-    closeMenu(e = !0) {
-      this.opened && (this.opened = !1, this.$refs.popover.clearFocusTrap({ returnFocus: e }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, this.$refs.menuButton.$el.focus());
+    closeMenu(t = !0) {
+      this.opened && (this.opened = !1, this.$refs.popover.clearFocusTrap({ returnFocus: t }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, t && this.$refs.menuButton.$el.focus());
     },
-    onOpen(e) {
+    onOpen(t) {
       this.$nextTick(() => {
-        this.focusFirstAction(e);
+        this.focusFirstAction(t);
       });
     },
     // MENU KEYS & FOCUS MANAGEMENT
@@ -221,15 +259,15 @@ const c = ".focusable", T = {
     // DO NOT change the focus if the target is already focused
     // this will prevent issues with input being unfocused
     // on mouse move
-    onMouseFocusAction(e) {
-      if (document.activeElement === e.target)
+    onMouseFocusAction(t) {
+      if (document.activeElement === t.target)
         return;
-      const n = e.target.closest("li");
+      const n = t.target.closest("li");
       if (n && this.$refs.menu.contains(n)) {
         const i = n.querySelector(c);
         if (i) {
-          const a = [...this.$refs.menu.querySelectorAll(c)].indexOf(i);
-          a > -1 && (this.focusIndex = a, this.focusAction());
+          const o = [...this.$refs.menu.querySelectorAll(c)].indexOf(i);
+          o > -1 && (this.focusIndex = o, this.focusAction());
         }
       }
     },
@@ -238,51 +276,51 @@ const c = ".focusable", T = {
      *
      * @param {object} event The keydown event
      */
-    onKeydown(e) {
-      e.key === "Tab" && !this.isSemanticPopoverLike && this.closeMenu(!1), e.key === "ArrowUp" && this.focusPreviousAction(e), e.key === "ArrowDown" && this.focusNextAction(e), e.key === "PageUp" && this.focusFirstAction(e), e.key === "PageDown" && this.focusLastAction(e), e.key === "Escape" && (this.closeMenu(), e.preventDefault());
+    onKeydown(t) {
+      t.key === "Tab" && !this.withFocusTrap && this.closeMenu(!0), t.key === "ArrowUp" && this.focusPreviousAction(t), t.key === "ArrowDown" && this.focusNextAction(t), t.key === "PageUp" && this.focusFirstAction(t), t.key === "PageDown" && this.focusLastAction(t), t.key === "Escape" && (this.closeMenu(), t.preventDefault());
     },
     removeCurrentActive() {
-      const e = this.$refs.menu.querySelector("li.active");
-      e && e.classList.remove("active");
+      const t = this.$refs.menu.querySelector("li.active");
+      t && t.classList.remove("active");
     },
     focusAction() {
-      const e = this.$refs.menu.querySelectorAll(c)[this.focusIndex];
-      if (e) {
+      const t = this.$refs.menu.querySelectorAll(c)[this.focusIndex];
+      if (t) {
         this.removeCurrentActive();
-        const n = e.closest("li.action");
-        e.focus(), n && n.classList.add("active");
+        const n = t.closest("li.action");
+        t.focus(), n && n.classList.add("active");
       }
     },
-    focusPreviousAction(e) {
-      this.opened && (this.focusIndex === 0 ? this.focusLastAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex - 1), this.focusAction());
+    focusPreviousAction(t) {
+      this.opened && (this.focusIndex === 0 ? this.focusLastAction(t) : (this.preventIfEvent(t), this.focusIndex = this.focusIndex - 1), this.focusAction());
     },
-    focusNextAction(e) {
+    focusNextAction(t) {
       if (this.opened) {
         const n = this.$refs.menu.querySelectorAll(c).length - 1;
-        this.focusIndex === n ? this.focusFirstAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
+        this.focusIndex === n ? this.focusFirstAction(t) : (this.preventIfEvent(t), this.focusIndex = this.focusIndex + 1), this.focusAction();
       }
     },
-    focusFirstAction(e) {
+    focusFirstAction(t) {
       if (this.opened) {
-        this.preventIfEvent(e);
+        this.preventIfEvent(t);
         const n = [...this.$refs.menu.querySelectorAll(c)].findIndex((i) => i.parentElement.getAttribute("aria-selected"));
         this.focusIndex = n > -1 ? n : 0, this.focusAction();
       }
     },
-    focusLastAction(e) {
-      this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(c).length - 1, this.focusAction());
+    focusLastAction(t) {
+      this.opened && (this.preventIfEvent(t), this.focusIndex = this.$refs.menu.querySelectorAll(c).length - 1, this.focusAction());
     },
-    preventIfEvent(e) {
-      e && (e.preventDefault(), e.stopPropagation());
+    preventIfEvent(t) {
+      t && (t.preventDefault(), t.stopPropagation());
     },
-    onFocus(e) {
-      this.$emit("focus", e);
+    onFocus(t) {
+      this.$emit("focus", t);
     },
-    onBlur(e) {
-      this.$emit("blur", e);
+    onBlur(t) {
+      this.$emit("blur", t), this.actionsMenuSemanticType === "tooltip" && this.$refs.menu && this.$refs.menu.querySelectorAll(c).length === 0 && this.closeMenu(!1);
     },
-    onClick(e) {
-      this.$emit("click", e);
+    onClick(t) {
+      this.$emit("click", t);
     }
   },
   /**
@@ -291,69 +329,73 @@ const c = ".focusable", T = {
    * @param {Function} h The function to create VNodes
    * @return {object|undefined} The created VNode
    */
-  render(e) {
-    const n = (this.$slots.default || []).filter(
-      (t) => t?.componentOptions?.tag || t?.componentOptions?.Ctor?.extendOptions?.name
-    ), i = (t) => t?.componentOptions?.Ctor?.extendOptions?.name ?? t?.componentOptions?.tag, h = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], a = ["NcActionInput", "NcActionTextEditable"], I = ["NcActionLink", "NcActionRouter"], l = n.some((t) => a.includes(i(t))), y = n.some((t) => h.includes(i(t))), v = n.some((t) => I.includes(i(t)));
-    this.isSemanticMenu = y && !l, this.isSemanticNavigation = v && !y && !l, this.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation;
-    const u = this.isSemanticMenu ? "menu" : l ? "dialog" : "true";
-    let s = n.filter(this.isValidSingleAction);
-    if (this.forceMenu && s.length > 0 && this.inline > 0 && (_.util.warn("Specifying forceMenu will ignore any inline actions rendering."), s = []), n.length === 0)
+  render(t) {
+    const n = (this.$slots.default || []).filter((e) => this.getActionName(e));
+    if (n.length === 0)
       return;
-    const A = (t) => {
-      const o = t?.componentOptions?.propsData?.icon, p = t?.data?.scopedSlots?.icon()?.[0] ?? (this.isIconUrl(o) ? e("img", { class: "action-item__menutoggle__icon", attrs: { src: o, alt: "" } }) : e("span", { class: ["icon", o] })), x = t?.data?.attrs || {}, d = t?.componentOptions?.listeners?.click, m = t?.componentOptions?.children?.[0]?.text?.trim?.(), N = t?.componentOptions?.propsData?.ariaLabel || m, b = this.forceName ? m : "";
-      let f = t?.componentOptions?.propsData?.title;
-      this.forceName || f || (f = m);
-      const r = { ...t?.componentOptions?.propsData ?? {} }, S = ["submit", "reset"].includes(r.type) ? r.modelValue : "button";
-      return delete r.modelValue, delete r.type, e(
+    let i = n.filter(this.isValidSingleAction);
+    this.forceMenu && i.length > 0 && this.inline > 0 && (L.util.warn("Specifying forceMenu will ignore any inline actions rendering."), i = []);
+    const a = i.slice(0, this.inline), o = n.filter((e) => !a.includes(e)), y = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], A = ["NcActionInput", "NcActionTextEditable"], g = ["NcActionLink", "NcActionRouter"], I = o.some((e) => A.includes(this.getActionName(e))), S = o.some((e) => y.includes(this.getActionName(e))), b = o.some((e) => g.includes(this.getActionName(e)));
+    I ? this.actionsMenuSemanticType = "dialog" : S ? this.actionsMenuSemanticType = "menu" : b ? this.actionsMenuSemanticType = "navigation" : n.filter((s) => this.getActionName(s).startsWith("NcAction")).length === n.length ? this.actionsMenuSemanticType = "tooltip" : this.actionsMenuSemanticType = "dialog";
+    const l = {
+      dialog: "dialog",
+      menu: "menu",
+      navigation: "true",
+      tooltip: "true"
+    }[this.actionsMenuSemanticType], d = (e) => {
+      const s = e?.componentOptions?.propsData?.icon, x = e?.data?.scopedSlots?.icon()?.[0] ?? (this.isIconUrl(s) ? t("img", { class: "action-item__menutoggle__icon", attrs: { src: s, alt: "" } }) : t("span", { class: ["icon", s] })), N = e?.data?.attrs || {}, u = e?.componentOptions?.listeners?.click, p = e?.componentOptions?.children?.[0]?.text?.trim?.(), T = e?.componentOptions?.propsData?.ariaLabel || p, h = this.forceName ? p : "";
+      let f = e?.componentOptions?.propsData?.title;
+      this.forceName || f || (f = p);
+      const r = { ...e?.componentOptions?.propsData ?? {} }, k = ["submit", "reset"].includes(r.type) ? r.modelValue : "button";
+      return delete r.modelValue, delete r.type, t(
         "NcButton",
         {
           class: [
             "action-item action-item--single",
-            t?.data?.staticClass,
-            t?.data?.class
+            e?.data?.staticClass,
+            e?.data?.class
           ],
           attrs: {
-            ...x,
-            "aria-label": N,
+            ...N,
+            "aria-label": T,
             title: f
           },
-          ref: t?.data?.ref,
+          ref: e?.data?.ref,
           props: {
             // If it has a menuName, we use a secondary button
-            type: this.type || (b ? "secondary" : "tertiary"),
-            disabled: this.disabled || t?.componentOptions?.propsData?.disabled,
-            pressed: t?.componentOptions?.propsData?.modelValue,
-            nativeType: S,
+            type: this.type || (h ? "secondary" : "tertiary"),
+            disabled: this.disabled || e?.componentOptions?.propsData?.disabled,
+            pressed: e?.componentOptions?.propsData?.modelValue,
+            nativeType: k,
             ...r
           },
           on: {
             focus: this.onFocus,
             blur: this.onBlur,
             // forward any pressed state from NcButton just like NcActionButton does
-            "update:pressed": t?.componentOptions?.listeners?.["update:modelValue"] ?? (() => {
+            "update:pressed": e?.componentOptions?.listeners?.["update:modelValue"] ?? (() => {
             }),
             // If we have a click listener,
             // we bind it to execute on click and forward the click event
-            ...!!d && {
-              click: (k) => {
-                d && d(k);
+            ...!!u && {
+              click: (v) => {
+                u && u(v);
               }
             }
           }
         },
         [
-          e("template", { slot: "icon" }, [p]),
-          b
+          t("template", { slot: "icon" }, [x]),
+          h
         ]
       );
-    }, g = (t) => {
-      const o = this.$slots.icon?.[0] || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
+    }, m = (e) => {
+      const s = this.$slots.icon?.[0] || (this.defaultIcon ? t("span", { class: ["icon", this.defaultIcon] }) : t("DotsHorizontal", {
         props: {
           size: 20
         }
       }));
-      return e(
+      return t(
         "NcPopover",
         {
           ref: "popover",
@@ -365,11 +407,9 @@ const c = ".focusable", T = {
             boundary: this.boundariesElement,
             container: this.container,
             popoverBaseClass: "action-item__popper",
-            popupRole: u,
-            // Menu and navigation should not have focus trap
-            // Tab should close the menu and move focus to the next UI element
-            setReturnFocus: this.isSemanticPopoverLike ? this.$refs.menuButton?.$el : null,
-            focusTrap: this.isSemanticPopoverLike
+            popupRole: l,
+            setReturnFocus: this.withFocusTrap ? this.$refs.menuButton?.$el : null,
+            focusTrap: this.withFocusTrap
           },
           // For some reason the popover component
           // does not react to props given under the 'props' key,
@@ -390,7 +430,7 @@ const c = ".focusable", T = {
           }
         },
         [
-          e("NcButton", {
+          t("NcButton", {
             class: "action-item__menutoggle",
             props: {
               type: this.triggerBtnType,
@@ -408,10 +448,10 @@ const c = ".focusable", T = {
               click: this.onClick
             }
           }, [
-            e("template", { slot: "icon" }, [o]),
+            t("template", { slot: "icon" }, [s]),
             this.menuName
           ]),
-          e("div", {
+          t("div", {
             class: {
               open: this.opened
             },
@@ -424,56 +464,50 @@ const c = ".focusable", T = {
             },
             ref: "menu"
           }, [
-            e("ul", {
+            t("ul", {
               attrs: {
                 id: this.randomId,
                 tabindex: "-1",
-                role: u !== "true" ? u : void 0
+                role: l !== "true" ? l : void 0
                 // TODO: allow to provide dialog aria-label
               }
             }, [
-              t
+              e
             ])
           ])
         ]
       );
     };
-    if (n.length === 1 && s.length === 1 && !this.forceMenu)
-      return A(s[0]);
-    if (this.$nextTick(() => {
+    return n.length === 1 && i.length === 1 && !this.forceMenu ? d(n[0]) : (this.$nextTick(() => {
       this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
-    }), s.length > 0 && this.inline > 0) {
-      const t = s.slice(0, this.inline), o = n.filter((p) => !t.includes(p));
-      return e(
-        "div",
-        {
-          class: [
-            "action-items",
-            `action-item--${this.triggerBtnType}`
-          ]
-        },
-        [
-          // Render inline actions
-          ...t.map(A),
-          // render the rest within the popover menu
-          o.length > 0 ? e(
-            "div",
-            {
-              class: [
-                "action-item",
-                {
-                  "action-item--open": this.opened
-                }
-              ]
-            },
-            [
-              g(o)
-            ]
-          ) : null
+    }), a.length > 0 && this.inline > 0 ? t(
+      "div",
+      {
+        class: [
+          "action-items",
+          `action-item--${this.triggerBtnType}`
         ]
-      );
-    }
-    return e(
+      },
+      [
+        // Render inline actions
+        ...a.map(d),
+        // render the rest within the popover menu
+        o.length > 0 ? t(
+          "div",
+          {
+            class: [
+              "action-item",
+              {
+                "action-item--open": this.opened
+              }
+            ]
+          },
+          [
+            m(o)
+          ]
+        ) : null
+      ]
+    ) : t(
       "div",
       {
         class: [
@@ -485,22 +519,22 @@ const c = ".focusable", T = {
         ]
       },
       [
-        g(n)
+        m(n)
       ]
-    );
+    ));
   }
-}, D = null, C = null;
-var R = /* @__PURE__ */ F(
-  T,
-  D,
+}, C = null, q = null;
+var V = /* @__PURE__ */ D(
+  P,
   C,
+  q,
   !1,
   null,
-  "aa98d7d0",
+  "0d636de9",
   null,
   null
 );
-const W = R.exports;
+const X = V.exports;
 export {
-  W as N
+  X as N
 };