@vuu-ui/vuu-table-extras 0.6.25-debug → 0.6.26-debug

package/cjs/index.js

@@ -96,12 +96,12 @@ var FlashStyle = {
   ArrowBackground: "arrow-bg"
 };
 var getFlashStyle = (colType) => {
-  if (typeof colType === "string") {
-    return FlashStyle.BackgroundOnly;
-  } else if (colType) {
-    const { renderer } = colType;
-    return renderer && "flashStyle" in renderer || FlashStyle.BackgroundOnly;
+  if ((0, import_vuu_utils3.isTypeDescriptor)(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
   }
+  return FlashStyle.BackgroundOnly;
 };
 var BackgroundCell = ({ column, row }) => {
   const { key, type, valueFormatter } = column;
@@ -123,9 +123,58 @@ var BackgroundCell = ({ column, row }) => {
   serverDataType: ["long", "int", "double"]
 });
 
+// src/cell-renderers/progress-cell/ProgressCell.tsx
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_classnames2 = __toESM(require("classnames"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var classBase2 = "vuuProgressCell";
+var ProgressCell = ({ column, columnMap, row }) => {
+  const { type } = column;
+  const value = row[column.key];
+  let showProgress = false;
+  let percentage = 0;
+  if ((0, import_vuu_utils4.isTypeDescriptor)(type) && (0, import_vuu_utils4.isColumnTypeRenderer)(type.renderer)) {
+    const { associatedField } = type.renderer;
+    const associatedValue = row[columnMap[associatedField]];
+    if (typeof value === "number" && typeof associatedValue === "number") {
+      percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+      showProgress = isFinite(percentage);
+    } else {
+      const floatValue = parseFloat(value);
+      if (Number.isFinite(floatValue)) {
+        const floatOtherValue = parseFloat(associatedValue);
+        if (Number.isFinite(floatOtherValue)) {
+          percentage = Math.min(
+            Math.round(floatValue / floatOtherValue * 100),
+            100
+          );
+          showProgress = isFinite(percentage);
+        }
+      }
+    }
+  }
+  const className = (0, import_classnames2.default)(classBase2, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, tabIndex: -1, children: [
+    showProgress ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: `${classBase2}-track`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${classBase2}-bg` }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          className: `${classBase2}-bar`,
+          style: { "--progress-bar-pct": `-${100 - percentage}%` }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${classBase2}-text`, children: `${percentage} %` })
+  ] });
+};
+(0, import_vuu_utils4.registerComponent)("vuu.progress", ProgressCell, "cell-renderer", {
+  serverDataType: ["long", "int", "double"]
+});
+
 // src/column-expression-input/useColumnExpressionEditor.ts
 var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 var import_react3 = require("react");
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
@@ -1161,8 +1210,8 @@ var noop = () => console.log("noooop");
 var hasExpressionType = (completion) => "expressionType" in completion;
 var injectOptionContent = (completion) => {
   if (hasExpressionType(completion)) {
-    const div = (0, import_vuu_utils4.createEl)("div", "expression-type-container");
-    const span = (0, import_vuu_utils4.createEl)("span", "expression-type", completion.expressionType);
+    const div = (0, import_vuu_utils5.createEl)("div", "expression-type-container");
+    const span = (0, import_vuu_utils5.createEl)("span", "expression-type", completion.expressionType);
     div.appendChild(span);
     return div;
   } else {
@@ -1279,8 +1328,8 @@ var useColumnExpressionEditor = ({
 };
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var classBase2 = "vuuColumnExpressionInput";
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var classBase3 = "vuuColumnExpressionInput";
 var ColumnExpressionInput = ({
   onChange,
   onSubmitExpression,
@@ -1291,13 +1340,13 @@ var ColumnExpressionInput = ({
     onSubmitExpression,
     suggestionProvider
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${classBase2}`, ref: editorRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${classBase3}`, ref: editorRef });
 };
 
 // src/column-expression-input/useColumnExpressionSuggestionProvider.ts
 var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
 var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_react4 = require("react");
 
 // src/column-expression-input/column-function-descriptors.ts
@@ -1573,7 +1622,7 @@ var columnFunctionDescriptors = [
 ];
 
 // src/column-expression-input/functionDocInfo.ts
-var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
 var functionDocInfo = ({
   name,
   description,
@@ -1581,25 +1630,25 @@ var functionDocInfo = ({
   params,
   type
 }) => {
-  const rootElement = (0, import_vuu_utils5.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils5.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils5.createEl)("span", "function-name", name);
-  const paramElement = (0, import_vuu_utils5.createEl)("span", "param-list", params.description);
-  const typeElement = (0, import_vuu_utils5.createEl)("span", "function-type", type);
+  const rootElement = (0, import_vuu_utils6.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils6.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils6.createEl)("span", "function-name", name);
+  const paramElement = (0, import_vuu_utils6.createEl)("span", "param-list", params.description);
+  const typeElement = (0, import_vuu_utils6.createEl)("span", "function-type", type);
   headingElement.appendChild(nameElement);
   headingElement.appendChild(paramElement);
   headingElement.appendChild(typeElement);
-  const child2 = (0, import_vuu_utils5.createEl)("p", void 0, description);
+  const child2 = (0, import_vuu_utils6.createEl)("p", void 0, description);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   if (example) {
-    const exampleElement = (0, import_vuu_utils5.createEl)("div", "example-container", "Example:");
-    const expressionElement = (0, import_vuu_utils5.createEl)(
+    const exampleElement = (0, import_vuu_utils6.createEl)("div", "example-container", "Example:");
+    const expressionElement = (0, import_vuu_utils6.createEl)(
       "div",
       "example-expression",
       example.expression
     );
-    const resultElement = (0, import_vuu_utils5.createEl)("div", "example-result", example.result);
+    const resultElement = (0, import_vuu_utils6.createEl)("div", "example-result", example.result);
     exampleElement.appendChild(expressionElement);
     exampleElement.appendChild(resultElement);
     rootElement.appendChild(exampleElement);
@@ -1618,15 +1667,15 @@ var withApplySpace = (suggestions) => suggestions.map((suggestion) => {
 });
 var getValidColumns = (columns, { functionName, operator }) => {
   if (operator) {
-    return columns.filter(import_vuu_utils6.isNumericColumn);
+    return columns.filter(import_vuu_utils7.isNumericColumn);
   } else if (functionName) {
     const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
     if (fn) {
       switch (fn.accepts) {
         case "string":
-          return columns.filter(import_vuu_utils6.isTextColumn);
+          return columns.filter(import_vuu_utils7.isTextColumn);
         case "number":
-          return columns.filter(import_vuu_utils6.isNumericColumn);
+          return columns.filter(import_vuu_utils7.isNumericColumn);
         default:
           return columns;
       }
@@ -1655,7 +1704,7 @@ var arithmeticOperators = [
   { apply: "- ", boost: 2, label: "-", type: "operator" }
 ];
 var getOperators = (column) => {
-  if (column === void 0 || (0, import_vuu_utils6.isNumericColumn)(column)) {
+  if (column === void 0 || (0, import_vuu_utils7.isNumericColumn)(column)) {
     return arithmeticOperators;
   } else {
     return NO_OPERATORS;
@@ -1816,7 +1865,7 @@ var useColumnExpressionSuggestionProvider = ({
 
 // src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
 var import_core7 = require("@salt-ds/core");
-var import_classnames5 = __toESM(require("classnames"), 1);
+var import_classnames6 = __toESM(require("classnames"), 1);
 var import_react12 = require("react");
 
 // src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx
@@ -1826,9 +1875,9 @@ var import_react5 = require("react");
 
 // src/datagrid-configuration-ui/column-picker/ColumnListItem.tsx
 var import_salt_lab = require("@heswell/salt-lab");
-var import_classnames2 = __toESM(require("classnames"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var classBase3 = "vuuColumnListItem";
+var import_classnames3 = __toESM(require("classnames"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var classBase4 = "vuuColumnListItem";
 var ColumnListItem = ({
   className: classNameProp,
   item,
@@ -1836,20 +1885,20 @@ var ColumnListItem = ({
   style: styleProp,
   ...restProps
 }) => {
-  const className = (0, import_classnames2.default)(classBase3, classNameProp, {
-    [`${classBase3}-calculated`]: item == null ? void 0 : item.expression,
-    [`${classBase3}-hidden`]: item == null ? void 0 : item.hidden
+  const className = (0, import_classnames3.default)(classBase4, classNameProp, {
+    [`${classBase4}-calculated`]: item == null ? void 0 : item.expression,
+    [`${classBase4}-hidden`]: item == null ? void 0 : item.hidden
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_salt_lab.ListItem, { className, ...restProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${classBase3}-iconType` }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: `${classBase3}-label`, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${classBase3}-iconHidden` })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_salt_lab.ListItem, { className, ...restProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `${classBase4}-iconType` }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: `${classBase4}-label`, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `${classBase4}-iconHidden` })
   ] });
 };
 
 // src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var classBase4 = "vuuColumnPicker";
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var classBase5 = "vuuColumnPicker";
 var removeSelectedColumns = (availableColumns, selectedColumns) => {
   return availableColumns.filter(
     (column) => selectedColumns.find((col) => col.name === column.name) == null
@@ -1899,15 +1948,15 @@ var ColumnPicker = ({
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classBase4, id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `${classBase4}-listColumn`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: `available-${id}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core.Text, { as: "h4", children: "Available Columns" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: classBase5, id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${classBase5}-listColumn`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `available-${id}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core.Text, { as: "h4", children: "Available Columns" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
-          className: `${classBase4}-listContainer`,
+          className: `${classBase5}-listContainer`,
           style: { flex: 1, overflow: "hidden" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_salt_lab2.List,
             {
               borderless: true,
@@ -1924,7 +1973,7 @@ var ColumnPicker = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           style: {
@@ -1933,21 +1982,21 @@ var ColumnPicker = ({
             flex: "0 0 32px",
             marginTop: "var(--salt-size-basis-unit)"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core.Button, { onClick: addColumn2, disabled: selected1.length === 0, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core.Button, { onClick: addColumn2, disabled: selected1.length === 0, children: [
             "Show",
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-icon": "arrow-thin-right", style: { marginLeft: 8 } })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "arrow-thin-right", style: { marginLeft: 8 } })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `${classBase4}-listColumn`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: `selected-${id}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core.Text, { as: "h4", children: "Included Columns" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${classBase5}-listColumn`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: `selected-${id}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core.Text, { as: "h4", children: "Included Columns" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
-          className: `${classBase4}-listContainer`,
+          className: `${classBase5}-listContainer`,
           style: { flex: 1, overflow: "hidden" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_salt_lab2.List,
             {
               ListItem: ColumnListItem,
@@ -1966,7 +2015,7 @@ var ColumnPicker = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           style: {
@@ -1977,38 +2026,38 @@ var ColumnPicker = ({
             marginTop: "var(--salt-size-basis-unit)"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core.Button, { onClick: removeColumn2, disabled: selectedColumn === null, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-icon": "arrow-thin-left", style: { marginRight: 8 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core.Button, { onClick: removeColumn2, disabled: selectedColumn === null, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "arrow-thin-left", style: { marginRight: 8 } }),
               "Hide"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               import_core.Button,
               {
                 "aria-label": "Move column up",
                 onClick: moveColumnUp,
                 disabled: selectedColumn === null || (chosenColumns == null ? void 0 : chosenColumns.indexOf(selectedColumn)) === 0,
                 style: { width: 28 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-icon": "arrow-thin-up" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "arrow-thin-up" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               import_core.Button,
               {
                 "aria-label": "Move column down",
                 onClick: moveColumnDown,
                 disabled: selectedColumn === null || chosenColumns.indexOf(selectedColumn) === chosenColumns.length - 1,
                 style: { width: 28 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-icon": "arrow-thin-down" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "arrow-thin-down" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               import_core.Button,
               {
                 "aria-label": "Add calculated column",
-                className: `${classBase4}-addCalculatedColumn`,
+                className: `${classBase5}-addCalculatedColumn`,
                 onClick: onAddCalculatedColumnClick,
                 variant: "primary",
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-icon": "add" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-icon": "add" })
               }
             )
           ]
@@ -2022,21 +2071,21 @@ var ColumnPicker = ({
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
 var import_salt_lab5 = require("@heswell/salt-lab");
 var import_core4 = require("@salt-ds/core");
-var import_classnames4 = __toESM(require("classnames"), 1);
+var import_classnames5 = __toESM(require("classnames"), 1);
 var import_react8 = require("react");
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
 var import_salt_lab4 = require("@heswell/salt-lab");
 var import_core3 = require("@salt-ds/core");
-var import_classnames3 = __toESM(require("classnames"), 1);
+var import_classnames4 = __toESM(require("classnames"), 1);
 var import_react7 = require("react");
 
 // src/datagrid-configuration-ui/column-type-panel/NumericColumnPanel.tsx
 var import_salt_lab3 = require("@heswell/salt-lab");
 var import_core2 = require("@salt-ds/core");
 var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var defaultValues = {
   alignOnDecimals: false,
   decimals: 4,
@@ -2087,9 +2136,9 @@ var NumericColumnPanel = ({
   );
   switch (column.serverDataType) {
     case "double":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab3.FormField, { label: "No of Decimals", labelPlacement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_salt_lab3.StepperInput, { value: decimals, onChange: handleChangeDecimals }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab3.FormField, { label: "No of Decimals", labelPlacement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_salt_lab3.StepperInput, { value: decimals, onChange: handleChangeDecimals }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_salt_lab3.Switch,
           {
             checked: alignOnDecimals,
@@ -2098,7 +2147,7 @@ var NumericColumnPanel = ({
             onChange: handleChangeAlignOnDecimals
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_salt_lab3.Switch,
           {
             checked: zeroPad,
@@ -2110,29 +2159,29 @@ var NumericColumnPanel = ({
       ] });
     case "long":
     case "int":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.Text, { children: "Work in progress" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core2.Text, { children: "Work in progress" }) });
     default:
       return null;
   }
 };
 
 // src/datagrid-configuration-ui/column-type-panel/StringColumnPanel.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var StringColumnPanel = ({
   column,
   dispatchColumnAction
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "String" });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "String" });
 };
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var classBase5 = "vuuColumnTypePanel";
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase6 = "vuuColumnTypePanel";
 var integerCellRenderers = ["Default Renderer (int, long)"];
 var doubleCellRenderers = ["Default Renderer (double)"];
 var stringCellRenderers = ["Default Renderer (string)"];
 var getAvailableCellRenderers = (column) => {
-  const customCellRenderers = (0, import_vuu_utils7.getRegisteredCellRenderers)(column.serverDataType);
+  const customCellRenderers = (0, import_vuu_utils8.getRegisteredCellRenderers)(column.serverDataType);
   const customRendererNames = customCellRenderers.map((r) => r.name);
   console.log({ customRendererNames });
   switch (column.serverDataType) {
@@ -2159,7 +2208,7 @@ var ColumnTypePanel = ({
       case "double":
       case "int":
       case "long":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           NumericColumnPanel,
           {
             column,
@@ -2167,7 +2216,7 @@ var ColumnTypePanel = ({
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           StringColumnPanel,
           {
             column,
@@ -2178,21 +2227,21 @@ var ColumnTypePanel = ({
   }, [column, dispatchColumnAction]);
   const { serverDataType = "string" } = column;
   const availableRenderers = getAvailableCellRenderers(column);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_salt_lab4.Dropdown,
       {
-        className: (0, import_classnames3.default)(`${classBase5}-renderer`),
+        className: (0, import_classnames4.default)(`${classBase6}-renderer`),
         fullWidth: true,
         selected: availableRenderers[0],
         source: availableRenderers
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_core3.Panel,
       {
         ...props,
-        className: (0, import_classnames3.default)(classBase5, className, `${classBase5}-${serverDataType}`),
+        className: (0, import_classnames4.default)(classBase6, className, `${classBase6}-${serverDataType}`),
         children: content
       }
     )
@@ -2200,8 +2249,8 @@ var ColumnTypePanel = ({
 };
 
 // src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase6 = "vuuColumnSettingsPanel";
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase7 = "vuuColumnSettingsPanel";
 var tabstripProps = {
   className: "salt-density-high"
 };
@@ -2242,54 +2291,54 @@ var ColumnSettingsPanel = ({
     (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
     [dispatchUpdate]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
-      className: classBase6,
+      className: classBase7,
       ...props,
       style: {
         ...styleProp
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Text, { as: "h4", children: "Column Settings" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.Text, { as: "h4", children: "Column Settings" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           import_vuu_layout.Stack,
           {
             active: activeTab,
             showTabs: true,
-            className: (0, import_classnames4.default)(`${classBase6}-columnTabs`),
+            className: (0, import_classnames5.default)(`${classBase7}-columnTabs`),
             onTabSelectionChanged: setActiveTab,
             TabstripProps: tabstripProps,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.Panel, { title: "Column", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.FormField, { label: "Hidden", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.Panel, { title: "Column", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.FormField, { label: "Hidden", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   import_salt_lab5.Checkbox,
                   {
                     checked: column.hidden === true,
                     onChange: handleChangeHidden
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.FormField, { label: "Label", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.FormField, { label: "Label", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   import_salt_lab5.Input,
                   {
                     value: (_a = column.label) != null ? _a : column.name,
                     onChange: handleChangeLabel
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.FormField, { label: "Width", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.FormField, { label: "Width", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   import_salt_lab5.StepperInput,
                   {
                     value: (_b = column.width) != null ? _b : 100,
                     onChange: handleChangeWidth
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   import_salt_lab5.FormField,
                   {
                     label: "Align",
                     labelPlacement: "left",
                     ActivationIndicatorComponent: NullActivationIndicator,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       import_salt_lab5.RadioButtonGroup,
                       {
                         "aria-label": "Column Align",
@@ -2297,20 +2346,20 @@ var ColumnSettingsPanel = ({
                         legend: "Align",
                         onChange: handleChangeAlign,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.RadioButton, { label: "Left", value: "left" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.RadioButton, { label: "Right", value: "right" })
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.RadioButton, { label: "Left", value: "left" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.RadioButton, { label: "Right", value: "right" })
                         ]
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   import_salt_lab5.FormField,
                   {
                     label: "Pin Column",
                     labelPlacement: "left",
                     ActivationIndicatorComponent: NullActivationIndicator,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       import_salt_lab5.RadioButtonGroup,
                       {
                         "aria-label": "Pin Column",
@@ -2318,16 +2367,16 @@ var ColumnSettingsPanel = ({
                         legend: "Pin Column",
                         onChange: handleChangePin,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.RadioButton, { label: "Do not pin", value: "" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.RadioButton, { label: "Left", value: "left" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.RadioButton, { label: "Right", value: "right" })
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.RadioButton, { label: "Do not pin", value: "" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.RadioButton, { label: "Left", value: "left" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.RadioButton, { label: "Right", value: "right" })
                         ]
                       }
                     )
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 ColumnTypePanel,
                 {
                   column,
@@ -2335,25 +2384,25 @@ var ColumnSettingsPanel = ({
                   title: "Data Cell"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.Panel, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.Panel, { title: "Vuu", variant: "secondary", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   import_salt_lab5.FormField,
                   {
                     label: "Name",
                     labelPlacement: "top",
                     readOnly: true,
                     variant: "secondary",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.Input, { value: column.name })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.Input, { value: column.name })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   import_salt_lab5.FormField,
                   {
                     label: "Vuu type",
                     labelPlacement: "top",
                     readOnly: true,
                     variant: "secondary",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_salt_lab5.Input, { value: column.serverDataType })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab5.Input, { value: column.serverDataType })
                   }
                 )
               ] })
@@ -2369,8 +2418,8 @@ var ColumnSettingsPanel = ({
 var import_salt_lab6 = require("@heswell/salt-lab");
 var import_core5 = require("@salt-ds/core");
 var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase7 = "vuuGridSettingsPanel";
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase8 = "vuuGridSettingsPanel";
 var NullActivationIndicator2 = () => null;
 var GridSettingsPanel = ({
   config,
@@ -2396,25 +2445,24 @@ var GridSettingsPanel = ({
     (value) => dispatchUpdate({ columnDefaultWidth: parseInt(value.toString(), 10) }),
     [dispatchUpdate]
   );
-  console.log(`GridSettingsPanel ${JSON.stringify(config.columns, null, 2)}`);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
-      className: classBase7,
+      className: classBase8,
       ...props,
       style: {
         ...styleProp
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.Text, { as: "h4", children: "Grid Settings" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.Panel, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.Text, { as: "h4", children: "Grid Settings" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core5.Panel, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             import_salt_lab6.FormField,
             {
               label: "Format column labels",
               labelPlacement: "left",
               ActivationIndicatorComponent: NullActivationIndicator2,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 import_salt_lab6.RadioButtonGroup,
                 {
                   "aria-label": "Format column labels",
@@ -2422,15 +2470,15 @@ var GridSettingsPanel = ({
                   legend: "Format column labels",
                   onChange: handleChangeLabelFormatting,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab6.RadioButton, { label: "No Formatting", value: void 0 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab6.RadioButton, { label: "Capitalize", value: "capitalize" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab6.RadioButton, { label: "Uppercase", value: "uppercase" })
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_salt_lab6.RadioButton, { label: "No Formatting", value: void 0 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_salt_lab6.RadioButton, { label: "Capitalize", value: "capitalize" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_salt_lab6.RadioButton, { label: "Uppercase", value: "uppercase" })
                   ]
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_salt_lab6.FormField, { label: "Default Column Width", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_salt_lab6.FormField, { label: "Default Column Width", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             import_salt_lab6.StepperInput,
             {
               value: (_a = config.columnDefaultWidth) != null ? _a : 100,
@@ -2446,7 +2494,7 @@ var GridSettingsPanel = ({
 // src/datagrid-configuration-ui/settings-panel/useGridSettings.ts
 var import_react10 = require("react");
 var import_salt_lab7 = require("@heswell/salt-lab");
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
 var gridSettingsReducer = (state, action) => {
   console.log(`gridSettingsReducer ${action.type}`);
   switch (action.type) {
@@ -2563,7 +2611,7 @@ function updateColumnTypeFormatting(state, {
   if (targetColumn) {
     const {
       serverDataType = "string",
-      type: columnType = (0, import_vuu_utils8.fromServerDataType)(serverDataType)
+      type: columnType = (0, import_vuu_utils9.fromServerDataType)(serverDataType)
     } = column;
     const type = typeof columnType === "string" ? {
       name: columnType
@@ -2607,7 +2655,7 @@ var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
 var import_salt_lab8 = require("@heswell/salt-lab");
 var import_core6 = require("@salt-ds/core");
 var import_react11 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var CalculatedColumnPanel = ({
   columns,
   dispatchColumnAction,
@@ -2650,10 +2698,10 @@ var CalculatedColumnPanel = ({
       });
     }
   }, [columnName, dispatchColumnAction]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core6.Panel, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.Text, { styleAs: "h4", children: "Define Computed Column" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_salt_lab8.FormField, { label: "Column Name", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_salt_lab8.Input, { value: columnName, onChange: handleChangeName }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core6.Panel, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core6.Text, { styleAs: "h4", children: "Define Computed Column" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_salt_lab8.FormField, { label: "Column Name", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_salt_lab8.Input, { value: columnName, onChange: handleChangeName }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ColumnExpressionInput,
       {
         onChange: handleChangeExpression,
@@ -2661,13 +2709,13 @@ var CalculatedColumnPanel = ({
         suggestionProvider
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.Button, { onClick: handleSave, children: "Add Column" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core6.Button, { onClick: handleSave, children: "Add Column" }) })
   ] });
 };
 
 // src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var classBase8 = "vuuDatagridSettingsPanel";
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var classBase9 = "vuuDatagridSettingsPanel";
 var getTabLabel = () => void 0;
 var icons = [
   "table-settings",
@@ -2722,27 +2770,27 @@ var DatagridSettingsPanel = ({
     []
   );
   const panelShift = selectedTabIndex === 2 ? "right" : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ...props, className: (0, import_classnames5.default)(classBase8, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ...props, className: (0, import_classnames6.default)(classBase9, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       import_vuu_layout2.Stack,
       {
         TabstripProps: tabstripProps2,
-        className: `${classBase8}-stack`,
+        className: `${classBase9}-stack`,
         getTabIcon,
         getTabLabel,
         active: selectedTabIndex === 2 ? 1 : selectedTabIndex,
         onTabSelectionChanged: handleTabSelectionChanged,
         showTabs: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             GridSettingsPanel,
             {
               config: gridSettings,
               dispatchColumnAction
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase8}-columnPanels`, "data-align": panelShift, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${classBase9}-columnPanels`, "data-align": panelShift, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               ColumnPicker,
               {
                 availableColumns,
@@ -2753,7 +2801,7 @@ var DatagridSettingsPanel = ({
                 selectedColumn
               }
             ),
-            selectedColumn === null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Panel, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            selectedColumn === null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.Panel, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               ColumnSettingsPanel,
               {
                 column: selectedColumn,
@@ -2762,8 +2810,8 @@ var DatagridSettingsPanel = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { title: "Column Settings", children: "Column Settings" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { title: "Column Settings", children: "Column Settings" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             CalculatedColumnPanel,
             {
               columns: gridSettings.columns,
@@ -2774,19 +2822,19 @@ var DatagridSettingsPanel = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase8}-buttonBar`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: handleApply, children: "Apply" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: handleSave, children: "Save" })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${classBase9}-buttonBar`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.Button, { onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.Button, { onClick: handleApply, children: "Apply" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.Button, { onClick: handleSave, children: "Save" })
     ] })
   ] });
 };
 
 // src/datasource-stats/DatasourceStats.tsx
 var import_react13 = require("react");
-var import_classnames6 = __toESM(require("classnames"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var classBase9 = "vuuDatasourceStats";
+var import_classnames7 = __toESM(require("classnames"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var classBase10 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
 var DataSourceStats = ({
   className: classNameProp,
@@ -2804,17 +2852,17 @@ var DataSourceStats = ({
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
   }, [dataSource]);
-  const className = (0, import_classnames6.default)(classBase9, classNameProp);
+  const className = (0, import_classnames7.default)(classBase10, classNameProp);
   const from = numberFormatter.format(range.from);
   const to = numberFormatter.format(range.to - 1);
   const value = numberFormatter.format(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Showing rows" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-range`, children: from }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-range`, children: to }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "of" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-size`, children: value }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-optimize`, children: optimize })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Showing rows" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase10}-range`, children: from }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase10}-range`, children: to }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "of" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase10}-size`, children: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase10}-optimize`, children: optimize })
   ] });
 };
 //# sourceMappingURL=index.js.map