@vuu-ui/vuu-table-extras 0.7.6-debug → 0.8.0-debug

package/cjs/index.js

@@ -50,6 +50,7 @@ var src_exports = {};
 __export(src_exports, {
   ColumnExpressionInput: () => ColumnExpressionInput,
   ColumnNamedTerms: () => ColumnNamedTerms,
+  ColumnSettingsPanel: () => ColumnSettingsPanel2,
   DataSourceStats: () => DataSourceStats,
   DatagridSettingsPanel: () => DatagridSettingsPanel,
   columnExpressionLanguageSupport: () => columnExpressionLanguageSupport,
@@ -63,13 +64,12 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/cell-renderers/background-cell/BackgroundCell.tsx
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
 var import_classnames = __toESM(require("classnames"), 1);
 
 // src/cell-renderers/background-cell/useDirection.ts
-var import_react = require("react");
 var import_vuu_utils = require("@vuu-ui/vuu-utils");
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_react = require("react");
 var INITIAL_VALUE = [void 0, void 0, void 0, void 0];
 function useDirection(key, value, column) {
   var _a;
@@ -77,7 +77,7 @@ function useDirection(key, value, column) {
   const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
   const { type: dataType } = column;
   const decimals = (0, import_vuu_utils.isTypeDescriptor)(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
-  const direction = key === prevKey && (0, import_vuu_utils2.isValidNumber)(value) && (0, import_vuu_utils2.isValidNumber)(prevValue) && column === prevColumn ? (0, import_vuu_utils2.getMovingValueDirection)(value, prevDirection, prevValue, decimals) : "";
+  const direction = key === prevKey && (0, import_vuu_utils.isValidNumber)(value) && (0, import_vuu_utils.isValidNumber)(prevValue) && column === prevColumn ? (0, import_vuu_utils.getMovingValueDirection)(value, prevDirection, prevValue, decimals) : "";
   (0, import_react.useEffect)(() => {
     ref.current = [key, value, column, direction];
   });
@@ -88,7 +88,7 @@ function useDirection(key, value, column) {
 var import_jsx_runtime = require("react/jsx-runtime");
 var CHAR_ARROW_UP = String.fromCharCode(11014);
 var CHAR_ARROW_DOWN = String.fromCharCode(11015);
-var { KEY } = import_vuu_utils3.metadataKeys;
+var { KEY } = import_vuu_utils2.metadataKeys;
 var classBase = "vuuBackgroundCell";
 var FlashStyle = {
   ArrowOnly: "arrow",
@@ -96,7 +96,7 @@ var FlashStyle = {
   ArrowBackground: "arrow-bg"
 };
 var getFlashStyle = (colType) => {
-  if ((0, import_vuu_utils3.isTypeDescriptor)(colType) && colType.renderer) {
+  if ((0, import_vuu_utils2.isTypeDescriptor)(colType) && colType.renderer) {
     if ("flashStyle" in colType.renderer) {
       return colType.renderer["flashStyle"];
     }
@@ -108,7 +108,7 @@ var BackgroundCell = ({ column, row }) => {
   const value = row[key];
   const flashStyle = getFlashStyle(type);
   const direction = useDirection(row[KEY], value, column);
-  const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === import_vuu_utils3.UP1 || direction === import_vuu_utils3.UP2 ? CHAR_ARROW_UP : direction === import_vuu_utils3.DOWN1 || direction === import_vuu_utils3.DOWN2 ? CHAR_ARROW_DOWN : null : null;
+  const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === import_vuu_utils2.UP1 || direction === import_vuu_utils2.UP2 ? CHAR_ARROW_UP : direction === import_vuu_utils2.DOWN1 || direction === import_vuu_utils2.DOWN2 ? CHAR_ARROW_DOWN : null : null;
   const dirClass = direction ? ` ` + direction : "";
   const className = (0, import_classnames.default)(classBase, dirClass, {
     [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
@@ -119,12 +119,12 @@ var BackgroundCell = ({ column, row }) => {
     valueFormatter(row[column.key])
   ] });
 };
-(0, import_vuu_utils3.registerComponent)("background", BackgroundCell, "cell-renderer", {
+(0, import_vuu_utils2.registerComponent)("background", BackgroundCell, "cell-renderer", {
   serverDataType: ["long", "int", "double"]
 });
 
 // src/cell-renderers/progress-cell/ProgressCell.tsx
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
 var import_classnames2 = __toESM(require("classnames"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var classBase2 = "vuuProgressCell";
@@ -133,7 +133,7 @@ var ProgressCell = ({ column, columnMap, row }) => {
   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)) {
+  if ((0, import_vuu_utils3.isTypeDescriptor)(type) && (0, import_vuu_utils3.isColumnTypeRenderer)(type.renderer)) {
     const { associatedField } = type.renderer;
     const associatedValue = row[columnMap[associatedField]];
     if (typeof value === "number" && typeof associatedValue === "number") {
@@ -168,13 +168,13 @@ var ProgressCell = ({ column, columnMap, row }) => {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${classBase2}-text`, children: `${percentage} %` })
   ] });
 };
-(0, import_vuu_utils4.registerComponent)("vuu.progress", ProgressCell, "cell-renderer", {
+(0, import_vuu_utils3.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_utils5 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
 var import_react3 = require("react");
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
@@ -1210,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_utils5.createEl)("div", "expression-type-container");
-    const span = (0, import_vuu_utils5.createEl)("span", "expression-type", completion.expressionType);
+    const div = (0, import_vuu_utils4.createEl)("div", "expression-type-container");
+    const span = (0, import_vuu_utils4.createEl)("span", "expression-type", completion.expressionType);
     div.appendChild(span);
     return div;
   } else {
@@ -1345,8 +1345,8 @@ var ColumnExpressionInput = ({
 
 // 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_utils7 = require("@vuu-ui/vuu-utils");
+var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
 var import_react4 = require("react");
 
 // src/column-expression-input/column-function-descriptors.ts
@@ -1622,7 +1622,7 @@ var columnFunctionDescriptors = [
 ];
 
 // src/column-expression-input/functionDocInfo.ts
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 var functionDocInfo = ({
   name,
   description,
@@ -1630,25 +1630,25 @@ var functionDocInfo = ({
   params,
   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);
+  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);
   headingElement.appendChild(nameElement);
   headingElement.appendChild(paramElement);
   headingElement.appendChild(typeElement);
-  const child2 = (0, import_vuu_utils6.createEl)("p", void 0, description);
+  const child2 = (0, import_vuu_utils5.createEl)("p", void 0, description);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   if (example) {
-    const exampleElement = (0, import_vuu_utils6.createEl)("div", "example-container", "Example:");
-    const expressionElement = (0, import_vuu_utils6.createEl)(
+    const exampleElement = (0, import_vuu_utils5.createEl)("div", "example-container", "Example:");
+    const expressionElement = (0, import_vuu_utils5.createEl)(
       "div",
       "example-expression",
       example.expression
     );
-    const resultElement = (0, import_vuu_utils6.createEl)("div", "example-result", example.result);
+    const resultElement = (0, import_vuu_utils5.createEl)("div", "example-result", example.result);
     exampleElement.appendChild(expressionElement);
     exampleElement.appendChild(resultElement);
     rootElement.appendChild(exampleElement);
@@ -1667,15 +1667,15 @@ var withApplySpace = (suggestions) => suggestions.map((suggestion) => {
 });
 var getValidColumns = (columns, { functionName, operator }) => {
   if (operator) {
-    return columns.filter(import_vuu_utils7.isNumericColumn);
+    return columns.filter(import_vuu_utils6.isNumericColumn);
   } else if (functionName) {
     const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
     if (fn) {
       switch (fn.accepts) {
         case "string":
-          return columns.filter(import_vuu_utils7.isTextColumn);
+          return columns.filter(import_vuu_utils6.isTextColumn);
         case "number":
-          return columns.filter(import_vuu_utils7.isNumericColumn);
+          return columns.filter(import_vuu_utils6.isNumericColumn);
         default:
           return columns;
       }
@@ -1704,7 +1704,7 @@ var arithmeticOperators = [
   { apply: "- ", boost: 2, label: "-", type: "operator" }
 ];
 var getOperators = (column) => {
-  if (column === void 0 || (0, import_vuu_utils7.isNumericColumn)(column)) {
+  if (column === void 0 || (0, import_vuu_utils6.isNumericColumn)(column)) {
     return arithmeticOperators;
   } else {
     return NO_OPERATORS;
@@ -1773,7 +1773,7 @@ var useColumnExpressionSuggestionProvider = ({
     [columns]
   );
   const latestSuggestionsRef = (0, import_react4.useRef)();
-  const getTypeaheadSuggestions = (0, import_vuu_data.useTypeaheadSuggestions)();
+  const getTypeaheadSuggestions = (0, import_vuu_data_react.useTypeaheadSuggestions)();
   const getSuggestions = (0, import_react4.useCallback)(
     async (suggestionType, options = NONE) => {
       const { columnName, functionName, operator, prefix } = options;
@@ -1811,7 +1811,7 @@ var useColumnExpressionSuggestionProvider = ({
           break;
         case "columnValue":
           if (columnName && operator) {
-            const params = (0, import_vuu_data.getTypeaheadParams)(
+            const params = (0, import_vuu_data_react.getTypeaheadParams)(
               table,
               columnName
               /*, startsWith*/
@@ -2075,7 +2075,7 @@ var import_classnames5 = __toESM(require("classnames"), 1);
 var import_react8 = require("react");
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_salt_lab4 = require("@heswell/salt-lab");
 var import_core3 = require("@salt-ds/core");
 var import_classnames4 = __toESM(require("classnames"), 1);
@@ -2171,7 +2171,8 @@ var StringColumnPanel = ({
   column,
   dispatchColumnAction
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "String" });
+  console.log({ column, dispatchColumnAction });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "what" });
 };
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
@@ -2181,7 +2182,7 @@ var integerCellRenderers = ["Default Renderer (int, long)"];
 var doubleCellRenderers = ["Default Renderer (double)"];
 var stringCellRenderers = ["Default Renderer (string)"];
 var getAvailableCellRenderers = (column) => {
-  const customCellRenderers = (0, import_vuu_utils8.getRegisteredCellRenderers)(column.serverDataType);
+  const customCellRenderers = (0, import_vuu_utils7.getRegisteredCellRenderers)(column.serverDataType);
   const customRendererNames = customCellRenderers.map((r) => r.name);
   console.log({ customRendererNames });
   switch (column.serverDataType) {
@@ -2494,7 +2495,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_utils9 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
 var gridSettingsReducer = (state, action) => {
   console.log(`gridSettingsReducer ${action.type}`);
   switch (action.type) {
@@ -2611,7 +2612,7 @@ function updateColumnTypeFormatting(state, {
   if (targetColumn) {
     const {
       serverDataType = "string",
-      type: columnType = (0, import_vuu_utils9.fromServerDataType)(serverDataType)
+      type: columnType = (0, import_vuu_utils8.fromServerDataType)(serverDataType)
     } = column;
     const type = typeof columnType === "string" ? {
       name: columnType
@@ -2760,7 +2761,7 @@ var DatagridSettingsPanel = ({
     [handleApply]
   );
   const selectedColumn = selectedColumnName === null ? null : (_a = gridSettings.columns.find((col) => col.name === selectedColumnName)) != null ? _a : null;
-  const tabstripProps2 = {
+  const tabstripProps3 = {
     activeTabIndex: selectedTabIndex,
     enableRenameTab: false,
     orientation: "vertical"
@@ -2774,7 +2775,7 @@ var DatagridSettingsPanel = ({
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       import_vuu_layout2.Stack,
       {
-        TabstripProps: tabstripProps2,
+        TabstripProps: tabstripProps3,
         className: `${classBase9}-stack`,
         getTabIcon,
         getTabLabel,
@@ -2859,4 +2860,352 @@ var DataSourceStats = ({
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase10}-size`, children: value })
   ] });
 };
+
+// src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
+var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
+var import_salt_lab11 = require("@heswell/salt-lab");
+var import_core10 = require("@salt-ds/core");
+var import_classnames9 = __toESM(require("classnames"), 1);
+var import_react16 = require("react");
+
+// src/table-settings/column-type-panel/ColumnTypePanel.tsx
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_salt_lab10 = require("@heswell/salt-lab");
+var import_core9 = require("@salt-ds/core");
+var import_classnames8 = __toESM(require("classnames"), 1);
+var import_react15 = require("react");
+
+// src/table-settings/column-type-panel/NumericColumnPanel.tsx
+var import_salt_lab9 = require("@heswell/salt-lab");
+var import_core8 = require("@salt-ds/core");
+var import_react14 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var defaultValues2 = {
+  alignOnDecimals: false,
+  decimals: 4,
+  zeroPad: false
+};
+var getColumnValues2 = (columnType, gridDefaultValues) => {
+  const columnValue = typeof columnType === "object" && columnType.formatting ? columnType.formatting : {};
+  const properties = ["alignOnDecimals", "decimals", "zeroPad"];
+  return properties.reduce((configValues, property) => {
+    if (columnValue[property] !== void 0) {
+      return {
+        ...configValues,
+        [property]: columnValue[property]
+      };
+    } else if ((gridDefaultValues == null ? void 0 : gridDefaultValues[property]) !== void 0) {
+      return {
+        ...configValues,
+        [property]: gridDefaultValues[property]
+      };
+    }
+    return configValues;
+  }, defaultValues2);
+};
+var NumericColumnPanel2 = ({
+  column,
+  dispatchColumnAction
+}) => {
+  const { decimals, alignOnDecimals, zeroPad } = getColumnValues2(column == null ? void 0 : column.type);
+  const dispatchUpdate = (0, import_react14.useCallback)(
+    (values) => dispatchColumnAction({
+      type: "updateColumnTypeFormatting",
+      column,
+      ...values
+    }),
+    [column, dispatchColumnAction]
+  );
+  const handleChangeDecimals = (0, import_react14.useCallback)(
+    (value) => dispatchUpdate({ decimals: parseInt(value.toString(), 10) }),
+    [dispatchUpdate]
+  );
+  const handleChangeAlignOnDecimals = (0, import_react14.useCallback)(
+    (evt, value) => dispatchUpdate({ alignOnDecimals: value }),
+    [dispatchUpdate]
+  );
+  const handleChangeZeroPad = (0, import_react14.useCallback)(
+    (evt, value) => dispatchUpdate({ zeroPad: value }),
+    [dispatchUpdate]
+  );
+  switch (column.serverDataType) {
+    case "double":
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_salt_lab9.FormField, { label: "No of Decimals", labelPlacement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_salt_lab9.StepperInput, { value: decimals, onChange: handleChangeDecimals }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_salt_lab9.Switch,
+          {
+            checked: alignOnDecimals,
+            label: "Align on decimals",
+            LabelProps: { className: "vuuColumnPanelSwitch" },
+            onChange: handleChangeAlignOnDecimals
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_salt_lab9.Switch,
+          {
+            checked: zeroPad,
+            label: "Zero pad",
+            LabelProps: { className: "vuuColumnPanelSwitch" },
+            onChange: handleChangeZeroPad
+          }
+        )
+      ] });
+    case "long":
+    case "int":
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core8.Text, { children: "Work in progress" }) });
+    default:
+      return null;
+  }
+};
+
+// src/table-settings/column-type-panel/StringColumnPanel.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var StringColumnPanel2 = ({
+  column,
+  dispatchColumnAction
+}) => {
+  console.log(column, dispatchColumnAction);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: "what" });
+};
+
+// src/table-settings/column-type-panel/ColumnTypePanel.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var classBase11 = "vuuColumnTypePanel";
+var integerCellRenderers2 = ["Default Renderer (int, long)"];
+var doubleCellRenderers2 = ["Default Renderer (double)"];
+var stringCellRenderers2 = ["Default Renderer (string)"];
+var getAvailableCellRenderers2 = (column) => {
+  const customCellRenderers = (0, import_vuu_utils9.getRegisteredCellRenderers)(column.serverDataType);
+  const customRendererNames = customCellRenderers.map((r) => r.name);
+  console.log({ customRendererNames });
+  switch (column.serverDataType) {
+    case "char":
+    case "string":
+      return stringCellRenderers2;
+    case "int":
+    case "long":
+      return integerCellRenderers2;
+    case "double":
+      return doubleCellRenderers2.concat(customRendererNames);
+    default:
+      return stringCellRenderers2;
+  }
+};
+var ColumnTypePanel2 = ({
+  className,
+  column,
+  dispatchColumnAction,
+  ...props
+}) => {
+  const content = (0, import_react15.useMemo)(() => {
+    switch (column.serverDataType) {
+      case "double":
+      case "int":
+      case "long":
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          NumericColumnPanel2,
+          {
+            column,
+            dispatchColumnAction
+          }
+        );
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          StringColumnPanel2,
+          {
+            column,
+            dispatchColumnAction
+          }
+        );
+    }
+  }, [column, dispatchColumnAction]);
+  const { serverDataType = "string" } = column;
+  const availableRenderers = getAvailableCellRenderers2(column);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_salt_lab10.Dropdown,
+      {
+        className: (0, import_classnames8.default)(`${classBase11}-renderer`),
+        fullWidth: true,
+        selected: availableRenderers[0],
+        source: availableRenderers
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_core9.Panel,
+      {
+        ...props,
+        className: (0, import_classnames8.default)(classBase11, className, `${classBase11}-${serverDataType}`),
+        children: content
+      }
+    )
+  ] });
+};
+
+// src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var classBase12 = "vuuColumnSettingsPanel";
+var tabstripProps2 = {
+  className: "salt-density-high"
+};
+var NullActivationIndicator3 = () => null;
+var ColumnSettingsPanel2 = ({
+  column,
+  dispatchColumnAction,
+  style: styleProp,
+  ...props
+}) => {
+  var _a, _b, _c, _d;
+  const [activeTab, setActiveTab] = (0, import_react16.useState)(0);
+  const dispatchUpdate = (0, import_react16.useCallback)(
+    (values) => dispatchColumnAction({
+      type: "updateColumnProp",
+      column,
+      ...values
+    }),
+    [column, dispatchColumnAction]
+  );
+  const handleChangeAlign = (0, import_react16.useCallback)(
+    (evt) => dispatchUpdate({ align: evt.target.value }),
+    [dispatchUpdate]
+  );
+  const handleChangePin = (0, import_react16.useCallback)(
+    (evt) => dispatchUpdate({ pin: evt.target.value }),
+    [dispatchUpdate]
+  );
+  const handleChangeHidden = (0, import_react16.useCallback)(
+    (evt, value) => dispatchUpdate({ hidden: value }),
+    [dispatchUpdate]
+  );
+  const handleChangeLabel = (0, import_react16.useCallback)(
+    (evt, value) => dispatchUpdate({ label: value }),
+    [dispatchUpdate]
+  );
+  const handleChangeWidth = (0, import_react16.useCallback)(
+    (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
+    [dispatchUpdate]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: classBase12,
+      ...props,
+      style: {
+        ...styleProp
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core10.Text, { as: "h4", children: "Column Settings" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          import_vuu_layout3.Stack,
+          {
+            active: activeTab,
+            showTabs: true,
+            className: (0, import_classnames9.default)(`${classBase12}-columnTabs`),
+            onTabSelectionChanged: setActiveTab,
+            TabstripProps: tabstripProps2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.Panel, { title: "Column", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.FormField, { label: "Hidden", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_salt_lab11.Checkbox,
+                  {
+                    checked: column.hidden === true,
+                    onChange: handleChangeHidden
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.FormField, { label: "Label", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_salt_lab11.Input,
+                  {
+                    value: (_a = column.label) != null ? _a : column.name,
+                    onChange: handleChangeLabel
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.FormField, { label: "Width", labelPlacement: "left", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_salt_lab11.StepperInput,
+                  {
+                    value: (_b = column.width) != null ? _b : 100,
+                    onChange: handleChangeWidth
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_salt_lab11.FormField,
+                  {
+                    label: "Align",
+                    labelPlacement: "left",
+                    ActivationIndicatorComponent: NullActivationIndicator3,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                      import_salt_lab11.RadioButtonGroup,
+                      {
+                        "aria-label": "Column Align",
+                        value: (_c = column.align) != null ? _c : "left",
+                        legend: "Align",
+                        onChange: handleChangeAlign,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.RadioButton, { label: "Left", value: "left" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.RadioButton, { label: "Right", value: "right" })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_salt_lab11.FormField,
+                  {
+                    label: "Pin Column",
+                    labelPlacement: "left",
+                    ActivationIndicatorComponent: NullActivationIndicator3,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                      import_salt_lab11.RadioButtonGroup,
+                      {
+                        "aria-label": "Pin Column",
+                        value: (_d = column.pin) != null ? _d : "",
+                        legend: "Pin Column",
+                        onChange: handleChangePin,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.RadioButton, { label: "Do not pin", value: "" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.RadioButton, { label: "Left", value: "left" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.RadioButton, { label: "Right", value: "right" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                ColumnTypePanel2,
+                {
+                  column,
+                  dispatchColumnAction,
+                  title: "Data Cell"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core10.Panel, { title: "Vuu", variant: "secondary", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_salt_lab11.FormField,
+                  {
+                    label: "Name",
+                    labelPlacement: "top",
+                    readOnly: true,
+                    variant: "secondary",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.Input, { value: column.name })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_salt_lab11.FormField,
+                  {
+                    label: "Vuu type",
+                    labelPlacement: "top",
+                    readOnly: true,
+                    variant: "secondary",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_salt_lab11.Input, { value: column.serverDataType })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 //# sourceMappingURL=index.js.map