@vuu-ui/vuu-table-extras 1.0.3 → 2.0.0

package/esm/column-settings-panel/ColumnSettingsPanel.js

@@ -0,0 +1,159 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
+import { getDefaultAlignment, isCalculatedColumn, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
+import { ColumnFormattingPanel } from '../column-formatting-settings/ColumnFormattingPanel.js';
+import 'react';
+import { ColumnNameLabel } from './ColumnNameLabel.js';
+import { useColumnSettings } from './useColumnSettings.js';
+import colunSettingsPanelCss from './ColumnSettingsPanel.css.js';
+
+const classBase = "vuuColumnSettingsPanel";
+const getColumnLabel = (column) => {
+  const { name, label } = column;
+  if (isCalculatedColumn(name)) {
+    return label ?? getCalculatedColumnDetails(column).name;
+  } else {
+    return label ?? name;
+  }
+};
+const ColumnSettingsPanel = ({
+  column: columnProp,
+  columnModel,
+  onClickEditCalculatedColumn,
+  onConfigChange
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-column-settings-panel",
+    css: colunSettingsPanelCss,
+    window: targetWindow
+  });
+  const isNewCalculatedColumn = columnProp.name === "::";
+  const {
+    availableRenderers,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onChange,
+    onChangeFormatting,
+    onChangeRendering,
+    onChangeToggleButton,
+    onChangeType,
+    onInputCommit
+  } = useColumnSettings({
+    column: columnProp,
+    columnModel,
+    onConfigChange
+  });
+  const {
+    serverDataType,
+    align = getDefaultAlignment(serverDataType),
+    pin,
+    width = ""
+  } = column;
+  return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx(
+      ColumnNameLabel,
+      {
+        column,
+        onClick: onClickEditCalculatedColumn
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-label", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Label" }),
+      /* @__PURE__ */ jsx(
+        VuuInput,
+        {
+          bordered: true,
+          className: "vuuInput",
+          "data-embedded": true,
+          onChange,
+          onCommit: onInputCommit,
+          value: getColumnLabel(column)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-width", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
+      /* @__PURE__ */ jsx(
+        VuuInput,
+        {
+          bordered: true,
+          className: "vuuInput",
+          "data-embedded": true,
+          onChange,
+          value: width,
+          onCommit: onInputCommit
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-alignment", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Alignment" }),
+      /* @__PURE__ */ jsxs(ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
+        /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "align-left", size: 16 }) }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "align-right", size: 16 }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(FormField, { "data-field": "column-pin", children: [
+      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Pin Column" }),
+      /* @__PURE__ */ jsxs(
+        ToggleButtonGroup,
+        {
+          onChange: onChangeToggleButton,
+          value: pin || "false",
+          children: [
+            /* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "pin-left", size: 16 }) }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "floating", children: /* @__PURE__ */ jsx(Icon, { name: "pin-float", size: 16 }) }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "pin-right", size: 16 }) }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "", children: /* @__PURE__ */ jsx(Icon, { name: "cross-circle", size: 16 }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ColumnFormattingPanel,
+      {
+        availableRenderers,
+        column,
+        onChangeFormatting,
+        onChangeRendering,
+        onChangeColumnType: onChangeType
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${classBase}-buttonBar`,
+        "data-align": isNewCalculatedColumn ? "right" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: `${classBase}-buttonNavPrev`,
+              variant: "secondary",
+              "data-icon": "arrow-left",
+              onClick: navigatePrevColumn,
+              children: "PREVIOUS"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: `${classBase}-buttonNavNext`,
+              variant: "secondary",
+              "data-icon": "arrow-right",
+              onClick: navigateNextColumn,
+              children: "NEXT"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+export { ColumnSettingsPanel };
+//# sourceMappingURL=ColumnSettingsPanel.js.map

package/esm/column-settings-panel/ColumnSettingsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../../../packages/vuu-table-extras/src/column-settings-panel/ColumnSettingsPanel.tsx"],"sourcesContent":["import {\n  Button,\n  FormField,\n  FormFieldLabel,\n  ToggleButton,\n  ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  getCalculatedColumnDetails,\n  getDefaultAlignment,\n  isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { ColumnSettingsProps, useColumnSettings } from \"./useColumnSettings\";\n\nimport colunSettingsPanelCss from \"./ColumnSettingsPanel.css\";\n\nconst classBase = \"vuuColumnSettingsPanel\";\n\nconst getColumnLabel = (column: ColumnDescriptor) => {\n  const { name, label } = column;\n  if (isCalculatedColumn(name)) {\n    return label ?? getCalculatedColumnDetails(column).name;\n  } else {\n    return label ?? name;\n  }\n};\n\nexport interface ColumnSettinsPanelProps extends ColumnSettingsProps {\n  onClickEditCalculatedColumn?: () => void;\n}\n\nexport const ColumnSettingsPanel = ({\n  column: columnProp,\n  columnModel,\n  onClickEditCalculatedColumn,\n  onConfigChange,\n}: ColumnSettinsPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-settings-panel\",\n    css: colunSettingsPanelCss,\n    window: targetWindow,\n  });\n\n  const isNewCalculatedColumn = columnProp.name === \"::\";\n  const {\n    availableRenderers,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onChange,\n    onChangeFormatting,\n    onChangeRendering,\n    onChangeToggleButton,\n    onChangeType,\n    onInputCommit,\n  } = useColumnSettings({\n    column: columnProp,\n    columnModel,\n    onConfigChange,\n  });\n\n  const {\n    serverDataType,\n    align = getDefaultAlignment(serverDataType),\n    pin,\n    width = \"\",\n  } = column;\n\n  return (\n    <div className={classBase}>\n      <div className={`${classBase}-header`}>\n        <ColumnNameLabel\n          column={column}\n          onClick={onClickEditCalculatedColumn}\n        />\n      </div>\n\n      <FormField data-field=\"column-label\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <VuuInput\n          bordered\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          onCommit={onInputCommit}\n          value={getColumnLabel(column)}\n        />\n      </FormField>\n\n      <FormField data-field=\"column-width\">\n        <FormFieldLabel>Column Width</FormFieldLabel>\n        <VuuInput\n          bordered\n          className=\"vuuInput\"\n          data-embedded\n          onChange={onChange}\n          value={width}\n          onCommit={onInputCommit}\n        />\n      </FormField>\n      <FormField data-field=\"column-alignment\">\n        <FormFieldLabel>Alignment</FormFieldLabel>\n        <ToggleButtonGroup onChange={onChangeToggleButton} value={align}>\n          <ToggleButton value=\"left\">\n            <Icon name=\"align-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"align-right\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <FormField data-field=\"column-pin\">\n        <FormFieldLabel>Pin Column</FormFieldLabel>\n        <ToggleButtonGroup\n          onChange={onChangeToggleButton}\n          value={pin || \"false\"}\n        >\n          <ToggleButton value=\"left\">\n            <Icon name=\"pin-left\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"floating\">\n            <Icon name=\"pin-float\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"right\">\n            <Icon name=\"pin-right\" size={16} />\n          </ToggleButton>\n          <ToggleButton value=\"\">\n            <Icon name=\"cross-circle\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </FormField>\n      <ColumnFormattingPanel\n        availableRenderers={availableRenderers}\n        column={column}\n        onChangeFormatting={onChangeFormatting}\n        onChangeRendering={onChangeRendering}\n        onChangeColumnType={onChangeType}\n      />\n\n      <div\n        className={`${classBase}-buttonBar`}\n        data-align={isNewCalculatedColumn ? \"right\" : undefined}\n      >\n        <Button\n          className={`${classBase}-buttonNavPrev`}\n          variant=\"secondary\"\n          data-icon=\"arrow-left\"\n          onClick={navigatePrevColumn}\n        >\n          PREVIOUS\n        </Button>\n        <Button\n          className={`${classBase}-buttonNavNext`}\n          variant=\"secondary\"\n          data-icon=\"arrow-right\"\n          onClick={navigateNextColumn}\n        >\n          NEXT\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/{table-column-settings → column-settings-panel}/useColumnSettings.js

@@ -1,5 +1,5 @@
-import { queryClosest, getFieldName, isValidPinLocation, isValidColumnAlignment, setCalculatedColumnName, updateColumnFormatting, updateColumnType, updateColumnRenderProps, getRegisteredCellRenderers } from '@vuu-ui/vuu-utils';
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { queryClosest, getFieldName, isValidPinLocation, isValidColumnAlignment, setCalculatedColumnName, updateColumnRenderProps, updateColumnFormatting, updateColumnType, getServerDataType, getRegisteredCellRenderers } from '@vuu-ui/vuu-utils';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 
 const integerCellRenderers = [
   {
@@ -31,7 +31,8 @@ const stringCellRenderers = [
 ];
 const booleanCellRenderers = [];
 const getAvailableCellRenderers = (column) => {
-  switch (column.serverDataType) {
+  const serverDataType = getServerDataType(column);
+  switch (serverDataType) {
     case "char":
     case "string":
       return stringCellRenderers.concat(getRegisteredCellRenderers("string"));
@@ -55,49 +56,19 @@ const getAvailableCellRenderers = (column) => {
       return stringCellRenderers;
   }
 };
-const getColumn = (columns, column) => {
-  if (column.name === "::") {
-    return column;
-  } else {
-    const col = columns.find((col2) => col2.name === column.name);
-    if (col) {
-      return col;
-    }
-    throw Error(`columns does not contain column ${name}`);
-  }
-};
-const replaceColumn = (tableConfig, column) => ({
-  ...tableConfig,
-  columns: tableConfig.columns.map(
-    (col) => col.name === column.name ? column : col
-  )
-});
 const useColumnSettings = ({
   column: columnProp,
-  onCancelCreateColumn,
-  onConfigChange,
-  onCreateCalculatedColumn,
-  tableConfig
+  columnModel
 }) => {
   const [column, setColumn] = useState(
-    getColumn(tableConfig.columns, columnProp)
+    columnModel.getColumn(columnProp.name)
   );
-  const columnRef = useRef(column);
-  const [inEditMode, setEditMode] = useState(column.name === "::");
-  const handleEditCalculatedcolumn = useCallback(() => {
-    columnRef.current = column;
-    setEditMode(true);
-  }, [column]);
   useEffect(() => {
     setColumn(columnProp);
-    setEditMode(columnProp.name === "::");
   }, [columnProp]);
   const availableRenderers = useMemo(() => {
     return getAvailableCellRenderers(column);
   }, [column]);
-  const handleInputCommit = useCallback(() => {
-    onConfigChange(replaceColumn(tableConfig, column));
-  }, [column, onConfigChange, tableConfig]);
   const handleChangeToggleButton = useCallback(
     (evt) => {
       const button = queryClosest(evt.target, "button");
@@ -109,10 +80,10 @@ const useColumnSettings = ({
             if (isValidColumnAlignment(value)) {
               const newColumn = {
                 ...column,
-                align: value || void 0
+                align: value
               };
               setColumn(newColumn);
-              onConfigChange(replaceColumn(tableConfig, newColumn));
+              columnModel.updateColumn(newColumn);
             }
             break;
           case "column-pin":
@@ -122,13 +93,13 @@ const useColumnSettings = ({
                 pin: value || void 0
               };
               setColumn(newColumn);
-              onConfigChange(replaceColumn(tableConfig, newColumn));
+              columnModel.updateColumn(newColumn);
               break;
             }
         }
       }
     },
-    [column, onConfigChange, tableConfig]
+    [column, columnModel]
   );
   const handleChange = useCallback((evt) => {
     const input = evt.target;
@@ -142,28 +113,51 @@ const useColumnSettings = ({
         setColumn((state) => setCalculatedColumnName(state, value));
         break;
       case "column-width":
-        setColumn((state) => ({ ...state, width: parseInt(value) }));
+        {
+          const numericValue = parseInt(value, 10);
+          if (isNaN(numericValue)) {
+            setColumn((state) => ({ ...state, width: void 0 }));
+          } else {
+            setColumn((state) => ({ ...state, width: numericValue }));
+          }
+        }
         break;
     }
   }, []);
-  const handleChangeCalculatedColumnName = useCallback((name2) => {
-    setColumn((state) => ({ ...state, name: name2 }));
+  const handleInputCommit = useCallback(() => {
+    columnModel.updateColumn(column);
+  }, [column, columnModel]);
+  const handleChangeCalculatedColumnName = useCallback((name) => {
+    setColumn((state) => ({ ...state, name }));
   }, []);
+  const handleChangeRendering = useCallback(
+    (renderProps) => {
+      if (renderProps) {
+        const newColumn = updateColumnRenderProps(
+          column,
+          renderProps
+        );
+        setColumn(newColumn);
+        columnModel.updateColumn(newColumn);
+      }
+    },
+    [column, columnModel]
+  );
   const handleChangeFormatting = useCallback(
     (formatting) => {
       const newColumn = updateColumnFormatting(column, formatting);
       setColumn(newColumn);
-      onConfigChange(replaceColumn(tableConfig, newColumn));
+      columnModel.updateColumn(newColumn);
     },
-    [column, onConfigChange, tableConfig]
+    [column, columnModel]
   );
   const handleChangeType = useCallback(
     (type) => {
       const updatedColumn = updateColumnType(column, type);
       setColumn(updatedColumn);
-      onConfigChange(replaceColumn(tableConfig, updatedColumn));
+      columnModel.updateColumn(updatedColumn);
     },
-    [column, onConfigChange, tableConfig]
+    [column, columnModel]
   );
   const handleChangeServerDataType = useCallback(
     (serverDataType) => {
@@ -171,29 +165,15 @@ const useColumnSettings = ({
     },
     []
   );
-  const handleChangeRendering = useCallback(
-    (renderProps) => {
-      if (renderProps) {
-        const newColumn = updateColumnRenderProps(
-          column,
-          renderProps
-        );
-        setColumn(newColumn);
-        onConfigChange(replaceColumn(tableConfig, newColumn));
-      }
-    },
-    [column, onConfigChange, tableConfig]
-  );
   const navigateColumn = useCallback(
     ({ moveBy }) => {
-      const { columns } = tableConfig;
-      const index = columns.indexOf(column) + moveBy;
-      const newColumn = columns[index];
+      const index = columnModel.selectedColumns.indexOf(column) + moveBy;
+      const newColumn = columnModel.selectedColumns[index];
       if (newColumn) {
         setColumn(newColumn);
       }
     },
-    [column, tableConfig]
+    [column, columnModel]
   );
   const navigateNextColumn = useCallback(() => {
     navigateColumn({ moveBy: 1 });
@@ -201,26 +181,11 @@ const useColumnSettings = ({
   const navigatePrevColumn = useCallback(() => {
     navigateColumn({ moveBy: -1 });
   }, [navigateColumn]);
-  const handleSaveCalculatedColumn = useCallback(() => {
-    onCreateCalculatedColumn(column);
-  }, [column, onCreateCalculatedColumn]);
-  const handleCancelEdit = useCallback(() => {
-    if (columnProp.name === "::") {
-      onCancelCreateColumn();
-    } else {
-      if (columnRef.current !== void 0 && columnRef.current !== column) {
-        setColumn(columnRef.current);
-      }
-      setEditMode(false);
-    }
-  }, [column, columnProp.name, onCancelCreateColumn]);
   return {
     availableRenderers,
-    editCalculatedColumn: inEditMode,
     column,
     navigateNextColumn,
     navigatePrevColumn,
-    onCancel: handleCancelEdit,
     onChange: handleChange,
     onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
     onChangeFormatting: handleChangeFormatting,
@@ -228,9 +193,7 @@ const useColumnSettings = ({
     onChangeServerDataType: handleChangeServerDataType,
     onChangeToggleButton: handleChangeToggleButton,
     onChangeType: handleChangeType,
-    onEditCalculatedColumn: handleEditCalculatedcolumn,
-    onInputCommit: handleInputCommit,
-    onSave: handleSaveCalculatedColumn
+    onInputCommit: handleInputCommit
   };
 };
 

package/esm/column-settings-panel/useColumnSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnSettings.js","sources":["../../../../packages/vuu-table-extras/src/column-settings-panel/useColumnSettings.ts"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableConfig,\n  ColumnTypeFormatting,\n} from \"@vuu-ui/vuu-table-types\";\n\nimport {\n  CellRendererDescriptor,\n  ColumnRenderPropsChangeHandler,\n  getFieldName,\n  getRegisteredCellRenderers,\n  isValidColumnAlignment,\n  isValidPinLocation,\n  setCalculatedColumnName,\n  updateColumnRenderProps,\n  updateColumnFormatting,\n  updateColumnType,\n  queryClosest,\n  getServerDataType,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuColumnDataType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  FormEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { DataValueTypeSimple } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnModel } from \"../column-picker/ColumnModel\";\n\n/**\n * Describes the props for a Column Configuration Editor, for which\n * an implementation is provided in vuu-table-extras\n */\nexport interface ColumnSettingsProps {\n  column: ColumnDescriptor;\n  columnModel: ColumnModel;\n  onConfigChange?: (config: TableConfig) => void;\n  vuuTable?: VuuTable;\n}\n\nconst integerCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type integer\",\n    label: \"Default Renderer (int, long)\",\n    name: \"default-int\",\n  },\n];\nconst doubleCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type double\",\n    label: \"Default Renderer (double)\",\n    name: \"default-double\",\n  },\n];\nconst decimalCellRenderers: CellRendererDescriptor[] = [\n  {\n    description:\n      \"Default formatter for columns with data type decimal (2,4,6 or 8)\",\n    label: \"Default Renderer (decimal)\",\n    name: \"default-decimal\",\n  },\n];\n\nconst stringCellRenderers: CellRendererDescriptor[] = [\n  {\n    description: \"Default formatter for columns with data type string\",\n    label: \"Default Renderer (string)\",\n    name: \"default-string\",\n  },\n];\n\nconst booleanCellRenderers: CellRendererDescriptor[] = [];\n\nconst getAvailableCellRenderers = (\n  column: ColumnDescriptor,\n): CellRendererDescriptor[] => {\n  const serverDataType = getServerDataType(column);\n  switch (serverDataType) {\n    case \"char\":\n    case \"string\":\n      return stringCellRenderers.concat(getRegisteredCellRenderers(\"string\"));\n    case \"int\":\n    case \"long\":\n      return integerCellRenderers.concat(getRegisteredCellRenderers(\"int\"));\n    case \"double\":\n      return doubleCellRenderers.concat(\n        getRegisteredCellRenderers(column.serverDataType),\n      );\n    case \"scaleddecimal2\":\n    case \"scaleddecimal4\":\n    case \"scaleddecimal6\":\n    case \"scaleddecimal8\":\n      return decimalCellRenderers.concat(\n        getRegisteredCellRenderers(column.serverDataType),\n      );\n    case \"boolean\":\n      return booleanCellRenderers.concat(getRegisteredCellRenderers(\"boolean\"));\n    default:\n      return stringCellRenderers;\n  }\n};\n\nexport const useColumnSettings = ({\n  column: columnProp,\n  columnModel,\n}: Omit<ColumnSettingsProps, \"vuuTable\">) => {\n  const [column, setColumn] = useState<ColumnDescriptor>(\n    columnModel.getColumn(columnProp.name),\n  );\n\n  useEffect(() => {\n    setColumn(columnProp);\n  }, [columnProp]);\n\n  const availableRenderers = useMemo(() => {\n    return getAvailableCellRenderers(column);\n  }, [column]);\n\n  const handleChangeToggleButton = useCallback<FormEventHandler>(\n    (evt) => {\n      const button = queryClosest<HTMLButtonElement>(evt.target, \"button\");\n      if (button) {\n        const fieldName = getFieldName(button);\n        const { value } = button;\n        switch (fieldName) {\n          case \"column-alignment\":\n            if (isValidColumnAlignment(value)) {\n              const newColumn: ColumnDescriptor = {\n                ...column,\n                align: value,\n              };\n              setColumn(newColumn);\n              columnModel.updateColumn(newColumn);\n            }\n            break;\n          case \"column-pin\":\n            if (isValidPinLocation(value)) {\n              const newColumn: ColumnDescriptor = {\n                ...column,\n                pin: value || undefined,\n              };\n              setColumn(newColumn);\n              columnModel.updateColumn(newColumn);\n\n              break;\n            }\n        }\n      }\n    },\n    [column, columnModel],\n  );\n\n  const handleChange = useCallback<FormEventHandler>((evt) => {\n    const input = evt.target as HTMLInputElement;\n    const fieldName = getFieldName(input);\n    const { value } = input;\n    switch (fieldName) {\n      case \"column-label\":\n        setColumn((state) => ({ ...state, label: value }));\n        break;\n      case \"column-name\":\n        setColumn((state) => setCalculatedColumnName(state, value));\n        break;\n      case \"column-width\":\n        {\n          const numericValue = parseInt(value, 10);\n          if (isNaN(numericValue)) {\n            setColumn((state) => ({ ...state, width: undefined }));\n          } else {\n            setColumn((state) => ({ ...state, width: numericValue }));\n          }\n        }\n        break;\n    }\n  }, []);\n\n  const handleInputCommit = useCallback(() => {\n    columnModel.updateColumn(column);\n  }, [column, columnModel]);\n\n  const handleChangeCalculatedColumnName = useCallback((name: string) => {\n    setColumn((state) => ({ ...state, name }));\n  }, []);\n\n  const handleChangeRendering = useCallback<ColumnRenderPropsChangeHandler>(\n    (renderProps) => {\n      if (renderProps) {\n        const newColumn: ColumnDescriptor = updateColumnRenderProps(\n          column,\n          renderProps,\n        );\n        setColumn(newColumn);\n        columnModel.updateColumn(newColumn);\n      }\n    },\n    [column, columnModel],\n  );\n\n  const handleChangeFormatting = useCallback(\n    (formatting: ColumnTypeFormatting) => {\n      const newColumn = updateColumnFormatting(column, formatting);\n      setColumn(newColumn);\n      columnModel.updateColumn(newColumn);\n    },\n    [column, columnModel],\n  );\n\n  const handleChangeType = useCallback(\n    (type: DataValueTypeSimple) => {\n      const updatedColumn = updateColumnType(column, type);\n      setColumn(updatedColumn);\n      columnModel.updateColumn(updatedColumn);\n    },\n    [column, columnModel],\n  );\n\n  // Changing the server data type applies only to calculated columns\n  const handleChangeServerDataType = useCallback(\n    (serverDataType: VuuColumnDataType) => {\n      setColumn((col) => ({ ...col, serverDataType }));\n    },\n    [],\n  );\n\n  const navigateColumn = useCallback(\n    ({ moveBy }: { moveBy: number }) => {\n      const index = columnModel.selectedColumns.indexOf(column) + moveBy;\n      const newColumn = columnModel.selectedColumns[index];\n      if (newColumn) {\n        setColumn(newColumn);\n      }\n    },\n    [column, columnModel],\n  );\n  const navigateNextColumn = useCallback(() => {\n    navigateColumn({ moveBy: 1 });\n  }, [navigateColumn]);\n\n  const navigatePrevColumn = useCallback(() => {\n    navigateColumn({ moveBy: -1 });\n  }, [navigateColumn]);\n\n  return {\n    availableRenderers,\n    column,\n    navigateNextColumn,\n    navigatePrevColumn,\n    onChange: handleChange,\n    onChangeCalculatedColumnName: handleChangeCalculatedColumnName,\n    onChangeFormatting: handleChangeFormatting,\n    onChangeRendering: handleChangeRendering,\n    onChangeServerDataType: handleChangeServerDataType,\n    onChangeToggleButton: handleChangeToggleButton,\n    onChangeType: handleChangeType,\n    onInputCommit: handleInputCommit,\n  };\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-var dataSourceStats = ".vuuDatasourceStats {\n  --datasourceStats-background: var(--vuuDatasourceStats-background);\n  align-items: center;\n  background: var(--datasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n  &.vuuDatasourceStats-withSelection {\n    --datasourceStats-background: var(--vuuDatasourceStats-withSelection-background, var(--vuuDatasourceStats-background));\n  }\n\n  .vuuDatasourceStats-statsPanel {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-100);\n    width: fit-content;\n  }\n\n  .vuuDatasourceStats-rowStats {\n    justify-self: flex-start;\n    grid-area: panel-start;\n  }\n  .vuuDatasourceStats-selected {\n    margin-left: var(--salt-spacing-100);\n  }\n\n  .vuuDatasourceStats-range {\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-selectionActions {\n    grid-area: panel-center;\n    justify-self: center;\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
+var dataSourceStats = ".vuuDatasourceStats {\n  --datasourceStats-background: var(--vuuDatasourceStats-background);\n  align-items: center;\n  background: var(--datasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n  &.vuuDatasourceStats-withSelection {\n    --datasourceStats-background: var(--vuuDatasourceStats-withSelection-background, var(--vuuDatasourceStats-background));\n  }\n\n  .vuuDatasourceStats-statsPanel {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-100);\n    width: fit-content;\n  }\n\n  .vuuDatasourceStats-rowStats {\n    justify-self: flex-start;\n    grid-area: panel-start;\n  }\n  .vuuDatasourceStats-selected {\n    margin-left: var(--salt-spacing-100);\n  }\n\n  .vuuDatasourceStats-range {\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n    white-space: nowrap;\n  }\n  .vuuDatasourceStats-range {\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
 
 export { dataSourceStats as default };
 //# sourceMappingURL=DatasourceStats.css.js.map

package/esm/index.js

@@ -1,3 +1,4 @@
+export { CalculatedColumnPanel } from './calculated-column/CalculatedColumnPanel.js';
 export { CaseValidator } from './cell-edit-validators/CaseValidator.js';
 export { PatternValidator } from './cell-edit-validators/PatternValidator.js';
 export { BackgroundCell } from './cell-renderers/background-cell/BackgroundCell.js';
@@ -13,22 +14,23 @@ export { walkTree } from './column-expression-input/column-language-parser/Colum
 export { ColumnNamedTerms, isCompleteExpression, isCompleteRelationalExpression, lastNamedChild } from './column-expression-input/column-language-parser/column-expression-parse-utils.js';
 export { useColumnExpressionEditor } from './column-expression-input/useColumnExpressionEditor.js';
 export { useColumnExpressionSuggestionProvider } from './column-expression-input/useColumnExpressionSuggestionProvider.js';
-export { ColumnExpressionPanel } from './column-expression-panel/ColumnExpressionPanel.js';
 export { ColumnFormattingPanel } from './column-formatting-settings/ColumnFormattingPanel.js';
 export { BaseNumericFormattingSettings } from './column-formatting-settings/BaseNumericFormattingSettings.js';
 export { DateTimeFormattingSettings } from './column-formatting-settings/DateTimeFormattingSettings.js';
-export { ColumnList, classBase, classBaseListItem } from './column-list/ColumnList.js';
 export { ColumnMenu } from './column-menu/ColumnMenu.js';
 export { useColumnActions } from './column-menu/useColumnActions.js';
 export { ColumnChangeSource, ColumnModel, SelectedColumnChangeType, isColumnAdded, isColumnRemoved, isColumnsReordered } from './column-picker/ColumnModel.js';
 export { ColumnPicker } from './column-picker/ColumnPicker.js';
+export { ColumnPickerAction } from './column-picker/ColumnPickerAction.js';
+export { useTableColumnPicker } from './column-picker/useTableColumnPicker.js';
+export { ColumnSettingsPanel } from './column-settings-panel/ColumnSettingsPanel.js';
+export { useColumnSettings } from './column-settings-panel/useColumnSettings.js';
 export { DataSourceStats } from './datasource-stats/DatasourceStats.js';
 export { FreezeControl } from './freeze-control/FreezeControl.js';
 export { FrozenBanner } from './freeze-control/FrozenBanner.js';
-export { ColumnSettingsPanel } from './table-column-settings/ColumnSettingsPanel.js';
-export { TableSettingsPanel, defaultTableSettingsPermissions } from './table-column-settings/TableSettingsPanel.js';
-export { useColumnSettings } from './table-column-settings/useColumnSettings.js';
-export { columnSettingsFromColumnMenuPermissions, tableSettingsFromColumnMenuPermissions, useTableAndColumnSettings } from './table-column-settings/useTableAndColumnSettings.js';
-export { useTableSettings } from './table-column-settings/useTableSettings.js';
+export { TabbedTableConfigPanel } from './tabbed-table-config-panel/TabbedTableConfigPanel.js';
+export { TabbedTableSettingsAction } from './tabbed-table-config-panel/TabbedTableSettingsAction.js';
+export { TableFooter, TableFooterTray } from './table-footer/TableFooter.js';
 export { TableProvider, useTableContext } from './table-provider/TableProvider.js';
+export { TableSettingsPanel, defaultTableSettingsPermissions } from './table-settings-panel/TableSettingsPanel.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js

@@ -0,0 +1,4 @@
+var css = ".vuuTabbedTableConfigPanel {\n\n    --tabs-height: 25px;\n\n    inset: 0;\n    position: absolute;\n    .saltTabsNext {\n        height: 100%;\n        .saltTabListNext {\n            border-bottom: solid var(--salt-separable-secondary-borderColor) 1px;\n            height: var(--tabs-height);\n        }\n\n        .saltTabNextPanel {\n            height: calc(100% - var(--tabs-height));\n        }\n    }\n}";
+
+export { css as default };
+//# sourceMappingURL=TabbedTableConfigPanel.css.js.map

package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.css.js.map

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

package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { TabsNext, TabListNext, TabNext, TabNextTrigger, TabNextPanel } from '@salt-ds/lab';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { useState, useCallback } from 'react';
+import { useEditCalculatedColumn } from '../calculated-column/useEditCalculatedColumn.js';
+import { ColumnPicker } from '../column-picker/ColumnPicker.js';
+import { ColumnSettingsPanel } from '../column-settings-panel/ColumnSettingsPanel.js';
+import { TableSettingsPanel } from '../table-settings-panel/TableSettingsPanel.js';
+import css from './TabbedTableConfigPanel.css.js';
+
+const classBase = "vuuTabbedTableConfigPanel";
+const TabbedTableConfigPanel = ({
+  allowCreateCalculatedColumn = false,
+  className,
+  columnModel,
+  config,
+  onDisplayAttributeChange,
+  selectedTab = "table-settings",
+  vuuTable,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-tabbed-table-config-panel",
+    css,
+    window: targetWindow
+  });
+  const [columns, setColumns] = useState([]);
+  const [value, setValue] = useState(selectedTab);
+  const handleChange = useCallback(
+    (_e, value2) => {
+      setValue(value2);
+    },
+    []
+  );
+  const handleSelectionChange = useCallback(
+    (_e, selectedItems) => {
+      setColumns(selectedItems);
+    },
+    []
+  );
+  const handleSaveCalculatedColumn = useCallback((column) => {
+    setColumns([column]);
+  }, []);
+  const { onCreateCalculatedColumn, onEditCalculatedColumn } = useEditCalculatedColumn({
+    columnModel,
+    calculatedColumn: columns[0],
+    onSaveColumn: handleSaveCalculatedColumn,
+    vuuTable
+  });
+  return /* @__PURE__ */ jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: /* @__PURE__ */ jsxs(TabsNext, { onChange: handleChange, value, children: [
+    /* @__PURE__ */ jsxs(TabListNext, { appearance: "transparent", children: [
+      /* @__PURE__ */ jsx(TabNext, { value: "table-settings", children: /* @__PURE__ */ jsx(TabNextTrigger, { children: "Table settings" }) }),
+      /* @__PURE__ */ jsx(TabNext, { value: "table-columns", children: /* @__PURE__ */ jsx(TabNextTrigger, { children: "Table columns" }) }),
+      /* @__PURE__ */ jsx(TabNext, { disabled: columns.length === 0, value: "column-settings", children: /* @__PURE__ */ jsx(TabNextTrigger, { children: "Column settings" }) })
+    ] }),
+    /* @__PURE__ */ jsx(TabNextPanel, { value: "table-settings", children: /* @__PURE__ */ jsx(
+      TableSettingsPanel,
+      {
+        onDisplayAttributeChange,
+        tableDisplayAttributes: config
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TabNextPanel, { value: "table-columns", children: /* @__PURE__ */ jsx(
+      ColumnPicker,
+      {
+        allowCreateCalculatedColumn,
+        columnModel,
+        onClickCreateCalculatedColumn: onCreateCalculatedColumn,
+        onSelectionChange: handleSelectionChange,
+        selected: columns
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TabNextPanel, { value: "column-settings", children: columns.length > 0 ? /* @__PURE__ */ jsx(
+      ColumnSettingsPanel,
+      {
+        column: columns[0],
+        columnModel,
+        onClickEditCalculatedColumn: onEditCalculatedColumn
+      }
+    ) : null })
+  ] }) });
+};
+
+export { TabbedTableConfigPanel };
+//# sourceMappingURL=TabbedTableConfigPanel.js.map

package/esm/tabbed-table-config-panel/TabbedTableConfigPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbedTableConfigPanel.js","sources":["../../../../packages/vuu-table-extras/src/tabbed-table-config-panel/TabbedTableConfigPanel.tsx"],"sourcesContent":["import {\n  TabListNext,\n  TabNext,\n  TabNextPanel,\n  TabNextTrigger,\n  TabsNext,\n} from \"@salt-ds/lab\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport type { TableProps } from \"@vuu-ui/vuu-table\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, SyntheticEvent, useCallback, useState } from \"react\";\nimport { useEditCalculatedColumn } from \"../calculated-column/useEditCalculatedColumn\";\nimport { ColumnPicker, ColumnPickerProps } from \"../column-picker/ColumnPicker\";\nimport { ColumnSettingsPanel } from \"../column-settings-panel/ColumnSettingsPanel\";\nimport {\n  TableSettingsPanel,\n  TableSettingsPanelProps,\n} from \"../table-settings-panel/TableSettingsPanel\";\n\nimport css from \"./TabbedTableConfigPanel.css\";\n\nconst TabLabels = {\n  \"table-settings\": \"Table\",\n  \"table-columns\": \"Columns\",\n} as const;\n\ntype TabName = keyof typeof TabLabels;\n\nconst classBase = \"vuuTabbedTableConfigPanel\";\nexport interface TabbedTableConfigPanelProps\n  extends ColumnPickerProps,\n    Pick<TableSettingsPanelProps, \"onDisplayAttributeChange\">,\n    Pick<TableProps, \"config\">,\n    HTMLAttributes<HTMLDivElement> {\n  allowCreateCalculatedColumn?: boolean;\n  selectedTab?: TabName;\n  vuuTable?: VuuTable;\n}\n\nexport const TabbedTableConfigPanel = ({\n  allowCreateCalculatedColumn = false,\n  className,\n  columnModel,\n  config,\n  onDisplayAttributeChange,\n  selectedTab = \"table-settings\",\n  vuuTable,\n  ...htmlAttributes\n}: TabbedTableConfigPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-tabbed-table-config-panel\",\n    css,\n    window: targetWindow,\n  });\n\n  const [columns, setColumns] = useState<ColumnDescriptor[]>([]);\n\n  const [value, setValue] = useState<string>(selectedTab);\n  const handleChange = useCallback(\n    (_e: SyntheticEvent | null, value: string) => {\n      setValue(value);\n    },\n    [],\n  );\n\n  const handleSelectionChange = useCallback(\n    (_e: SyntheticEvent, selectedItems: ColumnDescriptor[]) => {\n      setColumns(selectedItems);\n    },\n    [],\n  );\n\n  const handleSaveCalculatedColumn = useCallback((column: ColumnDescriptor) => {\n    setColumns([column]);\n  }, []);\n\n  const { onCreateCalculatedColumn, onEditCalculatedColumn } =\n    useEditCalculatedColumn({\n      columnModel,\n      calculatedColumn: columns[0],\n      onSaveColumn: handleSaveCalculatedColumn,\n      vuuTable,\n    });\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <TabsNext onChange={handleChange} value={value}>\n        <TabListNext appearance=\"transparent\">\n          <TabNext value=\"table-settings\">\n            <TabNextTrigger>Table settings</TabNextTrigger>\n          </TabNext>\n          <TabNext value=\"table-columns\">\n            <TabNextTrigger>Table columns</TabNextTrigger>\n          </TabNext>\n          <TabNext disabled={columns.length === 0} value=\"column-settings\">\n            <TabNextTrigger>Column settings</TabNextTrigger>\n          </TabNext>\n        </TabListNext>\n        <TabNextPanel value=\"table-settings\">\n          <TableSettingsPanel\n            onDisplayAttributeChange={onDisplayAttributeChange}\n            tableDisplayAttributes={config}\n          />\n        </TabNextPanel>\n        <TabNextPanel value=\"table-columns\">\n          <ColumnPicker\n            allowCreateCalculatedColumn={allowCreateCalculatedColumn}\n            columnModel={columnModel}\n            onClickCreateCalculatedColumn={onCreateCalculatedColumn}\n            onSelectionChange={handleSelectionChange}\n            selected={columns}\n          />\n        </TabNextPanel>\n        <TabNextPanel value=\"column-settings\">\n          {columns.length > 0 ? (\n            <ColumnSettingsPanel\n              column={columns[0]}\n              columnModel={columnModel}\n              onClickEditCalculatedColumn={onEditCalculatedColumn}\n            />\n          ) : null}\n        </TabNextPanel>\n      </TabsNext>\n    </div>\n  );\n};\n"],"names":["value"],"mappings":"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"}

package/esm/tabbed-table-config-panel/TabbedTableSettingsAction.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { IconButton } from '@vuu-ui/vuu-ui-controls';
+import { useCallback } from 'react';
+import { useTabbedTableConfigPanel } from './useTabbedTableConfigPanel.js';
+
+const TabbedTableSettingsAction = ({
+  allowCreateCalculatedColumn,
+  appearance = "transparent",
+  columnModel,
+  config,
+  icon = "settings",
+  onDisplayAttributeChange,
+  sentiment = "neutral",
+  vuuTable,
+  ...IconButtonProps2
+}) => {
+  const { showTabbedTableConfigPanel } = useTabbedTableConfigPanel({
+    allowCreateCalculatedColumn,
+    columnModel,
+    config,
+    onDisplayAttributeChange,
+    vuuTable
+  });
+  const handleClick = useCallback(() => {
+    showTabbedTableConfigPanel();
+  }, [showTabbedTableConfigPanel]);
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...IconButtonProps2,
+      appearance,
+      "data-action": "table-settings",
+      icon,
+      onClick: handleClick,
+      sentiment,
+      size: 20
+    }
+  );
+};
+
+export { TabbedTableSettingsAction };
+//# sourceMappingURL=TabbedTableSettingsAction.js.map