@vuu-ui/vuu-table-extras 2.1.19-beta.2 → 2.1.19-beta.3

package/src/column-expression-input/useColumnExpressionSuggestionProvider.js

@@ -1,211 +0,0 @@
-import { AnnotationType, getRelationalOperators, numericOperators, stringOperators, toSuggestions } from "@vuu-ui/vuu-codemirror";
-import { getTypeaheadParams, useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
-import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
-import { useCallback, useRef } from "react";
-import { columnFunctionDescriptors } from "./column-function-descriptors.js";
-import { functionDocInfo } from "./functionDocInfo.js";
-const NO_OPERATORS = [];
-const withApplySpace = (suggestions)=>suggestions.map((suggestion)=>({
-            ...suggestion,
-            apply: (suggestion.apply ?? suggestion.label) + " "
-        }));
-const getValidColumns = (columns, { functionName, operator })=>{
-    if (operator) return columns.filter(isNumericColumn);
-    if (functionName) {
-        const fn = columnFunctionDescriptors.find((f)=>f.name === functionName);
-        if (fn) switch(fn.accepts){
-            case "string":
-                return columns.filter(isTextColumn);
-            case "number":
-                return columns.filter(isNumericColumn);
-            default:
-                break;
-        }
-    }
-    return columns;
-};
-const getColumns = (columns, options)=>{
-    const validColumns = getValidColumns(columns, options);
-    return validColumns.map((column)=>{
-        const label = column.label ?? column.name;
-        return {
-            apply: options.prefix ? `${options.prefix}${column.name}` : column.name,
-            label,
-            boost: 5,
-            type: "column",
-            expressionType: column.serverDataType
-        };
-    });
-};
-const arithmeticOperators = [
-    {
-        apply: "* ",
-        boost: 2,
-        label: "*",
-        type: "operator"
-    },
-    {
-        apply: "/ ",
-        boost: 2,
-        label: "/",
-        type: "operator"
-    },
-    {
-        apply: "+ ",
-        boost: 2,
-        label: "+",
-        type: "operator"
-    },
-    {
-        apply: "- ",
-        boost: 2,
-        label: "-",
-        type: "operator"
-    }
-];
-const getOperators = (column)=>{
-    if (void 0 === column || isNumericColumn(column)) return arithmeticOperators;
-    return NO_OPERATORS;
-};
-const getConditionOperators = (column)=>{
-    switch(column.serverDataType){
-        case "string":
-        case "char":
-            return withApplySpace(stringOperators);
-        case "int":
-        case "long":
-        case "double":
-            return withApplySpace(numericOperators);
-    }
-};
-const toFunctionCompletion = (functionDescriptor)=>({
-        apply: `${functionDescriptor.name}( `,
-        boost: 2,
-        expressionType: functionDescriptor.type,
-        info: ()=>functionDocInfo(functionDescriptor),
-        label: functionDescriptor.name,
-        type: "function"
-    });
-const getAcceptedTypes = (fn)=>{
-    if (fn) {
-        if ("string" == typeof fn.accepts) return fn.accepts;
-        else if (Array.isArray(fn.accepts)) {
-            if (fn.accepts.every((s)=>"string" === s)) return "string";
-        }
-    }
-    return "any";
-};
-const functions = columnFunctionDescriptors.map(toFunctionCompletion);
-const getFunctions = ({ functionName })=>{
-    if (functionName) {
-        const fn = columnFunctionDescriptors.find((f)=>f.name === functionName);
-        const acceptedTypes = getAcceptedTypes(fn);
-        if (fn) switch(acceptedTypes){
-            case "string":
-                return columnFunctionDescriptors.filter((f)=>"string" === f.type || "variable" === f.type).map(toFunctionCompletion);
-            case "number":
-                return columnFunctionDescriptors.filter((f)=>"number" === f.type || "variable" === f.type).map(toFunctionCompletion);
-            default:
-        }
-    }
-    return functions;
-};
-const NONE = {};
-const useColumnExpressionSuggestionProvider = ({ columns, table })=>{
-    const findColumn = useCallback((name)=>name ? columns.find((col)=>col.name === name) : void 0, [
-        columns
-    ]);
-    const latestSuggestionsRef = useRef(void 0);
-    const getTypeaheadSuggestions = useTypeaheadSuggestions();
-    const getSuggestions = useCallback(async (suggestionType, options = NONE)=>{
-        const { columnName, functionName, operator, prefix } = options;
-        switch(suggestionType){
-            case "expression":
-                {
-                    const suggestions = await withApplySpace(getColumns(columns, {
-                        functionName,
-                        prefix
-                    })).concat(getFunctions(options));
-                    return latestSuggestionsRef.current = suggestions;
-                }
-            case "column":
-                {
-                    const suggestions = await getColumns(columns, options);
-                    return latestSuggestionsRef.current = withApplySpace(suggestions);
-                }
-            case "operator":
-                {
-                    const suggestions = await getOperators(findColumn(columnName));
-                    return latestSuggestionsRef.current = withApplySpace(suggestions);
-                }
-            case "relational-operator":
-                {
-                    const suggestions = await getRelationalOperators(findColumn(columnName));
-                    return latestSuggestionsRef.current = withApplySpace(suggestions);
-                }
-            case "condition-operator":
-                {
-                    const column = findColumn(columnName);
-                    if (column) {
-                        const suggestions = await getConditionOperators(column);
-                        if (suggestions) return latestSuggestionsRef.current = withApplySpace(suggestions);
-                    }
-                }
-                break;
-            case "columnValue":
-                if (columnName && operator) {
-                    const params = getTypeaheadParams(table, columnName);
-                    const suggestions = await getTypeaheadSuggestions(params);
-                    if (suggestions) {
-                        latestSuggestionsRef.current = toSuggestions(suggestions, {
-                            suffix: ""
-                        });
-                        latestSuggestionsRef.current.forEach((suggestion)=>{
-                            suggestion.apply = (view, completion, from)=>{
-                                const annotation = new AnnotationType();
-                                const cursorPos = from + completion.label.length + 1;
-                                view.dispatch({
-                                    changes: {
-                                        from,
-                                        insert: completion.label
-                                    },
-                                    selection: {
-                                        anchor: cursorPos,
-                                        head: cursorPos
-                                    },
-                                    annotations: annotation.of(completion)
-                                });
-                            };
-                        });
-                    }
-                    return latestSuggestionsRef.current || [];
-                }
-                break;
-        }
-        return [];
-    }, [
-        columns,
-        findColumn,
-        getTypeaheadSuggestions,
-        table
-    ]);
-    const isPartialMatch = useCallback(async (valueType, columnName, pattern)=>{
-        const { current: latestSuggestions } = latestSuggestionsRef;
-        let maybe = false;
-        const suggestions = latestSuggestions || await getSuggestions(valueType, {
-            columnName
-        });
-        if (pattern && suggestions) {
-            for (const option of suggestions)if (option.label === pattern) return false;
-            else if (option.label.startsWith(pattern)) maybe = true;
-        }
-        return maybe;
-    }, [
-        getSuggestions
-    ]);
-    return {
-        getSuggestions,
-        isPartialMatch
-    };
-};
-export { useColumnExpressionSuggestionProvider };

package/src/column-formatting-settings/BaseNumericFormattingSettings.js

@@ -1,96 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FormField, FormFieldLabel, Input, Switch } from "@salt-ds/core";
-import { getTypeFormattingFromColumn } from "@vuu-ui/vuu-utils";
-import { useCallback, useState } from "react";
-const classBase = "vuuFormattingSettings";
-const BaseNumericFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
-    const [formattingSettings, setFormattingSettings] = useState(getTypeFormattingFromColumn(column));
-    const handleInputKeyDown = useCallback((evt)=>{
-        if ("Enter" === evt.key || "Tab" === evt.key) onChange(formattingSettings);
-    }, [
-        formattingSettings,
-        onChange
-    ]);
-    const handleChangeDecimals = useCallback((evt)=>{
-        const { value } = evt.target;
-        const numericValue = "" === value ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
-        const newFormattingSettings = {
-            ...formattingSettings,
-            decimals: numericValue
-        };
-        setFormattingSettings(newFormattingSettings);
-    }, [
-        formattingSettings
-    ]);
-    const handleChangeAlignDecimals = useCallback((evt)=>{
-        const { checked } = evt.target;
-        const newFormattingSettings = {
-            ...formattingSettings,
-            alignOnDecimals: checked
-        };
-        setFormattingSettings(newFormattingSettings);
-        onChange(newFormattingSettings);
-    }, [
-        formattingSettings,
-        onChange
-    ]);
-    const handleChangeZeroPad = useCallback((evt)=>{
-        const { checked } = evt.target;
-        const newFormattingSettings = {
-            ...formattingSettings,
-            zeroPad: checked
-        };
-        setFormattingSettings(newFormattingSettings);
-        onChange(newFormattingSettings);
-    }, [
-        formattingSettings,
-        onChange
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: classBase,
-        children: [
-            /*#__PURE__*/ jsxs(FormField, {
-                "data-field": "decimals",
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Number of decimals"
-                    }),
-                    /*#__PURE__*/ jsx(Input, {
-                        bordered: true,
-                        className: "vuuInput",
-                        onChange: handleChangeDecimals,
-                        onKeyDown: handleInputKeyDown,
-                        value: formattingSettings.decimals ?? ""
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(FormField, {
-                labelPlacement: "left",
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Align on decimals"
-                    }),
-                    /*#__PURE__*/ jsx(Switch, {
-                        checked: formattingSettings.alignOnDecimals ?? false,
-                        onChange: handleChangeAlignDecimals,
-                        value: "align-decimals"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(FormField, {
-                labelPlacement: "left",
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Zero pad decimals"
-                    }),
-                    /*#__PURE__*/ jsx(Switch, {
-                        checked: formattingSettings.zeroPad ?? false,
-                        onChange: handleChangeZeroPad,
-                        value: "zero-pad"
-                    })
-                ]
-            })
-        ]
-    });
-};
-export { BaseNumericFormattingSettings };

package/src/column-formatting-settings/ColumnFormattingPanel.js

@@ -1,112 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { getCellRendererOptions, getConfigurationEditor, isColumnTypeRenderer, isTypeDescriptor } from "@vuu-ui/vuu-utils";
-import { Dropdown, FormField, FormFieldLabel, Option } from "@salt-ds/core";
-import clsx from "clsx";
-import { useCallback, useMemo } from "react";
-import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings.js";
-import { LongTypeFormattingSettings } from "./LongTypeFormattingSettings.js";
-import { DateTimeFormattingSettings } from "./DateTimeFormattingSettings.js";
-const classBase = "vuuColumnFormattingPanel";
-const ColumnFormattingPanel = ({ availableRenderers, className, column, onChangeFormatting, onChangeColumnType, onChangeRendering, ...htmlAttributes })=>{
-    const formattingSettingsComponent = useMemo(()=>getFormattingSettingsComponent({
-            column,
-            onChangeFormatting,
-            onChangeColumnType
-        }), [
-        column,
-        onChangeColumnType,
-        onChangeFormatting
-    ]);
-    const ConfigEditor = useMemo(()=>{
-        const { type } = column;
-        if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {
-            const cellRendererOptions = getCellRendererOptions(type.renderer.name);
-            return getConfigurationEditor(cellRendererOptions?.configEditor);
-        }
-    }, [
-        column
-    ]);
-    const selectedCellRenderer = useMemo(()=>{
-        const { type } = column;
-        const [defaultRenderer] = availableRenderers;
-        const rendererName = isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer) ? type.renderer.name : void 0;
-        const configuredRenderer = availableRenderers.find((renderer)=>renderer.name === rendererName);
-        return configuredRenderer ?? defaultRenderer;
-    }, [
-        availableRenderers,
-        column
-    ]);
-    const handleChangeRenderer = useCallback((_e, [cellRendererDescriptor])=>{
-        const renderProps = {
-            name: cellRendererDescriptor.name
-        };
-        onChangeRendering?.(renderProps);
-    }, [
-        onChangeRendering
-    ]);
-    const { serverDataType = "string" } = column;
-    return /*#__PURE__*/ jsxs("div", {
-        ...htmlAttributes,
-        className: "vuuColumnSettingsPanel-header",
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                children: "Formatting"
-            }),
-            /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: `Renderer (data type ${column.serverDataType})`
-                    }),
-                    /*#__PURE__*/ jsx(Dropdown, {
-                        bordered: true,
-                        className: clsx(`${classBase}-renderer`),
-                        onSelectionChange: handleChangeRenderer,
-                        selected: selectedCellRenderer ? [
-                            selectedCellRenderer
-                        ] : [],
-                        value: selectedCellRenderer?.label ?? selectedCellRenderer?.name,
-                        children: availableRenderers.map((cellRenderer, i)=>/*#__PURE__*/ jsx(Option, {
-                                value: cellRenderer,
-                                children: cellRenderer.label ?? cellRenderer.name
-                            }, i))
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: clsx(classBase, className, `${classBase}-${serverDataType}`),
-                children: [
-                    formattingSettingsComponent,
-                    ConfigEditor ? /*#__PURE__*/ jsx(ConfigEditor, {
-                        column: column,
-                        onChangeRendering: onChangeRendering
-                    }) : null
-                ]
-            })
-        ]
-    });
-};
-function getFormattingSettingsComponent(props) {
-    const { column } = props;
-    switch(column.serverDataType){
-        case "double":
-        case "scaleddecimal2":
-        case "scaleddecimal4":
-        case "scaleddecimal6":
-        case "scaleddecimal8":
-        case "int":
-            return /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
-                ...props
-            });
-        case "long":
-            return /*#__PURE__*/ jsx(LongTypeFormattingSettings, {
-                ...props
-            });
-        case "epochtimestamp":
-            return /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
-                ...props
-            });
-        default:
-            return null;
-    }
-}
-export { ColumnFormattingPanel };

package/src/column-formatting-settings/DateTimeFormattingSettings.js

@@ -1,116 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { dateTimeLabelByType, defaultPatternsByType, fallbackDateTimePattern, getTypeFormattingFromColumn, isDatePattern, isTimePattern, supportedDateTimePatterns } from "@vuu-ui/vuu-utils";
-import { Dropdown, FormField, FormFieldLabel, Option, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
-import { useCallback, useMemo, useState } from "react";
-const toggleValues = [
-    "date",
-    "time",
-    "both"
-];
-function getToggleValue(pattern) {
-    return pattern.time ? pattern.date ? "both" : "time" : "date";
-}
-const getSelectedPattern = (pattern)=>{
-    if (isDatePattern(pattern)) return [
-        pattern
-    ];
-    if (isTimePattern(pattern)) return [
-        pattern
-    ];
-};
-const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
-    const formatting = getTypeFormattingFromColumn(column);
-    const { pattern = fallbackDateTimePattern } = formatting;
-    const toggleValue = useMemo(()=>getToggleValue(pattern), [
-        pattern
-    ]);
-    const [fallbackState, setFallbackState] = useState({
-        time: pattern.time ?? defaultPatternsByType.time,
-        date: pattern.date ?? defaultPatternsByType.date
-    });
-    const onPatternChange = useCallback((pattern)=>onChange({
-            ...formatting,
-            pattern
-        }), [
-        onChange,
-        formatting
-    ]);
-    const onDropdownChange = useCallback((dateTime)=>(_, [selectedPattern])=>{
-            const updatedPattern = {
-                ...pattern ?? {},
-                [dateTime]: selectedPattern
-            };
-            setFallbackState((s)=>({
-                    time: updatedPattern.time ?? s.time,
-                    date: updatedPattern.date ?? s.date
-                }));
-            onPatternChange(updatedPattern);
-        }, [
-        onPatternChange,
-        pattern
-    ]);
-    const onToggleChange = useCallback((evnt)=>{
-        const value = evnt.currentTarget.value;
-        switch(value){
-            case "time":
-                return onPatternChange({
-                    [value]: pattern[value] ?? fallbackState[value]
-                });
-            case "date":
-                return onPatternChange({
-                    [value]: pattern[value] ?? fallbackState[value]
-                });
-            case "both":
-                return onPatternChange({
-                    time: pattern.time ?? fallbackState.time,
-                    date: pattern.date ?? fallbackState.date
-                });
-        }
-    }, [
-        onPatternChange,
-        pattern,
-        fallbackState
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsxs(FormField, {
-                labelPlacement: "top",
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Display"
-                    }),
-                    /*#__PURE__*/ jsx(ToggleButtonGroup, {
-                        className: "vuuToggleButtonGroup",
-                        onChange: onToggleChange,
-                        value: toggleValue,
-                        "data-variant": "primary",
-                        children: toggleValues.map((v)=>/*#__PURE__*/ jsx(ToggleButton, {
-                                value: v,
-                                children: v.toUpperCase()
-                            }, v))
-                    })
-                ]
-            }),
-            [
-                "date",
-                "time"
-            ].filter((v)=>!!pattern[v]).map((v)=>/*#__PURE__*/ jsxs(FormField, {
-                    labelPlacement: "top",
-                    children: [
-                        /*#__PURE__*/ jsx(FormFieldLabel, {
-                            children: `${dateTimeLabelByType[v]} pattern`
-                        }),
-                        /*#__PURE__*/ jsx(Dropdown, {
-                            onSelectionChange: onDropdownChange(v),
-                            selected: getSelectedPattern(pattern[v]),
-                            children: supportedDateTimePatterns[v].map((pattern, i)=>/*#__PURE__*/ jsx(Option, {
-                                    value: pattern,
-                                    children: pattern
-                                }, i))
-                        })
-                    ]
-                }, v))
-        ]
-    });
-};
-export { DateTimeFormattingSettings };

package/src/column-formatting-settings/LongTypeFormattingSettings.css.js

@@ -1,11 +0,0 @@
-const css = `
-.vuuLongColumnFormattingSettings {
-  gap: var(--salt-spacing-200);
-  flex-direction: column;
-  padding-top: 6px;
-  display: flex;
-}
-
-
-`;
-export default css;

package/src/column-formatting-settings/LongTypeFormattingSettings.js

@@ -1,54 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FormField, FormFieldLabel, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { useCallback } from "react";
-import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings.js";
-import LongTypeFormattingSettings from "./LongTypeFormattingSettings.css";
-import { isTypeDescriptor } from "@vuu-ui/vuu-utils";
-const classBase = "vuuLongColumnFormattingSettings";
-const LongTypeFormattingSettings_LongTypeFormattingSettings = (props)=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-long-formatting-settings",
-        css: LongTypeFormattingSettings,
-        window: targetWindow
-    });
-    const { column, onChangeColumnType: onChangeType } = props;
-    const type = isTypeDescriptor(column.type) ? column.type.name : column.type;
-    const handleToggleChange = useCallback((event)=>{
-        const value = event.currentTarget.value;
-        onChangeType(value);
-    }, [
-        onChangeType
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: classBase,
-        children: [
-            /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsx(FormFieldLabel, {
-                        children: "Type inferred as"
-                    }),
-                    /*#__PURE__*/ jsx(ToggleButtonGroup, {
-                        className: "vuuToggleButtonGroup",
-                        onChange: handleToggleChange,
-                        value: type ?? "number",
-                        children: toggleValues.map((v)=>/*#__PURE__*/ jsx(ToggleButton, {
-                                value: v,
-                                children: v.toUpperCase()
-                            }, v))
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
-                ...props
-            })
-        ]
-    });
-};
-const toggleValues = [
-    "number",
-    "date/time"
-];
-export { LongTypeFormattingSettings_LongTypeFormattingSettings as LongTypeFormattingSettings };

package/src/column-formatting-settings/index.js

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

package/src/column-menu/ColumnMenu.css.js

@@ -1,25 +0,0 @@
-const css = `
-.vuuMenuItem {
-  --vuu-svg-cog: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>");
-}
-
-.vuuColumnMenu {
-  --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  --saltButton-borderRadius: 3px;
-  --saltButton-padding: var(--salt-spacing-50);
-  --saltButton-minWidth: var(--menu-button-size);
-  --saltButton-height: var(--vuuColumnMenu-height, var(--menu-button-size));
-  --saltButton-width: var(--vuuColumnMenu-width, var(--menu-button-size));
-  --vuu-icon-height: var(--menu-button-size);
-  --vuu-icon-left: 0px;
-  --vuu-icon-top: 0px;
-  --vuu-icon-width: var(--menu-button-size);
-  flex: 0 0 var(--menu-button-size);
-  margin: var(--vuuTable-columnMenu-margin, 0);
-  border: none;
-  padding: 0;
-}
-
-
-`;
-export default css;