@vuu-ui/vuu-table-extras 3.5.16 → 3.5.17

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.16",
+  "version": "3.5.17",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -11,19 +11,19 @@
     "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.js ./src/column-expression-input/column-language-parser/grammar/column.grammar"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "3.5.16",
-    "@vuu-ui/vuu-protocol-types": "3.5.16"
+    "@vuu-ui/vuu-filter-types": "3.5.17",
+    "@vuu-ui/vuu-protocol-types": "3.5.17"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "3.5.16",
-    "@vuu-ui/vuu-data-editing": "3.5.16",
-    "@vuu-ui/vuu-data-react": "3.5.16",
-    "@vuu-ui/vuu-data-types": "3.5.16",
-    "@vuu-ui/vuu-table-types": "3.5.16",
-    "@vuu-ui/vuu-popups": "3.5.16",
-    "@vuu-ui/vuu-table": "3.5.16",
-    "@vuu-ui/vuu-utils": "3.5.16",
-    "@vuu-ui/vuu-ui-controls": "3.5.16",
+    "@vuu-ui/vuu-codemirror": "3.5.17",
+    "@vuu-ui/vuu-data-editing": "3.5.17",
+    "@vuu-ui/vuu-data-react": "3.5.17",
+    "@vuu-ui/vuu-data-types": "3.5.17",
+    "@vuu-ui/vuu-table-types": "3.5.17",
+    "@vuu-ui/vuu-popups": "3.5.17",
+    "@vuu-ui/vuu-table": "3.5.17",
+    "@vuu-ui/vuu-utils": "3.5.17",
+    "@vuu-ui/vuu-ui-controls": "3.5.17",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",

package/src/cell-renderers/background-cell/BackgroundCell.css.js

@@ -38,22 +38,103 @@ const css = `
   background-color: #0000;
 }
 
-.vuuBackgroundCell-backgroundOnly.up1, .vuuBackgroundCell-arrowBackground.up1 {
+.vuuBackgroundCell-backgroundOnly.vuuBackgroundCell-hotUp, .vuuBackgroundCell-arrowBackground.vuuBackgroundCell-hotUp {
+  background-color: var(--vuuBackgroundCell-hotUp-background, color-mix(in srgb, var(--salt-sentiment-positive-foreground-informative) 30%, transparent));
+}
+
+.vuuBackgroundCell-backgroundOnly.vuuBackgroundCell-hotDown, .vuuBackgroundCell-arrowBackground.vuuBackgroundCell-hotDown {
+  background-color: var(--vuuBackgroundCell-hotDown-background, color-mix(in srgb, var(--salt-sentiment-negative-foreground-informative) 30%, transparent));
+}
+
+.vuuBackgroundCell-backgroundOnly.vuuBackgroundCell-coolUp > .vuuBackgroundCell-flash {
+  background-color: var(--vuuBackgroundCell-hotUp-background, color-mix(in srgb, var(--salt-sentiment-positive-foreground-informative) 30%, transparent));
+  animation: vuucoolup var(--vuuBackgroundCell-cool-duration, 2s);
+}
+
+.vuuBackgroundCell-backgroundOnly.vuuBackgroundCell-coolDown > .vuuBackgroundCell-flash {
+  background-color: var(--vuuBackgroundCell-hotDown-background, color-mix(in srgb, var(--salt-sentiment-negative-foreground-informative) 30%, transparent));
+  animation: vuucooldown var(--vuuBackgroundCell-cool-duration, 2s);
+}
+
+.vuuBackgroundCell-arrowBackground.vuuBackgroundCell-coolUp {
+  animation: vuucoolbgup var(--vuuBackgroundCell-cool-duration, 2s);
+}
+
+.vuuBackgroundCell-arrowBackground.vuuBackgroundCell-coolDown {
+  animation: vuucoolbgdown var(--vuuBackgroundCell-cool-duration, 2s);
+}
+
+.vuuBackgroundCell-hotUp > .vuuBackgroundCell-arrow {
+  color: var(--salt-sentiment-positive-foreground-informative);
+}
+
+.vuuBackgroundCell-hotDown > .vuuBackgroundCell-arrow {
+  color: var(--salt-sentiment-negative-foreground-informative);
+}
+
+.vuuBackgroundCell-flash {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.vuuBackgroundCell-backgroundOnly.up1 > .vuuBackgroundCell-flash, .vuuBackgroundCell-backgroundOnly.up2 > .vuuBackgroundCell-flash {
+  background-color: var(--salt-sentiment-positive-foreground-informative);
+}
+
+.vuuBackgroundCell-backgroundOnly.down1 > .vuuBackgroundCell-flash, .vuuBackgroundCell-backgroundOnly.down2 > .vuuBackgroundCell-flash {
+  background-color: var(--salt-sentiment-negative-foreground-informative);
+}
+
+.vuuBackgroundCell-backgroundOnly.up1 > .vuuBackgroundCell-flash {
+  animation: vuuflashup1 var(--background-animation-duration);
+}
+
+.vuuBackgroundCell-backgroundOnly.up2 > .vuuBackgroundCell-flash {
+  animation: vuuflashup2 var(--background-animation-duration);
+}
+
+.vuuBackgroundCell-backgroundOnly.down1 > .vuuBackgroundCell-flash {
+  animation: vuuflashdown1 var(--background-animation-duration);
+}
+
+.vuuBackgroundCell-backgroundOnly.down2 > .vuuBackgroundCell-flash {
+  animation: vuuflashdown2 var(--background-animation-duration);
+}
+
+.vuuBackgroundCell-backgroundOnly.up1 > .vuuBackgroundCell-value {
+  animation: vuuflashtextup1 var(--background-animation-duration);
+}
+
+.vuuBackgroundCell-backgroundOnly.up2 > .vuuBackgroundCell-value {
+  animation: vuuflashtextup2 var(--background-animation-duration);
+}
+
+.vuuBackgroundCell-backgroundOnly.down1 > .vuuBackgroundCell-value {
+  animation: vuuflashtextdown1 var(--background-animation-duration);
+}
+
+.vuuBackgroundCell-backgroundOnly.down2 > .vuuBackgroundCell-value {
+  animation: vuuflashtextdown2 var(--background-animation-duration);
+}
+
+.vuuBackgroundCell-arrowBackground.up1 {
   animation-duration: var(--background-animation-duration);
   animation-name: vuubgup1;
 }
 
-.vuuBackgroundCell-backgroundOnly.up2, .vuuBackgroundCell-arrowBackground.up2 {
+.vuuBackgroundCell-arrowBackground.up2 {
   animation-duration: var(--background-animation-duration);
   animation-name: vuubgup2;
 }
 
-.vuuBackgroundCell-backgroundOnly.down1, .vuuBackgroundCell-arrowBackground.down1 {
+.vuuBackgroundCell-arrowBackground.down1 {
   animation-duration: var(--background-animation-duration);
   animation-name: vuubgdown1;
 }
 
-.vuuBackgroundCell-backgroundOnly.down2, .vuuBackgroundCell-arrowBackground.down2 {
+.vuuBackgroundCell-arrowBackground.down2 {
   animation-duration: var(--background-animation-duration);
   animation-name: vuubgdown2;
 }

package/src/cell-renderers/background-cell/BackgroundCell.js

@@ -36,25 +36,33 @@ const BackgroundCell_BackgroundCell = /*#__PURE__*/ memo(function({ column, data
     const { name, type, valueFormatter } = column;
     const value = dataRow[name];
     const flashStyle = getFlashStyle(type);
-    const direction = useDirection(dataRow.key, value, column);
-    const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === UP1 || direction === UP2 ? CHAR_ARROW_UP : direction === DOWN1 || direction === DOWN2 ? CHAR_ARROW_DOWN : null : null;
+    const { direction, hot, cooling } = useDirection(dataRow.key, value, column);
+    const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? "up" === hot || direction === UP1 || direction === UP2 ? CHAR_ARROW_UP : "down" === hot || direction === DOWN1 || direction === DOWN2 ? CHAR_ARROW_DOWN : null : null;
     const dirClass = direction ? " " + direction : "";
     const className = clsx(classBase, dirClass, {
         [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
         [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
-        [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
+        [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground,
+        [`${classBase}-hotUp`]: "up" === hot,
+        [`${classBase}-hotDown`]: "down" === hot,
+        [`${classBase}-coolUp`]: "up" === cooling,
+        [`${classBase}-coolDown`]: "down" === cooling
     });
+    const formattedValue = valueFormatter(value);
     return /*#__PURE__*/ jsxs("div", {
         className: className,
         tabIndex: -1,
         children: [
-            /*#__PURE__*/ jsx("div", {
+            flashStyle === FlashStyle.BackgroundOnly ? /*#__PURE__*/ jsx("span", {
+                "aria-hidden": true,
+                className: `${classBase}-flash`
+            }) : /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-arrow`,
                 children: arrow
             }),
             /*#__PURE__*/ jsx("span", {
                 className: `${classBase}-value`,
-                children: valueFormatter(dataRow[name])
+                children: formattedValue
             })
         ]
     });

package/src/cell-renderers/background-cell/BackgroundKeyframes.css.js

@@ -1,4 +1,128 @@
 const css = `
+@keyframes vuucoolup {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vuucooldown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vuucoolbgup {
+  from {
+    background-color: var(--vuuBackgroundCell-hotUp-background, color-mix(in srgb, var(--salt-sentiment-positive-foreground-informative) 30%, transparent));
+  }
+
+  to {
+    background-color: #0000;
+  }
+}
+
+@keyframes vuucoolbgdown {
+  from {
+    background-color: var(--vuuBackgroundCell-hotDown-background, color-mix(in srgb, var(--salt-sentiment-negative-foreground-informative) 30%, transparent));
+  }
+
+  to {
+    background-color: #0000;
+  }
+}
+
+@keyframes vuuflashtextup1 {
+  0% {
+    color: var(--vuuBackgroundCell-flash-color, white);
+    animation-timing-function: step-end;
+  }
+
+  33% {
+    color: var(--vuuBackgroundCell-color, var(--salt-content-primary-foreground));
+  }
+}
+
+@keyframes vuuflashtextup2 {
+  0% {
+    color: var(--vuuBackgroundCell-flash-color, white);
+    animation-timing-function: step-end;
+  }
+
+  33% {
+    color: var(--vuuBackgroundCell-color, var(--salt-content-primary-foreground));
+  }
+}
+
+@keyframes vuuflashtextdown1 {
+  0% {
+    color: var(--vuuBackgroundCell-flash-color, white);
+    animation-timing-function: step-end;
+  }
+
+  33% {
+    color: var(--vuuBackgroundCell-color, var(--salt-content-primary-foreground));
+  }
+}
+
+@keyframes vuuflashtextdown2 {
+  0% {
+    color: var(--vuuBackgroundCell-flash-color, white);
+    animation-timing-function: step-end;
+  }
+
+  33% {
+    color: var(--vuuBackgroundCell-color, var(--salt-content-primary-foreground));
+  }
+}
+
+@keyframes vuuflashup1 {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vuuflashup2 {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vuuflashdown1 {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vuuflashdown2 {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes vuubgup1 {
   0% {
     background-color: var(--salt-sentiment-positive-foreground-informative);

package/src/cell-renderers/background-cell/useDirection.js

@@ -1,25 +1,94 @@
 import { getMovingValueDirection, isTypeDescriptor, isValidNumber } from "@vuu-ui/vuu-utils";
-import { useEffect, useRef } from "react";
-const INITIAL_VALUE = [
-    void 0,
-    void 0,
-    void 0,
-    void 0
-];
+import { useEffect, useRef, useState } from "react";
+const DEFAULT_MIN_FLASH_INTERVAL = 1000;
+const DEFAULT_HOT_INTERVAL = 500;
+const DEFAULT_HOT_EXIT_DELAY = 1000;
+const isUp = (direction)=>"up1" === direction || "up2" === direction;
+const isDown = (direction)=>"down1" === direction || "down2" === direction;
+const getRendererSetting = ({ type }, name, defaultValue)=>{
+    if (isTypeDescriptor(type) && type.renderer) {
+        const value = type.renderer[name];
+        if ("number" == typeof value) return value;
+    }
+    return defaultValue;
+};
+const COOL_DOWN_RESOLUTION = 100;
+const coolDowns = new Map();
+let coolDownTimer;
+const runCoolDowns = ()=>{
+    const now = performance.now();
+    for (const [owner, entry] of coolDowns)if (entry.until <= now) {
+        coolDowns.delete(owner);
+        entry.coolDown();
+    }
+    if (0 === coolDowns.size && void 0 !== coolDownTimer) {
+        clearInterval(coolDownTimer);
+        coolDownTimer = void 0;
+    }
+};
+const scheduleCoolDown = (owner, until, coolDown)=>{
+    const entry = coolDowns.get(owner);
+    if (entry) entry.until = until;
+    else coolDowns.set(owner, {
+        until,
+        coolDown
+    });
+    coolDownTimer ??= setInterval(runCoolDowns, COOL_DOWN_RESOLUTION);
+};
 function useDirection(key, value, column) {
     const ref = useRef(void 0);
-    const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
+    const [, setCoolDownCount] = useState(0);
+    const prev = ref.current;
+    const sameCell = prev?.key === key && prev?.column === column;
     const { type: dataType } = column;
     const decimals = isTypeDescriptor(dataType) ? dataType.formatting?.decimals : void 0;
-    const direction = key === prevKey && isValidNumber(value) && isValidNumber(prevValue) && column === prevColumn ? getMovingValueDirection(value, prevDirection, prevValue, decimals) : "";
+    const move = prev && sameCell && isValidNumber(value) && isValidNumber(prev.value) ? getMovingValueDirection(value, prev.lastMove, prev.value, decimals) : "";
+    const changed = "" !== move;
+    const now = performance.now();
+    const hotInterval = getRendererSetting(column, "hotInterval", DEFAULT_HOT_INTERVAL);
+    let hotUntil = prev && sameCell ? prev.hotUntil : 0;
+    let hotDirection = prev && sameCell ? prev.hotDirection : void 0;
+    if (prev && changed && now - prev.lastChange < hotInterval) {
+        hotUntil = now + getRendererSetting(column, "hotExitDelay", DEFAULT_HOT_EXIT_DELAY);
+        hotDirection = isUp(move) ? "up" : "down";
+    }
+    const hot = now < hotUntil ? hotDirection : void 0;
+    const wasHot = sameCell && prev?.hot !== void 0;
+    let direction = "";
+    let flashStart = 0;
+    let cooling;
+    if (hot) ;
+    else if (prev && wasHot && !changed) cooling = prev.hot;
+    else if (prev && sameCell) {
+        const sameDirection = isUp(move) && isUp(prev.direction) || isDown(move) && isDown(prev.direction);
+        const keepCurrentFlash = sameDirection && now - prev.flashStart < getRendererSetting(column, "minFlashInterval", DEFAULT_MIN_FLASH_INTERVAL);
+        direction = keepCurrentFlash ? prev.direction : move;
+        flashStart = keepCurrentFlash ? prev.flashStart : move ? now : 0;
+    }
+    const lastMove = changed ? move : prev?.lastMove ?? "";
+    const lastChange = changed ? now : prev && sameCell ? prev.lastChange : 0;
     useEffect(()=>{
-        ref.current = [
+        ref.current = {
             key,
             value,
             column,
-            direction
-        ];
+            lastMove,
+            direction,
+            flashStart,
+            lastChange,
+            hotUntil,
+            hotDirection,
+            hot
+        };
+        if (hot) scheduleCoolDown(ref, hotUntil, ()=>setCoolDownCount((n)=>n + 1));
     });
-    return direction;
+    useEffect(()=>()=>{
+            coolDowns.delete(ref);
+        }, []);
+    return {
+        direction,
+        hot,
+        cooling
+    };
 }
-export { useDirection };
+export { DEFAULT_HOT_EXIT_DELAY, DEFAULT_HOT_INTERVAL, DEFAULT_MIN_FLASH_INTERVAL, useDirection };

package/src/column-menu/ColumnMenu.js

@@ -4,7 +4,7 @@ import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { IconButton } from "@vuu-ui/vuu-ui-controls";
 import clsx from "clsx";
-import { useCallback } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { useTableContext } from "../table-provider/TableProvider.js";
 import { buildAggregationMenuItems, buildGroupMenu, buildPinMenuItems, buildSortMenu, buildVisibilityMenuItems, getColumnMenuActionType } from "./column-menu-utils.js";
 import ColumnMenu from "./ColumnMenu.css";
@@ -17,14 +17,49 @@ const defaultColumnMenuPermissions = {
     allowRemove: true,
     allowPin: true
 };
-const ColumnMenu_ColumnMenu = ({ className, column, menuActionHandler: menuActionHandlerProp, menuPermissions: { allowSort, allowGroup, allowAggregation, allowHide, allowRemove, allowPin } = defaultColumnMenuPermissions })=>{
+const stopPropagation = (evt)=>{
+    evt.stopPropagation();
+};
+const ColumnMenu_ColumnMenu = (props)=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-column-menu",
         css: ColumnMenu,
         window: targetWindow
     });
+    const [mountReason, setMountReason] = useState();
+    const mountOnKeyboardFocus = useCallback((evt)=>{
+        if (evt.currentTarget.matches(":focus-visible")) setMountReason("focus");
+    }, []);
+    const mountOnClick = useCallback((evt)=>{
+        evt.stopPropagation();
+        setMountReason("click");
+    }, []);
+    return mountReason ? /*#__PURE__*/ jsx(ColumnMenuContent, {
+        ...props,
+        focusTriggerOnMount: "focus" === mountReason,
+        openOnMount: "click" === mountReason
+    }) : /*#__PURE__*/ jsx(ColumnMenuButton, {
+        className: props.className,
+        onClick: mountOnClick,
+        onFocus: mountOnKeyboardFocus
+    });
+};
+const ColumnMenuButton = ({ className, ...props })=>/*#__PURE__*/ jsx(IconButton, {
+        appearance: "transparent",
+        "data-embedded": true,
+        icon: "more-vert",
+        sentiment: "neutral",
+        "aria-label": "Open Column Menu",
+        ...props,
+        className: clsx(classBase, className)
+    });
+const ColumnMenuContent = ({ className, column, focusTriggerOnMount, openOnMount, menuActionHandler: menuActionHandlerProp, menuPermissions: { allowSort, allowGroup, allowAggregation, allowHide, allowRemove, allowPin } = defaultColumnMenuPermissions })=>{
     const { dataSource, menuActionHandler } = useTableContext(true);
+    const triggerRef = useRef(null);
+    useLayoutEffect(()=>{
+        if (focusTriggerOnMount) triggerRef.current?.focus();
+    }, []);
     const menuActionClickHandler = useCallback((evt)=>{
         const columnMenuActionType = getColumnMenuActionType(evt.target);
         if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) return menuActionHandler(columnMenuActionType, column);
@@ -38,20 +73,14 @@ const ColumnMenu_ColumnMenu = ({ className, column, menuActionHandler: menuActio
     const aggregationMenu = buildAggregationMenuItems(column, dataSource, menuActionClickHandler, allowAggregation);
     const visibilityMenuItems = buildVisibilityMenuItems(column, menuActionClickHandler, allowHide, allowRemove);
     const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);
-    const handleClick = useCallback((evt)=>{
-        evt.stopPropagation();
-    }, []);
     return /*#__PURE__*/ jsxs(Menu, {
+        defaultOpen: openOnMount,
         children: [
             /*#__PURE__*/ jsx(MenuTrigger, {
-                children: /*#__PURE__*/ jsx(IconButton, {
-                    appearance: "transparent",
-                    className: clsx(classBase, className),
-                    "data-embedded": true,
-                    icon: "more-vert",
-                    sentiment: "neutral",
-                    "aria-label": "Open Column Menu",
-                    onClick: handleClick
+                children: /*#__PURE__*/ jsx(ColumnMenuButton, {
+                    className: className,
+                    onClick: stopPropagation,
+                    ref: triggerRef
                 })
             }),
             /*#__PURE__*/ jsxs(MenuPanel, {

package/types/cell-renderers/background-cell/useDirection.d.ts

@@ -1,3 +1,32 @@
 import { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { valueChangeDirection } from "@vuu-ui/vuu-utils";
-export declare function useDirection(key: string, value: unknown, column: RuntimeColumnDescriptor): valueChangeDirection;
+/**
+ * A flash is not restarted if the cell flashed in the same direction more
+ * recently than this. While a cell keeps changing, its current flash keeps
+ * fading rather than restarting on every change. Restarting animations is
+ * the main cost of flashing cells at high update rates and adds little
+ * information when a value changes several times a second. A change of
+ * direction always flashes immediately. Configurable per column with
+ * renderer.minFlashInterval (ms), 0 restarts on every change.
+ */
+export declare const DEFAULT_MIN_FLASH_INTERVAL = 1000;
+/**
+ * A cell whose value changes again within this many ms of its previous
+ * change is 'hot': instead of flashing it shows a steady tint in the
+ * direction of its latest move, with no animation. Configurable per column
+ * with renderer.hotInterval (ms), 0 disables the hot state.
+ */
+export declare const DEFAULT_HOT_INTERVAL = 500;
+/**
+ * A hot cell cools down after this many ms without a change: its pale tint
+ * fades out. It does not flash, a bold flash always means a move after a
+ * quiet spell. Configurable with renderer.hotExitDelay (ms).
+ */
+export declare const DEFAULT_HOT_EXIT_DELAY = 1000;
+export type HotDirection = "up" | "down";
+export declare function useDirection(key: string, value: unknown, column: RuntimeColumnDescriptor): {
+    direction: valueChangeDirection;
+    hot?: HotDirection;
+    /** a hot cell that has just gone quiet, its tint fades out */
+    cooling?: HotDirection;
+};

package/types/column-menu/ColumnMenu.d.ts

@@ -7,4 +7,16 @@ export interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {
     menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;
     menuPermissions?: ColumnMenuPermissions;
 }
-export declare const ColumnMenu: ({ className, column, menuActionHandler: menuActionHandlerProp, menuPermissions: { allowSort, allowGroup, allowAggregation, allowHide, allowRemove, allowPin, }, }: ColumnMenuProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders only the trigger button until a user shows interest in the menu.
+ * A table has a column menu in every header cell, and the full menu (popup,
+ * menu items, table context) is only needed for the one a user opens.
+ *
+ * A click mounts the full menu, already open. Keyboard focus mounts it
+ * without opening it, and passes focus on to the new trigger (mounting
+ * replaces the button), so the key press that follows reaches the real menu
+ * trigger and opens the menu with focus inside it. Focus from a mouse click
+ * is not :focus-visible and is left to the click, so the button is not
+ * replaced between mouse down and mouse up.
+ */
+export declare const ColumnMenu: (props: ColumnMenuProps) => import("react/jsx-runtime").JSX.Element;