@vuu-ui/vuu-table-extras 0.13.13 → 0.13.14

package/cjs/column-menu/ColumnMenu.js

@@ -5,12 +5,12 @@ var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var TableProvider = require('../table-provider/TableProvider.js');
 var cx = require('clsx');
 var react = require('react');
-var ColumnMenu$1 = require('./ColumnMenu.css.js');
-var columnMenuUtils = require('./column-menu-utils.js');
 var TableSettingsPanel = require('../table-column-settings/TableSettingsPanel.js');
+var TableProvider = require('../table-provider/TableProvider.js');
+var columnMenuUtils = require('./column-menu-utils.js');
+var ColumnMenu$1 = require('./ColumnMenu.css.js');
 
 const classBase = "vuuColumnMenu";
 const defaultColumnMenuPermissions = {

package/cjs/column-menu/ColumnMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { Menu, MenuPanel, MenuTrigger } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useTableContext } from \"../table-provider/TableProvider\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, MouseEventHandler, useCallback } from \"react\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\nimport {\n  buildAggregationMenuItems,\n  buildPinMenuItems,\n  buildGroupMenu,\n  buildSortMenu,\n  buildVisibilityMenuItems,\n  ColumnMenuActionType,\n  getColumnMenuActionType,\n  type MenuItemClickHandler,\n  buildSettingsMenuItems,\n} from \"./column-menu-utils\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { defaultTableSettingsPermissions } from \"../table-column-settings/TableSettingsPanel\";\n\nconst classBase = \"vuuColumnMenu\";\n\nconst defaultColumnMenuPermissions: Readonly<ColumnMenuPermissions> = {\n  allowSort: true,\n  allowGroup: true,\n  allowAggregation: true,\n  allowHide: true,\n  allowPin: true,\n  allowColumnSettings: true,\n  allowTableSettings: defaultTableSettingsPermissions,\n};\n\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: ColumnDescriptor;\n  menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n  menuPermissions?: ColumnMenuPermissions;\n}\n\nexport const ColumnMenu = ({\n  className,\n  column,\n  menuActionHandler: menuActionHandlerProp,\n  menuPermissions: {\n    allowSort,\n    allowGroup,\n    allowAggregation,\n    allowHide,\n    allowPin,\n    allowColumnSettings,\n    allowTableSettings,\n  } = defaultColumnMenuPermissions,\n}: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, menuActionHandler } = useTableContext(true);\n\n  const menuActionClickHandler = useCallback<MenuItemClickHandler>(\n    (evt) => {\n      const columnMenuActionType = getColumnMenuActionType(evt.target);\n      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {\n        return menuActionHandler(columnMenuActionType, column);\n      }\n    },\n    [column, menuActionHandler, menuActionHandlerProp],\n  );\n\n  const sortMenu = buildSortMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowSort,\n  );\n  const groupMenu = buildGroupMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowGroup,\n  );\n  const aggregationMenu = buildAggregationMenuItems(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowAggregation,\n  );\n  const visibilityMenuItems = buildVisibilityMenuItems(\n    column,\n    menuActionClickHandler,\n    allowHide,\n  );\n  const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);\n  const settingsMenuItems = buildSettingsMenuItems(\n    column,\n    menuActionClickHandler,\n    allowColumnSettings,\n    allowTableSettings,\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      // Prevent sort from triggering if the click were to bubble.\n      evt.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <Menu>\n      <MenuTrigger>\n        <IconButton\n          appearance=\"transparent\"\n          className={cx(classBase, className)}\n          data-embedded\n          icon=\"more-vert\"\n          sentiment=\"neutral\"\n          aria-label=\"Open Column Menu\"\n          onClick={handleClick}\n        />\n      </MenuTrigger>\n      <MenuPanel>\n        {sortMenu}\n        {groupMenu}\n        {aggregationMenu}\n        {visibilityMenuItems}\n        {pinMenu}\n        {settingsMenuItems}\n      </MenuPanel>\n    </Menu>\n  );\n};\n"],"names":["defaultTableSettingsPermissions","useWindow","useComponentCssInjection","columnMenuCss","useTableContext","useCallback","getColumnMenuActionType","buildSortMenu","buildGroupMenu","buildAggregationMenuItems","buildVisibilityMenuItems","buildPinMenuItems","buildSettingsMenuItems","Menu","jsx","MenuTrigger","IconButton","MenuPanel"],"mappings":"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"}
+{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { Menu, MenuPanel, MenuTrigger } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, MouseEventHandler, useCallback } from \"react\";\nimport { defaultTableSettingsPermissions } from \"../table-column-settings/TableSettingsPanel\";\nimport { useTableContext } from \"../table-provider/TableProvider\";\nimport {\n  buildAggregationMenuItems,\n  buildGroupMenu,\n  buildPinMenuItems,\n  buildSettingsMenuItems,\n  buildSortMenu,\n  buildVisibilityMenuItems,\n  ColumnMenuActionType,\n  getColumnMenuActionType,\n  type MenuItemClickHandler,\n} from \"./column-menu-utils\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\n\nconst defaultColumnMenuPermissions: Readonly<ColumnMenuPermissions> = {\n  allowSort: true,\n  allowGroup: true,\n  allowAggregation: true,\n  allowHide: true,\n  allowPin: true,\n  allowColumnSettings: true,\n  allowTableSettings: defaultTableSettingsPermissions,\n};\n\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: ColumnDescriptor;\n  menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n  menuPermissions?: ColumnMenuPermissions;\n}\n\nexport const ColumnMenu = ({\n  className,\n  column,\n  menuActionHandler: menuActionHandlerProp,\n  menuPermissions: {\n    allowSort,\n    allowGroup,\n    allowAggregation,\n    allowHide,\n    allowPin,\n    allowColumnSettings,\n    allowTableSettings,\n  } = defaultColumnMenuPermissions,\n}: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, menuActionHandler } = useTableContext(true);\n\n  const menuActionClickHandler = useCallback<MenuItemClickHandler>(\n    (evt) => {\n      const columnMenuActionType = getColumnMenuActionType(evt.target);\n      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {\n        return menuActionHandler(columnMenuActionType, column);\n      }\n    },\n    [column, menuActionHandler, menuActionHandlerProp],\n  );\n\n  const sortMenu = buildSortMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowSort,\n  );\n  const groupMenu = buildGroupMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowGroup,\n  );\n  const aggregationMenu = buildAggregationMenuItems(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowAggregation,\n  );\n  const visibilityMenuItems = buildVisibilityMenuItems(\n    column,\n    menuActionClickHandler,\n    allowHide,\n  );\n  const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);\n  const settingsMenuItems = buildSettingsMenuItems(\n    column,\n    menuActionClickHandler,\n    allowColumnSettings,\n    allowTableSettings,\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      // Prevent sort from triggering if the click were to bubble.\n      evt.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <Menu>\n      <MenuTrigger>\n        <IconButton\n          appearance=\"transparent\"\n          className={cx(classBase, className)}\n          data-embedded\n          icon=\"more-vert\"\n          sentiment=\"neutral\"\n          aria-label=\"Open Column Menu\"\n          onClick={handleClick}\n        />\n      </MenuTrigger>\n      <MenuPanel>\n        {sortMenu}\n        {groupMenu}\n        {aggregationMenu}\n        {visibilityMenuItems}\n        {pinMenu}\n        {settingsMenuItems}\n      </MenuPanel>\n    </Menu>\n  );\n};\n"],"names":["defaultTableSettingsPermissions","useWindow","useComponentCssInjection","columnMenuCss","useTableContext","useCallback","getColumnMenuActionType","buildSortMenu","buildGroupMenu","buildAggregationMenuItems","buildVisibilityMenuItems","buildPinMenuItems","buildSettingsMenuItems","Menu","jsx","MenuTrigger","IconButton","MenuPanel"],"mappings":"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"}

package/cjs/datasource-stats/DatasourceStats.js

@@ -6,9 +6,18 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var react = require('react');
 var DatasourceStats = require('./DatasourceStats.css.js');
+var vuuUtils = require('@vuu-ui/vuu-utils');
 
 const classBase = "vuuDatasourceStats";
 const numberFormatter = new Intl.NumberFormat();
+const timeFormatter = vuuUtils.formatDate({ time: "hh:mm:ss" });
+const formatTime = (ts) => {
+  if (typeof ts === "number") {
+    return timeFormatter(new Date(ts));
+  } else {
+    return void 0;
+  }
+};
 const DataSourceStats = ({
   className: classNameProp,
   dataSource
@@ -21,19 +30,35 @@ const DataSourceStats = ({
   });
   const [range, setRange] = react.useState(dataSource.range);
   const [size, setSize] = react.useState(dataSource.size);
+  const [freezeTime, setFreezeTime] = react.useState(
+    formatTime(dataSource.freezeTimestamp)
+  );
+  const handleFreeze = react.useCallback(
+    (isFrozen, freezeTimestamp) => {
+      console.log(`DatasourceStats isFrozen ${isFrozen}`);
+      if (isFrozen) {
+        setFreezeTime(formatTime(freezeTimestamp));
+      } else {
+        setFreezeTime(void 0);
+      }
+    },
+    []
+  );
   react.useEffect(() => {
     setSize(dataSource.size);
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
+    dataSource.on("freeze", handleFreeze);
     return () => {
       dataSource.removeListener("resize", setSize);
       dataSource.removeListener("range", setRange);
     };
-  }, [dataSource]);
+  }, [dataSource, handleFreeze]);
   const className = cx(classBase, classNameProp);
   const from = numberFormatter.format(range.firstRowInViewport);
   const to = numberFormatter.format(range.lastRowInViewport);
   const value = numberFormatter.format(size);
+  console.log(`range = ${JSON.stringify(range)}`);
   if (size === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: "No Rows to display" }) });
   } else {
@@ -43,7 +68,14 @@ const DataSourceStats = ({
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "-" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-range`, children: to }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "of" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-size`, children: value })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-size`, children: value }),
+      freezeTime !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `${classBase}-label`,
+          children: `(frozen at ${freezeTime})`
+        }
+      ) : null
     ] });
   }
 };

package/cjs/datasource-stats/DatasourceStats.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceStats.js","sources":["../../src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useEffect, useState } from \"react\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\n\ninterface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {\n  dataSource: DataSource;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nexport const DataSourceStats = ({\n  className: classNameProp,\n  dataSource,\n}: DataSourceStatsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-datasource-stats\",\n    css: dataSourceStats,\n    window: targetWindow,\n  });\n\n  const [range, setRange] = useState<Range>(dataSource.range);\n  const [size, setSize] = useState(dataSource.size);\n  useEffect(() => {\n    setSize(dataSource.size);\n    dataSource.on(\"resize\", setSize);\n    dataSource.on(\"range\", setRange);\n    return () => {\n      dataSource.removeListener(\"resize\", setSize);\n      dataSource.removeListener(\"range\", setRange);\n    };\n  }, [dataSource]);\n\n  const className = cx(classBase, classNameProp);\n  const from = numberFormatter.format(range.firstRowInViewport);\n  const to = numberFormatter.format(range.lastRowInViewport);\n  const value = numberFormatter.format(size);\n  if (size === 0) {\n    return (\n      <div className={className}>\n        <span className={`${classBase}-label`}>No Rows to display</span>\n      </div>\n    );\n  } else {\n    return (\n      <div className={className}>\n        <span className={`${classBase}-label`}>Rows</span>\n        <span className={`${classBase}-range`}>{from}</span>\n        <span>-</span>\n        <span className={`${classBase}-range`}>{to}</span>\n        <span>of</span>\n        <span className={`${classBase}-size`}>{value}</span>\n      </div>\n    );\n  }\n};\n"],"names":["useWindow","useComponentCssInjection","dataSourceStats","useState","useEffect","jsx","jsxs"],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,eAAA,GAAkB,IAAI,IAAA,CAAK,YAAa,EAAA;AAEvC,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAW,EAAA,aAAA;AAAA,EACX;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAAC,cAAA,CAAgB,WAAW,KAAK,CAAA;AAC1D,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,cAAA,CAAS,WAAW,IAAI,CAAA;AAChD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,WAAW,IAAI,CAAA;AACvB,IAAW,UAAA,CAAA,EAAA,CAAG,UAAU,OAAO,CAAA;AAC/B,IAAW,UAAA,CAAA,EAAA,CAAG,SAAS,QAAQ,CAAA;AAC/B,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAC3C,MAAW,UAAA,CAAA,cAAA,CAAe,SAAS,QAAQ,CAAA;AAAA,KAC7C;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA;AAC7C,EAAA,MAAM,IAAO,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,kBAAkB,CAAA;AAC5D,EAAA,MAAM,EAAK,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,iBAAiB,CAAA;AACzD,EAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA;AACzC,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EACH,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAAU,MAAA,CAAA,EAAA,QAAA,EAAA,oBAAA,EAAkB,CAC3D,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IACE,uBAAAC,eAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,qCAC1C,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,sBAC7CA,cAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,qCACN,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAG,EAAA,EAAA,EAAA,CAAA;AAAA,sBAC3CA,cAAA,CAAC,UAAK,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,qCACP,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAM,EAAA,KAAA,EAAA;AAAA,KAC/C,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"DatasourceStats.js","sources":["../../src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useEffect, useState } from \"react\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\nimport { formatDate, Range } from \"@vuu-ui/vuu-utils\";\n\ninterface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {\n  dataSource: DataSource;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\nconst timeFormatter = formatDate({ time: \"hh:mm:ss\" });\n\nconst formatTime = (ts: number | undefined) => {\n  if (typeof ts === \"number\") {\n    return timeFormatter(new Date(ts));\n  } else {\n    return undefined;\n  }\n};\n\nexport const DataSourceStats = ({\n  className: classNameProp,\n  dataSource,\n}: DataSourceStatsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-datasource-stats\",\n    css: dataSourceStats,\n    window: targetWindow,\n  });\n\n  const [range, setRange] = useState<Range>(dataSource.range);\n  const [size, setSize] = useState(dataSource.size);\n  const [freezeTime, setFreezeTime] = useState(\n    formatTime(dataSource.freezeTimestamp),\n  );\n\n  const handleFreeze = useCallback(\n    (isFrozen: boolean, freezeTimestamp: number) => {\n      console.log(`DatasourceStats isFrozen ${isFrozen}`);\n      if (isFrozen) {\n        setFreezeTime(formatTime(freezeTimestamp));\n      } else {\n        setFreezeTime(undefined);\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    setSize(dataSource.size);\n    dataSource.on(\"resize\", setSize);\n    dataSource.on(\"range\", setRange);\n    dataSource.on(\"freeze\", handleFreeze);\n    return () => {\n      dataSource.removeListener(\"resize\", setSize);\n      dataSource.removeListener(\"range\", setRange);\n    };\n  }, [dataSource, handleFreeze]);\n\n  const className = cx(classBase, classNameProp);\n  const from = numberFormatter.format(range.firstRowInViewport);\n  const to = numberFormatter.format(range.lastRowInViewport);\n  const value = numberFormatter.format(size);\n\n  console.log(`range = ${JSON.stringify(range)}`);\n\n  if (size === 0) {\n    return (\n      <div className={className}>\n        <span className={`${classBase}-label`}>No Rows to display</span>\n      </div>\n    );\n  } else {\n    return (\n      <div className={className}>\n        <span className={`${classBase}-label`}>Rows</span>\n        <span className={`${classBase}-range`}>{from}</span>\n        <span>-</span>\n        <span className={`${classBase}-range`}>{to}</span>\n        <span>of</span>\n        <span className={`${classBase}-size`}>{value}</span>\n        {freezeTime !== undefined ? (\n          <span\n            className={`${classBase}-label`}\n          >{`(frozen at ${freezeTime})`}</span>\n        ) : null}\n      </div>\n    );\n  }\n};\n"],"names":["formatDate","useWindow","useComponentCssInjection","dataSourceStats","useState","useCallback","useEffect","jsx","jsxs"],"mappings":"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"}

package/cjs/freeze-control/FreezeControl.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var freezeControlCss = "\n\n.FreezeControl {\n    align-items: center;\n    background-color: var(--salt-container-secondary-background);\n    border-radius: 6px;\n    display: inline-grid;\n    grid-template-columns: auto auto auto 1fr;\n    grid-template-rows: var(--salt-size-base);\n    column-gap: var(--salt-spacing-200);\n    padding: 0 var(--salt-spacing-200);\n\n    .saltSwitch {\n        grid-area: 1/1/2/2;\n        .saltSwitch-track {\n            height: 24px;\n        }\n    }\n\n    .FreezeControl-label {\n        grid-area: 1/2/2/3;\n    }\n\n    .FreezeControl-lastUpdated {\n        grid-area: 1/3/2/4;\n    }\n\n    & + .saltBadge-badge {\n        cursor: default;\n        display: none;\n    }\n    &.FreezeControl-showBadge + .saltBadge-badge {\n        display: inline-block;\n    }\n\n\n}\n\n";
+
+module.exports = freezeControlCss;
+//# sourceMappingURL=FreezeControl.css.js.map

package/cjs/freeze-control/FreezeControl.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FreezeControl.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/freeze-control/FreezeControl.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var core = require('@salt-ds/core');
+var FreezeControl$1 = require('./FreezeControl.css.js');
+var useFreezeControl = require('./useFreezeControl.js');
+var cx = require('clsx');
+
+const classBase = "FreezeControl";
+const FreezeControl = ({
+  dataSource,
+  className,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-freeze-control",
+    css: FreezeControl$1,
+    window: targetWindow
+  });
+  const { label, isFrozen, lastUpdateMessage, newRecordCount, onSwitchChange } = useFreezeControl.useFreezeControl({ dataSource });
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { value: newRecordCount, max: 99, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className, {
+        [`${classBase}-showBadge`]: newRecordCount > 0
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Switch,
+          {
+            checked: isFrozen,
+            onChange: onSwitchChange,
+            className: "vuuLarge"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-lastUpdated`, children: lastUpdateMessage })
+      ]
+    }
+  ) });
+};
+
+exports.FreezeControl = FreezeControl;
+//# sourceMappingURL=FreezeControl.js.map

package/cjs/freeze-control/FreezeControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FreezeControl.js","sources":["../../src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Badge, Switch } from \"@salt-ds/core\";\nimport freezeControlCss from \"./FreezeControl.css\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nconst classBase = \"FreezeControl\";\n\nexport interface FreezeControlProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FreezeProps {}\n\nexport const FreezeControl = ({\n  dataSource,\n  className,\n  ...htmlAttributes\n}: FreezeControlProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-freeze-control\",\n    css: freezeControlCss,\n    window: targetWindow,\n  });\n\n  const { label, isFrozen, lastUpdateMessage, newRecordCount, onSwitchChange } =\n    useFreezeControl({ dataSource });\n\n  return (\n    <Badge value={newRecordCount} max={99}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-showBadge`]: newRecordCount > 0,\n        })}\n      >\n        <span className={`${classBase}-label`}>{label}</span>\n        <Switch\n          checked={isFrozen}\n          onChange={onSwitchChange}\n          className=\"vuuLarge\"\n        />\n        <span className={`${classBase}-lastUpdated`}>{lastUpdateMessage}</span>\n      </div>\n    </Badge>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","freezeControlCss","useFreezeControl","jsx","Badge","jsxs","Switch"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,eAAA;AAMX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA0B,KAAA;AACxB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAU,iBAAmB,EAAA,cAAA,EAAgB,gBAC1D,GAAAC,iCAAA,CAAiB,EAAE,UAAA,EAAY,CAAA;AAEjC,EAAA,uBACGC,cAAA,CAAAC,UAAA,EAAA,EAAM,KAAO,EAAA,cAAA,EAAgB,KAAK,EACjC,EAAA,QAAA,kBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,cAAiB,GAAA;AAAA,OAC9C,CAAA;AAAA,MAED,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,wBAC9CA,cAAA;AAAA,UAACG,WAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,QAAA;AAAA,YACT,QAAU,EAAA,cAAA;AAAA,YACV,SAAU,EAAA;AAAA;AAAA,SACZ;AAAA,uCACC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,gBAAiB,QAAkB,EAAA,iBAAA,EAAA;AAAA;AAAA;AAAA,GAEpE,EAAA,CAAA;AAEJ;;;;"}

package/cjs/freeze-control/useFreezeControl.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const timeFormatter = vuuUtils.formatDate({ time: "hh:mm:ss" });
+const formatFreezeTime = (ts) => {
+  if (ts === void 0) {
+    throw Error("[useFreezeControl] formatFreezeTime, freezeTime undefined");
+  }
+  return timeFormatter(new Date(ts));
+};
+const FreezeState = (dataSource, newRecordCount) => ({
+  isFrozen: dataSource.isFrozen ?? false,
+  label: dataSource.isFrozen ? "View Frozen" : "Freeze View",
+  lastUpdateMessage: dataSource.isFrozen ? `at ${formatFreezeTime(dataSource.freezeTimestamp)}` : "",
+  newRecordCount
+});
+const useFreezeControl = ({ dataSource }) => {
+  const { VuuDataSource } = vuuUtils.useData();
+  const table = react.useMemo(() => {
+    if (dataSource.table === void 0) {
+      throw Error(`[useFreezeControls] dataSource must have VuuTable`);
+    }
+    return dataSource.table;
+  }, [dataSource]);
+  const [freezeState, setFreezeState] = react.useState(
+    FreezeState(dataSource, 0)
+  );
+  const [startTrackingNewRows, stopTrackingNewRows] = react.useMemo(() => {
+    let ds = void 0;
+    const dataCallback = (message) => {
+      if (vuuUtils.messageHasSize(message)) {
+        setFreezeState(FreezeState(dataSource, message.size));
+      }
+    };
+    const start = (ts) => {
+      ds = new VuuDataSource({ table });
+      ds.subscribe(
+        {
+          filterSpec: {
+            filter: `created > ${ts}`
+          }
+        },
+        dataCallback
+      );
+    };
+    const stop = () => {
+      ds?.unsubscribe();
+    };
+    return [start, stop];
+  }, [VuuDataSource, dataSource, table]);
+  const handleSwitchChange = react.useCallback(
+    (evt) => {
+      if (evt.target.checked) {
+        dataSource.freeze?.();
+        startTrackingNewRows(dataSource.freezeTimestamp);
+      } else {
+        dataSource.unfreeze?.();
+        stopTrackingNewRows();
+      }
+      setFreezeState(FreezeState(dataSource, 0));
+    },
+    [dataSource, startTrackingNewRows, stopTrackingNewRows]
+  );
+  return {
+    ...freezeState,
+    onSwitchChange: handleSwitchChange
+  };
+};
+
+exports.useFreezeControl = useFreezeControl;
+//# sourceMappingURL=useFreezeControl.js.map

package/cjs/freeze-control/useFreezeControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFreezeControl.js","sources":["../../src/freeze-control/useFreezeControl.ts"],"sourcesContent":["import {\n  DataSource,\n  DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { formatDate, messageHasSize, useData } from \"@vuu-ui/vuu-utils\";\nimport { ChangeEventHandler, useCallback, useMemo, useState } from \"react\";\n\nexport interface FreezeProps {\n  dataSource: DataSource;\n}\n\ntype FreezeState = {\n  isFrozen: boolean;\n  label: string;\n  lastUpdateMessage: string;\n  newRecordCount: number;\n};\n\nconst timeFormatter = formatDate({ time: \"hh:mm:ss\" });\n\nconst formatFreezeTime = (ts?: number) => {\n  if (ts === undefined) {\n    throw Error(\"[useFreezeControl] formatFreezeTime, freezeTime undefined\");\n  }\n  return timeFormatter(new Date(ts));\n};\n\nconst FreezeState = (\n  dataSource: DataSource,\n  newRecordCount: number,\n): FreezeState => ({\n  isFrozen: dataSource.isFrozen ?? false,\n  label: dataSource.isFrozen ? \"View Frozen\" : \"Freeze View\",\n  lastUpdateMessage: dataSource.isFrozen\n    ? `at ${formatFreezeTime(dataSource.freezeTimestamp)}`\n    : \"\",\n  newRecordCount,\n});\n\nexport const useFreezeControl = ({ dataSource }: FreezeProps) => {\n  const { VuuDataSource } = useData();\n  const table = useMemo<VuuTable>(() => {\n    if (dataSource.table === undefined) {\n      throw Error(`[useFreezeControls] dataSource must have VuuTable`);\n    }\n    return dataSource.table;\n  }, [dataSource]);\n  const [freezeState, setFreezeState] = useState<FreezeState>(\n    FreezeState(dataSource, 0),\n  );\n\n  const [startTrackingNewRows, stopTrackingNewRows] = useMemo(() => {\n    let ds: DataSource | undefined = undefined;\n\n    const dataCallback: DataSourceSubscribeCallback = (message) => {\n      if (messageHasSize(message)) {\n        setFreezeState(FreezeState(dataSource, message.size));\n      }\n    };\n\n    const start = (ts: number) => {\n      ds = new VuuDataSource({ table });\n      ds.subscribe(\n        {\n          filterSpec: {\n            filter: `created > ${ts}`,\n          },\n        },\n        dataCallback,\n      );\n    };\n\n    const stop = () => {\n      ds?.unsubscribe();\n    };\n\n    return [start, stop];\n  }, [VuuDataSource, dataSource, table]);\n\n  const handleSwitchChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (evt) => {\n      if (evt.target.checked) {\n        dataSource.freeze?.();\n        startTrackingNewRows(dataSource.freezeTimestamp as number);\n      } else {\n        dataSource.unfreeze?.();\n        stopTrackingNewRows();\n      }\n      setFreezeState(FreezeState(dataSource, 0));\n    },\n    [dataSource, startTrackingNewRows, stopTrackingNewRows],\n  );\n\n  return {\n    ...freezeState,\n    onSwitchChange: handleSwitchChange,\n  };\n};\n"],"names":["formatDate","useData","useMemo","useState","messageHasSize","useCallback"],"mappings":"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"}

package/cjs/index.js

@@ -28,6 +28,7 @@ var BaseNumericFormattingSettings = require('./column-formatting-settings/BaseNu
 var DateTimeFormattingSettings = require('./column-formatting-settings/DateTimeFormattingSettings.js');
 var DatasourceStats = require('./datasource-stats/DatasourceStats.js');
 var TableProvider = require('./table-provider/TableProvider.js');
+var FreezeControl = require('./freeze-control/FreezeControl.js');
 
 
 
@@ -65,4 +66,5 @@ exports.DateTimeFormattingSettings = DateTimeFormattingSettings.DateTimeFormatti
 exports.DataSourceStats = DatasourceStats.DataSourceStats;
 exports.TableProvider = TableProvider.TableProvider;
 exports.useTableContext = TableProvider.useTableContext;
+exports.FreezeControl = FreezeControl.FreezeControl;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/column-menu/ColumnMenu.js

@@ -3,12 +3,12 @@ import { Menu, MenuTrigger, MenuPanel } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { IconButton } from '@vuu-ui/vuu-ui-controls';
-import { useTableContext } from '../table-provider/TableProvider.js';
 import cx from 'clsx';
 import { useCallback } from 'react';
-import columnMenuCss from './ColumnMenu.css.js';
-import { getColumnMenuActionType, buildSortMenu, buildGroupMenu, buildAggregationMenuItems, buildVisibilityMenuItems, buildPinMenuItems, buildSettingsMenuItems } from './column-menu-utils.js';
 import { defaultTableSettingsPermissions } from '../table-column-settings/TableSettingsPanel.js';
+import { useTableContext } from '../table-provider/TableProvider.js';
+import { getColumnMenuActionType, buildSortMenu, buildGroupMenu, buildAggregationMenuItems, buildVisibilityMenuItems, buildPinMenuItems, buildSettingsMenuItems } from './column-menu-utils.js';
+import columnMenuCss from './ColumnMenu.css.js';
 
 const classBase = "vuuColumnMenu";
 const defaultColumnMenuPermissions = {

package/esm/column-menu/ColumnMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { Menu, MenuPanel, MenuTrigger } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useTableContext } from \"../table-provider/TableProvider\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, MouseEventHandler, useCallback } from \"react\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\nimport {\n  buildAggregationMenuItems,\n  buildPinMenuItems,\n  buildGroupMenu,\n  buildSortMenu,\n  buildVisibilityMenuItems,\n  ColumnMenuActionType,\n  getColumnMenuActionType,\n  type MenuItemClickHandler,\n  buildSettingsMenuItems,\n} from \"./column-menu-utils\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { defaultTableSettingsPermissions } from \"../table-column-settings/TableSettingsPanel\";\n\nconst classBase = \"vuuColumnMenu\";\n\nconst defaultColumnMenuPermissions: Readonly<ColumnMenuPermissions> = {\n  allowSort: true,\n  allowGroup: true,\n  allowAggregation: true,\n  allowHide: true,\n  allowPin: true,\n  allowColumnSettings: true,\n  allowTableSettings: defaultTableSettingsPermissions,\n};\n\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: ColumnDescriptor;\n  menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n  menuPermissions?: ColumnMenuPermissions;\n}\n\nexport const ColumnMenu = ({\n  className,\n  column,\n  menuActionHandler: menuActionHandlerProp,\n  menuPermissions: {\n    allowSort,\n    allowGroup,\n    allowAggregation,\n    allowHide,\n    allowPin,\n    allowColumnSettings,\n    allowTableSettings,\n  } = defaultColumnMenuPermissions,\n}: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, menuActionHandler } = useTableContext(true);\n\n  const menuActionClickHandler = useCallback<MenuItemClickHandler>(\n    (evt) => {\n      const columnMenuActionType = getColumnMenuActionType(evt.target);\n      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {\n        return menuActionHandler(columnMenuActionType, column);\n      }\n    },\n    [column, menuActionHandler, menuActionHandlerProp],\n  );\n\n  const sortMenu = buildSortMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowSort,\n  );\n  const groupMenu = buildGroupMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowGroup,\n  );\n  const aggregationMenu = buildAggregationMenuItems(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowAggregation,\n  );\n  const visibilityMenuItems = buildVisibilityMenuItems(\n    column,\n    menuActionClickHandler,\n    allowHide,\n  );\n  const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);\n  const settingsMenuItems = buildSettingsMenuItems(\n    column,\n    menuActionClickHandler,\n    allowColumnSettings,\n    allowTableSettings,\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      // Prevent sort from triggering if the click were to bubble.\n      evt.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <Menu>\n      <MenuTrigger>\n        <IconButton\n          appearance=\"transparent\"\n          className={cx(classBase, className)}\n          data-embedded\n          icon=\"more-vert\"\n          sentiment=\"neutral\"\n          aria-label=\"Open Column Menu\"\n          onClick={handleClick}\n        />\n      </MenuTrigger>\n      <MenuPanel>\n        {sortMenu}\n        {groupMenu}\n        {aggregationMenu}\n        {visibilityMenuItems}\n        {pinMenu}\n        {settingsMenuItems}\n      </MenuPanel>\n    </Menu>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { Menu, MenuPanel, MenuTrigger } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport {\n  ColumnDescriptor,\n  ColumnMenuPermissions,\n} from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, MouseEventHandler, useCallback } from \"react\";\nimport { defaultTableSettingsPermissions } from \"../table-column-settings/TableSettingsPanel\";\nimport { useTableContext } from \"../table-provider/TableProvider\";\nimport {\n  buildAggregationMenuItems,\n  buildGroupMenu,\n  buildPinMenuItems,\n  buildSettingsMenuItems,\n  buildSortMenu,\n  buildVisibilityMenuItems,\n  ColumnMenuActionType,\n  getColumnMenuActionType,\n  type MenuItemClickHandler,\n} from \"./column-menu-utils\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\n\nconst defaultColumnMenuPermissions: Readonly<ColumnMenuPermissions> = {\n  allowSort: true,\n  allowGroup: true,\n  allowAggregation: true,\n  allowHide: true,\n  allowPin: true,\n  allowColumnSettings: true,\n  allowTableSettings: defaultTableSettingsPermissions,\n};\n\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n  column: ColumnDescriptor;\n  menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n  menuPermissions?: ColumnMenuPermissions;\n}\n\nexport const ColumnMenu = ({\n  className,\n  column,\n  menuActionHandler: menuActionHandlerProp,\n  menuPermissions: {\n    allowSort,\n    allowGroup,\n    allowAggregation,\n    allowHide,\n    allowPin,\n    allowColumnSettings,\n    allowTableSettings,\n  } = defaultColumnMenuPermissions,\n}: ColumnMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-menu\",\n    css: columnMenuCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, menuActionHandler } = useTableContext(true);\n\n  const menuActionClickHandler = useCallback<MenuItemClickHandler>(\n    (evt) => {\n      const columnMenuActionType = getColumnMenuActionType(evt.target);\n      if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) {\n        return menuActionHandler(columnMenuActionType, column);\n      }\n    },\n    [column, menuActionHandler, menuActionHandlerProp],\n  );\n\n  const sortMenu = buildSortMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowSort,\n  );\n  const groupMenu = buildGroupMenu(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowGroup,\n  );\n  const aggregationMenu = buildAggregationMenuItems(\n    column,\n    dataSource,\n    menuActionClickHandler,\n    allowAggregation,\n  );\n  const visibilityMenuItems = buildVisibilityMenuItems(\n    column,\n    menuActionClickHandler,\n    allowHide,\n  );\n  const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);\n  const settingsMenuItems = buildSettingsMenuItems(\n    column,\n    menuActionClickHandler,\n    allowColumnSettings,\n    allowTableSettings,\n  );\n\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      // Prevent sort from triggering if the click were to bubble.\n      evt.stopPropagation();\n    },\n    [],\n  );\n\n  return (\n    <Menu>\n      <MenuTrigger>\n        <IconButton\n          appearance=\"transparent\"\n          className={cx(classBase, className)}\n          data-embedded\n          icon=\"more-vert\"\n          sentiment=\"neutral\"\n          aria-label=\"Open Column Menu\"\n          onClick={handleClick}\n        />\n      </MenuTrigger>\n      <MenuPanel>\n        {sortMenu}\n        {groupMenu}\n        {aggregationMenu}\n        {visibilityMenuItems}\n        {pinMenu}\n        {settingsMenuItems}\n      </MenuPanel>\n    </Menu>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/datasource-stats/DatasourceStats.js

@@ -2,11 +2,20 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { useState, useEffect } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import dataSourceStats from './DatasourceStats.css.js';
+import { formatDate } from '@vuu-ui/vuu-utils';
 
 const classBase = "vuuDatasourceStats";
 const numberFormatter = new Intl.NumberFormat();
+const timeFormatter = formatDate({ time: "hh:mm:ss" });
+const formatTime = (ts) => {
+  if (typeof ts === "number") {
+    return timeFormatter(new Date(ts));
+  } else {
+    return void 0;
+  }
+};
 const DataSourceStats = ({
   className: classNameProp,
   dataSource
@@ -19,19 +28,35 @@ const DataSourceStats = ({
   });
   const [range, setRange] = useState(dataSource.range);
   const [size, setSize] = useState(dataSource.size);
+  const [freezeTime, setFreezeTime] = useState(
+    formatTime(dataSource.freezeTimestamp)
+  );
+  const handleFreeze = useCallback(
+    (isFrozen, freezeTimestamp) => {
+      console.log(`DatasourceStats isFrozen ${isFrozen}`);
+      if (isFrozen) {
+        setFreezeTime(formatTime(freezeTimestamp));
+      } else {
+        setFreezeTime(void 0);
+      }
+    },
+    []
+  );
   useEffect(() => {
     setSize(dataSource.size);
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
+    dataSource.on("freeze", handleFreeze);
     return () => {
       dataSource.removeListener("resize", setSize);
       dataSource.removeListener("range", setRange);
     };
-  }, [dataSource]);
+  }, [dataSource, handleFreeze]);
   const className = cx(classBase, classNameProp);
   const from = numberFormatter.format(range.firstRowInViewport);
   const to = numberFormatter.format(range.lastRowInViewport);
   const value = numberFormatter.format(size);
+  console.log(`range = ${JSON.stringify(range)}`);
   if (size === 0) {
     return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: "No Rows to display" }) });
   } else {
@@ -41,7 +66,14 @@ const DataSourceStats = ({
       /* @__PURE__ */ jsx("span", { children: "-" }),
       /* @__PURE__ */ jsx("span", { className: `${classBase}-range`, children: to }),
       /* @__PURE__ */ jsx("span", { children: "of" }),
-      /* @__PURE__ */ jsx("span", { className: `${classBase}-size`, children: value })
+      /* @__PURE__ */ jsx("span", { className: `${classBase}-size`, children: value }),
+      freezeTime !== void 0 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${classBase}-label`,
+          children: `(frozen at ${freezeTime})`
+        }
+      ) : null
     ] });
   }
 };

package/esm/datasource-stats/DatasourceStats.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceStats.js","sources":["../../src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useEffect, useState } from \"react\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\n\ninterface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {\n  dataSource: DataSource;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nexport const DataSourceStats = ({\n  className: classNameProp,\n  dataSource,\n}: DataSourceStatsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-datasource-stats\",\n    css: dataSourceStats,\n    window: targetWindow,\n  });\n\n  const [range, setRange] = useState<Range>(dataSource.range);\n  const [size, setSize] = useState(dataSource.size);\n  useEffect(() => {\n    setSize(dataSource.size);\n    dataSource.on(\"resize\", setSize);\n    dataSource.on(\"range\", setRange);\n    return () => {\n      dataSource.removeListener(\"resize\", setSize);\n      dataSource.removeListener(\"range\", setRange);\n    };\n  }, [dataSource]);\n\n  const className = cx(classBase, classNameProp);\n  const from = numberFormatter.format(range.firstRowInViewport);\n  const to = numberFormatter.format(range.lastRowInViewport);\n  const value = numberFormatter.format(size);\n  if (size === 0) {\n    return (\n      <div className={className}>\n        <span className={`${classBase}-label`}>No Rows to display</span>\n      </div>\n    );\n  } else {\n    return (\n      <div className={className}>\n        <span className={`${classBase}-label`}>Rows</span>\n        <span className={`${classBase}-range`}>{from}</span>\n        <span>-</span>\n        <span className={`${classBase}-range`}>{to}</span>\n        <span>of</span>\n        <span className={`${classBase}-size`}>{value}</span>\n      </div>\n    );\n  }\n};\n"],"names":[],"mappings":";;;;;;;AAaA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,eAAA,GAAkB,IAAI,IAAA,CAAK,YAAa,EAAA;AAEvC,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAW,EAAA,aAAA;AAAA,EACX;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAgB,WAAW,KAAK,CAAA;AAC1D,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,QAAA,CAAS,WAAW,IAAI,CAAA;AAChD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,WAAW,IAAI,CAAA;AACvB,IAAW,UAAA,CAAA,EAAA,CAAG,UAAU,OAAO,CAAA;AAC/B,IAAW,UAAA,CAAA,EAAA,CAAG,SAAS,QAAQ,CAAA;AAC/B,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAC3C,MAAW,UAAA,CAAA,cAAA,CAAe,SAAS,QAAQ,CAAA;AAAA,KAC7C;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA;AAC7C,EAAA,MAAM,IAAO,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,kBAAkB,CAAA;AAC5D,EAAA,MAAM,EAAK,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,iBAAiB,CAAA;AACzD,EAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA;AACzC,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EACH,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAAU,MAAA,CAAA,EAAA,QAAA,EAAA,oBAAA,EAAkB,CAC3D,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IACE,uBAAA,IAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,0BAC1C,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,sBAC7C,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACN,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAG,EAAA,EAAA,EAAA,CAAA;AAAA,sBAC3C,GAAA,CAAC,UAAK,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,0BACP,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAM,EAAA,KAAA,EAAA;AAAA,KAC/C,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"DatasourceStats.js","sources":["../../src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useEffect, useState } from \"react\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\nimport { formatDate, Range } from \"@vuu-ui/vuu-utils\";\n\ninterface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {\n  dataSource: DataSource;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\nconst timeFormatter = formatDate({ time: \"hh:mm:ss\" });\n\nconst formatTime = (ts: number | undefined) => {\n  if (typeof ts === \"number\") {\n    return timeFormatter(new Date(ts));\n  } else {\n    return undefined;\n  }\n};\n\nexport const DataSourceStats = ({\n  className: classNameProp,\n  dataSource,\n}: DataSourceStatsProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-datasource-stats\",\n    css: dataSourceStats,\n    window: targetWindow,\n  });\n\n  const [range, setRange] = useState<Range>(dataSource.range);\n  const [size, setSize] = useState(dataSource.size);\n  const [freezeTime, setFreezeTime] = useState(\n    formatTime(dataSource.freezeTimestamp),\n  );\n\n  const handleFreeze = useCallback(\n    (isFrozen: boolean, freezeTimestamp: number) => {\n      console.log(`DatasourceStats isFrozen ${isFrozen}`);\n      if (isFrozen) {\n        setFreezeTime(formatTime(freezeTimestamp));\n      } else {\n        setFreezeTime(undefined);\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    setSize(dataSource.size);\n    dataSource.on(\"resize\", setSize);\n    dataSource.on(\"range\", setRange);\n    dataSource.on(\"freeze\", handleFreeze);\n    return () => {\n      dataSource.removeListener(\"resize\", setSize);\n      dataSource.removeListener(\"range\", setRange);\n    };\n  }, [dataSource, handleFreeze]);\n\n  const className = cx(classBase, classNameProp);\n  const from = numberFormatter.format(range.firstRowInViewport);\n  const to = numberFormatter.format(range.lastRowInViewport);\n  const value = numberFormatter.format(size);\n\n  console.log(`range = ${JSON.stringify(range)}`);\n\n  if (size === 0) {\n    return (\n      <div className={className}>\n        <span className={`${classBase}-label`}>No Rows to display</span>\n      </div>\n    );\n  } else {\n    return (\n      <div className={className}>\n        <span className={`${classBase}-label`}>Rows</span>\n        <span className={`${classBase}-range`}>{from}</span>\n        <span>-</span>\n        <span className={`${classBase}-range`}>{to}</span>\n        <span>of</span>\n        <span className={`${classBase}-size`}>{value}</span>\n        {freezeTime !== undefined ? (\n          <span\n            className={`${classBase}-label`}\n          >{`(frozen at ${freezeTime})`}</span>\n        ) : null}\n      </div>\n    );\n  }\n};\n"],"names":[],"mappings":"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"}

package/esm/freeze-control/FreezeControl.css.js

@@ -0,0 +1,4 @@
+var freezeControlCss = "\n\n.FreezeControl {\n    align-items: center;\n    background-color: var(--salt-container-secondary-background);\n    border-radius: 6px;\n    display: inline-grid;\n    grid-template-columns: auto auto auto 1fr;\n    grid-template-rows: var(--salt-size-base);\n    column-gap: var(--salt-spacing-200);\n    padding: 0 var(--salt-spacing-200);\n\n    .saltSwitch {\n        grid-area: 1/1/2/2;\n        .saltSwitch-track {\n            height: 24px;\n        }\n    }\n\n    .FreezeControl-label {\n        grid-area: 1/2/2/3;\n    }\n\n    .FreezeControl-lastUpdated {\n        grid-area: 1/3/2/4;\n    }\n\n    & + .saltBadge-badge {\n        cursor: default;\n        display: none;\n    }\n    &.FreezeControl-showBadge + .saltBadge-badge {\n        display: inline-block;\n    }\n\n\n}\n\n";
+
+export { freezeControlCss as default };
+//# sourceMappingURL=FreezeControl.css.js.map

package/esm/freeze-control/FreezeControl.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FreezeControl.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/freeze-control/FreezeControl.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { Badge, Switch } from '@salt-ds/core';
+import freezeControlCss from './FreezeControl.css.js';
+import { useFreezeControl } from './useFreezeControl.js';
+import cx from 'clsx';
+
+const classBase = "FreezeControl";
+const FreezeControl = ({
+  dataSource,
+  className,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-freeze-control",
+    css: freezeControlCss,
+    window: targetWindow
+  });
+  const { label, isFrozen, lastUpdateMessage, newRecordCount, onSwitchChange } = useFreezeControl({ dataSource });
+  return /* @__PURE__ */ jsx(Badge, { value: newRecordCount, max: 99, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className, {
+        [`${classBase}-showBadge`]: newRecordCount > 0
+      }),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: label }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: isFrozen,
+            onChange: onSwitchChange,
+            className: "vuuLarge"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `${classBase}-lastUpdated`, children: lastUpdateMessage })
+      ]
+    }
+  ) });
+};
+
+export { FreezeControl };
+//# sourceMappingURL=FreezeControl.js.map

package/esm/freeze-control/FreezeControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FreezeControl.js","sources":["../../src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Badge, Switch } from \"@salt-ds/core\";\nimport freezeControlCss from \"./FreezeControl.css\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nconst classBase = \"FreezeControl\";\n\nexport interface FreezeControlProps\n  extends HTMLAttributes<HTMLDivElement>,\n    FreezeProps {}\n\nexport const FreezeControl = ({\n  dataSource,\n  className,\n  ...htmlAttributes\n}: FreezeControlProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-freeze-control\",\n    css: freezeControlCss,\n    window: targetWindow,\n  });\n\n  const { label, isFrozen, lastUpdateMessage, newRecordCount, onSwitchChange } =\n    useFreezeControl({ dataSource });\n\n  return (\n    <Badge value={newRecordCount} max={99}>\n      <div\n        {...htmlAttributes}\n        className={cx(classBase, className, {\n          [`${classBase}-showBadge`]: newRecordCount > 0,\n        })}\n      >\n        <span className={`${classBase}-label`}>{label}</span>\n        <Switch\n          checked={isFrozen}\n          onChange={onSwitchChange}\n          className=\"vuuLarge\"\n        />\n        <span className={`${classBase}-lastUpdated`}>{lastUpdateMessage}</span>\n      </div>\n    </Badge>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,eAAA;AAMX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA0B,KAAA;AACxB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAU,iBAAmB,EAAA,cAAA,EAAgB,gBAC1D,GAAA,gBAAA,CAAiB,EAAE,UAAA,EAAY,CAAA;AAEjC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAM,KAAO,EAAA,cAAA,EAAgB,KAAK,EACjC,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,cAAiB,GAAA;AAAA,OAC9C,CAAA;AAAA,MAED,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,wBAC9C,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,QAAA;AAAA,YACT,QAAU,EAAA,cAAA;AAAA,YACV,SAAU,EAAA;AAAA;AAAA,SACZ;AAAA,4BACC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,gBAAiB,QAAkB,EAAA,iBAAA,EAAA;AAAA;AAAA;AAAA,GAEpE,EAAA,CAAA;AAEJ;;;;"}

package/esm/freeze-control/useFreezeControl.js

@@ -0,0 +1,71 @@
+import { formatDate, useData, messageHasSize } from '@vuu-ui/vuu-utils';
+import { useMemo, useState, useCallback } from 'react';
+
+const timeFormatter = formatDate({ time: "hh:mm:ss" });
+const formatFreezeTime = (ts) => {
+  if (ts === void 0) {
+    throw Error("[useFreezeControl] formatFreezeTime, freezeTime undefined");
+  }
+  return timeFormatter(new Date(ts));
+};
+const FreezeState = (dataSource, newRecordCount) => ({
+  isFrozen: dataSource.isFrozen ?? false,
+  label: dataSource.isFrozen ? "View Frozen" : "Freeze View",
+  lastUpdateMessage: dataSource.isFrozen ? `at ${formatFreezeTime(dataSource.freezeTimestamp)}` : "",
+  newRecordCount
+});
+const useFreezeControl = ({ dataSource }) => {
+  const { VuuDataSource } = useData();
+  const table = useMemo(() => {
+    if (dataSource.table === void 0) {
+      throw Error(`[useFreezeControls] dataSource must have VuuTable`);
+    }
+    return dataSource.table;
+  }, [dataSource]);
+  const [freezeState, setFreezeState] = useState(
+    FreezeState(dataSource, 0)
+  );
+  const [startTrackingNewRows, stopTrackingNewRows] = useMemo(() => {
+    let ds = void 0;
+    const dataCallback = (message) => {
+      if (messageHasSize(message)) {
+        setFreezeState(FreezeState(dataSource, message.size));
+      }
+    };
+    const start = (ts) => {
+      ds = new VuuDataSource({ table });
+      ds.subscribe(
+        {
+          filterSpec: {
+            filter: `created > ${ts}`
+          }
+        },
+        dataCallback
+      );
+    };
+    const stop = () => {
+      ds?.unsubscribe();
+    };
+    return [start, stop];
+  }, [VuuDataSource, dataSource, table]);
+  const handleSwitchChange = useCallback(
+    (evt) => {
+      if (evt.target.checked) {
+        dataSource.freeze?.();
+        startTrackingNewRows(dataSource.freezeTimestamp);
+      } else {
+        dataSource.unfreeze?.();
+        stopTrackingNewRows();
+      }
+      setFreezeState(FreezeState(dataSource, 0));
+    },
+    [dataSource, startTrackingNewRows, stopTrackingNewRows]
+  );
+  return {
+    ...freezeState,
+    onSwitchChange: handleSwitchChange
+  };
+};
+
+export { useFreezeControl };
+//# sourceMappingURL=useFreezeControl.js.map

package/esm/freeze-control/useFreezeControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFreezeControl.js","sources":["../../src/freeze-control/useFreezeControl.ts"],"sourcesContent":["import {\n  DataSource,\n  DataSourceSubscribeCallback,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { formatDate, messageHasSize, useData } from \"@vuu-ui/vuu-utils\";\nimport { ChangeEventHandler, useCallback, useMemo, useState } from \"react\";\n\nexport interface FreezeProps {\n  dataSource: DataSource;\n}\n\ntype FreezeState = {\n  isFrozen: boolean;\n  label: string;\n  lastUpdateMessage: string;\n  newRecordCount: number;\n};\n\nconst timeFormatter = formatDate({ time: \"hh:mm:ss\" });\n\nconst formatFreezeTime = (ts?: number) => {\n  if (ts === undefined) {\n    throw Error(\"[useFreezeControl] formatFreezeTime, freezeTime undefined\");\n  }\n  return timeFormatter(new Date(ts));\n};\n\nconst FreezeState = (\n  dataSource: DataSource,\n  newRecordCount: number,\n): FreezeState => ({\n  isFrozen: dataSource.isFrozen ?? false,\n  label: dataSource.isFrozen ? \"View Frozen\" : \"Freeze View\",\n  lastUpdateMessage: dataSource.isFrozen\n    ? `at ${formatFreezeTime(dataSource.freezeTimestamp)}`\n    : \"\",\n  newRecordCount,\n});\n\nexport const useFreezeControl = ({ dataSource }: FreezeProps) => {\n  const { VuuDataSource } = useData();\n  const table = useMemo<VuuTable>(() => {\n    if (dataSource.table === undefined) {\n      throw Error(`[useFreezeControls] dataSource must have VuuTable`);\n    }\n    return dataSource.table;\n  }, [dataSource]);\n  const [freezeState, setFreezeState] = useState<FreezeState>(\n    FreezeState(dataSource, 0),\n  );\n\n  const [startTrackingNewRows, stopTrackingNewRows] = useMemo(() => {\n    let ds: DataSource | undefined = undefined;\n\n    const dataCallback: DataSourceSubscribeCallback = (message) => {\n      if (messageHasSize(message)) {\n        setFreezeState(FreezeState(dataSource, message.size));\n      }\n    };\n\n    const start = (ts: number) => {\n      ds = new VuuDataSource({ table });\n      ds.subscribe(\n        {\n          filterSpec: {\n            filter: `created > ${ts}`,\n          },\n        },\n        dataCallback,\n      );\n    };\n\n    const stop = () => {\n      ds?.unsubscribe();\n    };\n\n    return [start, stop];\n  }, [VuuDataSource, dataSource, table]);\n\n  const handleSwitchChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (evt) => {\n      if (evt.target.checked) {\n        dataSource.freeze?.();\n        startTrackingNewRows(dataSource.freezeTimestamp as number);\n      } else {\n        dataSource.unfreeze?.();\n        stopTrackingNewRows();\n      }\n      setFreezeState(FreezeState(dataSource, 0));\n    },\n    [dataSource, startTrackingNewRows, stopTrackingNewRows],\n  );\n\n  return {\n    ...freezeState,\n    onSwitchChange: handleSwitchChange,\n  };\n};\n"],"names":[],"mappings":";;;AAmBA,MAAM,aAAgB,GAAA,UAAA,CAAW,EAAE,IAAA,EAAM,YAAY,CAAA;AAErD,MAAM,gBAAA,GAAmB,CAAC,EAAgB,KAAA;AACxC,EAAA,IAAI,OAAO,KAAW,CAAA,EAAA;AACpB,IAAA,MAAM,MAAM,2DAA2D,CAAA;AAAA;AAEzE,EAAA,OAAO,aAAc,CAAA,IAAI,IAAK,CAAA,EAAE,CAAC,CAAA;AACnC,CAAA;AAEA,MAAM,WAAA,GAAc,CAClB,UAAA,EACA,cACiB,MAAA;AAAA,EACjB,QAAA,EAAU,WAAW,QAAY,IAAA,KAAA;AAAA,EACjC,KAAA,EAAO,UAAW,CAAA,QAAA,GAAW,aAAgB,GAAA,aAAA;AAAA,EAC7C,iBAAA,EAAmB,WAAW,QAC1B,GAAA,CAAA,GAAA,EAAM,iBAAiB,UAAW,CAAA,eAAe,CAAC,CAClD,CAAA,GAAA,EAAA;AAAA,EACJ;AACF,CAAA,CAAA;AAEO,MAAM,gBAAmB,GAAA,CAAC,EAAE,UAAA,EAA8B,KAAA;AAC/D,EAAM,MAAA,EAAE,aAAc,EAAA,GAAI,OAAQ,EAAA;AAClC,EAAM,MAAA,KAAA,GAAQ,QAAkB,MAAM;AACpC,IAAI,IAAA,UAAA,CAAW,UAAU,KAAW,CAAA,EAAA;AAClC,MAAA,MAAM,MAAM,CAAmD,iDAAA,CAAA,CAAA;AAAA;AAEjE,IAAA,OAAO,UAAW,CAAA,KAAA;AAAA,GACpB,EAAG,CAAC,UAAU,CAAC,CAAA;AACf,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA;AAAA,IACpC,WAAA,CAAY,YAAY,CAAC;AAAA,GAC3B;AAEA,EAAA,MAAM,CAAC,oBAAA,EAAsB,mBAAmB,CAAA,GAAI,QAAQ,MAAM;AAChE,IAAA,IAAI,EAA6B,GAAA,KAAA,CAAA;AAEjC,IAAM,MAAA,YAAA,GAA4C,CAAC,OAAY,KAAA;AAC7D,MAAI,IAAA,cAAA,CAAe,OAAO,CAAG,EAAA;AAC3B,QAAA,cAAA,CAAe,WAAY,CAAA,UAAA,EAAY,OAAQ,CAAA,IAAI,CAAC,CAAA;AAAA;AACtD,KACF;AAEA,IAAM,MAAA,KAAA,GAAQ,CAAC,EAAe,KAAA;AAC5B,MAAA,EAAA,GAAK,IAAI,aAAA,CAAc,EAAE,KAAA,EAAO,CAAA;AAChC,MAAG,EAAA,CAAA,SAAA;AAAA,QACD;AAAA,UACE,UAAY,EAAA;AAAA,YACV,MAAA,EAAQ,aAAa,EAAE,CAAA;AAAA;AACzB,SACF;AAAA,QACA;AAAA,OACF;AAAA,KACF;AAEA,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,EAAA,EAAI,WAAY,EAAA;AAAA,KAClB;AAEA,IAAO,OAAA,CAAC,OAAO,IAAI,CAAA;AAAA,GAClB,EAAA,CAAC,aAAe,EAAA,UAAA,EAAY,KAAK,CAAC,CAAA;AAErC,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,OAAO,OAAS,EAAA;AACtB,QAAA,UAAA,CAAW,MAAS,IAAA;AACpB,QAAA,oBAAA,CAAqB,WAAW,eAAyB,CAAA;AAAA,OACpD,MAAA;AACL,QAAA,UAAA,CAAW,QAAW,IAAA;AACtB,QAAoB,mBAAA,EAAA;AAAA;AAEtB,MAAe,cAAA,CAAA,WAAA,CAAY,UAAY,EAAA,CAAC,CAAC,CAAA;AAAA,KAC3C;AAAA,IACA,CAAC,UAAY,EAAA,oBAAA,EAAsB,mBAAmB;AAAA,GACxD;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,WAAA;AAAA,IACH,cAAgB,EAAA;AAAA,GAClB;AACF;;;;"}

package/esm/index.js

@@ -26,4 +26,5 @@ export { BaseNumericFormattingSettings } from './column-formatting-settings/Base
 export { DateTimeFormattingSettings } from './column-formatting-settings/DateTimeFormattingSettings.js';
 export { DataSourceStats } from './datasource-stats/DatasourceStats.js';
 export { TableProvider, useTableContext } from './table-provider/TableProvider.js';
+export { FreezeControl } from './freeze-control/FreezeControl.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,20 +1,20 @@
 {
-  "version": "0.13.13",
+  "version": "0.13.14",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.13.13",
-    "@vuu-ui/vuu-protocol-types": "0.13.13"
+    "@vuu-ui/vuu-filter-types": "0.13.14",
+    "@vuu-ui/vuu-protocol-types": "0.13.14"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.13.13",
-    "@vuu-ui/vuu-data-react": "0.13.13",
-    "@vuu-ui/vuu-data-types": "0.13.13",
-    "@vuu-ui/vuu-table-types": "0.13.13",
-    "@vuu-ui/vuu-popups": "0.13.13",
-    "@vuu-ui/vuu-table": "0.13.13",
-    "@vuu-ui/vuu-utils": "0.13.13",
-    "@vuu-ui/vuu-ui-controls": "0.13.13",
+    "@vuu-ui/vuu-codemirror": "0.13.14",
+    "@vuu-ui/vuu-data-react": "0.13.14",
+    "@vuu-ui/vuu-data-types": "0.13.14",
+    "@vuu-ui/vuu-table-types": "0.13.14",
+    "@vuu-ui/vuu-popups": "0.13.14",
+    "@vuu-ui/vuu-table": "0.13.14",
+    "@vuu-ui/vuu-utils": "0.13.14",
+    "@vuu-ui/vuu-ui-controls": "0.13.14",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/styles": "0.2.1",

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

@@ -1,7 +1,7 @@
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
 import { ColumnDescriptor, ColumnMenuPermissions } from "@vuu-ui/vuu-table-types";
 import { HTMLAttributes } from "react";
 import { ColumnMenuActionType } from "./column-menu-utils";
-import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
 export interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {
     column: ColumnDescriptor;
     menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;

package/types/freeze-control/FreezeControl.d.ts

@@ -0,0 +1,5 @@
+import { type FreezeProps } from "./useFreezeControl";
+import { HTMLAttributes } from "react";
+export interface FreezeControlProps extends HTMLAttributes<HTMLDivElement>, FreezeProps {
+}
+export declare const FreezeControl: ({ dataSource, className, ...htmlAttributes }: FreezeControlProps) => import("react/jsx-runtime").JSX.Element;

package/types/freeze-control/useFreezeControl.d.ts

@@ -0,0 +1,12 @@
+import { DataSource } from "@vuu-ui/vuu-data-types";
+import { ChangeEventHandler } from "react";
+export interface FreezeProps {
+    dataSource: DataSource;
+}
+export declare const useFreezeControl: ({ dataSource }: FreezeProps) => {
+    onSwitchChange: ChangeEventHandler<HTMLInputElement>;
+    isFrozen: boolean;
+    label: string;
+    lastUpdateMessage: string;
+    newRecordCount: number;
+};

package/types/index.d.ts

@@ -14,3 +14,4 @@ export * from "./column-expression-panel";
 export * from "./column-formatting-settings";
 export * from "./datasource-stats";
 export { TableProvider, useTableContext } from "./table-provider/TableProvider";
+export { FreezeControl } from "./freeze-control/FreezeControl";