@v-c/menu 0.0.1

package/dist/hooks/useAccessibility.cjs

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const KeyCode = require("@v-c/util/dist/KeyCode");
+const vue = require("vue");
+const IdContext = require("../context/IdContext.cjs");
+const { LEFT, RIGHT, UP, DOWN, ENTER, ESC, HOME, END } = KeyCode;
+const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
+function getOffset(mode, isRootLevel, isRtl, which) {
+  const prev = "prev";
+  const next = "next";
+  const children = "children";
+  const parent = "parent";
+  if (mode === "inline" && which === ENTER) {
+    return { inlineTrigger: true };
+  }
+  const inline = { [UP]: prev, [DOWN]: next };
+  const horizontal = {
+    [LEFT]: isRtl ? next : prev,
+    [RIGHT]: isRtl ? prev : next,
+    [DOWN]: children,
+    [ENTER]: children
+  };
+  const vertical = {
+    [UP]: prev,
+    [DOWN]: next,
+    [ENTER]: children,
+    [ESC]: parent,
+    [LEFT]: isRtl ? children : parent,
+    [RIGHT]: isRtl ? parent : children
+  };
+  const offsets = {
+    inline,
+    horizontal,
+    vertical,
+    inlineSub: inline,
+    horizontalSub: vertical,
+    verticalSub: vertical
+  };
+  const type = offsets[`${mode}${isRootLevel ? "" : "Sub"}`]?.[which];
+  switch (type) {
+    case prev:
+      return { offset: -1, sibling: true };
+    case next:
+      return { offset: 1, sibling: true };
+    case parent:
+      return { offset: -1, sibling: false };
+    case children:
+      return { offset: 1, sibling: false };
+    default:
+      return null;
+  }
+}
+function findContainerUL(element) {
+  let current = element;
+  while (current) {
+    if (current.getAttribute("data-menu-list")) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function getFocusNodeList(container, includeDisabled) {
+  const selector = "[tabindex]";
+  return Array.from(container.querySelectorAll(selector));
+}
+function getFocusElement(activeElement, elements) {
+  let current = activeElement || document.activeElement;
+  while (current) {
+    if (elements.has(current)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function getFocusableElements(container, elements) {
+  if (!container)
+    return [];
+  const list = getFocusNodeList(container);
+  return list.filter((ele) => elements.has(ele));
+}
+function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offset = 1) {
+  if (!parentQueryContainer) {
+    return null;
+  }
+  const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
+  const count = sameLevelFocusableMenuElementList.length;
+  let focusIndex = sameLevelFocusableMenuElementList.findIndex((ele) => focusMenuElement === ele);
+  if (offset < 0) {
+    if (focusIndex === -1) {
+      focusIndex = count - 1;
+    } else {
+      focusIndex -= 1;
+    }
+  } else if (offset > 0) {
+    focusIndex += 1;
+  }
+  focusIndex = (focusIndex + count) % count;
+  return sameLevelFocusableMenuElementList[focusIndex];
+}
+function refreshElements(keys, id) {
+  const elements = /* @__PURE__ */ new Set();
+  const key2element = /* @__PURE__ */ new Map();
+  const element2key = /* @__PURE__ */ new Map();
+  keys.forEach((key) => {
+    const element = document.querySelector(`[data-menu-id='${IdContext.getMenuId(id, key)}']`);
+    if (element) {
+      elements.add(element);
+      element2key.set(element, key);
+      key2element.set(key, element);
+    }
+  });
+  return { elements, key2element, element2key };
+}
+function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
+  const rafRef = vue.shallowRef();
+  const activeRef = vue.shallowRef();
+  const cleanRaf = () => {
+    if (rafRef.value !== void 0) {
+      cancelAnimationFrame(rafRef.value);
+    }
+  };
+  vue.onBeforeUnmount(() => {
+    cleanRaf();
+  });
+  return (e) => {
+    activeRef.value = activeKey.value;
+    const { which } = e;
+    if ([...ArrowKeys, ENTER, ESC, HOME, END].includes(which)) {
+      const keys = getKeys();
+      let refreshedElements = refreshElements(keys, id);
+      const { elements, key2element, element2key } = refreshedElements;
+      const activeElement = key2element.get(activeKey.value);
+      const focusMenuElement = getFocusElement(activeElement || null, elements);
+      const focusMenuKey = element2key.get(focusMenuElement);
+      const offsetObj = getOffset(mode.value, getKeyPath(focusMenuKey, true).length === 1, isRtl.value, which);
+      if (!offsetObj && which !== HOME && which !== END) {
+        return;
+      }
+      if (ArrowKeys.includes(which) || [HOME, END].includes(which)) {
+        e.preventDefault();
+      }
+      const tryFocus = (menuElement) => {
+        if (menuElement) {
+          let focusTargetElement = menuElement;
+          const link = menuElement.querySelector("a");
+          if (link?.getAttribute("href")) {
+            focusTargetElement = link;
+          }
+          const targetKey = element2key.get(menuElement);
+          if (targetKey) {
+            triggerActiveKey(targetKey);
+          }
+          cleanRaf();
+          rafRef.value = requestAnimationFrame(() => {
+            if (activeRef.value === targetKey) {
+              focusTargetElement.focus();
+            }
+          });
+        }
+      };
+      if ([HOME, END].includes(which) || offsetObj?.sibling || !focusMenuElement) {
+        let parentQueryContainer;
+        if (!focusMenuElement || mode.value === "inline") {
+          parentQueryContainer = containerRef.value;
+        } else {
+          parentQueryContainer = findContainerUL(focusMenuElement);
+        }
+        let targetElement;
+        const focusableElements = getFocusableElements(parentQueryContainer, elements);
+        if (which === HOME) {
+          targetElement = focusableElements[0];
+        } else if (which === END) {
+          targetElement = focusableElements[focusableElements.length - 1];
+        } else {
+          targetElement = getNextFocusElement(
+            parentQueryContainer,
+            elements,
+            focusMenuElement,
+            offsetObj?.offset
+          );
+        }
+        tryFocus(targetElement);
+      } else if (offsetObj.inlineTrigger) {
+        triggerAccessibilityOpen(focusMenuKey);
+      } else if (offsetObj.offset > 0) {
+        triggerAccessibilityOpen(focusMenuKey, true);
+        cleanRaf();
+        rafRef.value = requestAnimationFrame(() => {
+          refreshedElements = refreshElements(keys, id);
+          const controlId = focusMenuElement.getAttribute("aria-controls");
+          const subQueryContainer = controlId ? document.getElementById(controlId) : null;
+          const targetElement = getNextFocusElement(subQueryContainer, refreshedElements.elements);
+          tryFocus(targetElement);
+        });
+      } else if (offsetObj.offset < 0) {
+        const keyPath = getKeyPath(focusMenuKey, true);
+        const parentKey = keyPath[keyPath.length - 2];
+        const parentMenuElement = key2element.get(parentKey);
+        triggerAccessibilityOpen(parentKey, false);
+        tryFocus(parentMenuElement);
+      }
+    }
+    originOnKeyDown?.(e);
+  };
+}
+exports.default = useAccessibility;
+exports.getFocusableElements = getFocusableElements;
+exports.refreshElements = refreshElements;

package/dist/hooks/useAccessibility.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+import { MenuMode } from '../interface';
+/**
+ * Get focusable elements from the element set under provided container
+ */
+export declare function getFocusableElements(container: HTMLElement | null, elements: Set<HTMLElement>): HTMLElement[];
+export declare function refreshElements(keys: string[], id: string): {
+    elements: Set<HTMLElement>;
+    key2element: Map<string, HTMLElement>;
+    element2key: Map<HTMLElement, string>;
+};
+export default function useAccessibility(mode: Ref<MenuMode>, activeKey: Ref<string>, isRtl: Ref<boolean>, id: string, containerRef: Ref<HTMLUListElement | null>, getKeys: () => string[], getKeyPath: (key: string, includeOverflow?: boolean) => string[], triggerActiveKey: (key: string) => void, triggerAccessibilityOpen: (key: string, open?: boolean) => void, originOnKeyDown?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;

package/dist/hooks/useAccessibility.js

@@ -0,0 +1,210 @@
+import KeyCode from "@v-c/util/dist/KeyCode";
+import { shallowRef, onBeforeUnmount } from "vue";
+import { getMenuId } from "../context/IdContext.js";
+const { LEFT, RIGHT, UP, DOWN, ENTER, ESC, HOME, END } = KeyCode;
+const ArrowKeys = [UP, DOWN, LEFT, RIGHT];
+function getOffset(mode, isRootLevel, isRtl, which) {
+  const prev = "prev";
+  const next = "next";
+  const children = "children";
+  const parent = "parent";
+  if (mode === "inline" && which === ENTER) {
+    return { inlineTrigger: true };
+  }
+  const inline = { [UP]: prev, [DOWN]: next };
+  const horizontal = {
+    [LEFT]: isRtl ? next : prev,
+    [RIGHT]: isRtl ? prev : next,
+    [DOWN]: children,
+    [ENTER]: children
+  };
+  const vertical = {
+    [UP]: prev,
+    [DOWN]: next,
+    [ENTER]: children,
+    [ESC]: parent,
+    [LEFT]: isRtl ? children : parent,
+    [RIGHT]: isRtl ? parent : children
+  };
+  const offsets = {
+    inline,
+    horizontal,
+    vertical,
+    inlineSub: inline,
+    horizontalSub: vertical,
+    verticalSub: vertical
+  };
+  const type = offsets[`${mode}${isRootLevel ? "" : "Sub"}`]?.[which];
+  switch (type) {
+    case prev:
+      return { offset: -1, sibling: true };
+    case next:
+      return { offset: 1, sibling: true };
+    case parent:
+      return { offset: -1, sibling: false };
+    case children:
+      return { offset: 1, sibling: false };
+    default:
+      return null;
+  }
+}
+function findContainerUL(element) {
+  let current = element;
+  while (current) {
+    if (current.getAttribute("data-menu-list")) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function getFocusNodeList(container, includeDisabled) {
+  const selector = "[tabindex]";
+  return Array.from(container.querySelectorAll(selector));
+}
+function getFocusElement(activeElement, elements) {
+  let current = activeElement || document.activeElement;
+  while (current) {
+    if (elements.has(current)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function getFocusableElements(container, elements) {
+  if (!container)
+    return [];
+  const list = getFocusNodeList(container);
+  return list.filter((ele) => elements.has(ele));
+}
+function getNextFocusElement(parentQueryContainer, elements, focusMenuElement, offset = 1) {
+  if (!parentQueryContainer) {
+    return null;
+  }
+  const sameLevelFocusableMenuElementList = getFocusableElements(parentQueryContainer, elements);
+  const count = sameLevelFocusableMenuElementList.length;
+  let focusIndex = sameLevelFocusableMenuElementList.findIndex((ele) => focusMenuElement === ele);
+  if (offset < 0) {
+    if (focusIndex === -1) {
+      focusIndex = count - 1;
+    } else {
+      focusIndex -= 1;
+    }
+  } else if (offset > 0) {
+    focusIndex += 1;
+  }
+  focusIndex = (focusIndex + count) % count;
+  return sameLevelFocusableMenuElementList[focusIndex];
+}
+function refreshElements(keys, id) {
+  const elements = /* @__PURE__ */ new Set();
+  const key2element = /* @__PURE__ */ new Map();
+  const element2key = /* @__PURE__ */ new Map();
+  keys.forEach((key) => {
+    const element = document.querySelector(`[data-menu-id='${getMenuId(id, key)}']`);
+    if (element) {
+      elements.add(element);
+      element2key.set(element, key);
+      key2element.set(key, element);
+    }
+  });
+  return { elements, key2element, element2key };
+}
+function useAccessibility(mode, activeKey, isRtl, id, containerRef, getKeys, getKeyPath, triggerActiveKey, triggerAccessibilityOpen, originOnKeyDown) {
+  const rafRef = shallowRef();
+  const activeRef = shallowRef();
+  const cleanRaf = () => {
+    if (rafRef.value !== void 0) {
+      cancelAnimationFrame(rafRef.value);
+    }
+  };
+  onBeforeUnmount(() => {
+    cleanRaf();
+  });
+  return (e) => {
+    activeRef.value = activeKey.value;
+    const { which } = e;
+    if ([...ArrowKeys, ENTER, ESC, HOME, END].includes(which)) {
+      const keys = getKeys();
+      let refreshedElements = refreshElements(keys, id);
+      const { elements, key2element, element2key } = refreshedElements;
+      const activeElement = key2element.get(activeKey.value);
+      const focusMenuElement = getFocusElement(activeElement || null, elements);
+      const focusMenuKey = element2key.get(focusMenuElement);
+      const offsetObj = getOffset(mode.value, getKeyPath(focusMenuKey, true).length === 1, isRtl.value, which);
+      if (!offsetObj && which !== HOME && which !== END) {
+        return;
+      }
+      if (ArrowKeys.includes(which) || [HOME, END].includes(which)) {
+        e.preventDefault();
+      }
+      const tryFocus = (menuElement) => {
+        if (menuElement) {
+          let focusTargetElement = menuElement;
+          const link = menuElement.querySelector("a");
+          if (link?.getAttribute("href")) {
+            focusTargetElement = link;
+          }
+          const targetKey = element2key.get(menuElement);
+          if (targetKey) {
+            triggerActiveKey(targetKey);
+          }
+          cleanRaf();
+          rafRef.value = requestAnimationFrame(() => {
+            if (activeRef.value === targetKey) {
+              focusTargetElement.focus();
+            }
+          });
+        }
+      };
+      if ([HOME, END].includes(which) || offsetObj?.sibling || !focusMenuElement) {
+        let parentQueryContainer;
+        if (!focusMenuElement || mode.value === "inline") {
+          parentQueryContainer = containerRef.value;
+        } else {
+          parentQueryContainer = findContainerUL(focusMenuElement);
+        }
+        let targetElement;
+        const focusableElements = getFocusableElements(parentQueryContainer, elements);
+        if (which === HOME) {
+          targetElement = focusableElements[0];
+        } else if (which === END) {
+          targetElement = focusableElements[focusableElements.length - 1];
+        } else {
+          targetElement = getNextFocusElement(
+            parentQueryContainer,
+            elements,
+            focusMenuElement,
+            offsetObj?.offset
+          );
+        }
+        tryFocus(targetElement);
+      } else if (offsetObj.inlineTrigger) {
+        triggerAccessibilityOpen(focusMenuKey);
+      } else if (offsetObj.offset > 0) {
+        triggerAccessibilityOpen(focusMenuKey, true);
+        cleanRaf();
+        rafRef.value = requestAnimationFrame(() => {
+          refreshedElements = refreshElements(keys, id);
+          const controlId = focusMenuElement.getAttribute("aria-controls");
+          const subQueryContainer = controlId ? document.getElementById(controlId) : null;
+          const targetElement = getNextFocusElement(subQueryContainer, refreshedElements.elements);
+          tryFocus(targetElement);
+        });
+      } else if (offsetObj.offset < 0) {
+        const keyPath = getKeyPath(focusMenuKey, true);
+        const parentKey = keyPath[keyPath.length - 2];
+        const parentMenuElement = key2element.get(parentKey);
+        triggerAccessibilityOpen(parentKey, false);
+        tryFocus(parentMenuElement);
+      }
+    }
+    originOnKeyDown?.(e);
+  };
+}
+export {
+  useAccessibility as default,
+  getFocusableElements,
+  refreshElements
+};

package/dist/hooks/useActive.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const MenuContext = require("../context/MenuContext.cjs");
+function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
+  const menuContext = MenuContext.useMenuContext();
+  const active = vue.computed(() => menuContext?.value?.activeKey === eventKey.value);
+  const ret = {
+    active
+  };
+  vue.watchEffect(() => {
+    if (!disabled.value) {
+      ret.onMouseEnter = (domEvent) => {
+        onMouseEnter?.({
+          key: eventKey.value,
+          domEvent
+        });
+        menuContext?.value?.onActive?.(eventKey.value);
+      };
+      ret.onMouseLeave = (domEvent) => {
+        onMouseLeave?.({
+          key: eventKey.value,
+          domEvent
+        });
+        menuContext?.value?.onInactive?.(eventKey.value);
+      };
+    }
+  });
+  return ret;
+}
+exports.default = useActive;

package/dist/hooks/useActive.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+import { MenuHoverEventHandler } from '../interface.ts';
+interface ActiveObj {
+    active: Ref<boolean>;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+}
+export default function useActive(eventKey: Ref<string>, disabled: Ref<boolean>, onMouseEnter?: MenuHoverEventHandler, onMouseLeave?: MenuHoverEventHandler): ActiveObj;
+export {};

package/dist/hooks/useActive.js

@@ -0,0 +1,31 @@
+import { computed, watchEffect } from "vue";
+import { useMenuContext } from "../context/MenuContext.js";
+function useActive(eventKey, disabled, onMouseEnter, onMouseLeave) {
+  const menuContext = useMenuContext();
+  const active = computed(() => menuContext?.value?.activeKey === eventKey.value);
+  const ret = {
+    active
+  };
+  watchEffect(() => {
+    if (!disabled.value) {
+      ret.onMouseEnter = (domEvent) => {
+        onMouseEnter?.({
+          key: eventKey.value,
+          domEvent
+        });
+        menuContext?.value?.onActive?.(eventKey.value);
+      };
+      ret.onMouseLeave = (domEvent) => {
+        onMouseLeave?.({
+          key: eventKey.value,
+          domEvent
+        });
+        menuContext?.value?.onInactive?.(eventKey.value);
+      };
+    }
+  });
+  return ret;
+}
+export {
+  useActive as default
+};

package/dist/hooks/useDirectionStyle.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const MenuContext = require("../context/MenuContext.cjs");
+function useDirectionStyle(level) {
+  const menuContext = MenuContext.useMenuContext();
+  return vue.computed(() => {
+    const { mode, rtl, inlineIndent } = menuContext?.value ?? {};
+    if (mode !== "inline") {
+      return null;
+    }
+    const len = level.value;
+    return rtl ? {
+      paddingRight: `${len * inlineIndent}px`
+    } : {
+      paddingLeft: `${len * inlineIndent}px`
+    };
+  });
+}
+exports.default = useDirectionStyle;

package/dist/hooks/useDirectionStyle.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties, Ref } from 'vue';
+export default function useDirectionStyle(level: Ref<number>): Ref<CSSProperties | null>;

package/dist/hooks/useDirectionStyle.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+import { useMenuContext } from "../context/MenuContext.js";
+function useDirectionStyle(level) {
+  const menuContext = useMenuContext();
+  return computed(() => {
+    const { mode, rtl, inlineIndent } = menuContext?.value ?? {};
+    if (mode !== "inline") {
+      return null;
+    }
+    const len = level.value;
+    return rtl ? {
+      paddingRight: `${len * inlineIndent}px`
+    } : {
+      paddingLeft: `${len * inlineIndent}px`
+    };
+  });
+}
+export {
+  useDirectionStyle as default
+};

package/dist/hooks/useKeyRecords.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const timeUtil = require("../utils/timeUtil.cjs");
+const PATH_SPLIT = "__VC_UTIL_PATH_SPLIT__";
+const getPathStr = (keyPath) => keyPath.join(PATH_SPLIT);
+const getPathKeys = (keyPathStr) => keyPathStr.split(PATH_SPLIT);
+const OVERFLOW_KEY = "vc-menu-more";
+function useKeyRecords() {
+  const forceUpdateCount = vue.ref(0);
+  const key2pathRef = vue.shallowRef(/* @__PURE__ */ new Map());
+  const path2keyRef = vue.shallowRef(/* @__PURE__ */ new Map());
+  const overflowKeys = vue.ref([]);
+  const updateRef = vue.ref(0);
+  const destroyRef = vue.ref(false);
+  const forceUpdate = () => {
+    if (!destroyRef.value) {
+      forceUpdateCount.value += 1;
+    }
+  };
+  const registerPath = (key, keyPath) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (key2pathRef.value.has(key)) {
+        console.warn(
+          `Duplicated key '${key}' used in Menu by path [${keyPath.join(" > ")}]`
+        );
+      }
+    }
+    const connectedPath = getPathStr(keyPath);
+    path2keyRef.value.set(connectedPath, key);
+    key2pathRef.value.set(key, connectedPath);
+    updateRef.value += 1;
+    const id = updateRef.value;
+    timeUtil.nextSlice(() => {
+      if (id === updateRef.value) {
+        forceUpdate();
+      }
+    });
+  };
+  const unregisterPath = (key, keyPath) => {
+    const connectedPath = getPathStr(keyPath);
+    path2keyRef.value.delete(connectedPath);
+    key2pathRef.value.delete(key);
+  };
+  const refreshOverflowKeys = (keys) => {
+    overflowKeys.value = keys;
+  };
+  const getKeyPath = (eventKey, includeOverflow) => {
+    const fullPath = key2pathRef.value.get(eventKey) || "";
+    const keys = getPathKeys(fullPath);
+    if (includeOverflow && overflowKeys.value.includes(keys[0])) {
+      keys.unshift(OVERFLOW_KEY);
+    }
+    return keys;
+  };
+  const isSubPathKey = (pathKeys, eventKey) => pathKeys.filter((item) => item !== void 0).some((pathKey) => {
+    const pathKeyList = getKeyPath(pathKey, true);
+    return pathKeyList.includes(eventKey);
+  });
+  const getKeys = () => {
+    const keys = [...key2pathRef.value.keys()];
+    if (overflowKeys.value.length) {
+      keys.push(OVERFLOW_KEY);
+    }
+    return keys;
+  };
+  const getSubPathKeys = (key) => {
+    const connectedPath = `${key2pathRef.value.get(key)}${PATH_SPLIT}`;
+    const pathKeys = /* @__PURE__ */ new Set();
+    [...path2keyRef.value.keys()].forEach((pathKey) => {
+      if (pathKey.startsWith(connectedPath)) {
+        pathKeys.add(path2keyRef.value.get(pathKey));
+      }
+    });
+    return pathKeys;
+  };
+  vue.onBeforeUnmount(() => {
+    destroyRef.value = true;
+  });
+  return {
+    // Register
+    registerPath,
+    unregisterPath,
+    refreshOverflowKeys,
+    // Util
+    isSubPathKey,
+    getKeyPath,
+    getKeys,
+    getSubPathKeys
+  };
+}
+exports.OVERFLOW_KEY = OVERFLOW_KEY;
+exports.default = useKeyRecords;

package/dist/hooks/useKeyRecords.d.ts

@@ -0,0 +1,10 @@
+export declare const OVERFLOW_KEY = "vc-menu-more";
+export default function useKeyRecords(): {
+    registerPath: (key: string, keyPath: string[]) => void;
+    unregisterPath: (key: string, keyPath: string[]) => void;
+    refreshOverflowKeys: (keys: string[]) => void;
+    isSubPathKey: (pathKeys: string[], eventKey: string) => boolean;
+    getKeyPath: (eventKey: string, includeOverflow?: boolean) => string[];
+    getKeys: () => string[];
+    getSubPathKeys: (key: string) => Set<string>;
+};