Merge branch 'master' into next

| Conflicts:
|	packages/vuetify/src/components/VSnackbar/VSnackbar.tsx

Author: J-Sek

packages/api-generator/src/locale/en/VSnackbar.json

@@ -2,7 +2,7 @@
   "props": {
     "app": "Respects boundaries of—and will not overlap with—other `app` components like `v-app-bar`, `v-navigation-drawer`, and `v-footer`.",
     "centered": "Positions the snackbar in the center of the screen, (x and y axis).",
-    "multiLine": "Gives the snackbar a larger minimum height.",
+    "multiLine": "Deprecated, use `min-height` instead. Increases minimum height.",
     "timer": "Display a progress bar that counts down until the snackbar closes. Pass a string to set a custom color, otherwise uses `info`.",
     "timeout": "Time (in milliseconds) to wait until snackbar is automatically hidden.  Use `-1` to keep open indefinitely (`0` in version < 2.3 ). It is recommended for this number to be between `4000` and `10000`. Changes to this property will reset the timeout.",
     "vertical": "Stacks snackbar content on top of the actions (button)."

packages/vuetify/src/components/VOverlay/locationStrategies.ts

@@ -279,7 +279,7 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
 
     const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value)
     const scrollParents = getScrollParents(data.contentEl.value)
-    const viewportMargin = 12
+    const viewportMargin = props.stickToTarget ? 0 : 12 // TOOD: prop.viewportMargin
 
     if (!scrollParents.length) {
       scrollParents.push(document.documentElement)
@@ -302,10 +302,18 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
       }
       return scrollBox
     }, undefined!)
-    viewport.x += viewportMargin
-    viewport.y += viewportMargin
-    viewport.width -= viewportMargin * 2
-    viewport.height -= viewportMargin * 2
+
+    if (props.stickToTarget) {
+      viewport.x += Math.min(0, targetBox.x)
+      viewport.y += Math.min(0, targetBox.y)
+      viewport.width = Math.max(viewport.width, targetBox.x + targetBox.width)
+      viewport.height = Math.max(viewport.height, targetBox.y + targetBox.height)
+    } else {
+      viewport.x += viewportMargin
+      viewport.y += viewportMargin
+      viewport.width -= viewportMargin * 2
+      viewport.height -= viewportMargin * 2
+    }
 
     let placement = {
       anchor: preferredAnchor.value,
@@ -397,19 +405,19 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
 
       // shift
       if (overflows.x.before) {
-        if (!props.stickToTarget) x += overflows.x.before
+        x += overflows.x.before
         contentBox.x += overflows.x.before
       }
       if (overflows.x.after) {
-        if (!props.stickToTarget) x -= overflows.x.after
+        x -= overflows.x.after
         contentBox.x -= overflows.x.after
       }
       if (overflows.y.before) {
-        if (!props.stickToTarget) y += overflows.y.before
+        y += overflows.y.before
         contentBox.y += overflows.y.before
       }
       if (overflows.y.after) {
-        if (!props.stickToTarget) y -= overflows.y.after
+        y -= overflows.y.after
         contentBox.y -= overflows.y.after
       }
 
@@ -419,9 +427,9 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
         available.x = viewport.width - overflows.x.before - overflows.x.after
         available.y = viewport.height - overflows.y.before - overflows.y.after
 
-        if (!props.stickToTarget) x += overflows.x.before
+        x += overflows.x.before
         contentBox.x += overflows.x.before
-        if (!props.stickToTarget) y += overflows.y.before
+        y += overflows.y.before
         contentBox.y += overflows.y.before
       }
 

packages/vuetify/src/components/VOverlay/useActivator.tsx

@@ -114,8 +114,6 @@ export function useActivator (
       isActive.value = !isActive.value
     },
     onMouseenter: (e: MouseEvent) => {
-      if (e.sourceCapabilities?.firesTouchEvents) return
-
       isHovered = true
       activatorEl.value = (e.currentTarget || e.target) as HTMLElement
       runOpenDelay()

packages/vuetify/src/composables/nested/nested.ts

@@ -31,7 +31,7 @@ import {
   leafSingleSelectStrategy,
   trunkSelectStrategy,
 } from './selectStrategies'
-import { consoleError, getCurrentInstance, propsFactory } from '@/util'
+import { consoleError, getCurrentInstance, propsFactory, throttle } from '@/util'
 
 // Types
 import type { InjectionKey, MaybeRefOrGetter, PropType, Ref } from 'vue'
@@ -220,6 +220,11 @@ export const useNested = (props: NestedProps) => {
 
   const nodeIds = new Set<unknown>()
 
+  const itemsUpdatePropagation = throttle(() => {
+    children.value = new Map(children.value)
+    parents.value = new Map(parents.value)
+  }, 100)
+
   const nested: NestedProvide = {
     id: shallowRef(),
     root: {
@@ -255,6 +260,7 @@ export const useNested = (props: NestedProps) => {
         if (parentId != null) {
           children.value.set(parentId, [...children.value.get(parentId) || [], id])
         }
+        itemsUpdatePropagation()
       },
       unregister: id => {
         if (isUnmounted) return
@@ -268,6 +274,7 @@ export const useNested = (props: NestedProps) => {
           children.value.set(parent, list.filter(child => child !== id))
         }
         parents.value.delete(id)
+        itemsUpdatePropagation()
       },
       open: (id, value, event) => {
         vm.emit('click:open', { id, value, path: getPath(id), event })

packages/vuetify/src/labs/VPie/VPie.tsx

@@ -293,7 +293,7 @@ export const VPie = genericComponent<VPieSlots>()({
 
       const tooltipDefaults = {
         VAvatar: {
-          size: typeof props.tooltip === 'object' ? props.tooltip.avatarSize : 28,
+          size: typeof props.tooltip === 'object' ? (props.tooltip.avatarSize ?? 28) : 28,
         },
       }
 

packages/vuetify/src/util/helpers.ts

@@ -11,6 +11,7 @@ import {
   unref,
   watchEffect,
 } from 'vue'
+import { consoleError } from '@/util/console'
 import { IN_BROWSER } from '@/util/globals'
 
 // Types
@@ -419,15 +420,39 @@ export function debounce (fn: Function, delay: MaybeRef<number>) {
   return wrap
 }
 
-export function throttle<T extends (...args: any[]) => any> (fn: T, limit: number) {
+export function throttle<T extends (...args: any[]) => any> (
+  fn: T,
+  delay: number,
+  options = { leading: true, trailing: true },
+) {
+  let timeoutId = 0
+  let lastExec = 0
   let throttling = false
-  return (...args: Parameters<T>): void | ReturnType<T> => {
-    if (!throttling) {
-      throttling = true
-      setTimeout(() => throttling = false, limit)
-      return fn(...args)
+
+  const wrap = (...args: Parameters<T>): void | ReturnType<T> => {
+    clearTimeout(timeoutId)
+    const now = Date.now()
+    const elapsed = now - lastExec
+
+    if (!throttling || elapsed >= delay) {
+      lastExec = now
     }
+    if ((!throttling && options.leading) || elapsed >= delay) {
+      window.setTimeout(() => fn(...args)) // ignore 'fn' executin errors
+    }
+
+    throttling = true
+    timeoutId = window.setTimeout(() => {
+      throttling = false
+      if (options.trailing) {
+        fn(...args)
+      }
+    }, delay)
   }
+
+  wrap.clear = () => clearTimeout(timeoutId)
+  wrap.immediate = fn
+  return wrap
 }
 
 export function clamp (value: number, min = 0, max = 1) {
@@ -666,7 +691,16 @@ export function focusableChildren (el: Element, filterByTabIndex = true) {
   ]
     .map(s => `${s}${filterByTabIndex ? ':not([tabindex="-1"])' : ''}:not([disabled], [inert])`)
     .join(', ')
-  return ([...el.querySelectorAll(targets)] as HTMLElement[])
+
+  let elements
+  try {
+    elements = [...el.querySelectorAll(targets)] as HTMLElement[]
+  } catch (err) {
+    consoleError(String(err))
+    return []
+  }
+
+  return elements
     .filter(x => !x.closest('[inert]')) // does not have inert parent
     .filter(x => !!x.offsetParent || x.getClientRects().length > 0) // is rendered
     .filter(x => !x.parentElement?.closest('details:not([open])') ||