@nextcloud/vue 8.5.0 → 8.6.0

package/dist/chunks/{NcActions-7ytNFRBJ.cjs → NcActions-z-BOuDhM.cjs}

@@ -1,12 +1,13 @@
-var C = require("../assets/NcActions-nAi2TA1m.css");
-const O = require("../Components/NcButton.cjs"), k = require("./NcPopover-EXxv8Pzw.cjs"), L = require("./GenRandomId-ULxaMkkr.cjs"), h = require("./_l10n-juAR1Sua.cjs"), v = require("vue"), M = require("./DotsHorizontal-dlN1WvqM.cjs"), w = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), P = (e) => e && e.__esModule ? e : { default: e }, q = /* @__PURE__ */ P(v);
-h.register(h.t4);
-const c = ".focusable", E = {
+require('../assets/NcActions-mSL9fcPO.css');
+"use strict";
+const _ = require("../Components/NcButton.cjs"), B = require("./NcPopover-judBGW5r.cjs"), F = require("./GenRandomId-ULxaMkkr.cjs"), w = require("./focusTrap-n3H52LOw.cjs"), f = require("./_l10n-mEcF7TYU.cjs"), A = require("vue"), O = require("./DotsHorizontal-6hepLUSS.cjs"), q = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), L = (t) => t && t.__esModule ? t : { default: t }, E = /* @__PURE__ */ L(A);
+f.register(f.t4);
+const c = ".focusable", D = {
   name: "NcActions",
   components: {
-    NcButton: O,
-    DotsHorizontal: M.DotsHorizontal,
-    NcPopover: k.NcPopover
+    NcButton: _,
+    DotsHorizontal: O.DotsHorizontal,
+    NcPopover: B.NcPopover
   },
   provide() {
     return {
@@ -19,7 +20,7 @@ const c = ".focusable", E = {
        * Provide the role for NcAction* components in the NcActions content.
        * @type {import('vue').ComputedRef<boolean>}
        */
-      "NcActions:isSemanticMenu": v.computed(() => this.isSemanticMenu)
+      "NcActions:isSemanticMenu": A.computed(() => this.actionsMenuSemanticType === "menu")
     };
   },
   props: {
@@ -75,8 +76,8 @@ const c = ".focusable", E = {
      */
     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
     },
@@ -98,7 +99,7 @@ const c = ".focusable", E = {
      */
     ariaLabel: {
       type: String,
-      default: h.t("Actions")
+      default: f.t("Actions")
     },
     /**
      * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
@@ -151,62 +152,100 @@ const c = ".focusable", E = {
     "update:open",
     "close",
     "focus",
-    "blur"
+    "blur",
+    "click"
   ],
   data() {
     return {
       opened: this.open,
       focusIndex: 0,
-      randomId: `menu-${L.GenRandomId()}`,
-      isSemanticMenu: !1,
-      isSemanticNavigation: !1,
-      isSemanticPopoverLike: !1
+      randomId: `menu-${F.GenRandomId()}`,
+      /**
+       * @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 = [...w.getTrapStack()];
+          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
@@ -214,15 +253,15 @@ const c = ".focusable", E = {
     // 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 o = n.querySelector(c);
-        if (o) {
-          const a = [...this.$refs.menu.querySelectorAll(c)].indexOf(o);
-          a > -1 && (this.focusIndex = a, this.focusAction());
+        const i = n.querySelector(c);
+        if (i) {
+          const o = [...this.$refs.menu.querySelectorAll(c)].indexOf(i);
+          o > -1 && (this.focusIndex = o, this.focusAction());
         }
       }
     },
@@ -231,48 +270,51 @@ const c = ".focusable", E = {
      *
      * @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);
-        const n = [...this.$refs.menu.querySelectorAll(c)].findIndex((o) => o.parentElement.getAttribute("aria-selected"));
+        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(t) {
+      this.$emit("click", t);
     }
   },
   /**
@@ -281,39 +323,43 @@ const c = ".focusable", E = {
    * @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
-    ), o = (t) => t?.componentOptions?.Ctor?.extendOptions?.name ?? t?.componentOptions?.tag, y = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], a = ["NcActionInput", "NcActionTextEditable"], N = ["NcActionLink", "NcActionRouter"], l = n.some((t) => a.includes(o(t))), A = n.some((t) => y.includes(o(t))), x = n.some((t) => N.includes(o(t)));
-    this.isSemanticMenu = A && !l, this.isSemanticNavigation = x && !A && !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 && (q.default.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 g = (t) => {
-      const i = t?.componentOptions?.propsData?.icon, p = t?.data?.scopedSlots?.icon()?.[0] ?? (this.isIconUrl(i) ? e("img", { class: "action-item__menutoggle__icon", attrs: { src: i, alt: "" } }) : e("span", { class: ["icon", i] })), S = t?.data?.attrs || {}, d = t?.componentOptions?.listeners?.click, f = t?.componentOptions?.children?.[0]?.text?.trim?.(), _ = t?.componentOptions?.propsData?.ariaLabel || f, b = this.forceName ? f : "";
-      let m = t?.componentOptions?.propsData?.title;
-      this.forceName || m || (m = f);
-      const r = { ...t?.componentOptions?.propsData ?? {} }, $ = ["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 && (E.default.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)), g = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], I = ["NcActionInput", "NcActionTextEditable"], N = ["NcActionLink", "NcActionRouter"], S = o.some((e) => I.includes(this.getActionName(e))), T = o.some((e) => g.includes(this.getActionName(e))), b = o.some((e) => N.includes(this.getActionName(e)));
+    S ? this.actionsMenuSemanticType = "dialog" : T ? 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], h = (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] })), v = e?.data?.attrs || {}, u = e?.componentOptions?.listeners?.click, p = e?.componentOptions?.children?.[0]?.text?.trim?.(), k = e?.componentOptions?.propsData?.ariaLabel || p, y = this.forceName ? p : "";
+      let d = e?.componentOptions?.propsData?.title;
+      this.forceName || d || (d = p);
+      const r = { ...e?.componentOptions?.propsData ?? {} }, $ = ["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: {
-            ...S,
-            "aria-label": _,
-            title: m
+            ...v,
+            "aria-label": k,
+            title: d
           },
-          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,
+            type: this.type || (y ? "secondary" : "tertiary"),
+            disabled: this.disabled || e?.componentOptions?.propsData?.disabled,
+            pressed: e?.componentOptions?.propsData?.modelValue,
             nativeType: $,
             ...r
           },
@@ -321,29 +367,29 @@ const c = ".focusable", E = {
             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: (B) => {
-                d && d(B);
+            ...!!u && {
+              click: (M) => {
+                u && u(M);
               }
             }
           }
         },
         [
-          e("template", { slot: "icon" }, [p]),
-          b
+          t("template", { slot: "icon" }, [x]),
+          y
         ]
       );
-    }, I = (t) => {
-      const i = 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",
@@ -355,11 +401,9 @@ const c = ".focusable", E = {
             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,
@@ -380,7 +424,7 @@ const c = ".focusable", E = {
           }
         },
         [
-          e("NcButton", {
+          t("NcButton", {
             class: "action-item__menutoggle",
             props: {
               type: this.triggerBtnType,
@@ -394,13 +438,14 @@ const c = ".focusable", E = {
             },
             on: {
               focus: this.onFocus,
-              blur: this.onBlur
+              blur: this.onBlur,
+              click: this.onClick
             }
           }, [
-            e("template", { slot: "icon" }, [i]),
+            t("template", { slot: "icon" }, [s]),
             this.menuName
           ]),
-          e("div", {
+          t("div", {
             class: {
               open: this.opened
             },
@@ -413,56 +458,50 @@ const c = ".focusable", E = {
             },
             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 g(s[0]);
-    if (this.$nextTick(() => {
+    return n.length === 1 && i.length === 1 && !this.forceMenu ? h(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), i = n.filter((p) => !t.includes(p));
-      return e(
-        "div",
-        {
-          class: [
-            "action-items",
-            `action-item--${this.triggerBtnType}`
-          ]
-        },
-        [
-          // Render inline actions
-          ...t.map(g),
-          // render the rest within the popover menu
-          i.length > 0 ? e(
-            "div",
-            {
-              class: [
-                "action-item",
-                {
-                  "action-item--open": this.opened
-                }
-              ]
-            },
-            [
-              I(i)
-            ]
-          ) : null
+    }), a.length > 0 && this.inline > 0 ? t(
+      "div",
+      {
+        class: [
+          "action-items",
+          `action-item--${this.triggerBtnType}`
         ]
-      );
-    }
-    return e(
+      },
+      [
+        // Render inline actions
+        ...a.map(h),
+        // 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: [
@@ -474,20 +513,20 @@ const c = ".focusable", E = {
         ]
       },
       [
-        I(n)
+        m(n)
       ]
-    );
+    ));
   }
-}, D = null, F = null;
-var T = /* @__PURE__ */ w.normalizeComponent(
-  E,
+}, R = null, P = null;
+var C = /* @__PURE__ */ q.normalizeComponent(
   D,
-  F,
+  R,
+  P,
   !1,
   null,
-  "4844deec",
+  "0d636de9",
   null,
   null
 );
-const R = T.exports;
-exports.NcActions = R;
+const z = C.exports;
+exports.NcActions = z;