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

package/src/column-menu/ColumnMenu.js

@@ -1,69 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Menu, MenuPanel, MenuTrigger } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { IconButton } from "@vuu-ui/vuu-ui-controls";
-import clsx from "clsx";
-import { useCallback } from "react";
-import { useTableContext } from "../table-provider/TableProvider.js";
-import { buildAggregationMenuItems, buildGroupMenu, buildPinMenuItems, buildSortMenu, buildVisibilityMenuItems, getColumnMenuActionType } from "./column-menu-utils.js";
-import ColumnMenu from "./ColumnMenu.css";
-const classBase = "vuuColumnMenu";
-const defaultColumnMenuPermissions = {
-    allowSort: true,
-    allowGroup: true,
-    allowAggregation: true,
-    allowHide: true,
-    allowRemove: true,
-    allowPin: true
-};
-const ColumnMenu_ColumnMenu = ({ className, column, menuActionHandler: menuActionHandlerProp, menuPermissions: { allowSort, allowGroup, allowAggregation, allowHide, allowRemove, allowPin } = defaultColumnMenuPermissions })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-column-menu",
-        css: ColumnMenu,
-        window: targetWindow
-    });
-    const { dataSource, menuActionHandler } = useTableContext(true);
-    const menuActionClickHandler = useCallback((evt)=>{
-        const columnMenuActionType = getColumnMenuActionType(evt.target);
-        if (menuActionHandlerProp?.(columnMenuActionType, column) !== true) return menuActionHandler(columnMenuActionType, column);
-    }, [
-        column,
-        menuActionHandler,
-        menuActionHandlerProp
-    ]);
-    const sortMenu = buildSortMenu(column, dataSource, menuActionClickHandler, allowSort);
-    const groupMenu = buildGroupMenu(column, dataSource, menuActionClickHandler, allowGroup);
-    const aggregationMenu = buildAggregationMenuItems(column, dataSource, menuActionClickHandler, allowAggregation);
-    const visibilityMenuItems = buildVisibilityMenuItems(column, menuActionClickHandler, allowHide, allowRemove);
-    const pinMenu = buildPinMenuItems(column, menuActionClickHandler, allowPin);
-    const handleClick = useCallback((evt)=>{
-        evt.stopPropagation();
-    }, []);
-    return /*#__PURE__*/ jsxs(Menu, {
-        children: [
-            /*#__PURE__*/ jsx(MenuTrigger, {
-                children: /*#__PURE__*/ jsx(IconButton, {
-                    appearance: "transparent",
-                    className: clsx(classBase, className),
-                    "data-embedded": true,
-                    icon: "more-vert",
-                    sentiment: "neutral",
-                    "aria-label": "Open Column Menu",
-                    onClick: handleClick
-                })
-            }),
-            /*#__PURE__*/ jsxs(MenuPanel, {
-                children: [
-                    sortMenu,
-                    groupMenu,
-                    aggregationMenu,
-                    visibilityMenuItems,
-                    pinMenu
-                ]
-            })
-        ]
-    });
-};
-export { ColumnMenu_ColumnMenu as ColumnMenu };

package/src/column-menu/column-menu-utils.js

@@ -1,318 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Menu, MenuItem, MenuPanel, MenuTrigger } from "@salt-ds/core";
-import { getGroupStatus, getSortStatus, isNumericColumn, logUnhandledMessage } from "@vuu-ui/vuu-utils";
-const isColumnMenuActionType = (value)=>void 0 !== value && [
-        "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",
-        "pin-column-left",
-        "pin-column-right",
-        "unpin-column",
-        "hide-column",
-        "remove-column"
-    ].includes(value);
-const getColumnMenuActionType = (target)=>{
-    const { menuActionId } = target.dataset;
-    if (isColumnMenuActionType(menuActionId)) return menuActionId;
-    throw Error("[vuu-table-extras] column-menu-utils target element is not a valid Column MenuItem");
-};
-function buildSortMenu(column, dataSource, menuActionClickHandler, isAllowed = true) {
-    if (!isAllowed || false === column.sortable) return null;
-    {
-        const { name, label = name } = column;
-        const menuItems = [];
-        const columnSortStatus = getSortStatus(column.name, dataSource.sort);
-        switch(columnSortStatus){
-            case "no-sort":
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "sort-asc",
-                    onClick: menuActionClickHandler,
-                    children: "Sort ascending"
-                }, "sort-asc"));
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "sort-dsc",
-                    onClick: menuActionClickHandler,
-                    children: "Sort descending"
-                }, "sort-dsc"));
-                break;
-            case "single-sort-asc":
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "sort-dsc",
-                    onClick: menuActionClickHandler,
-                    children: "Reverse Sort (DSC)"
-                }, "sort-dsc"), /*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "remove-sort",
-                    onClick: menuActionClickHandler,
-                    children: "Remove Sort"
-                }, "remove-sort"));
-                break;
-            case "single-sort-desc":
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "sort-asc",
-                    onClick: menuActionClickHandler,
-                    children: "Reverse Sort (ASC)"
-                }, "sort-asc"), /*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "remove-sort",
-                    onClick: menuActionClickHandler,
-                    children: "Remove Sort"
-                }, "remove-sort"));
-                break;
-            case "sort-other-column":
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "sort-add-asc",
-                    onClick: menuActionClickHandler,
-                    children: "Add to sort ASC"
-                }, "sort-add-asc"));
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "sort-add-dsc",
-                    onClick: menuActionClickHandler,
-                    children: "Add to sort DSC"
-                }, "sort-add-dsc"));
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "sort-asc",
-                    onClick: menuActionClickHandler,
-                    children: "Ascending"
-                }, "sort-asc"));
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "sort-dsc",
-                    onClick: menuActionClickHandler,
-                    children: "Descending"
-                }, "sort-dsc"));
-                break;
-            case "multi-sort-includes-column-asc":
-            case "multi-sort-includes-column-desc":
-                break;
-            default:
-                logUnhandledMessage(columnSortStatus, "[vuu-table-extras] column-menu-utils buildSortMenu");
-        }
-        return /*#__PURE__*/ jsxs(Menu, {
-            children: [
-                /*#__PURE__*/ jsx(MenuTrigger, {
-                    children: /*#__PURE__*/ jsx(MenuItem, {
-                        children: `Sort by ${label}`
-                    })
-                }),
-                /*#__PURE__*/ jsx(MenuPanel, {
-                    children: menuItems
-                })
-            ]
-        }, "sort-menu");
-    }
-}
-function buildGroupMenu(column, dataSource, menuActionClickHandler, isAllowed = true) {
-    if (!isAllowed || false === column.groupable) return null;
-    {
-        const menuItems = [];
-        const columnGroupStatus = getGroupStatus(column.name, dataSource.groupBy);
-        const { name, label = name } = column;
-        switch(columnGroupStatus){
-            case "no-groupby":
-                return /*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "group-column",
-                    onClick: menuActionClickHandler,
-                    children: `Group by ${label}`
-                }, "group-column");
-            case "single-groupby-other-column":
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "group-column",
-                    onClick: menuActionClickHandler,
-                    children: `Group by ${label}`
-                }, "group-column"), /*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "add-to-group",
-                    onClick: menuActionClickHandler,
-                    children: `Add ${label} to groupby`
-                }, "add-to-group"));
-                break;
-            case "single-groupby":
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "remove-group",
-                    onClick: menuActionClickHandler,
-                    children: "Remove Grouping"
-                }, "remove-group"));
-                break;
-            case "multi-groupby-other-columns":
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "add-to-group",
-                    onClick: menuActionClickHandler,
-                    children: "Add to grouping"
-                }, "add-to-group"));
-                break;
-            case "multi-groupby-includes-column":
-                menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-                    "data-menu-action-id": "remove-from-group",
-                    onClick: menuActionClickHandler,
-                    children: "Remove from grouping"
-                }, "remove-from-group"));
-                break;
-            default:
-                logUnhandledMessage(columnGroupStatus, "[vuu-table-extras] column-menu-utils buildGroupMenu");
-        }
-        return /*#__PURE__*/ jsxs(Menu, {
-            children: [
-                /*#__PURE__*/ jsx(MenuTrigger, {
-                    children: /*#__PURE__*/ jsx(MenuItem, {
-                        children: "Group data"
-                    })
-                }),
-                /*#__PURE__*/ jsx(MenuPanel, {
-                    children: menuItems
-                })
-            ]
-        }, "group-menu");
-    }
-}
-const buildVisibilityMenuItems = (column, menuActionClickHandler, allowHide = true, allowRemove = true)=>{
-    if (!allowHide && !allowRemove) return null;
-    const menuItems = [];
-    const { name, label = name } = column;
-    if (allowHide) menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-        "data-menu-action-id": "hide-column",
-        onClick: menuActionClickHandler,
-        children: `Hide ${label} column`
-    }, "hide-column"));
-    if (allowRemove) menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-        "data-menu-action-id": "remove-column",
-        onClick: menuActionClickHandler,
-        children: `Remove ${label} column`
-    }, "remove-column"));
-    return menuItems;
-};
-const buildPinMenuItems = (column, menuActionClickHandler, isAllowed = true)=>{
-    if (!isAllowed || void 0 === column) return [];
-    const { pin } = column;
-    const menuItems = [];
-    const pinLeft = /*#__PURE__*/ jsx(MenuItem, {
-        "data-menu-action-id": "pin-column-left",
-        onClick: menuActionClickHandler,
-        children: "Pin left"
-    }, "pin-column-left");
-    const pinRight = /*#__PURE__*/ jsx(MenuItem, {
-        "data-menu-action-id": "pin-column-right",
-        onClick: menuActionClickHandler,
-        children: "Pin right"
-    }, "pin-column-right");
-    if (pin) {
-        menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-            "data-menu-action-id": "unpin-column",
-            onClick: menuActionClickHandler,
-            children: "Unpin"
-        }, "unpin-column"));
-        if ("left" === pin || "right" === pin) menuItems.push(/*#__PURE__*/ jsxs(Menu, {
-            children: [
-                /*#__PURE__*/ jsx(MenuTrigger, {
-                    children: /*#__PURE__*/ jsx(MenuItem, {
-                        children: "Pin Column"
-                    })
-                }),
-                /*#__PURE__*/ jsx(MenuPanel, {
-                    children: "right" === pin ? pinLeft : pinRight
-                })
-            ]
-        }, "pin-menu"));
-        else if ("floating" === pin) menuItems.push(/*#__PURE__*/ jsxs(Menu, {
-            children: [
-                /*#__PURE__*/ jsx(MenuTrigger, {
-                    children: /*#__PURE__*/ jsx(MenuItem, {
-                        children: "Pin Column"
-                    })
-                }),
-                /*#__PURE__*/ jsxs(MenuPanel, {
-                    children: [
-                        pinLeft,
-                        pinRight
-                    ]
-                })
-            ]
-        }, "pin-menu"));
-        else menuItems.push(/*#__PURE__*/ jsxs(Menu, {
-            children: [
-                /*#__PURE__*/ jsx(MenuTrigger, {
-                    children: /*#__PURE__*/ jsx(MenuItem, {
-                        children: "Pin Column"
-                    })
-                }),
-                /*#__PURE__*/ jsx(MenuPanel, {
-                    children: pinRight
-                })
-            ]
-        }, "pin-menu"));
-    } else menuItems.push(/*#__PURE__*/ jsxs(Menu, {
-        children: [
-            /*#__PURE__*/ jsx(MenuTrigger, {
-                children: /*#__PURE__*/ jsx(MenuItem, {
-                    children: "Pin Column"
-                })
-            }),
-            /*#__PURE__*/ jsxs(MenuPanel, {
-                children: [
-                    pinLeft,
-                    pinRight
-                ]
-            })
-        ]
-    }, "pin-menu"));
-    return menuItems;
-};
-function buildAggregationMenuItems(column, dataSource, menuActionClickHandler, isAllowed = true) {
-    if (!isAllowed) return null;
-    const { name, label = name } = column;
-    if (dataSource.groupBy?.length === 0) return [];
-    {
-        const menuItems = [
-            /*#__PURE__*/ jsx(MenuItem, {
-                "data-menu-action-id": "agg-count",
-                onClick: menuActionClickHandler,
-                children: "Count"
-            }, "agg-count"),
-            /*#__PURE__*/ jsx(MenuItem, {
-                "data-menu-action-id": "agg-distinct",
-                onClick: menuActionClickHandler,
-                children: "Distinct"
-            }, "agg-distinct")
-        ];
-        if (isNumericColumn(column)) menuItems.push(/*#__PURE__*/ jsx(MenuItem, {
-            "data-menu-action-id": "agg-sum",
-            onClick: menuActionClickHandler,
-            children: "Sum"
-        }, "agg-sum"), /*#__PURE__*/ jsx(MenuItem, {
-            "data-menu-action-id": "agg-avg",
-            onClick: menuActionClickHandler,
-            children: "Average"
-        }, "agg-avg"), /*#__PURE__*/ jsx(MenuItem, {
-            "data-menu-action-id": "agg-high",
-            onClick: menuActionClickHandler,
-            children: "High"
-        }, "agg-high"), /*#__PURE__*/ jsx(MenuItem, {
-            "data-menu-action-id": "agg-low",
-            onClick: menuActionClickHandler,
-            children: "Low"
-        }, "agg-low"));
-        return [
-            /*#__PURE__*/ jsxs(Menu, {
-                children: [
-                    /*#__PURE__*/ jsx(MenuTrigger, {
-                        children: /*#__PURE__*/ jsx(MenuItem, {
-                            children: `Aggregate ${label}`
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(MenuPanel, {
-                        children: menuItems
-                    })
-                ]
-            }, "aggregate-menu")
-        ];
-    }
-}
-export { buildAggregationMenuItems, buildGroupMenu, buildPinMenuItems, buildSortMenu, buildVisibilityMenuItems, getColumnMenuActionType, isColumnMenuActionType };

package/src/column-menu/useColumnActions.js

@@ -1,77 +0,0 @@
-import { AggregationType, addGroupColumn, addSortColumn, logUnhandledMessage, removeGroupColumn, setAggregations, setSortColumn } from "@vuu-ui/vuu-utils";
-const { Average: Average, Count: Count, Distinct: Distinct, High: High, Low: Low, Sum: Sum } = AggregationType;
-const useColumnActions = ({ dataSource, onColumnDisplayAction })=>{
-    const handleContextMenuAction = (columnMenuActionType, column)=>{
-        if (column && dataSource) switch(columnMenuActionType){
-            case "sort-asc":
-                return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
-            case "sort-dsc":
-                return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
-            case "remove-sort":
-                return dataSource.sort = {
-                    sortDefs: []
-                }, true;
-            case "sort-add-asc":
-                return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
-            case "sort-add-dsc":
-                return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
-            case "group-column":
-                return dataSource.groupBy = [
-                    column.name
-                ], true;
-            case "add-to-group":
-                return dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column), true;
-            case "remove-group":
-                return dataSource.groupBy = [], true;
-            case "remove-from-group":
-                return dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column), true;
-            case "remove-column":
-                dataSource.columns = dataSource.columns.filter((name)=>name !== column.name);
-                onColumnDisplayAction?.({
-                    type: "removeColumn",
-                    column
-                });
-                return true;
-            case "agg-avg":
-                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Average), true;
-            case "agg-high":
-                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
-            case "agg-low":
-                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
-            case "agg-count":
-                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
-            case "agg-distinct":
-                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Distinct), true;
-            case "agg-sum":
-                return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Sum), true;
-            case "hide-column":
-                return onColumnDisplayAction?.({
-                    type: "hideColumn",
-                    column
-                }), true;
-            case "pin-column-left":
-                return onColumnDisplayAction?.({
-                    type: "pinColumn",
-                    column,
-                    pin: "left"
-                }), true;
-            case "pin-column-right":
-                return onColumnDisplayAction?.({
-                    type: "pinColumn",
-                    column,
-                    pin: "right"
-                }), true;
-            case "unpin-column":
-                return onColumnDisplayAction?.({
-                    type: "pinColumn",
-                    column,
-                    pin: false
-                }), true;
-            default:
-                logUnhandledMessage(columnMenuActionType, "[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType");
-        }
-        return false;
-    };
-    return handleContextMenuAction;
-};
-export { useColumnActions };

package/src/column-picker/ColumnModel.js

@@ -1,113 +0,0 @@
-import { EventEmitter, reorderColumnItems } from "@vuu-ui/vuu-utils";
-const ColumnChangeSource = {
-    ColumnPicker: "column-picker",
-    ColumnSettings: "column-settings",
-    Table: "table"
-};
-const SelectedColumnChangeType = {
-    CalculatedColumnAdded: "calculated-column-added",
-    ColumnAdded: "column-added",
-    ColumnRemoved: "column-removed",
-    ColumnUpdated: "column-updated",
-    ColumnsReordered: "columns-reordered"
-};
-const isColumnAdded = (change)=>change?.type === SelectedColumnChangeType.ColumnAdded;
-const isColumnRemoved = (change)=>change?.type === SelectedColumnChangeType.ColumnRemoved;
-const isColumnUpdated = (change)=>change?.type === SelectedColumnChangeType.ColumnUpdated;
-const isColumnsReordered = (change)=>change?.type === SelectedColumnChangeType.ColumnsReordered;
-const byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 })=>l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
-const filterColumns = (columns, pattern)=>{
-    if (!pattern) return columns;
-    {
-        const lowerCasePattern = pattern.toLowerCase();
-        return columns.filter(({ name, label = name })=>-1 !== label.toLowerCase().indexOf(lowerCasePattern));
-    }
-};
-class ColumnModel extends EventEmitter {
-    allColumns;
-    #searchPattern = "";
-    #selectedColumns;
-    constructor(allColumns, selectedColumns){
-        super(), this.allColumns = allColumns;
-        this.#selectedColumns = selectedColumns;
-    }
-    get availableColumns() {
-        return filterColumns(this.allColumns, this.#searchPattern).filter(({ name })=>-1 === this.#selectedColumns.findIndex((c)=>c.name === name)).toSorted(byColumnName);
-    }
-    set searchPattern(pattern) {
-        const searchPattern = pattern;
-        if (searchPattern !== this.#searchPattern) {
-            this.#searchPattern = searchPattern;
-            this.emit("render", {});
-        }
-    }
-    get searchPattern() {
-        return this.#searchPattern ?? "";
-    }
-    get selectedColumns() {
-        return filterColumns(this.#selectedColumns, this.#searchPattern);
-    }
-    setSelectedColumns(selectedColumns, source, changeDescriptor) {
-        this.#selectedColumns = selectedColumns;
-        this.notifyListeners(selectedColumns, source, changeDescriptor);
-    }
-    getColumn(name) {
-        const col = this.#selectedColumns.find((col)=>col.name === name);
-        if (col) return col;
-        throw Error(`[ColumnModel] columns does not contain column ${name}`);
-    }
-    addItemToSelectedColumns(name, source) {
-        const column = this.allColumns.find((col)=>col.name === name);
-        if (column) {
-            this.#selectedColumns = this.#selectedColumns.concat(column);
-            this.notifyListeners(this.#selectedColumns, source, {
-                type: SelectedColumnChangeType.ColumnAdded,
-                column
-            });
-        } else throw Error(`[ColumnModel] addItemToSelectedColumns, column '${name}' not found`);
-    }
-    removeItemFromSelectedColumns(name, source) {
-        const column = this.#selectedColumns.find((col)=>col.name === name);
-        if (column) {
-            const index = this.#selectedColumns.indexOf(column);
-            this.#selectedColumns = this.#selectedColumns.toSpliced(index, 1);
-            this.notifyListeners(this.#selectedColumns, source, {
-                type: SelectedColumnChangeType.ColumnRemoved,
-                column
-            });
-        } else throw Error(`[ColumnModel] removeItemFromSelectedColumns, column '${name}' not found`);
-    }
-    reorderSelectedColumns(orderedColumnNames, source) {
-        this.setSelectedColumns(reorderColumnItems(this.#selectedColumns, orderedColumnNames), source, {
-            type: SelectedColumnChangeType.ColumnsReordered
-        });
-    }
-    updateColumn(column, newColumn = column) {
-        const allIndex = this.allColumns.findIndex((col)=>col.name === column.name);
-        const selectedIndex = this.#selectedColumns.findIndex((col)=>col.name === column.name);
-        if (-1 !== selectedIndex) {
-            if (-1 === allIndex) throw Error("[ColumnModel] updateColumn, selected column not in allColumns collection");
-            this.#selectedColumns = this.#selectedColumns.toSpliced(selectedIndex, 1, newColumn);
-            this.allColumns = this.allColumns.toSpliced(allIndex, 1, newColumn);
-            this.notifyListeners(this.#selectedColumns, "column-settings", {
-                type: SelectedColumnChangeType.ColumnUpdated,
-                column
-            });
-        } else throw Error(`[ColumnModel] updateColumn, column ${column.name} not found`);
-    }
-    addColumn(column, addToSelectedColumns = false) {
-        console.log(`[ColumnModel] add column ${JSON.stringify(column)}`);
-        if (addToSelectedColumns) console.log("add it to selected coliumns");
-        this.allColumns = this.allColumns.concat(column);
-        this.#selectedColumns = this.#selectedColumns.concat(column);
-        this.notifyListeners(this.#selectedColumns, "column-picker", {
-            type: SelectedColumnChangeType.CalculatedColumnAdded,
-            column
-        });
-    }
-    notifyListeners = (columns, source, changeType)=>{
-        this.emit("change", columns, source, changeType);
-        this.emit("render", {});
-    };
-}
-export { ColumnChangeSource, ColumnModel, SelectedColumnChangeType, isColumnAdded, isColumnRemoved, isColumnUpdated, isColumnsReordered };

package/src/column-picker/ColumnPicker.css.js

@@ -1,96 +0,0 @@
-const css = `
-.vuuColumnPicker {
-  --label-margin-left: 0px;
-  --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));
-  background: var(--columnpicker-background);
-  gap: var(--salt-spacing-300);
-  height: var(--vuuColumnPicker-height, 100%);
-  padding: var(--salt-spacing-300) 0;
-  flex-direction: column;
-  display: flex;
-  overflow: hidden;
-  container-type: inline-size;
-
-  &.vuuColumnPicker-withCalculated {
-    --label-margin-left: 8px;
-  }
-
-  & .saltListBox {
-    background-color: inherit;
-  }
-
-  & .saltOption {
-    background-color: inherit;
-    border-bottom: var(--vuuColumnListItem-border, solid) 1px
-        var(--salt-separable-tertiary-borderColor);
-    align-items: center;
-    gap: var(--salt-spacing-200);
-    height: calc(var(--salt-size-base) + var(--salt-spacing-200));
-
-    & .vuuIcon {
-      --vuu-icon-color: var(--salt-content-secondary-foreground);
-    }
-
-    & .vuuCalculatedColumnIcon {
-      --vuu-icon-color: var(--salt-content-secondary-foreground);
-      position: absolute;
-      top: 8px;
-      left: 32px;
-    }
-
-    & .vuuHighlight {
-      color: var(--vuu-color-blue-40);
-      text-decoration: underline;
-    }
-
-    & .vuuColumnPicker-text {
-      margin-left: var(--label-margin-left);
-    }
-  }
-
-  & .vuuColumnPickerListItem-action {
-    visibility: hidden;
-    margin-left: auto;
-  }
-
-  & .saltOption:hover {
-    & .vuuColumnPickerListItem-action {
-      visibility: visible;
-    }
-  }
-
-  & .vuuColumnPicker-search {
-    --saltInput-paddingLeft: var(--salt-spacing-300);
-    padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);
-  }
-
-  & .vuuColumnPicker-scrollContainer {
-    flex: 1 1 0;
-    overflow: auto;
-
-    & .vuuColumnPicker-sectionHeader {
-      background: var(--columnpicker-background);
-      height: 32px;
-      padding: 0 var(--salt-spacing-300);
-      z-index: 1;
-      align-items: center;
-      display: flex;
-      position: sticky;
-      top: 0;
-    }
-
-    & .vuuColumnPicker-availableHeader {
-      top: 32px;
-    }
-
-    & .vuuColumnPicker-availableList {
-      & .saltOption {
-        padding-left: var(--salt-spacing-300);
-      }
-    }
-  }
-}
-
-
-`;
-export default css;