@gridkitjs/dom 0.1.0 → 0.2.0

package/dist/index.js

@@ -66,6 +66,111 @@ function bodyRowFrom(target) {
   };
 }
 
+// src/contextMenu/attachContextMenuTrigger.ts
+var LONG_PRESS_DELAY = 500;
+var LONG_PRESS_SLOP = 10;
+function isContextMenuKey(event) {
+  if (event.ctrlKey || event.altKey || event.metaKey) {
+    return false;
+  }
+  return event.key === "ContextMenu" || event.key === "F10" && event.shiftKey;
+}
+function attachContextMenuTrigger(root, options) {
+  let swallowContextMenu = false;
+  let swallowClick = false;
+  let press = null;
+  function ask(event, point, source) {
+    const { target } = event;
+    return !event.defaultPrevented && target instanceof Element && root.contains(target) && options.onRequest({ target, point, source });
+  }
+  function request(event, point, source) {
+    if (!ask(event, point, source)) {
+      return false;
+    }
+    event.preventDefault();
+    return true;
+  }
+  function cancelPress() {
+    if (press !== null) {
+      window.clearTimeout(press.timer);
+      press = null;
+    }
+  }
+  function onKeyDown2(event) {
+    swallowContextMenu = false;
+    swallowClick = false;
+    if (isContextMenuKey(event) && request(event, null, "keyboard")) {
+      swallowContextMenu = true;
+    }
+  }
+  function onPointerDown(event) {
+    swallowContextMenu = false;
+    swallowClick = false;
+    cancelPress();
+    if (event.pointerType !== "touch" || !event.isPrimary) {
+      return;
+    }
+    const point = { x: event.clientX, y: event.clientY };
+    press = {
+      pointerId: event.pointerId,
+      ...point,
+      timer: window.setTimeout(() => {
+        press = null;
+        if (ask(event, point, "pointer")) {
+          swallowContextMenu = true;
+          swallowClick = true;
+        }
+      }, LONG_PRESS_DELAY)
+    };
+  }
+  function onPointerMove(event) {
+    if (press?.pointerId === event.pointerId && Math.hypot(event.clientX - press.x, event.clientY - press.y) > LONG_PRESS_SLOP) {
+      cancelPress();
+    }
+  }
+  function onPointerEnd(event) {
+    if (press?.pointerId === event.pointerId) {
+      cancelPress();
+    }
+  }
+  function onClick(event) {
+    if (swallowClick) {
+      swallowClick = false;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  function onContextMenu(event) {
+    if (swallowContextMenu) {
+      swallowContextMenu = false;
+      event.preventDefault();
+      return;
+    }
+    const touching = press !== null;
+    cancelPress();
+    if (request(event, { x: event.clientX, y: event.clientY }, "pointer") && touching) {
+      swallowClick = true;
+    }
+  }
+  document.addEventListener("keydown", onKeyDown2);
+  document.addEventListener("pointerdown", onPointerDown, true);
+  document.addEventListener("pointermove", onPointerMove, true);
+  document.addEventListener("pointerup", onPointerEnd, true);
+  document.addEventListener("pointercancel", onPointerEnd, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("contextmenu", onContextMenu);
+  return () => {
+    cancelPress();
+    document.removeEventListener("keydown", onKeyDown2);
+    document.removeEventListener("pointerdown", onPointerDown, true);
+    document.removeEventListener("pointermove", onPointerMove, true);
+    document.removeEventListener("pointerup", onPointerEnd, true);
+    document.removeEventListener("pointercancel", onPointerEnd, true);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("contextmenu", onContextMenu);
+  };
+}
+
 // src/columnResize.ts
 import { applyColumnResize } from "@gridkitjs/core";
 
@@ -79,7 +184,7 @@ function startPointerGesture(element, pointerId, handlers) {
     element.removeEventListener("pointermove", move);
     element.removeEventListener("pointerup", end);
     element.removeEventListener("pointercancel", cancel);
-    window.removeEventListener("keydown", onKeyDown);
+    window.removeEventListener("keydown", onKeyDown2);
     if (element.hasPointerCapture(pointerId)) {
       element.releasePointerCapture(pointerId);
     }
@@ -95,7 +200,7 @@ function startPointerGesture(element, pointerId, handlers) {
     stop();
     handlers.onCancel();
   }
-  function onKeyDown(event) {
+  function onKeyDown2(event) {
     if (event.key === "Escape") {
       cancel();
     }
@@ -103,7 +208,7 @@ function startPointerGesture(element, pointerId, handlers) {
   element.addEventListener("pointermove", move);
   element.addEventListener("pointerup", end);
   element.addEventListener("pointercancel", cancel);
-  window.addEventListener("keydown", onKeyDown);
+  window.addEventListener("keydown", onKeyDown2);
 }
 
 // src/columnResize.ts
@@ -425,6 +530,219 @@ function attachInfiniteScroll(root, options) {
   };
 }
 
+// src/menu/attachMenu.ts
+import { nextMenuIndex, typeaheadIndex } from "@gridkitjs/core";
+var ITEM = [
+  '[role="menuitem"][data-gridkit-menu-item]',
+  '[role="menuitemcheckbox"][data-gridkit-menu-item]',
+  '[role="menuitemradio"][data-gridkit-menu-item]'
+].join(", ");
+var HOVER_DELAY = 150;
+var TYPEAHEAD_TIMEOUT = 500;
+var AS_ENTRY = { type: "item" };
+var MOVES = {
+  ArrowDown: "next",
+  ArrowUp: "previous",
+  Home: "first",
+  End: "last"
+};
+function idOf(item) {
+  return item.getAttribute("data-gridkit-menu-item") ?? "";
+}
+function isDisabled(item) {
+  return item.getAttribute("aria-disabled") === "true";
+}
+function opensSubmenu(item) {
+  const popup = item.getAttribute("aria-haspopup");
+  return popup === "menu" || popup === "true";
+}
+function labelOf(item) {
+  return (item.getAttribute("aria-label") ?? item.textContent).trim();
+}
+function isTypeahead(event) {
+  return /^\S$/u.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function attachMenu(panel, options) {
+  let typed = "";
+  let typeaheadTimer;
+  let hovered = null;
+  let hoverTimer;
+  function items() {
+    return Array.from(panel.querySelectorAll(ITEM));
+  }
+  function itemOf(target) {
+    const item = target instanceof Element ? target.closest(ITEM) : null;
+    return item !== null && panel.contains(item) ? item : null;
+  }
+  function setTabStop(stop) {
+    for (const item of items()) {
+      item.tabIndex = item === stop ? 0 : -1;
+    }
+  }
+  function focus(item) {
+    setTabStop(item);
+    item.focus();
+  }
+  function openSubmenu(item, focusTo) {
+    if (!isDisabled(item)) {
+      options.onOpenSubmenu?.(idOf(item), { focus: focusTo });
+    }
+  }
+  function choose(item, focusTo) {
+    if (opensSubmenu(item)) {
+      openSubmenu(item, focusTo);
+    } else if (!isDisabled(item)) {
+      options.onActivate(idOf(item));
+    }
+  }
+  function typeahead(key, all, from) {
+    typed += key;
+    window.clearTimeout(typeaheadTimer);
+    typeaheadTimer = window.setTimeout(() => {
+      typed = "";
+    }, TYPEAHEAD_TIMEOUT);
+    const match = all[typeaheadIndex(all.map(labelOf), from, typed)];
+    if (match !== void 0) {
+      focus(match);
+    }
+  }
+  function onKeyDown2(event) {
+    if (event.isComposing) {
+      return;
+    }
+    const all = items();
+    const item = itemOf(event.target);
+    const from = item === null ? -1 : all.indexOf(item);
+    const move = MOVES[event.key];
+    if (move !== void 0) {
+      const next = all[nextMenuIndex(
+        all.map(() => AS_ENTRY),
+        from,
+        move
+      )];
+      if (next !== void 0) {
+        focus(next);
+      }
+    } else if (event.key === "Enter" || event.key === " ") {
+      if (item !== null) {
+        choose(item, "first");
+      }
+    } else if (event.key === "ArrowRight") {
+      if (item !== null && opensSubmenu(item)) {
+        openSubmenu(item, "first");
+      }
+    } else if (event.key === "ArrowLeft") {
+      options.onCloseSubmenu?.();
+    } else if (event.key === "Tab") {
+      options.onClose("tab");
+    } else if (isTypeahead(event)) {
+      typeahead(event.key, all, from);
+    } else {
+      return;
+    }
+    event.preventDefault();
+  }
+  function onFocusIn(event) {
+    const item = itemOf(event.target);
+    if (item !== null) {
+      setTabStop(item);
+    }
+  }
+  function onClick(event) {
+    const item = itemOf(event.target);
+    if (item !== null) {
+      choose(item, "none");
+    }
+  }
+  function onPointerMove(event) {
+    if (event.pointerType === "touch") {
+      return;
+    }
+    const item = itemOf(event.target);
+    if (item !== null && document.activeElement !== item) {
+      focus(item);
+    }
+    if (item === hovered) {
+      return;
+    }
+    hovered = item;
+    window.clearTimeout(hoverTimer);
+    if (item !== null) {
+      hoverTimer = window.setTimeout(() => {
+        if (opensSubmenu(item) && !isDisabled(item)) {
+          openSubmenu(item, "none");
+        } else {
+          options.onCollapseSubmenu?.();
+        }
+      }, HOVER_DELAY);
+    }
+  }
+  function onPointerLeave() {
+    hovered = null;
+    window.clearTimeout(hoverTimer);
+  }
+  const focused = itemOf(document.activeElement);
+  setTabStop(focused ?? items()[0]);
+  panel.addEventListener("keydown", onKeyDown2);
+  panel.addEventListener("focusin", onFocusIn);
+  panel.addEventListener("click", onClick);
+  panel.addEventListener("pointermove", onPointerMove);
+  panel.addEventListener("pointerleave", onPointerLeave);
+  return {
+    focusItem(which) {
+      const all = items();
+      const item = typeof which === "number" ? all[which] : all.find((candidate) => idOf(candidate) === which);
+      if (item !== void 0) {
+        focus(item);
+      }
+    },
+    detach() {
+      window.clearTimeout(typeaheadTimer);
+      window.clearTimeout(hoverTimer);
+      panel.removeEventListener("keydown", onKeyDown2);
+      panel.removeEventListener("focusin", onFocusIn);
+      panel.removeEventListener("click", onClick);
+      panel.removeEventListener("pointermove", onPointerMove);
+      panel.removeEventListener("pointerleave", onPointerLeave);
+    }
+  };
+}
+
+// src/overlay/overlayStack.ts
+var stack = [];
+function onKeyDown(event) {
+  const topmost = stack.at(-1);
+  if (event.key !== "Escape" || event.isComposing || topmost === void 0) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  topmost.onEscape();
+}
+function pushOverlay(overlay) {
+  if (stack.length === 0) {
+    window.addEventListener("keydown", onKeyDown, true);
+  }
+  stack.push(overlay);
+}
+function removeOverlay(overlay) {
+  const index = stack.indexOf(overlay);
+  if (index === -1) {
+    return;
+  }
+  const above = stack.splice(index).slice(1).reverse();
+  for (const child of above) {
+    child.onParentDetached();
+  }
+  if (stack.length === 0) {
+    window.removeEventListener("keydown", onKeyDown, true);
+  }
+}
+function isInsideOverlayAbove(overlay, target) {
+  const index = stack.indexOf(overlay);
+  return index !== -1 && stack.slice(index + 1).some((above) => above.panel.contains(target));
+}
+
 // src/overlay/placeOverlay.ts
 var OPPOSITE_SIDE = {
   top: "bottom",
@@ -480,6 +798,7 @@ function clampIntoView(value, limit) {
 function placeOverlay(anchor, panel, viewport, options = {}) {
   const [preferredSide, preferredAlign] = (options.placement ?? "bottom-start").split("-");
   const gap = options.gap ?? 0;
+  const offset = options.offset ?? 0;
   const vertical = isVertical(preferredSide);
   const side = chooseSide(
     preferredSide,
@@ -487,7 +806,7 @@ function placeOverlay(anchor, panel, viewport, options = {}) {
     anchor,
     viewport
   );
-  const anchorStart = vertical ? anchor.left : anchor.top;
+  const anchorStart = (vertical ? anchor.left : anchor.top) + offset;
   const anchorEnd = anchorStart + (vertical ? anchor.width : anchor.height);
   const extent = vertical ? panel.width : panel.height;
   const room = vertical ? viewport.width : viewport.height;
@@ -514,24 +833,59 @@ function anchorRect(anchor) {
   }
   return { top: anchor.y, left: anchor.x, width: 0, height: 0 };
 }
+function initialFocusTarget(panel, initialFocus) {
+  if (initialFocus === "none") {
+    return null;
+  }
+  if (initialFocus instanceof HTMLElement) {
+    return initialFocus;
+  }
+  const first = initialFocus === "first" ? panel.querySelector(FOCUSABLE) : null;
+  if (first !== null) {
+    return first;
+  }
+  if (!panel.hasAttribute("tabindex")) {
+    panel.tabIndex = -1;
+  }
+  return panel;
+}
 function attachOverlay(anchor, panel, options) {
   const { onDismiss } = options;
   const returnFocusTo = options.returnFocusTo === void 0 ? document.activeElement instanceof HTMLElement ? document.activeElement : null : options.returnFocusTo;
-  function belongs(target) {
-    return target instanceof Node && (panel.contains(target) || anchor instanceof Element && anchor.contains(target));
-  }
-  function onKeyDown(event) {
-    if (event.key === "Escape") {
+  const stacked = {
+    panel,
+    onEscape: () => {
       onDismiss("escape");
+    },
+    onParentDetached: () => {
+      onDismiss("parent");
+      detach();
     }
+  };
+  function inside(target) {
+    return target instanceof Node && (panel.contains(target) || isInsideOverlayAbove(stacked, target));
+  }
+  function belongs(target) {
+    return inside(target) || anchor instanceof Element && target instanceof Node && anchor.contains(target);
   }
   function onPointerDown(event) {
     if (!belongs(event.target)) {
       onDismiss("outside");
     }
   }
+  let settlingFrame = null;
+  function onInput() {
+    if (settlingFrame !== null) {
+      cancelAnimationFrame(settlingFrame);
+    }
+    settlingFrame = requestAnimationFrame(() => {
+      settlingFrame = requestAnimationFrame(() => {
+        settlingFrame = null;
+      });
+    });
+  }
   function onScroll(event) {
-    if (!(event.target instanceof Node && panel.contains(event.target))) {
+    if (!inside(event.target) && settlingFrame === null) {
       onDismiss("scroll");
     }
   }
@@ -546,50 +900,72 @@ function attachOverlay(anchor, panel, options) {
   function onWindowBlur() {
     onDismiss("blur");
   }
-  panel.style.position = "fixed";
-  panel.style.top = "0px";
-  panel.style.left = "0px";
-  const { width, height } = panel.getBoundingClientRect();
-  const position = placeOverlay(
-    anchorRect(anchor),
-    { width, height },
-    {
-      width: document.documentElement.clientWidth,
-      height: document.documentElement.clientHeight
-    },
-    options
-  );
-  panel.style.top = `${String(position.top)}px`;
-  panel.style.left = `${String(position.left)}px`;
-  panel.setAttribute("data-gridkit-placement", position.placement);
-  const first = panel.querySelector(FOCUSABLE);
-  if (first === null && !panel.hasAttribute("tabindex")) {
-    panel.tabIndex = -1;
+  let lastAnchorBox = null;
+  function anchorBox() {
+    if (lastAnchorBox === null || !(anchor instanceof Element) || anchor.isConnected) {
+      lastAnchorBox = anchorRect(anchor);
+    }
+    return lastAnchorBox;
   }
-  (first ?? panel).focus({ preventScroll: true });
-  document.addEventListener("keydown", onKeyDown, true);
+  function place() {
+    panel.style.top = "0px";
+    panel.style.left = "0px";
+    const { width, height } = panel.getBoundingClientRect();
+    const position = placeOverlay(
+      anchorBox(),
+      { width, height },
+      {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      },
+      options
+    );
+    panel.style.top = `${String(position.top)}px`;
+    panel.style.left = `${String(position.left)}px`;
+    panel.setAttribute("data-gridkit-placement", position.placement);
+  }
+  panel.style.position = "fixed";
+  place();
+  const resizeObserver = new ResizeObserver(place);
+  resizeObserver.observe(panel);
+  pushOverlay(stacked);
+  initialFocusTarget(panel, options.initialFocus ?? "first")?.focus({
+    preventScroll: true
+  });
   document.addEventListener("pointerdown", onPointerDown, true);
   window.addEventListener("scroll", onScroll, { capture: true, passive: true });
   window.addEventListener("resize", onResize);
   window.addEventListener("blur", onWindowBlur);
   panel.addEventListener("focusout", onFocusOut);
+  if (options.ignoreScrollAfterInput === true) {
+    panel.addEventListener("input", onInput);
+    panel.addEventListener("change", onInput);
+  }
   let attached = true;
-  return () => {
+  function detach() {
     if (!attached) {
       return;
     }
     attached = false;
-    document.removeEventListener("keydown", onKeyDown, true);
+    const active = document.activeElement;
+    const focusInside = active === null || active === document.body || inside(active);
+    removeOverlay(stacked);
+    resizeObserver.disconnect();
     document.removeEventListener("pointerdown", onPointerDown, true);
     window.removeEventListener("scroll", onScroll, { capture: true });
     window.removeEventListener("resize", onResize);
     window.removeEventListener("blur", onWindowBlur);
     panel.removeEventListener("focusout", onFocusOut);
-    const active = document.activeElement;
-    if (returnFocusTo !== null && (active === null || active === document.body || panel.contains(active))) {
+    panel.removeEventListener("input", onInput);
+    panel.removeEventListener("change", onInput);
+    if (settlingFrame !== null) {
+      cancelAnimationFrame(settlingFrame);
+    }
+    if (returnFocusTo !== null && focusInside) {
       returnFocusTo.focus({ preventScroll: true });
     }
-  };
+  }
+  return detach;
 }
 
 // src/rowVirtualizer.ts
@@ -716,10 +1092,214 @@ function createRowVirtualizer(scrollElement, options) {
     }
   };
 }
+
+// src/toolbar/attachToolbar.ts
+import { nextMenuIndex as nextMenuIndex2 } from "@gridkitjs/core";
+var ENTRY = "[data-gridkit-toolbar-item]";
+var FOCUSABLE2 = [
+  "button:not(:disabled)",
+  "input:not(:disabled)",
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
+  "a[href]",
+  "[tabindex]"
+].join(", ");
+var MOVES2 = {
+  ArrowRight: "next",
+  ArrowLeft: "previous",
+  Home: "first",
+  End: "last"
+};
+var AS_ENTRY2 = { type: "item" };
+var CARETLESS_INPUTS = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "color",
+  "file",
+  "image",
+  "radio",
+  "range",
+  "reset",
+  "submit"
+]);
+function targetOf(entry) {
+  return entry.matches(FOCUSABLE2) ? entry : entry.querySelector(FOCUSABLE2);
+}
+function textFieldOf(target) {
+  return target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && !CARETLESS_INPUTS.has(target.type) ? target : null;
+}
+function belongsToField(target, move) {
+  if (target instanceof HTMLElement && target.isContentEditable) {
+    return true;
+  }
+  const field = textFieldOf(target);
+  if (field === null) {
+    return false;
+  }
+  const { selectionStart, selectionEnd, value } = field;
+  if (move === "first" || move === "last" || selectionStart === null || selectionStart !== selectionEnd) {
+    return true;
+  }
+  return move === "previous" ? selectionStart > 0 : selectionStart < value.length;
+}
+function attachToolbar(toolbar) {
+  let stop;
+  function controls() {
+    return Array.from(toolbar.querySelectorAll(ENTRY)).flatMap(
+      (entry) => {
+        const target = targetOf(entry);
+        return target === null ? [] : [{ entry, target }];
+      }
+    );
+  }
+  function indexOf(all2, node) {
+    return node instanceof Node ? all2.findIndex((control) => control.entry.contains(node)) : -1;
+  }
+  function setTabStop(next) {
+    stop = next;
+    for (const { target } of controls()) {
+      target.tabIndex = target === next ? 0 : -1;
+    }
+  }
+  function onKeyDown2(event) {
+    const move = MOVES2[event.key];
+    if (move === void 0 || event.isComposing || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || belongsToField(event.target, move)) {
+      return;
+    }
+    const all2 = controls();
+    const from = indexOf(all2, event.target);
+    if (from === -1) {
+      return;
+    }
+    const next = all2[nextMenuIndex2(
+      all2.map(() => AS_ENTRY2),
+      from,
+      move
+    )];
+    if (next !== void 0) {
+      event.preventDefault();
+      setTabStop(next.target);
+      next.target.focus();
+    }
+  }
+  function onFocusIn(event) {
+    const all2 = controls();
+    const control = all2[indexOf(all2, event.target)];
+    if (control !== void 0) {
+      setTabStop(control.target);
+    }
+  }
+  const observer = new MutationObserver(() => {
+    const all2 = controls();
+    setTabStop(
+      all2.find(({ target }) => target === stop)?.target ?? all2[0]?.target
+    );
+  });
+  const all = controls();
+  setTabStop(
+    all[indexOf(all, document.activeElement)]?.target ?? all[0]?.target
+  );
+  toolbar.addEventListener("keydown", onKeyDown2);
+  toolbar.addEventListener("focusin", onFocusIn);
+  observer.observe(toolbar, { childList: true, subtree: true });
+  return () => {
+    observer.disconnect();
+    toolbar.removeEventListener("keydown", onKeyDown2);
+    toolbar.removeEventListener("focusin", onFocusIn);
+  };
+}
+
+// src/toolbar/observeToolbarOverflow.ts
+import {
+  fitToolbarItems,
+  isPinnedToolbarItem
+} from "@gridkitjs/core";
+var ENTRY_ATTRIBUTE = "data-gridkit-toolbar-item";
+var MORE_ATTRIBUTE = "data-gridkit-toolbar-more";
+function pixels(value) {
+  return Number.parseFloat(value) || 0;
+}
+function outerWidth(element) {
+  const style = getComputedStyle(element);
+  return element.getBoundingClientRect().width + pixels(style.marginLeft) + pixels(style.marginRight);
+}
+function observeToolbarOverflow(toolbar, options) {
+  let current = options;
+  const widths = /* @__PURE__ */ new Map();
+  let moreWidth = 0;
+  let reported;
+  function drawnEntries() {
+    return Array.from(
+      toolbar.querySelectorAll(`[${ENTRY_ATTRIBUTE}]`)
+    );
+  }
+  function measure() {
+    for (const element of drawnEntries()) {
+      if (element.hasAttribute(MORE_ATTRIBUTE)) {
+        moreWidth = outerWidth(element);
+      } else {
+        widths.set(
+          element.getAttribute(ENTRY_ATTRIBUTE) ?? "",
+          outerWidth(element)
+        );
+      }
+    }
+    const style = getComputedStyle(toolbar);
+    const gap = pixels(style.columnGap);
+    const fit = fitToolbarItems({
+      widths: current.items.map(
+        (item) => (item.type === "spacer" ? 0 : widths.get(item.key) ?? 0) + gap
+      ),
+      available: toolbar.clientWidth - pixels(style.paddingLeft) - pixels(style.paddingRight) + gap,
+      moreWidth: moreWidth + gap,
+      pinned: current.items.map(isPinnedToolbarItem)
+    });
+    if (fit !== reported) {
+      reported = fit;
+      current.onChange(fit);
+    }
+  }
+  const resizes = new ResizeObserver(measure);
+  function observeSizes() {
+    resizes.disconnect();
+    resizes.observe(toolbar);
+    for (const element of drawnEntries()) {
+      resizes.observe(element);
+    }
+  }
+  const draws = new MutationObserver(() => {
+    observeSizes();
+    measure();
+  });
+  observeSizes();
+  draws.observe(toolbar, { childList: true, subtree: true });
+  measure();
+  return {
+    update(next) {
+      const labels = new Map(
+        current.items.map((item) => [item.key, item.label])
+      );
+      for (const item of next.items) {
+        if (labels.has(item.key) && labels.get(item.key) !== item.label) {
+          widths.delete(item.key);
+        }
+      }
+      current = next;
+      measure();
+    },
+    detach() {
+      resizes.disconnect();
+      draws.disconnect();
+    }
+  };
+}
 export {
   NO_DRAG,
+  attachContextMenuTrigger,
   attachInfiniteScroll,
+  attachMenu,
   attachOverlay,
+  attachToolbar,
   bodyCellFrom,
   bodyRowFrom,
   createGridFocus,
@@ -730,6 +1310,7 @@ export {
   measureColumnContent,
   measurePageSize,
   observeElementWidth,
+  observeToolbarOverflow,
   placeOverlay,
   resolveColumnDropTarget,
   resolveGroupByDropTarget,