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

package/esm/index.js

@@ -21,6 +21,7 @@ var __privateSet = (obj, member, value, setter) => {
 import {
   DOWN1,
   DOWN2,
+  isTypeDescriptor as isTypeDescriptor2,
   metadataKeys,
   registerComponent,
   UP1,
@@ -61,12 +62,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 (isTypeDescriptor2(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
   }
+  return FlashStyle.BackgroundOnly;
 };
 var BackgroundCell = ({ column, row }) => {
   const { key, type, valueFormatter } = column;
@@ -88,6 +89,59 @@ registerComponent("background", BackgroundCell, "cell-renderer", {
   serverDataType: ["long", "int", "double"]
 });
 
+// src/cell-renderers/progress-cell/ProgressCell.tsx
+import {
+  isColumnTypeRenderer,
+  isTypeDescriptor as isTypeDescriptor3,
+  registerComponent as registerComponent2
+} from "@vuu-ui/vuu-utils";
+import cx2 from "classnames";
+import { jsx as jsx2, jsxs as jsxs2 } from "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 (isTypeDescriptor3(type) && 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 = cx2(classBase2, {});
+  return /* @__PURE__ */ jsxs2("div", { className, tabIndex: -1, children: [
+    showProgress ? /* @__PURE__ */ jsxs2("span", { className: `${classBase2}-track`, children: [
+      /* @__PURE__ */ jsx2("span", { className: `${classBase2}-bg` }),
+      /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: `${classBase2}-bar`,
+          style: { "--progress-bar-pct": `-${100 - percentage}%` }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx2("span", { className: `${classBase2}-text`, children: `${percentage} %` })
+  ] });
+};
+registerComponent2("vuu.progress", ProgressCell, "cell-renderer", {
+  serverDataType: ["long", "int", "double"]
+});
+
 // src/column-expression-input/useColumnExpressionEditor.ts
 import {
   autocompletion,
@@ -1268,8 +1322,8 @@ var useColumnExpressionEditor = ({
 };
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var classBase2 = "vuuColumnExpressionInput";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var classBase3 = "vuuColumnExpressionInput";
 var ColumnExpressionInput = ({
   onChange,
   onSubmitExpression,
@@ -1280,7 +1334,7 @@ var ColumnExpressionInput = ({
     onSubmitExpression,
     suggestionProvider
   });
-  return /* @__PURE__ */ jsx2("div", { className: `${classBase2}`, ref: editorRef });
+  return /* @__PURE__ */ jsx3("div", { className: `${classBase3}`, ref: editorRef });
 };
 
 // src/column-expression-input/useColumnExpressionSuggestionProvider.ts
@@ -1811,7 +1865,7 @@ var useColumnExpressionSuggestionProvider = ({
 
 // src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
 import { Button as Button3, Panel as Panel5 } from "@salt-ds/core";
-import cx5 from "classnames";
+import cx6 from "classnames";
 import {
   useCallback as useCallback8,
   useState as useState4
@@ -1824,9 +1878,9 @@ import { useCallback as useCallback3, useState } from "react";
 
 // src/datagrid-configuration-ui/column-picker/ColumnListItem.tsx
 import { ListItem } from "@heswell/salt-lab";
-import cx2 from "classnames";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var classBase3 = "vuuColumnListItem";
+import cx3 from "classnames";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase4 = "vuuColumnListItem";
 var ColumnListItem = ({
   className: classNameProp,
   item,
@@ -1834,20 +1888,20 @@ var ColumnListItem = ({
   style: styleProp,
   ...restProps
 }) => {
-  const className = cx2(classBase3, classNameProp, {
-    [`${classBase3}-calculated`]: item == null ? void 0 : item.expression,
-    [`${classBase3}-hidden`]: item == null ? void 0 : item.hidden
+  const className = cx3(classBase4, classNameProp, {
+    [`${classBase4}-calculated`]: item == null ? void 0 : item.expression,
+    [`${classBase4}-hidden`]: item == null ? void 0 : item.hidden
   });
-  return /* @__PURE__ */ jsxs2(ListItem, { className, ...restProps, children: [
-    /* @__PURE__ */ jsx3("span", { className: `${classBase3}-iconType` }),
-    /* @__PURE__ */ jsx3("label", { className: `${classBase3}-label`, children: label }),
-    /* @__PURE__ */ jsx3("span", { className: `${classBase3}-iconHidden` })
+  return /* @__PURE__ */ jsxs3(ListItem, { className, ...restProps, children: [
+    /* @__PURE__ */ jsx4("span", { className: `${classBase4}-iconType` }),
+    /* @__PURE__ */ jsx4("label", { className: `${classBase4}-label`, children: label }),
+    /* @__PURE__ */ jsx4("span", { className: `${classBase4}-iconHidden` })
   ] });
 };
 
 // src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var classBase4 = "vuuColumnPicker";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var classBase5 = "vuuColumnPicker";
 var removeSelectedColumns = (availableColumns, selectedColumns) => {
   return availableColumns.filter(
     (column) => selectedColumns.find((col) => col.name === column.name) == null
@@ -1897,15 +1951,15 @@ var ColumnPicker = ({
     },
     [dispatch]
   );
-  return /* @__PURE__ */ jsxs3("div", { className: classBase4, id, children: [
-    /* @__PURE__ */ jsxs3("div", { className: `${classBase4}-listColumn`, children: [
-      /* @__PURE__ */ jsx4("label", { htmlFor: `available-${id}`, children: /* @__PURE__ */ jsx4(Text, { as: "h4", children: "Available Columns" }) }),
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs4("div", { className: classBase5, id, children: [
+    /* @__PURE__ */ jsxs4("div", { className: `${classBase5}-listColumn`, children: [
+      /* @__PURE__ */ jsx5("label", { htmlFor: `available-${id}`, children: /* @__PURE__ */ jsx5(Text, { as: "h4", children: "Available Columns" }) }),
+      /* @__PURE__ */ jsx5(
         "div",
         {
-          className: `${classBase4}-listContainer`,
+          className: `${classBase5}-listContainer`,
           style: { flex: 1, overflow: "hidden" },
-          children: /* @__PURE__ */ jsx4(
+          children: /* @__PURE__ */ jsx5(
             List,
             {
               borderless: true,
@@ -1922,7 +1976,7 @@ var ColumnPicker = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "div",
         {
           style: {
@@ -1931,21 +1985,21 @@ var ColumnPicker = ({
             flex: "0 0 32px",
             marginTop: "var(--salt-size-basis-unit)"
           },
-          children: /* @__PURE__ */ jsxs3(Button, { onClick: addColumn2, disabled: selected1.length === 0, children: [
+          children: /* @__PURE__ */ jsxs4(Button, { onClick: addColumn2, disabled: selected1.length === 0, children: [
             "Show",
-            /* @__PURE__ */ jsx4("span", { "data-icon": "arrow-thin-right", style: { marginLeft: 8 } })
+            /* @__PURE__ */ jsx5("span", { "data-icon": "arrow-thin-right", style: { marginLeft: 8 } })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: `${classBase4}-listColumn`, children: [
-      /* @__PURE__ */ jsx4("label", { htmlFor: `selected-${id}`, children: /* @__PURE__ */ jsx4(Text, { as: "h4", children: "Included Columns" }) }),
-      /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs4("div", { className: `${classBase5}-listColumn`, children: [
+      /* @__PURE__ */ jsx5("label", { htmlFor: `selected-${id}`, children: /* @__PURE__ */ jsx5(Text, { as: "h4", children: "Included Columns" }) }),
+      /* @__PURE__ */ jsx5(
         "div",
         {
-          className: `${classBase4}-listContainer`,
+          className: `${classBase5}-listContainer`,
           style: { flex: 1, overflow: "hidden" },
-          children: /* @__PURE__ */ jsx4(
+          children: /* @__PURE__ */ jsx5(
             List,
             {
               ListItem: ColumnListItem,
@@ -1964,7 +2018,7 @@ var ColumnPicker = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4(
         "div",
         {
           style: {
@@ -1975,38 +2029,38 @@ var ColumnPicker = ({
             marginTop: "var(--salt-size-basis-unit)"
           },
           children: [
-            /* @__PURE__ */ jsxs3(Button, { onClick: removeColumn2, disabled: selectedColumn === null, children: [
-              /* @__PURE__ */ jsx4("span", { "data-icon": "arrow-thin-left", style: { marginRight: 8 } }),
+            /* @__PURE__ */ jsxs4(Button, { onClick: removeColumn2, disabled: selectedColumn === null, children: [
+              /* @__PURE__ */ jsx5("span", { "data-icon": "arrow-thin-left", style: { marginRight: 8 } }),
               "Hide"
             ] }),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               Button,
               {
                 "aria-label": "Move column up",
                 onClick: moveColumnUp,
                 disabled: selectedColumn === null || (chosenColumns == null ? void 0 : chosenColumns.indexOf(selectedColumn)) === 0,
                 style: { width: 28 },
-                children: /* @__PURE__ */ jsx4("span", { "data-icon": "arrow-thin-up" })
+                children: /* @__PURE__ */ jsx5("span", { "data-icon": "arrow-thin-up" })
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               Button,
               {
                 "aria-label": "Move column down",
                 onClick: moveColumnDown,
                 disabled: selectedColumn === null || chosenColumns.indexOf(selectedColumn) === chosenColumns.length - 1,
                 style: { width: 28 },
-                children: /* @__PURE__ */ jsx4("span", { "data-icon": "arrow-thin-down" })
+                children: /* @__PURE__ */ jsx5("span", { "data-icon": "arrow-thin-down" })
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               Button,
               {
                 "aria-label": "Add calculated column",
-                className: `${classBase4}-addCalculatedColumn`,
+                className: `${classBase5}-addCalculatedColumn`,
                 onClick: onAddCalculatedColumnClick,
                 variant: "primary",
-                children: /* @__PURE__ */ jsx4("span", { "data-icon": "add" })
+                children: /* @__PURE__ */ jsx5("span", { "data-icon": "add" })
               }
             )
           ]
@@ -2027,7 +2081,7 @@ import {
   StepperInput as StepperInput2
 } from "@heswell/salt-lab";
 import { Panel as Panel2, Text as Text3 } from "@salt-ds/core";
-import cx4 from "classnames";
+import cx5 from "classnames";
 import {
   useCallback as useCallback5,
   useState as useState2
@@ -2037,14 +2091,14 @@ import {
 import { getRegisteredCellRenderers } from "@vuu-ui/vuu-utils";
 import { Dropdown } from "@heswell/salt-lab";
 import { Panel } from "@salt-ds/core";
-import cx3 from "classnames";
+import cx4 from "classnames";
 import { useMemo as useMemo2 } from "react";
 
 // src/datagrid-configuration-ui/column-type-panel/NumericColumnPanel.tsx
 import { FormField, StepperInput, Switch } from "@heswell/salt-lab";
 import { Text as Text2 } from "@salt-ds/core";
 import { useCallback as useCallback4 } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultValues = {
   alignOnDecimals: false,
   decimals: 4,
@@ -2095,9 +2149,9 @@ var NumericColumnPanel = ({
   );
   switch (column.serverDataType) {
     case "double":
-      return /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx5(FormField, { label: "No of Decimals", labelPlacement: "top", children: /* @__PURE__ */ jsx5(StepperInput, { value: decimals, onChange: handleChangeDecimals }) }),
-        /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsxs5(Fragment, { children: [
+        /* @__PURE__ */ jsx6(FormField, { label: "No of Decimals", labelPlacement: "top", children: /* @__PURE__ */ jsx6(StepperInput, { value: decimals, onChange: handleChangeDecimals }) }),
+        /* @__PURE__ */ jsx6(
           Switch,
           {
             checked: alignOnDecimals,
@@ -2106,7 +2160,7 @@ var NumericColumnPanel = ({
             onChange: handleChangeAlignOnDecimals
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           Switch,
           {
             checked: zeroPad,
@@ -2118,24 +2172,24 @@ var NumericColumnPanel = ({
       ] });
     case "long":
     case "int":
-      return /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5(Text2, { children: "Work in progress" }) });
+      return /* @__PURE__ */ jsx6(Fragment, { children: /* @__PURE__ */ jsx6(Text2, { children: "Work in progress" }) });
     default:
       return null;
   }
 };
 
 // src/datagrid-configuration-ui/column-type-panel/StringColumnPanel.tsx
-import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7 } from "react/jsx-runtime";
 var StringColumnPanel = ({
   column,
   dispatchColumnAction
 }) => {
-  return /* @__PURE__ */ jsx6(Fragment2, { children: "String" });
+  return /* @__PURE__ */ jsx7(Fragment2, { children: "String" });
 };
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase5 = "vuuColumnTypePanel";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase6 = "vuuColumnTypePanel";
 var integerCellRenderers = ["Default Renderer (int, long)"];
 var doubleCellRenderers = ["Default Renderer (double)"];
 var stringCellRenderers = ["Default Renderer (string)"];
@@ -2167,7 +2221,7 @@ var ColumnTypePanel = ({
       case "double":
       case "int":
       case "long":
-        return /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx8(
           NumericColumnPanel,
           {
             column,
@@ -2175,7 +2229,7 @@ var ColumnTypePanel = ({
           }
         );
       default:
-        return /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx8(
           StringColumnPanel,
           {
             column,
@@ -2186,21 +2240,21 @@ var ColumnTypePanel = ({
   }, [column, dispatchColumnAction]);
   const { serverDataType = "string" } = column;
   const availableRenderers = getAvailableCellRenderers(column);
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(
       Dropdown,
       {
-        className: cx3(`${classBase5}-renderer`),
+        className: cx4(`${classBase6}-renderer`),
         fullWidth: true,
         selected: availableRenderers[0],
         source: availableRenderers
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       Panel,
       {
         ...props,
-        className: cx3(classBase5, className, `${classBase5}-${serverDataType}`),
+        className: cx4(classBase6, className, `${classBase6}-${serverDataType}`),
         children: content
       }
     )
@@ -2208,8 +2262,8 @@ var ColumnTypePanel = ({
 };
 
 // src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase6 = "vuuColumnSettingsPanel";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase7 = "vuuColumnSettingsPanel";
 var tabstripProps = {
   className: "salt-density-high"
 };
@@ -2250,54 +2304,54 @@ var ColumnSettingsPanel = ({
     (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
     [dispatchUpdate]
   );
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: classBase6,
+      className: classBase7,
       ...props,
       style: {
         ...styleProp
       },
       children: [
-        /* @__PURE__ */ jsx8(Text3, { as: "h4", children: "Column Settings" }),
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx9(Text3, { as: "h4", children: "Column Settings" }),
+        /* @__PURE__ */ jsxs7(
           Stack,
           {
             active: activeTab,
             showTabs: true,
-            className: cx4(`${classBase6}-columnTabs`),
+            className: cx5(`${classBase7}-columnTabs`),
             onTabSelectionChanged: setActiveTab,
             TabstripProps: tabstripProps,
             children: [
-              /* @__PURE__ */ jsxs6(Panel2, { title: "Column", children: [
-                /* @__PURE__ */ jsx8(FormField2, { label: "Hidden", labelPlacement: "left", children: /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs7(Panel2, { title: "Column", children: [
+                /* @__PURE__ */ jsx9(FormField2, { label: "Hidden", labelPlacement: "left", children: /* @__PURE__ */ jsx9(
                   Checkbox,
                   {
                     checked: column.hidden === true,
                     onChange: handleChangeHidden
                   }
                 ) }),
-                /* @__PURE__ */ jsx8(FormField2, { label: "Label", labelPlacement: "left", children: /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(FormField2, { label: "Label", labelPlacement: "left", children: /* @__PURE__ */ jsx9(
                   Input,
                   {
                     value: (_a = column.label) != null ? _a : column.name,
                     onChange: handleChangeLabel
                   }
                 ) }),
-                /* @__PURE__ */ jsx8(FormField2, { label: "Width", labelPlacement: "left", children: /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(FormField2, { label: "Width", labelPlacement: "left", children: /* @__PURE__ */ jsx9(
                   StepperInput2,
                   {
                     value: (_b = column.width) != null ? _b : 100,
                     onChange: handleChangeWidth
                   }
                 ) }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   FormField2,
                   {
                     label: "Align",
                     labelPlacement: "left",
                     ActivationIndicatorComponent: NullActivationIndicator,
-                    children: /* @__PURE__ */ jsxs6(
+                    children: /* @__PURE__ */ jsxs7(
                       RadioButtonGroup,
                       {
                         "aria-label": "Column Align",
@@ -2305,20 +2359,20 @@ var ColumnSettingsPanel = ({
                         legend: "Align",
                         onChange: handleChangeAlign,
                         children: [
-                          /* @__PURE__ */ jsx8(RadioButton, { label: "Left", value: "left" }),
-                          /* @__PURE__ */ jsx8(RadioButton, { label: "Right", value: "right" })
+                          /* @__PURE__ */ jsx9(RadioButton, { label: "Left", value: "left" }),
+                          /* @__PURE__ */ jsx9(RadioButton, { label: "Right", value: "right" })
                         ]
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   FormField2,
                   {
                     label: "Pin Column",
                     labelPlacement: "left",
                     ActivationIndicatorComponent: NullActivationIndicator,
-                    children: /* @__PURE__ */ jsxs6(
+                    children: /* @__PURE__ */ jsxs7(
                       RadioButtonGroup,
                       {
                         "aria-label": "Pin Column",
@@ -2326,16 +2380,16 @@ var ColumnSettingsPanel = ({
                         legend: "Pin Column",
                         onChange: handleChangePin,
                         children: [
-                          /* @__PURE__ */ jsx8(RadioButton, { label: "Do not pin", value: "" }),
-                          /* @__PURE__ */ jsx8(RadioButton, { label: "Left", value: "left" }),
-                          /* @__PURE__ */ jsx8(RadioButton, { label: "Right", value: "right" })
+                          /* @__PURE__ */ jsx9(RadioButton, { label: "Do not pin", value: "" }),
+                          /* @__PURE__ */ jsx9(RadioButton, { label: "Left", value: "left" }),
+                          /* @__PURE__ */ jsx9(RadioButton, { label: "Right", value: "right" })
                         ]
                       }
                     )
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 ColumnTypePanel,
                 {
                   column,
@@ -2343,25 +2397,25 @@ var ColumnSettingsPanel = ({
                   title: "Data Cell"
                 }
               ),
-              /* @__PURE__ */ jsxs6(Panel2, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs7(Panel2, { title: "Vuu", variant: "secondary", children: [
+                /* @__PURE__ */ jsx9(
                   FormField2,
                   {
                     label: "Name",
                     labelPlacement: "top",
                     readOnly: true,
                     variant: "secondary",
-                    children: /* @__PURE__ */ jsx8(Input, { value: column.name })
+                    children: /* @__PURE__ */ jsx9(Input, { value: column.name })
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   FormField2,
                   {
                     label: "Vuu type",
                     labelPlacement: "top",
                     readOnly: true,
                     variant: "secondary",
-                    children: /* @__PURE__ */ jsx8(Input, { value: column.serverDataType })
+                    children: /* @__PURE__ */ jsx9(Input, { value: column.serverDataType })
                   }
                 )
               ] })
@@ -2382,8 +2436,8 @@ import {
 } from "@heswell/salt-lab";
 import { Panel as Panel3, Text as Text4 } from "@salt-ds/core";
 import { useCallback as useCallback6 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var classBase7 = "vuuGridSettingsPanel";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var classBase8 = "vuuGridSettingsPanel";
 var NullActivationIndicator2 = () => null;
 var GridSettingsPanel = ({
   config,
@@ -2409,25 +2463,24 @@ var GridSettingsPanel = ({
     (value) => dispatchUpdate({ columnDefaultWidth: parseInt(value.toString(), 10) }),
     [dispatchUpdate]
   );
-  console.log(`GridSettingsPanel ${JSON.stringify(config.columns, null, 2)}`);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: classBase7,
+      className: classBase8,
       ...props,
       style: {
         ...styleProp
       },
       children: [
-        /* @__PURE__ */ jsx9(Text4, { as: "h4", children: "Grid Settings" }),
-        /* @__PURE__ */ jsxs7(Panel3, { children: [
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(Text4, { as: "h4", children: "Grid Settings" }),
+        /* @__PURE__ */ jsxs8(Panel3, { children: [
+          /* @__PURE__ */ jsx10(
             FormField3,
             {
               label: "Format column labels",
               labelPlacement: "left",
               ActivationIndicatorComponent: NullActivationIndicator2,
-              children: /* @__PURE__ */ jsxs7(
+              children: /* @__PURE__ */ jsxs8(
                 RadioButtonGroup2,
                 {
                   "aria-label": "Format column labels",
@@ -2435,15 +2488,15 @@ var GridSettingsPanel = ({
                   legend: "Format column labels",
                   onChange: handleChangeLabelFormatting,
                   children: [
-                    /* @__PURE__ */ jsx9(RadioButton2, { label: "No Formatting", value: void 0 }),
-                    /* @__PURE__ */ jsx9(RadioButton2, { label: "Capitalize", value: "capitalize" }),
-                    /* @__PURE__ */ jsx9(RadioButton2, { label: "Uppercase", value: "uppercase" })
+                    /* @__PURE__ */ jsx10(RadioButton2, { label: "No Formatting", value: void 0 }),
+                    /* @__PURE__ */ jsx10(RadioButton2, { label: "Capitalize", value: "capitalize" }),
+                    /* @__PURE__ */ jsx10(RadioButton2, { label: "Uppercase", value: "uppercase" })
                   ]
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx9(FormField3, { label: "Default Column Width", labelPlacement: "left", children: /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(FormField3, { label: "Default Column Width", labelPlacement: "left", children: /* @__PURE__ */ jsx10(
             StepperInput3,
             {
               value: (_a = config.columnDefaultWidth) != null ? _a : 100,
@@ -2624,7 +2677,7 @@ import {
   useRef as useRef4,
   useState as useState3
 } from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var CalculatedColumnPanel = ({
   columns,
   dispatchColumnAction,
@@ -2667,10 +2720,10 @@ var CalculatedColumnPanel = ({
       });
     }
   }, [columnName, dispatchColumnAction]);
-  return /* @__PURE__ */ jsxs8(Panel4, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
-    /* @__PURE__ */ jsx10(Text5, { styleAs: "h4", children: "Define Computed Column" }),
-    /* @__PURE__ */ jsx10(FormField4, { label: "Column Name", labelPlacement: "left", children: /* @__PURE__ */ jsx10(Input2, { value: columnName, onChange: handleChangeName }) }),
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs9(Panel4, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
+    /* @__PURE__ */ jsx11(Text5, { styleAs: "h4", children: "Define Computed Column" }),
+    /* @__PURE__ */ jsx11(FormField4, { label: "Column Name", labelPlacement: "left", children: /* @__PURE__ */ jsx11(Input2, { value: columnName, onChange: handleChangeName }) }),
+    /* @__PURE__ */ jsx11(
       ColumnExpressionInput,
       {
         onChange: handleChangeExpression,
@@ -2678,13 +2731,13 @@ var CalculatedColumnPanel = ({
         suggestionProvider
       }
     ),
-    /* @__PURE__ */ jsx10("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx10(Button2, { onClick: handleSave, children: "Add Column" }) })
+    /* @__PURE__ */ jsx11("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx11(Button2, { onClick: handleSave, children: "Add Column" }) })
   ] });
 };
 
 // src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var classBase8 = "vuuDatagridSettingsPanel";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var classBase9 = "vuuDatagridSettingsPanel";
 var getTabLabel = () => void 0;
 var icons = [
   "table-settings",
@@ -2739,27 +2792,27 @@ var DatagridSettingsPanel = ({
     []
   );
   const panelShift = selectedTabIndex === 2 ? "right" : void 0;
-  return /* @__PURE__ */ jsxs9("div", { ...props, className: cx5(classBase8, className), children: [
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10("div", { ...props, className: cx6(classBase9, className), children: [
+    /* @__PURE__ */ jsxs10(
       Stack2,
       {
         TabstripProps: tabstripProps2,
-        className: `${classBase8}-stack`,
+        className: `${classBase9}-stack`,
         getTabIcon,
         getTabLabel,
         active: selectedTabIndex === 2 ? 1 : selectedTabIndex,
         onTabSelectionChanged: handleTabSelectionChanged,
         showTabs: true,
         children: [
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             GridSettingsPanel,
             {
               config: gridSettings,
               dispatchColumnAction
             }
           ),
-          /* @__PURE__ */ jsxs9("div", { className: `${classBase8}-columnPanels`, "data-align": panelShift, children: [
-            /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs10("div", { className: `${classBase9}-columnPanels`, "data-align": panelShift, children: [
+            /* @__PURE__ */ jsx12(
               ColumnPicker,
               {
                 availableColumns,
@@ -2770,7 +2823,7 @@ var DatagridSettingsPanel = ({
                 selectedColumn
               }
             ),
-            selectedColumn === null ? /* @__PURE__ */ jsx11(Panel5, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ jsx11(
+            selectedColumn === null ? /* @__PURE__ */ jsx12(Panel5, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ jsx12(
               ColumnSettingsPanel,
               {
                 column: selectedColumn,
@@ -2779,8 +2832,8 @@ var DatagridSettingsPanel = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx11("div", { title: "Column Settings", children: "Column Settings" }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12("div", { title: "Column Settings", children: "Column Settings" }),
+          /* @__PURE__ */ jsx12(
             CalculatedColumnPanel,
             {
               columns: gridSettings.columns,
@@ -2791,19 +2844,19 @@ var DatagridSettingsPanel = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs9("div", { className: `${classBase8}-buttonBar`, children: [
-      /* @__PURE__ */ jsx11(Button3, { onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx11(Button3, { onClick: handleApply, children: "Apply" }),
-      /* @__PURE__ */ jsx11(Button3, { onClick: handleSave, children: "Save" })
+    /* @__PURE__ */ jsxs10("div", { className: `${classBase9}-buttonBar`, children: [
+      /* @__PURE__ */ jsx12(Button3, { onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx12(Button3, { onClick: handleApply, children: "Apply" }),
+      /* @__PURE__ */ jsx12(Button3, { onClick: handleSave, children: "Save" })
     ] })
   ] });
 };
 
 // src/datasource-stats/DatasourceStats.tsx
 import { useEffect as useEffect3, useState as useState5 } from "react";
-import cx6 from "classnames";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-var classBase9 = "vuuDatasourceStats";
+import cx7 from "classnames";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var classBase10 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
 var DataSourceStats = ({
   className: classNameProp,
@@ -2821,17 +2874,17 @@ var DataSourceStats = ({
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
   }, [dataSource]);
-  const className = cx6(classBase9, classNameProp);
+  const className = cx7(classBase10, classNameProp);
   const from = numberFormatter.format(range.from);
   const to = numberFormatter.format(range.to - 1);
   const value = numberFormatter.format(size);
-  return /* @__PURE__ */ jsxs10("div", { className, children: [
-    /* @__PURE__ */ jsx12("span", { children: "Showing rows" }),
-    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-range`, children: from }),
-    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-range`, children: to }),
-    /* @__PURE__ */ jsx12("span", { children: "of" }),
-    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-size`, children: value }),
-    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-optimize`, children: optimize })
+  return /* @__PURE__ */ jsxs11("div", { className, children: [
+    /* @__PURE__ */ jsx13("span", { children: "Showing rows" }),
+    /* @__PURE__ */ jsx13("span", { className: `${classBase10}-range`, children: from }),
+    /* @__PURE__ */ jsx13("span", { className: `${classBase10}-range`, children: to }),
+    /* @__PURE__ */ jsx13("span", { children: "of" }),
+    /* @__PURE__ */ jsx13("span", { className: `${classBase10}-size`, children: value }),
+    /* @__PURE__ */ jsx13("span", { className: `${classBase10}-optimize`, children: optimize })
   ] });
 };
 export {