@vuu-ui/vuu-table-extras 3.3.9 → 3.3.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.3.9",
+  "version": "3.3.10",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -11,19 +11,19 @@
     "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.js ./src/column-expression-input/column-language-parser/grammar/column.grammar"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "3.3.9",
-    "@vuu-ui/vuu-protocol-types": "3.3.9"
+    "@vuu-ui/vuu-filter-types": "3.3.10",
+    "@vuu-ui/vuu-protocol-types": "3.3.10"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "3.3.9",
-    "@vuu-ui/vuu-data-editing": "3.3.9",
-    "@vuu-ui/vuu-data-react": "3.3.9",
-    "@vuu-ui/vuu-data-types": "3.3.9",
-    "@vuu-ui/vuu-table-types": "3.3.9",
-    "@vuu-ui/vuu-popups": "3.3.9",
-    "@vuu-ui/vuu-table": "3.3.9",
-    "@vuu-ui/vuu-utils": "3.3.9",
-    "@vuu-ui/vuu-ui-controls": "3.3.9",
+    "@vuu-ui/vuu-codemirror": "3.3.10",
+    "@vuu-ui/vuu-data-editing": "3.3.10",
+    "@vuu-ui/vuu-data-react": "3.3.10",
+    "@vuu-ui/vuu-data-types": "3.3.10",
+    "@vuu-ui/vuu-table-types": "3.3.10",
+    "@vuu-ui/vuu-popups": "3.3.10",
+    "@vuu-ui/vuu-table": "3.3.10",
+    "@vuu-ui/vuu-utils": "3.3.10",
+    "@vuu-ui/vuu-ui-controls": "3.3.10",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",

package/src/csv-upload/CsvUpload.js

@@ -18,6 +18,9 @@ const CsvUpload_CsvUpload = (props)=>{
         window: targetWindow
     });
     const { canImport, cancelImport, isProcessingFile, isImporting, importData, onDrop, onTriggerChange, schema, validation, error } = useCsvUpload(props);
+    const fileErrors = validation?.errors.filter((e)=>e.column in validation.errorMap.fileErrors) ?? [];
+    const hasErrors = !!error || validation && validation.errors.length > 0;
+    const status = hasErrors ? "error" : validation ? "success" : void 0;
     const handleCancel = useCallback(async ()=>{
         await cancelImport();
         if (!isControlledOpen) setInternalOpen(false);
@@ -40,7 +43,7 @@ const CsvUpload_CsvUpload = (props)=>{
                 className: `${classBase}-dropZone`,
                 disabled: void 0 === schema || isProcessingFile || isImporting,
                 onDrop: onDrop,
-                status: validation && validation.errors.length > 0 || error ? "error" : void 0,
+                status: status,
                 children: [
                     /*#__PURE__*/ jsx(FileDropZoneIcon, {}),
                     validation && validation.errors.length > 0 ? /*#__PURE__*/ jsxs(Fragment, {
@@ -48,9 +51,9 @@ const CsvUpload_CsvUpload = (props)=>{
                             /*#__PURE__*/ jsx("div", {
                                 children: "Your file contains errors"
                             }),
-                            /*#__PURE__*/ jsx("ul", {
+                            fileErrors.length > 0 && /*#__PURE__*/ jsx("ul", {
                                 className: `${classBase}-errorList`,
-                                children: validation.errors.filter((e)=>e.column in validation.errorMap.fileErrors).map((error, i)=>/*#__PURE__*/ jsx("li", {
+                                children: fileErrors.map((error, i)=>/*#__PURE__*/ jsx("li", {
                                         className: `${classBase}-errorItem`,
                                         children: error.message
                                     }, `${error.column}-${error.message}-${i}`))
@@ -66,7 +69,8 @@ const CsvUpload_CsvUpload = (props)=>{
                         accept: ".csv,text/csv",
                         onChange: onTriggerChange,
                         children: "BROWSE FILES"
-                    })
+                    }),
+                    children
                 ]
             }),
             error && (renderError ? renderError(error) : /*#__PURE__*/ jsxs("div", {
@@ -81,8 +85,7 @@ const CsvUpload_CsvUpload = (props)=>{
                         children: error.errors.importError?.message || error.errors.schemaError?.message || error.errors.validationError?.message || "An unexpected error occurred during import."
                     })
                 ]
-            })),
-            children
+            }))
         ]
     });
     const actions = /*#__PURE__*/ jsxs(DialogActions, {

package/types/src/calculated-column/CalculatedColumnPanel.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { VuuColumnDataType, VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { ColumnModel } from "../column-picker/ColumnModel";
+export interface CalculatedColumnPanelProps extends HTMLAttributes<HTMLDivElement> {
+    column: ColumnDescriptor;
+    columnModel: ColumnModel;
+    onChangeColumn: (column: ColumnDescriptor) => void;
+    onChangeServerDataType?: (name: VuuColumnDataType) => void;
+    vuuTable: VuuTable;
+}
+export declare const CalculatedColumnPanel: ({ column: columnProp, columnModel, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp, vuuTable, }: CalculatedColumnPanelProps) => import("react").JSX.Element;

package/types/src/calculated-column/useCalculatedColumnPanel.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { FormEventHandler, SyntheticEvent } from "react";
+import { CalculatedColumnPanelProps } from "./CalculatedColumnPanel";
+export type ColumnExpressionHookProps = Pick<CalculatedColumnPanelProps, "column" | "onChangeColumn" | "onChangeServerDataType">;
+export declare const useCalculatedColumnPanel: ({ column: columnProp, onChangeColumn, onChangeServerDataType: onChangeServerDataTypeProp, }: ColumnExpressionHookProps) => {
+    column: ColumnDescriptor;
+    onChangeExpression: (value: string) => void;
+    onChangeName: FormEventHandler;
+    onChangeServerDataType: (_e: SyntheticEvent, [serverDataType]: string[]) => void;
+};

package/types/src/calculated-column/useEditCalculatedColumn.d.ts

@@ -0,0 +1,13 @@
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { ColumnModel } from "../column-picker/ColumnModel";
+export interface EditCalculatedColumnProps {
+    calculatedColumn?: ColumnDescriptor;
+    columnModel: ColumnModel;
+    onSaveColumn?: (caclulatedColumn: ColumnDescriptor) => void;
+    vuuTable?: VuuTable;
+}
+export declare const useEditCalculatedColumn: ({ calculatedColumn, columnModel, onSaveColumn, vuuTable, }: EditCalculatedColumnProps) => {
+    onCreateCalculatedColumn: () => void;
+    onEditCalculatedColumn: () => void;
+};

package/types/src/cell-edit-validators/CaseValidator.d.ts

@@ -0,0 +1,2 @@
+import { EditRuleValidator } from "@vuu-ui/vuu-data-types";
+export declare const CaseValidator: EditRuleValidator;

package/types/src/cell-edit-validators/PatternValidator.d.ts

@@ -0,0 +1,2 @@
+import { EditRuleValidator } from "@vuu-ui/vuu-data-types";
+export declare const PatternValidator: EditRuleValidator;

package/types/src/cell-edit-validators/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CaseValidator";
+export * from "./PatternValidator";

package/types/src/cell-renderers/background-cell/BackgroundCell.d.ts

@@ -0,0 +1,2 @@
+import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+export declare const BackgroundCell: import("react").MemoExoticComponent<({ column, dataRow, }: TableCellRendererProps) => import("react").JSX.Element>;

package/types/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.d.ts

@@ -0,0 +1,2 @@
+import { ConfigurationEditorProps } from "@vuu-ui/vuu-utils";
+export declare const BackgroundCellConfigurationEditor: ({ column, onChangeRendering, }: ConfigurationEditorProps) => import("react").JSX.Element;

package/types/src/cell-renderers/background-cell/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./BackgroundCell";
+export * from "./BackgroundCellConfigurationEditor";

package/types/src/cell-renderers/background-cell/useDirection.d.ts

@@ -0,0 +1,3 @@
+import { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { valueChangeDirection } from "@vuu-ui/vuu-utils";
+export declare function useDirection(key: string, value: unknown, column: RuntimeColumnDescriptor): valueChangeDirection;

package/types/src/cell-renderers/button-cell/IconButtonCell.d.ts

@@ -0,0 +1,6 @@
+import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+/**
+ * To assign an icon to the cell, give the columndescriptor
+ * a className. In css, assign an icon variable to --vuu-svg-icon.
+ */
+export declare const IconButtonCell: ({ column, dataRow }: TableCellRendererProps) => import("react").JSX.Element;

package/types/src/cell-renderers/dropdown-cell/DropdownCell.d.ts

@@ -0,0 +1,2 @@
+import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+export declare const DropdownCell: import("react").MemoExoticComponent<({ column, dataRow, editedDuringCurrentSession, onEdit, }: TableCellRendererProps) => import("react").JSX.Element>;

package/types/src/cell-renderers/dropdown-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./DropdownCell";

package/types/src/cell-renderers/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./background-cell";
+export * from "./dropdown-cell";
+export * from "./lookup-cell";
+export * from "./pct-progress-cell";
+export * from "./progress-cell";
+export { IconButtonCell } from "./button-cell/IconButtonCell";

package/types/src/cell-renderers/lookup-cell/LookupCell.d.ts

@@ -0,0 +1,2 @@
+import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+export declare const LookupCell: import("react").MemoExoticComponent<({ column, dataRow, }: TableCellRendererProps) => import("react").JSX.Element>;

package/types/src/cell-renderers/lookup-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./LookupCell";

package/types/src/cell-renderers/pct-progress-cell/PctProgressCell.d.ts

@@ -0,0 +1,2 @@
+import { TableCellProps } from "@vuu-ui/vuu-table-types";
+export declare const PctProgressCell: ({ column, dataRow }: TableCellProps) => import("react").JSX.Element;

package/types/src/cell-renderers/pct-progress-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./PctProgressCell";

package/types/src/cell-renderers/progress-cell/ProgressCell.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/cell-renderers/progress-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./ProgressCell";

package/types/src/column-expression-input/ColumnExpressionInput.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+import { ColumnDefinitionExpression } from "./column-language-parser";
+import { ExpressionSuggestionConsumer } from "./useColumnExpressionEditor";
+export type ColumnExpressionSubmitHandler = (source: string, expression: ColumnDefinitionExpression | undefined) => void;
+export interface ColumnExpressionInputProps extends ExpressionSuggestionConsumer, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    onChange?: (source: string) => void;
+    onSubmitExpression?: ColumnExpressionSubmitHandler;
+    source?: string;
+}
+export declare const ColumnExpressionInput: import("react").MemoExoticComponent<({ onChange, onSubmitExpression, source, suggestionProvider, }: ColumnExpressionInputProps) => import("react").JSX.Element>;

package/types/src/column-expression-input/column-function-descriptors.d.ts

@@ -0,0 +1,15 @@
+export type ColumnFunctionDescriptor = {
+    accepts: "string" | "number" | "boolean" | "any" | Array<"string" | "number" | "boolean">;
+    description: string;
+    example: {
+        expression: string;
+        result: string;
+    };
+    name: string;
+    params: {
+        count?: number;
+        description: string;
+    };
+    type: "string" | "number" | "boolean" | "variable";
+};
+export declare const columnFunctionDescriptors: ColumnFunctionDescriptor[];

package/types/src/column-expression-input/column-language-parser/ColumnExpressionLanguage.d.ts

@@ -0,0 +1,2 @@
+import { LanguageSupport } from "@vuu-ui/vuu-codemirror";
+export declare const columnExpressionLanguageSupport: () => LanguageSupport;

package/types/src/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.d.ts

@@ -0,0 +1,57 @@
+import type { Tree } from "@vuu-ui/vuu-codemirror";
+type expressionType = "arithmeticExpression" | "booleanCondition" | "booleanLiteralExpression" | "callExpression" | "colExpression" | "conditionalExpression" | "numericLiteralExpression" | "relationalExpression" | "stringLiteralExpression" | "unknown";
+type arithmeticOp = "*" | "/" | "+" | "-" | "unknown";
+type booleanOp = "and" | "or";
+type relationalOp = "=" | "!=" | ">" | ">=" | "<" | "<=" | "unknown";
+export interface Expression {
+    type: expressionType;
+    expressions?: Expression[];
+    toJSON?: () => unknown;
+    value?: string | number | boolean;
+}
+interface BooleanLiteralExpression {
+    type: "booleanLiteralExpression";
+    value: boolean;
+}
+interface NumericLiteralExpression {
+    type: "numericLiteralExpression";
+    value: number;
+}
+interface StringLiteralExpression {
+    type: "stringLiteralExpression";
+    value: string;
+}
+interface ArithmeticExpression extends Expression {
+    expressions: [Expression, Expression];
+    op: arithmeticOp;
+    type: "arithmeticExpression";
+}
+interface BooleanCondition extends Expression {
+    expressions: Expression[];
+    op: booleanOp;
+    type: "booleanCondition";
+}
+interface RelationalExpression extends Expression {
+    expressions: Expression[];
+    op: relationalOp;
+    type: "relationalExpression";
+}
+interface ColExpression extends Expression {
+    column?: string;
+    type: "colExpression";
+}
+interface CallExpression extends Expression {
+    arguments: Expression[];
+    functionName?: string;
+    type: "callExpression";
+}
+type ConditionExpression = RelationalExpression | BooleanCondition;
+interface ConditionalExpression extends Expression {
+    type: "conditionalExpression";
+    condition: ConditionExpression;
+    truthyExpression: Expression;
+    falsyExpression: Expression;
+}
+export type ColumnDefinitionExpression = ArithmeticExpression | BooleanLiteralExpression | CallExpression | ColExpression | ConditionalExpression | NumericLiteralExpression | StringLiteralExpression;
+export declare const walkTree: (tree: Tree, source: string) => ColumnDefinitionExpression;
+export {};

package/types/src/column-expression-input/column-language-parser/column-expression-parse-utils.d.ts

@@ -0,0 +1,5 @@
+import type { SyntaxNode } from "@vuu-ui/vuu-codemirror";
+export declare const ColumnNamedTerms: readonly string[];
+export declare const isCompleteExpression: (src: string) => boolean;
+export declare const lastNamedChild: (node: SyntaxNode) => SyntaxNode | null;
+export declare const isCompleteRelationalExpression: (node?: SyntaxNode) => boolean;

package/types/src/column-expression-input/column-language-parser/generated/column-parser.d.ts

@@ -0,0 +1,2 @@
+import { LRParser } from "@lezer/lr";
+export declare const parser: LRParser;

package/types/src/column-expression-input/column-language-parser/generated/column-parser.terms.d.ts

@@ -0,0 +1 @@
+export declare const ColumnDefinitionExpression = 1, Column = 2, Number = 3, String = 4, True = 5, False = 6, ParenthesizedExpression = 7, OpenBrace = 8, CloseBrace = 9, ArithmeticExpression = 10, Divide = 11, Times = 12, Plus = 13, Minus = 14, ConditionalExpression = 15, If = 16, RelationalExpression = 17, RelationalOperator = 18, AndCondition = 19, OrCondition = 20, Comma = 21, CallExpression = 22, Function = 23, ArgList = 24;

package/types/src/column-expression-input/column-language-parser/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ColumnExpressionLanguage";
+export * from "./ColumnExpressionTreeWalker";
+export * from "./column-expression-parse-utils";

package/types/src/column-expression-input/column-language-parser/test.d.mts

@@ -0,0 +1 @@
+export declare const walkTree: (tree: any, source: any) => void;

package/types/src/column-expression-input/functionDocInfo.d.ts

@@ -0,0 +1,2 @@
+import { ColumnFunctionDescriptor } from "./column-function-descriptors";
+export declare const functionDocInfo: ({ name, description, example, params, type, }: ColumnFunctionDescriptor) => HTMLElement;

package/types/src/column-expression-input/highlighting.d.ts

@@ -0,0 +1 @@
+export declare const vuuHighlighting: import("@codemirror/state").Extension;

package/types/src/column-expression-input/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ColumnExpressionInput";
+export * from "./column-language-parser";
+export * from "./useColumnExpressionEditor";
+export * from "./useColumnExpressionSuggestionProvider";

package/types/src/column-expression-input/theme.d.ts

@@ -0,0 +1 @@
+export declare const vuuTheme: import("@codemirror/state").Extension;

package/types/src/column-expression-input/useColumnAutoComplete.d.ts

@@ -0,0 +1,6 @@
+import { type CompletionSource } from "@vuu-ui/vuu-codemirror";
+import { type RefObject } from "react";
+import type { IExpressionSuggestionProvider } from "./useColumnExpressionEditor";
+export type ApplyCompletion = (mode?: "add" | "replace") => void;
+export type Operator = "";
+export declare const useColumnAutoComplete: (suggestionProvider: IExpressionSuggestionProvider, onSubmit: RefObject<ApplyCompletion>) => CompletionSource;

package/types/src/column-expression-input/useColumnExpressionEditor.d.ts

@@ -0,0 +1,25 @@
+import { Completion } from "@vuu-ui/vuu-codemirror";
+import { FocusEventHandler } from "react";
+import { ColumnExpressionInputProps } from "./ColumnExpressionInput";
+export type ColumnExpressionOperator = "Times" | "Divide" | "Minus" | "Plus";
+export type ColumnExpressionSuggestionType = "column" | "columnValue" | "expression" | "condition-operator" | "operator" | "relational-operator";
+export type ColumnExpressionSuggestionOptions = {
+    columnName?: string;
+    functionName?: string;
+    operator?: ColumnExpressionOperator;
+    prefix?: string;
+    startsWith?: string;
+    selection?: string[];
+};
+export interface IExpressionSuggestionProvider {
+    getSuggestions: (valueType: ColumnExpressionSuggestionType, options?: ColumnExpressionSuggestionOptions) => Promise<Completion[]>;
+    isPartialMatch: (valueType: ColumnExpressionSuggestionType, columnName?: string, text?: string | undefined) => Promise<boolean>;
+}
+export interface ExpressionSuggestionConsumer {
+    suggestionProvider: IExpressionSuggestionProvider;
+}
+export declare const useColumnExpressionEditor: ({ onChange, onSubmitExpression, source, suggestionProvider, }: ColumnExpressionInputProps) => {
+    editorRef: import("react").RefObject<HTMLDivElement | null>;
+    clearInput: () => void;
+    onBlur: FocusEventHandler;
+};

package/types/src/column-expression-input/useColumnExpressionSuggestionProvider.d.ts

@@ -0,0 +1,8 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { IExpressionSuggestionProvider } from "./useColumnExpressionEditor";
+export interface SuggestionProviderHookProps {
+    columns: readonly ColumnDescriptor[];
+    table: VuuTable;
+}
+export declare const useColumnExpressionSuggestionProvider: ({ columns, table, }: SuggestionProviderHookProps) => IExpressionSuggestionProvider;

package/types/src/column-formatting-settings/BaseNumericFormattingSettings.d.ts

@@ -0,0 +1,2 @@
+import { FormattingSettingsProps } from "@vuu-ui/vuu-table-types";
+export declare const BaseNumericFormattingSettings: ({ column, onChangeFormatting: onChange, }: FormattingSettingsProps) => import("react").JSX.Element;

package/types/src/column-formatting-settings/ColumnFormattingPanel.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDescriptor, ColumnTypeRendering, FormattingSettingsProps } from "@vuu-ui/vuu-table-types";
+import { CellRendererDescriptor } from "@vuu-ui/vuu-utils";
+import { HTMLAttributes } from "react";
+export interface ColumnFormattingPanelProps extends HTMLAttributes<HTMLDivElement>, FormattingSettingsProps {
+    availableRenderers: CellRendererDescriptor[];
+    column: ColumnDescriptor;
+    onChangeRendering: (renderProps: ColumnTypeRendering) => void;
+}
+export declare const ColumnFormattingPanel: ({ availableRenderers, className, column, onChangeFormatting, onChangeColumnType, onChangeRendering, ...htmlAttributes }: ColumnFormattingPanelProps) => import("react").JSX.Element;

package/types/src/column-formatting-settings/DateTimeFormattingSettings.d.ts

@@ -0,0 +1,3 @@
+import { FormattingSettingsProps } from "@vuu-ui/vuu-table-types";
+import React from "react";
+export declare const DateTimeFormattingSettings: React.FC<FormattingSettingsProps>;

package/types/src/column-formatting-settings/LongTypeFormattingSettings.d.ts

@@ -0,0 +1,3 @@
+import { FormattingSettingsProps } from "@vuu-ui/vuu-table-types";
+import React from "react";
+export declare const LongTypeFormattingSettings: (props: FormattingSettingsProps) => React.JSX.Element;

package/types/src/column-formatting-settings/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ColumnFormattingPanel";
+export * from "./BaseNumericFormattingSettings";
+export * from "./DateTimeFormattingSettings";

package/types/src/column-menu/ColumnMenu.d.ts

@@ -0,0 +1,10 @@
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+import { ColumnDescriptor, ColumnMenuPermissions } from "@vuu-ui/vuu-table-types";
+import { HTMLAttributes } from "react";
+import { ColumnMenuActionType } from "./column-menu-utils";
+export interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {
+    column: ColumnDescriptor;
+    menuActionHandler?: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;
+    menuPermissions?: ColumnMenuPermissions;
+}
+export declare const ColumnMenu: ({ className, column, menuActionHandler: menuActionHandlerProp, menuPermissions: { allowSort, allowGroup, allowAggregation, allowHide, allowRemove, allowPin, }, }: ColumnMenuProps) => import("react").JSX.Element;

package/types/src/column-menu/column-action-types.d.ts

@@ -0,0 +1,11 @@
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor, ColumnDisplayAction } from "@vuu-ui/vuu-table-types";
+export type ColumnDisplayActionHandler = (action: ColumnDisplayAction) => void;
+export type DisplayColumnSettingsAction = {
+    type: "column-settings";
+    column: ColumnDescriptor;
+    /**  only for calculated columnn */
+    vuuTable?: VuuTable;
+};
+export type DisplaySettingsAction = DisplayColumnSettingsAction;
+export type TableSettingsActionHandler = (action: DisplaySettingsAction) => void;

package/types/src/column-menu/column-menu-utils.d.ts

@@ -0,0 +1,19 @@
+import { Menu, MenuItem, MenuItemProps, MenuProps } from "@salt-ds/core";
+import { DataSource } from "@vuu-ui/vuu-data-types";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { MouseEventHandler, ReactElement } from "react";
+type MenuElement = ReactElement<MenuProps, typeof Menu>;
+type MenuItemElement = ReactElement<MenuItemProps, typeof MenuItem>;
+type MenuElements = Array<MenuElement | MenuItemElement>;
+export type MenuItemClickHandler = MouseEventHandler<HTMLDivElement>;
+export type DataSourceColumnMenuActionType = "agg-count" | "agg-distinct" | "agg-sum" | "agg-avg" | "agg-high" | "agg-low" | "sort-asc" | "sort-dsc" | "sort-add-asc" | "sort-add-dsc" | "remove-sort" | "group-column" | "remove-group" | "add-to-group" | "remove-from-group" | "remove-column";
+export type ColumnDisplayColumnMenuActionType = "pin-column-left" | "pin-column-right" | "unpin-column" | "hide-column";
+export type ColumnMenuActionType = DataSourceColumnMenuActionType | ColumnDisplayColumnMenuActionType;
+export declare const isColumnMenuActionType: (value?: string) => value is ColumnMenuActionType;
+export declare const getColumnMenuActionType: (target: EventTarget | HTMLElement) => ColumnMenuActionType;
+export declare function buildSortMenu(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElement | null;
+export declare function buildGroupMenu(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElement | null;
+export declare const buildVisibilityMenuItems: (column: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, allowHide?: boolean, allowRemove?: boolean) => MenuElements | null;
+export declare const buildPinMenuItems: (column: ColumnDescriptor, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean) => MenuElements;
+export declare function buildAggregationMenuItems(column: ColumnDescriptor, dataSource: DataSource, menuActionClickHandler: MenuItemClickHandler, isAllowed?: boolean): MenuElements | null;
+export {};

package/types/src/column-menu/useColumnActions.d.ts

@@ -0,0 +1,16 @@
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { VuuFilter } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor, ColumnDisplayAction, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { ColumnMenuActionType } from "./column-menu-utils";
+import { DataSource } from "@vuu-ui/vuu-data-types";
+export interface ContextMenuOptions {
+    column?: RuntimeColumnDescriptor;
+    filter?: Filter;
+    sort?: VuuFilter;
+}
+export interface ContextMenuHookProps {
+    dataSource: DataSource;
+    onColumnDisplayAction?: (action: ColumnDisplayAction) => void;
+}
+export declare const useColumnActions: ({ dataSource, onColumnDisplayAction, }: ContextMenuHookProps) => MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;

package/types/src/column-picker/ColumnModel.d.ts

@@ -0,0 +1,81 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { EventEmitter, ValueOf } from "@vuu-ui/vuu-utils";
+export declare const ColumnChangeSource: {
+    readonly ColumnPicker: "column-picker";
+    readonly ColumnSettings: "column-settings";
+    readonly Table: "table";
+};
+export type ColumnChangeSource = ValueOf<typeof ColumnChangeSource>;
+export declare const SelectedColumnChangeType: {
+    readonly CalculatedColumnAdded: "calculated-column-added";
+    readonly ColumnAdded: "column-added";
+    readonly ColumnRemoved: "column-removed";
+    readonly ColumnUpdated: "column-updated";
+    readonly ColumnsReordered: "columns-reordered";
+};
+export type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;
+export interface SelectedColumnChangeColumnAdded {
+    type: Extract<SelectedColumnChangeType, "column-added">;
+    column: ColumnDescriptor;
+}
+export interface SelectedColumnChangeCalculatedColumnAdded {
+    type: Extract<SelectedColumnChangeType, "calculated-column-added">;
+    column: ColumnDescriptor;
+}
+export interface SelectedColumnChangeColumnUpdated {
+    type: Extract<SelectedColumnChangeType, "column-updated">;
+    column: ColumnDescriptor;
+}
+export interface SelectedColumnChangeColumnRemoved {
+    type: Extract<SelectedColumnChangeType, "column-removed">;
+    column: ColumnDescriptor;
+}
+export interface SelectedColumnChangeColumnsReordered {
+    type: Extract<SelectedColumnChangeType, "columns-reordered">;
+}
+export type SelectedColumnChangeDescriptor = SelectedColumnChangeCalculatedColumnAdded | SelectedColumnChangeColumnAdded | SelectedColumnChangeColumnRemoved | SelectedColumnChangeColumnUpdated | SelectedColumnChangeColumnsReordered;
+export declare const isColumnAdded: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnAdded;
+export declare const isColumnRemoved: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnRemoved;
+export declare const isColumnUpdated: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnUpdated;
+export declare const isColumnsReordered: (change?: SelectedColumnChangeDescriptor) => change is SelectedColumnChangeColumnsReordered;
+export type ColumnsChangeHandler = (columns: readonly ColumnDescriptor[], changeSource: ColumnChangeSource, changeDescriptor?: SelectedColumnChangeDescriptor) => void;
+export type ColumnEvents = {
+    change: ColumnsChangeHandler;
+    render: (o: object) => void;
+};
+export declare class ColumnModel extends EventEmitter<ColumnEvents> {
+    #private;
+    /**
+     * All available columns, including selected columns.
+     */
+    allColumns: readonly ColumnDescriptor[];
+    constructor(
+    /**
+     * All available columns, including selected columns.
+     */
+    allColumns: readonly ColumnDescriptor[], 
+    /**
+     * Columns already selected and rendered in Table.
+     */
+    selectedColumns: readonly ColumnDescriptor[]);
+    get availableColumns(): ColumnDescriptor[];
+    set searchPattern(pattern: string);
+    get searchPattern(): string;
+    get selectedColumns(): readonly ColumnDescriptor[];
+    setSelectedColumns(selectedColumns: readonly ColumnDescriptor[], source: ColumnChangeSource, changeDescriptor?: SelectedColumnChangeDescriptor): void;
+    getColumn(name: string): ColumnDescriptor;
+    addItemToSelectedColumns(name: string, source: ColumnChangeSource): void;
+    removeItemFromSelectedColumns(name: string, source: ColumnChangeSource): void;
+    reorderSelectedColumns(orderedColumnNames: string[], source: ColumnChangeSource): void;
+    updateColumn(currentColumn: ColumnDescriptor, newColumn: ColumnDescriptor): void;
+    updateColumn(column: ColumnDescriptor): void;
+    /**
+     * Used when adding a calculated column
+     *
+     * @param column
+     *
+     * @param addToSelectedColumns
+     */
+    addColumn(column: ColumnDescriptor, addToSelectedColumns?: boolean): void;
+    private notifyListeners;
+}

package/types/src/column-picker/ColumnPicker.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { HTMLAttributes, MouseEventHandler } from "react";
+import { ListBoxProps } from "@salt-ds/core";
+import { ColumnPickerHookProps } from "./useColumnPicker";
+export declare const classBaseListItem = "vuuColumnPickerListItem";
+export interface ColumnPickerProps extends ColumnPickerHookProps, Pick<ListBoxProps<ColumnDescriptor>, "selected" | "onSelectionChange">, HTMLAttributes<HTMLDivElement> {
+    allowCreateCalculatedColumn?: boolean;
+    onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const ColumnPicker: import("react").ForwardRefExoticComponent<ColumnPickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/column-picker/ColumnPickerAction.d.ts

@@ -0,0 +1,5 @@
+import { IconButtonProps } from "@vuu-ui/vuu-ui-controls";
+import { ColumnPickerHookProps } from "./useColumnPicker";
+export interface ColumnPickerActionProps extends Partial<IconButtonProps>, ColumnPickerHookProps {
+}
+export declare const ColumnPickerAction: ({ appearance, columnModel, icon, sentiment, ...IconButtonProps }: ColumnPickerActionProps) => import("react").JSX.Element;

package/types/src/column-picker/useColumnPicker.d.ts

@@ -0,0 +1,16 @@
+import { ColumnDescriptor, TableSelectionModel } from "@vuu-ui/vuu-table-types";
+import { FormEventHandler, MouseEventHandler } from "react";
+import { ColumnModel, SelectedColumnChangeType } from "./ColumnModel";
+export type ColumnSelectionModel = Extract<TableSelectionModel, "none" | "single">;
+export type SelectedColumnsChangeHandler = (columns: ColumnDescriptor[], changeType: SelectedColumnChangeType) => void;
+export interface ColumnPickerHookProps {
+    columnModel: ColumnModel;
+}
+export declare const useColumnPicker: ({ columnModel: model, }: ColumnPickerHookProps) => {
+    availableColumns: ColumnDescriptor[];
+    onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
+    onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;
+    onChangeSearchInput: FormEventHandler;
+    searchText: string;
+    selectedColumns: readonly ColumnDescriptor[];
+};

package/types/src/column-picker/useTableColumnPicker.d.ts

@@ -0,0 +1,7 @@
+import { ColumnModel } from "./ColumnModel";
+export interface TableColumnPickerHookProps {
+    columnModel: ColumnModel;
+}
+export declare const useTableColumnPicker: ({ columnModel, }: TableColumnPickerHookProps) => {
+    showColumnPicker: (title?: string) => void;
+};