@vuu-ui/vuu-table-extras 0.8.5-debug → 0.8.6-debug

package/esm/index.js

@@ -1876,12 +1876,12 @@ import {
 } from "react";
 
 // src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx
-import { List } from "@heswell/salt-lab";
+import { List } from "@salt-ds/lab";
 import { Button, Text, useIdMemo as useId } from "@salt-ds/core";
 import { useCallback as useCallback3, useState } from "react";
 
 // src/datagrid-configuration-ui/column-picker/ColumnListItem.tsx
-import { ListItem } from "@heswell/salt-lab";
+import { ListItem } from "@salt-ds/lab";
 import cx3 from "classnames";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var classBase4 = "vuuColumnListItem";
@@ -1949,12 +1949,6 @@ var ColumnPicker = ({
     (evt, selected) => onSelectionChange == null ? void 0 : onSelectionChange(selected),
     [onSelectionChange]
   );
-  const handleDrop = useCallback3(
-    (moveFrom, moveTo) => {
-      dispatch({ type: "moveColumn", moveFrom, moveTo });
-    },
-    [dispatch]
-  );
   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" }) }),
@@ -2007,13 +2001,11 @@ var ColumnPicker = ({
             List,
             {
               ListItem: ColumnListItem,
-              allowDragDrop: true,
               borderless: true,
               height: "100%",
               id: `selected-${id}`,
               itemHeight: 24,
               itemToString: (item) => item.name,
-              onMoveListItem: handleDrop,
               onSelectionChange: handleSelectionChange2,
               selected: selectedColumn,
               style: { flex: 1 },
@@ -2076,15 +2068,17 @@ var ColumnPicker = ({
 
 // src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
 import { Stack } from "@vuu-ui/vuu-layout";
+import { StepperInput as StepperInput2 } from "@salt-ds/lab";
 import {
   Checkbox,
   FormField as FormField2,
+  FormFieldLabel as FormFieldLabel2,
   Input,
+  Panel as Panel2,
   RadioButton,
   RadioButtonGroup,
-  StepperInput as StepperInput2
-} from "@heswell/salt-lab";
-import { Panel as Panel2, Text as Text3 } from "@salt-ds/core";
+  Text as Text3
+} from "@salt-ds/core";
 import cx5 from "classnames";
 import {
   useCallback as useCallback5,
@@ -2093,14 +2087,14 @@ import {
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
 import { getRegisteredCellRenderers } from "@vuu-ui/vuu-utils";
-import { Dropdown } from "@heswell/salt-lab";
+import { Dropdown } from "@salt-ds/lab";
 import { Panel } from "@salt-ds/core";
 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 { StepperInput, Switch } from "@salt-ds/lab";
+import { FormField, FormFieldLabel, Text as Text2 } from "@salt-ds/core";
 import { useCallback as useCallback4 } from "react";
 import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultValues = {
@@ -2154,7 +2148,10 @@ var NumericColumnPanel = ({
   switch (column.serverDataType) {
     case "double":
       return /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx6(FormField, { label: "No of Decimals", labelPlacement: "top", children: /* @__PURE__ */ jsx6(StepperInput, { value: decimals, onChange: handleChangeDecimals }) }),
+        /* @__PURE__ */ jsxs5(FormField, { labelPlacement: "top", children: [
+          /* @__PURE__ */ jsx6(FormFieldLabel, { children: "No of Decimals" }),
+          /* @__PURE__ */ jsx6(StepperInput, { value: decimals, onChange: handleChangeDecimals })
+        ] }),
         /* @__PURE__ */ jsx6(
           Switch,
           {
@@ -2272,7 +2269,6 @@ var classBase7 = "vuuColumnSettingsPanel";
 var tabstripProps = {
   className: "salt-density-high"
 };
-var NullActivationIndicator = () => null;
 var ColumnSettingsPanel = ({
   column,
   dispatchColumnAction,
@@ -2298,11 +2294,11 @@ var ColumnSettingsPanel = ({
     [dispatchUpdate]
   );
   const handleChangeHidden = useCallback5(
-    (evt, value) => dispatchUpdate({ hidden: value }),
+    (evt) => dispatchUpdate({ hidden: evt.target.checked }),
     [dispatchUpdate]
   );
   const handleChangeLabel = useCallback5(
-    (evt, value) => dispatchUpdate({ label: value }),
+    (evt) => dispatchUpdate({ label: evt.target.value }),
     [dispatchUpdate]
   );
   const handleChangeWidth = useCallback5(
@@ -2323,76 +2319,72 @@ var ColumnSettingsPanel = ({
           Stack,
           {
             active: activeTab,
-            showTabs: true,
             className: cx5(`${classBase7}-columnTabs`),
             onTabSelectionChanged: setActiveTab,
             TabstripProps: tabstripProps,
             children: [
               /* @__PURE__ */ jsxs7(Panel2, { title: "Column", children: [
-                /* @__PURE__ */ jsx9(FormField2, { label: "Hidden", labelPlacement: "left", children: /* @__PURE__ */ jsx9(
-                  Checkbox,
-                  {
-                    checked: column.hidden === true,
-                    onChange: handleChangeHidden
-                  }
-                ) }),
-                /* @__PURE__ */ jsx9(FormField2, { label: "Label", labelPlacement: "left", children: /* @__PURE__ */ jsx9(
-                  Input,
-                  {
-                    value: (_a = column.label) != null ? _a : column.name,
-                    onChange: handleChangeLabel
-                  }
-                ) }),
-                /* @__PURE__ */ jsx9(FormField2, { label: "Width", labelPlacement: "left", children: /* @__PURE__ */ jsx9(
-                  StepperInput2,
-                  {
-                    value: (_b = column.width) != null ? _b : 100,
-                    onChange: handleChangeWidth
-                  }
-                ) }),
-                /* @__PURE__ */ jsx9(
-                  FormField2,
-                  {
-                    label: "Align",
-                    labelPlacement: "left",
-                    ActivationIndicatorComponent: NullActivationIndicator,
-                    children: /* @__PURE__ */ jsxs7(
-                      RadioButtonGroup,
-                      {
-                        "aria-label": "Column Align",
-                        value: (_c = column.align) != null ? _c : "left",
-                        legend: "Align",
-                        onChange: handleChangeAlign,
-                        children: [
-                          /* @__PURE__ */ jsx9(RadioButton, { label: "Left", value: "left" }),
-                          /* @__PURE__ */ jsx9(RadioButton, { label: "Right", value: "right" })
-                        ]
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx9(
-                  FormField2,
-                  {
-                    label: "Pin Column",
-                    labelPlacement: "left",
-                    ActivationIndicatorComponent: NullActivationIndicator,
-                    children: /* @__PURE__ */ jsxs7(
-                      RadioButtonGroup,
-                      {
-                        "aria-label": "Pin Column",
-                        value: (_d = column.pin) != null ? _d : "",
-                        legend: "Pin Column",
-                        onChange: handleChangePin,
-                        children: [
-                          /* @__PURE__ */ jsx9(RadioButton, { label: "Do not pin", value: "" }),
-                          /* @__PURE__ */ jsx9(RadioButton, { label: "Left", value: "left" }),
-                          /* @__PURE__ */ jsx9(RadioButton, { label: "Right", value: "right" })
-                        ]
-                      }
-                    )
-                  }
-                )
+                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Hidden" }),
+                  /* @__PURE__ */ jsx9(
+                    Checkbox,
+                    {
+                      checked: column.hidden === true,
+                      onChange: handleChangeHidden
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Label" }),
+                  /* @__PURE__ */ jsx9(
+                    Input,
+                    {
+                      value: (_a = column.label) != null ? _a : column.name,
+                      onChange: handleChangeLabel
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Width" }),
+                  /* @__PURE__ */ jsx9(
+                    StepperInput2,
+                    {
+                      value: (_b = column.width) != null ? _b : 100,
+                      onChange: handleChangeWidth
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "ALign" }),
+                  /* @__PURE__ */ jsxs7(
+                    RadioButtonGroup,
+                    {
+                      "aria-label": "Column Align",
+                      value: (_c = column.align) != null ? _c : "left",
+                      onChange: handleChangeAlign,
+                      children: [
+                        /* @__PURE__ */ jsx9(RadioButton, { label: "Left", value: "left" }),
+                        /* @__PURE__ */ jsx9(RadioButton, { label: "Right", value: "right" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Pin Column" }),
+                  /* @__PURE__ */ jsxs7(
+                    RadioButtonGroup,
+                    {
+                      "aria-label": "Pin Column",
+                      value: (_d = column.pin) != null ? _d : "",
+                      onChange: handleChangePin,
+                      children: [
+                        /* @__PURE__ */ jsx9(RadioButton, { label: "Do not pin", value: "" }),
+                        /* @__PURE__ */ jsx9(RadioButton, { label: "Left", value: "left" }),
+                        /* @__PURE__ */ jsx9(RadioButton, { label: "Right", value: "right" })
+                      ]
+                    }
+                  )
+                ] })
               ] }),
               /* @__PURE__ */ jsx9(
                 ColumnTypePanel,
@@ -2403,26 +2395,14 @@ var ColumnSettingsPanel = ({
                 }
               ),
               /* @__PURE__ */ jsxs7(Panel2, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ jsx9(
-                  FormField2,
-                  {
-                    label: "Name",
-                    labelPlacement: "top",
-                    readOnly: true,
-                    variant: "secondary",
-                    children: /* @__PURE__ */ jsx9(Input, { value: column.name })
-                  }
-                ),
-                /* @__PURE__ */ jsx9(
-                  FormField2,
-                  {
-                    label: "Vuu type",
-                    labelPlacement: "top",
-                    readOnly: true,
-                    variant: "secondary",
-                    children: /* @__PURE__ */ jsx9(Input, { value: column.serverDataType })
-                  }
-                )
+                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "top", readOnly: true, children: [
+                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Name" }),
+                  /* @__PURE__ */ jsx9(Input, { value: column.name })
+                ] }),
+                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "top", readOnly: true, children: [
+                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Vuu Type" }),
+                  /* @__PURE__ */ jsx9(Input, { value: column.serverDataType })
+                ] })
               ] })
             ]
           }
@@ -2435,15 +2415,16 @@ var ColumnSettingsPanel = ({
 // src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.tsx
 import {
   FormField as FormField3,
+  FormFieldLabel as FormFieldLabel3,
+  Panel as Panel3,
   RadioButton as RadioButton2,
   RadioButtonGroup as RadioButtonGroup2,
-  StepperInput as StepperInput3
-} from "@heswell/salt-lab";
-import { Panel as Panel3, Text as Text4 } from "@salt-ds/core";
+  Text as Text4
+} from "@salt-ds/core";
+import { StepperInput as StepperInput3 } from "@salt-ds/lab";
 import { useCallback as useCallback6 } from "react";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var classBase8 = "vuuGridSettingsPanel";
-var NullActivationIndicator2 = () => null;
 var GridSettingsPanel = ({
   config,
   dispatchColumnAction,
@@ -2479,35 +2460,32 @@ var GridSettingsPanel = ({
       children: [
         /* @__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__ */ jsxs8(
-                RadioButtonGroup2,
-                {
-                  "aria-label": "Format column labels",
-                  value: config.columnFormatHeader,
-                  legend: "Format column labels",
-                  onChange: handleChangeLabelFormatting,
-                  children: [
-                    /* @__PURE__ */ jsx10(RadioButton2, { label: "No Formatting", value: void 0 }),
-                    /* @__PURE__ */ jsx10(RadioButton2, { label: "Capitalize", value: "capitalize" }),
-                    /* @__PURE__ */ jsx10(RadioButton2, { label: "Uppercase", value: "uppercase" })
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx10(FormField3, { label: "Default Column Width", labelPlacement: "left", children: /* @__PURE__ */ jsx10(
-            StepperInput3,
-            {
-              value: (_a = config.columnDefaultWidth) != null ? _a : 100,
-              onChange: handleChangeWidth
-            }
-          ) })
+          /* @__PURE__ */ jsxs8(FormField3, { labelPlacement: "left", children: [
+            /* @__PURE__ */ jsx10(FormFieldLabel3, { children: "Format column labels" }),
+            /* @__PURE__ */ jsxs8(
+              RadioButtonGroup2,
+              {
+                "aria-label": "Format column labels",
+                value: config.columnFormatHeader,
+                onChange: handleChangeLabelFormatting,
+                children: [
+                  /* @__PURE__ */ jsx10(RadioButton2, { label: "No Formatting", value: void 0 }),
+                  /* @__PURE__ */ jsx10(RadioButton2, { label: "Capitalize", value: "capitalize" }),
+                  /* @__PURE__ */ jsx10(RadioButton2, { label: "Uppercase", value: "uppercase" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs8(FormField3, { labelPlacement: "left", children: [
+            /* @__PURE__ */ jsx10(FormFieldLabel3, { children: "Default Column Width" }),
+            /* @__PURE__ */ jsx10(
+              StepperInput3,
+              {
+                value: (_a = config.columnDefaultWidth) != null ? _a : 100,
+                onChange: handleChangeWidth
+              }
+            )
+          ] })
         ] })
       ]
     }
@@ -2516,7 +2494,7 @@ var GridSettingsPanel = ({
 
 // src/datagrid-configuration-ui/settings-panel/useGridSettings.ts
 import { useReducer } from "react";
-import { moveItem } from "@heswell/salt-lab";
+import { moveItem } from "@vuu-ui/vuu-ui-controls";
 import { fromServerDataType } from "@vuu-ui/vuu-utils";
 var gridSettingsReducer = (state, action) => {
   console.log(`gridSettingsReducer ${action.type}`);
@@ -2675,8 +2653,14 @@ function replaceColumn(columns, column) {
 import { Stack as Stack2 } from "@vuu-ui/vuu-layout";
 
 // src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.tsx
-import { FormField as FormField4, Input as Input2 } from "@heswell/salt-lab";
-import { Button as Button2, Panel as Panel4, Text as Text5 } from "@salt-ds/core";
+import {
+  Button as Button2,
+  FormField as FormField4,
+  FormFieldLabel as FormFieldLabel4,
+  Input as Input2,
+  Panel as Panel4,
+  Text as Text5
+} from "@salt-ds/core";
 import {
   useCallback as useCallback7,
   useRef as useRef4,
@@ -2727,7 +2711,10 @@ var CalculatedColumnPanel = ({
   }, [columnName, dispatchColumnAction]);
   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__ */ jsxs9(FormField4, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsx11(FormFieldLabel4, { children: "Column Name" }),
+      /* @__PURE__ */ jsx11(Input2, { value: columnName, onChange: handleChangeName })
+    ] }),
     /* @__PURE__ */ jsx11(
       ColumnExpressionInput,
       {
@@ -2807,7 +2794,6 @@ var DatagridSettingsPanel = ({
         getTabLabel,
         active: selectedTabIndex === 2 ? 1 : selectedTabIndex,
         onTabSelectionChanged: handleTabSelectionChanged,
-        showTabs: true,
         children: [
           /* @__PURE__ */ jsx12(
             GridSettingsPanel,
@@ -2889,15 +2875,17 @@ var DataSourceStats = ({
 
 // src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
 import { Stack as Stack3 } from "@vuu-ui/vuu-layout";
+import { StepperInput as StepperInput5 } from "@salt-ds/lab";
 import {
   Checkbox as Checkbox2,
   FormField as FormField6,
+  FormFieldLabel as FormFieldLabel6,
   Input as Input3,
+  Panel as Panel7,
   RadioButton as RadioButton3,
   RadioButtonGroup as RadioButtonGroup3,
-  StepperInput as StepperInput5
-} from "@heswell/salt-lab";
-import { Panel as Panel7, Text as Text7 } from "@salt-ds/core";
+  Text as Text7
+} from "@salt-ds/core";
 import cx9 from "classnames";
 import {
   useCallback as useCallback10,
@@ -2906,14 +2894,18 @@ import {
 
 // src/table-settings/column-type-panel/ColumnTypePanel.tsx
 import { getRegisteredCellRenderers as getRegisteredCellRenderers2 } from "@vuu-ui/vuu-utils";
-import { Dropdown as Dropdown2 } from "@heswell/salt-lab";
+import { Dropdown as Dropdown2 } from "@salt-ds/lab";
 import { Panel as Panel6 } from "@salt-ds/core";
 import cx8 from "classnames";
 import { useMemo as useMemo3 } from "react";
 
 // src/table-settings/column-type-panel/NumericColumnPanel.tsx
-import { FormField as FormField5, StepperInput as StepperInput4, Switch as Switch2 } from "@heswell/salt-lab";
-import { Text as Text6 } from "@salt-ds/core";
+import { StepperInput as StepperInput4, Switch as Switch2 } from "@salt-ds/lab";
+import {
+  FormField as FormField5,
+  FormFieldLabel as FormFieldLabel5,
+  Text as Text6
+} from "@salt-ds/core";
 import { useCallback as useCallback9 } from "react";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultValues2 = {
@@ -2967,7 +2959,10 @@ var NumericColumnPanel2 = ({
   switch (column.serverDataType) {
     case "double":
       return /* @__PURE__ */ jsxs12(Fragment4, { children: [
-        /* @__PURE__ */ jsx14(FormField5, { label: "No of Decimals", labelPlacement: "top", children: /* @__PURE__ */ jsx14(StepperInput4, { value: decimals, onChange: handleChangeDecimals }) }),
+        /* @__PURE__ */ jsxs12(FormField5, { labelPlacement: "top", children: [
+          /* @__PURE__ */ jsx14(FormFieldLabel5, { children: "No of Decimals" }),
+          /* @__PURE__ */ jsx14(StepperInput4, { value: decimals, onChange: handleChangeDecimals })
+        ] }),
         /* @__PURE__ */ jsx14(
           Switch2,
           {
@@ -3085,7 +3080,6 @@ var classBase12 = "vuuColumnSettingsPanel";
 var tabstripProps2 = {
   className: "salt-density-high"
 };
-var NullActivationIndicator3 = () => null;
 var ColumnSettingsPanel2 = ({
   column,
   dispatchColumnAction,
@@ -3111,11 +3105,11 @@ var ColumnSettingsPanel2 = ({
     [dispatchUpdate]
   );
   const handleChangeHidden = useCallback10(
-    (evt, value) => dispatchUpdate({ hidden: value }),
+    (evt) => dispatchUpdate({ hidden: evt.target.checked }),
     [dispatchUpdate]
   );
   const handleChangeLabel = useCallback10(
-    (evt, value) => dispatchUpdate({ label: value }),
+    (evt) => dispatchUpdate({ label: evt.target.value }),
     [dispatchUpdate]
   );
   const handleChangeWidth = useCallback10(
@@ -3136,76 +3130,72 @@ var ColumnSettingsPanel2 = ({
           Stack3,
           {
             active: activeTab,
-            showTabs: true,
             className: cx9(`${classBase12}-columnTabs`),
             onTabSelectionChanged: setActiveTab,
             TabstripProps: tabstripProps2,
             children: [
               /* @__PURE__ */ jsxs14(Panel7, { title: "Column", children: [
-                /* @__PURE__ */ jsx17(FormField6, { label: "Hidden", labelPlacement: "left", children: /* @__PURE__ */ jsx17(
-                  Checkbox2,
-                  {
-                    checked: column.hidden === true,
-                    onChange: handleChangeHidden
-                  }
-                ) }),
-                /* @__PURE__ */ jsx17(FormField6, { label: "Label", labelPlacement: "left", children: /* @__PURE__ */ jsx17(
-                  Input3,
-                  {
-                    value: (_a = column.label) != null ? _a : column.name,
-                    onChange: handleChangeLabel
-                  }
-                ) }),
-                /* @__PURE__ */ jsx17(FormField6, { label: "Width", labelPlacement: "left", children: /* @__PURE__ */ jsx17(
-                  StepperInput5,
-                  {
-                    value: (_b = column.width) != null ? _b : 100,
-                    onChange: handleChangeWidth
-                  }
-                ) }),
-                /* @__PURE__ */ jsx17(
-                  FormField6,
-                  {
-                    label: "Align",
-                    labelPlacement: "left",
-                    ActivationIndicatorComponent: NullActivationIndicator3,
-                    children: /* @__PURE__ */ jsxs14(
-                      RadioButtonGroup3,
-                      {
-                        "aria-label": "Column Align",
-                        value: (_c = column.align) != null ? _c : "left",
-                        legend: "Align",
-                        onChange: handleChangeAlign,
-                        children: [
-                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Left", value: "left" }),
-                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Right", value: "right" })
-                        ]
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx17(
-                  FormField6,
-                  {
-                    label: "Pin Column",
-                    labelPlacement: "left",
-                    ActivationIndicatorComponent: NullActivationIndicator3,
-                    children: /* @__PURE__ */ jsxs14(
-                      RadioButtonGroup3,
-                      {
-                        "aria-label": "Pin Column",
-                        value: (_d = column.pin) != null ? _d : "",
-                        legend: "Pin Column",
-                        onChange: handleChangePin,
-                        children: [
-                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Do not pin", value: "" }),
-                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Left", value: "left" }),
-                          /* @__PURE__ */ jsx17(RadioButton3, { label: "Right", value: "right" })
-                        ]
-                      }
-                    )
-                  }
-                )
+                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Hidden" }),
+                  /* @__PURE__ */ jsx17(
+                    Checkbox2,
+                    {
+                      checked: column.hidden === true,
+                      onChange: handleChangeHidden
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Label" }),
+                  /* @__PURE__ */ jsx17(
+                    Input3,
+                    {
+                      value: (_a = column.label) != null ? _a : column.name,
+                      onChange: handleChangeLabel
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Width" }),
+                  /* @__PURE__ */ jsx17(
+                    StepperInput5,
+                    {
+                      value: (_b = column.width) != null ? _b : 100,
+                      onChange: handleChangeWidth
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Align" }),
+                  /* @__PURE__ */ jsxs14(
+                    RadioButtonGroup3,
+                    {
+                      "aria-label": "Column Align",
+                      value: (_c = column.align) != null ? _c : "left",
+                      onChange: handleChangeAlign,
+                      children: [
+                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Left", value: "left" }),
+                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Right", value: "right" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Pin Column" }),
+                  /* @__PURE__ */ jsxs14(
+                    RadioButtonGroup3,
+                    {
+                      "aria-label": "Pin Column",
+                      value: (_d = column.pin) != null ? _d : "",
+                      onChange: handleChangePin,
+                      children: [
+                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Do not pin", value: "" }),
+                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Left", value: "left" }),
+                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Right", value: "right" })
+                      ]
+                    }
+                  )
+                ] })
               ] }),
               /* @__PURE__ */ jsx17(
                 ColumnTypePanel2,
@@ -3216,26 +3206,14 @@ var ColumnSettingsPanel2 = ({
                 }
               ),
               /* @__PURE__ */ jsxs14(Panel7, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ jsx17(
-                  FormField6,
-                  {
-                    label: "Name",
-                    labelPlacement: "top",
-                    readOnly: true,
-                    variant: "secondary",
-                    children: /* @__PURE__ */ jsx17(Input3, { value: column.name })
-                  }
-                ),
-                /* @__PURE__ */ jsx17(
-                  FormField6,
-                  {
-                    label: "Vuu type",
-                    labelPlacement: "top",
-                    readOnly: true,
-                    variant: "secondary",
-                    children: /* @__PURE__ */ jsx17(Input3, { value: column.serverDataType })
-                  }
-                )
+                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "top", readOnly: true, children: [
+                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Name" }),
+                  /* @__PURE__ */ jsx17(Input3, { value: column.name })
+                ] }),
+                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "top", readOnly: true, children: [
+                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Vuu Type" }),
+                  /* @__PURE__ */ jsx17(Input3, { value: column.serverDataType })
+                ] })
               ] })
             ]
           }