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

package/src/column-picker/ColumnPicker.js

@@ -0,0 +1,204 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { DragDropProvider, getColumnLabel, isCalculatedColumn, useSortable } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { Button, Input, ListBox, Option } from "@salt-ds/core";
+import { applyHighlighting } from "@vuu-ui/vuu-table";
+import { Icon, IconButton } from "@vuu-ui/vuu-ui-controls";
+import { ColumnChangeSource } from "./ColumnModel.js";
+import { useColumnPicker } from "./useColumnPicker.js";
+import ColumnPicker_0 from "./ColumnPicker.css";
+const classBase = "vuuColumnPicker";
+const classBaseListItem = "vuuColumnPickerListItem";
+const searchIcon = /*#__PURE__*/ jsx("span", {
+    "data-icon": "search"
+});
+const NO_SELECTION = [];
+const useSorting = (id, index)=>{
+    const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({
+        id,
+        index
+    });
+    const [handleRef, ref] = useMemo(()=>[
+            sortableHandleRef,
+            sortableRef
+        ], [
+        sortableHandleRef,
+        sortableRef
+    ]);
+    return {
+        handleRef,
+        ref
+    };
+};
+const SelectedColumnListItem = ({ className: classNameProp, index, column, onRemove, searchPattern = "", ...optionProps })=>{
+    const { handleRef, ref } = useSorting(column.name, index);
+    const value = getColumnLabel(column);
+    const valueWithHighlighting = applyHighlighting(value, searchPattern);
+    const handleRemoveButtonClick = useCallback((e)=>{
+        e.stopPropagation();
+        onRemove?.(e);
+    }, [
+        onRemove
+    ]);
+    return /*#__PURE__*/ jsxs(Option, {
+        ...optionProps,
+        className: clsx(classNameProp, classBaseListItem),
+        "data-name": column.name,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx(IconButton, {
+                "data-embedded": true,
+                appearance: "transparent",
+                icon: "draggable",
+                ref: handleRef,
+                size: 16
+            }),
+            isCalculatedColumn(column.name) ? /*#__PURE__*/ jsx(Icon, {
+                className: "vuuCalculatedColumnIcon",
+                name: "function"
+            }) : null,
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-text`,
+                children: valueWithHighlighting
+            }),
+            /*#__PURE__*/ jsx(IconButton, {
+                className: `${classBaseListItem}-action`,
+                "data-embedded": true,
+                appearance: "transparent",
+                icon: "cross",
+                onClick: handleRemoveButtonClick,
+                size: 16
+            })
+        ]
+    });
+};
+const AvailableColumnListItem = ({ className: classNameProp, index, column: item, onAdd, searchPattern = "", ...optionProps })=>{
+    const value = getColumnLabel(item);
+    const valueWithHighlighting = applyHighlighting(value, searchPattern);
+    return /*#__PURE__*/ jsxs(Option, {
+        ...optionProps,
+        className: clsx(classNameProp, classBaseListItem),
+        "data-name": item.name,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-text`,
+                children: valueWithHighlighting
+            }),
+            /*#__PURE__*/ jsx(IconButton, {
+                className: `${classBaseListItem}-action`,
+                "data-embedded": true,
+                appearance: "transparent",
+                icon: "plus",
+                onClick: onAdd,
+                size: 16
+            })
+        ]
+    });
+};
+const ColumnPicker_ColumnPicker = /*#__PURE__*/ forwardRef(function({ allowCreateCalculatedColumn, columnModel, className, onClickCreateCalculatedColumn, onSelectionChange, selected = NO_SELECTION, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-picker",
+        css: ColumnPicker_0,
+        window: targetWindow
+    });
+    const searchCallbackRef = useCallback((el)=>{
+        setTimeout(()=>{
+            el?.querySelector("input")?.focus();
+        }, 100);
+    }, []);
+    const { availableColumns, onAddItemToSelectedList, onChangeSearchInput, onRemoveItemFromSelectedList, searchText, selectedColumns } = useColumnPicker({
+        columnModel: columnModel
+    });
+    const listRef = useRef(null);
+    const getOptionName = (option)=>{
+        if (option) {
+            const { name } = option.dataset;
+            if (name) return name;
+        }
+        throw Error("[ColumnPicker] list option has no data-name");
+    };
+    const handleDragEnd = useCallback(()=>{
+        setTimeout(()=>{
+            const listItems = listRef.current?.querySelectorAll(".saltOption");
+            if (listItems) {
+                const orderedColumnNames = Array.from(listItems).map(getOptionName);
+                columnModel.reorderSelectedColumns(orderedColumnNames, ColumnChangeSource.ColumnPicker);
+            }
+        }, 300);
+    }, [
+        columnModel
+    ]);
+    const oneOrMoreColumnsIsCalculated = selectedColumns.some((column)=>isCalculatedColumn(column.name));
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className, {
+            [`${classBase}-withCalculated`]: oneOrMoreColumnsIsCalculated
+        }),
+        ref: forwardedRef,
+        children: [
+            /*#__PURE__*/ jsx("form", {
+                className: `${classBase}-search`,
+                role: "search",
+                children: /*#__PURE__*/ jsx(Input, {
+                    startAdornment: searchIcon,
+                    placeholder: "Find column",
+                    ref: searchCallbackRef,
+                    value: searchText,
+                    onChange: onChangeSearchInput
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-scrollContainer vuuScrollable`,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${classBase}-sectionHeader`,
+                        children: "Columns in view"
+                    }),
+                    /*#__PURE__*/ jsx(DragDropProvider, {
+                        onDragEnd: handleDragEnd,
+                        children: /*#__PURE__*/ jsx(ListBox, {
+                            className: `${classBase}-selectedList`,
+                            onSelectionChange: onSelectionChange,
+                            ref: listRef,
+                            selected: selected,
+                            children: selectedColumns.map((column, index)=>/*#__PURE__*/ jsx(SelectedColumnListItem, {
+                                    column: column,
+                                    index: index,
+                                    onRemove: onRemoveItemFromSelectedList,
+                                    searchPattern: searchText.toLowerCase(),
+                                    value: column
+                                }, column.name))
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: clsx(`${classBase}-sectionHeader`, `${classBase}-availableHeader`),
+                        children: "Available columns"
+                    }),
+                    /*#__PURE__*/ jsx(ListBox, {
+                        className: `${classBase}-availableList`,
+                        selected: NO_SELECTION,
+                        children: availableColumns.map((column, index)=>/*#__PURE__*/ jsx(AvailableColumnListItem, {
+                                column: column,
+                                index: index,
+                                onAdd: onAddItemToSelectedList,
+                                searchPattern: searchText.toLowerCase(),
+                                value: column
+                            }, column.name))
+                    })
+                ]
+            }),
+            allowCreateCalculatedColumn ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-column-buttons`,
+                children: /*#__PURE__*/ jsx(Button, {
+                    onClick: onClickCreateCalculatedColumn,
+                    children: "Create calculated column"
+                })
+            }) : null
+        ]
+    });
+});
+export { ColumnPicker_ColumnPicker as ColumnPicker, classBaseListItem };

package/src/column-picker/ColumnPickerAction.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
+import { useCallback } from "react";
+import { useTableColumnPicker } from "./useTableColumnPicker.js";
+const ColumnPickerAction = ({ appearance = "transparent", columnModel, icon = "settings", sentiment = "neutral", ...IconButtonProps })=>{
+    const { showColumnPicker } = useTableColumnPicker({
+        columnModel
+    });
+    const handleClick = useCallback(()=>{
+        showColumnPicker();
+    }, [
+        showColumnPicker
+    ]);
+    return /*#__PURE__*/ jsx(IconButton, {
+        ...IconButtonProps,
+        appearance: appearance,
+        "data-action": "table-settings",
+        icon: icon,
+        onClick: handleClick,
+        sentiment: sentiment,
+        size: 20
+    });
+};
+export { ColumnPickerAction };

package/src/column-picker/useColumnPicker.js

@@ -0,0 +1,42 @@
+import { queryClosest } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useState } from "react";
+import { ColumnChangeSource } from "./ColumnModel.js";
+const SOURCE = ColumnChangeSource.ColumnPicker;
+const columnName = (target)=>{
+    const listItem = queryClosest(target, ".saltOption", true);
+    const { name } = listItem.dataset;
+    if (name) return name;
+    throw Error("[useColumnPicker] column name could not be identified, data-name attribute not found");
+};
+const useColumnPicker = ({ columnModel: model })=>{
+    const [, forceRender] = useState({});
+    useEffect(()=>{
+        model.on("render", forceRender);
+        return ()=>{
+            model.removeListener("render", forceRender);
+        };
+    }, [
+        model
+    ]);
+    const handleChangeSearchInput = useCallback((evt)=>{
+        const { value } = evt.target;
+        model.searchPattern = value;
+    }, [
+        model
+    ]);
+    const handleAddItemToSelectedList = useCallback((e)=>model.addItemToSelectedColumns(columnName(e.target), SOURCE), [
+        model
+    ]);
+    const handleRemoveItemFromSelectedList = useCallback((e)=>model.removeItemFromSelectedColumns(columnName(e.target), SOURCE), [
+        model
+    ]);
+    return {
+        availableColumns: model.availableColumns,
+        onAddItemToSelectedList: handleAddItemToSelectedList,
+        onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,
+        onChangeSearchInput: handleChangeSearchInput,
+        searchText: model.searchPattern,
+        selectedColumns: model.selectedColumns
+    };
+};
+export { useColumnPicker };

package/src/column-picker/useTableColumnPicker.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { useContextPanel, useHideContextPanel } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useEffect, useRef } from "react";
+import { ColumnPicker } from "./ColumnPicker.js";
+const useTableColumnPicker = ({ columnModel })=>{
+    const showContextPanel = useContextPanel();
+    const hideContextPanel = useHideContextPanel();
+    const contextPanelShowing = useRef(false);
+    const showColumnPicker = useCallback((title = "Column Picker")=>{
+        contextPanelShowing.current = true;
+        showContextPanel(/*#__PURE__*/ jsx(ColumnPicker, {
+            columnModel: columnModel
+        }), title);
+    }, [
+        columnModel,
+        showContextPanel
+    ]);
+    useEffect(()=>()=>{
+            if (contextPanelShowing.current) hideContextPanel?.();
+        }, [
+        hideContextPanel
+    ]);
+    return {
+        showColumnPicker
+    };
+};
+export { useTableColumnPicker };

package/src/column-picker/useTableColumnPickerDeprecated.js

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { ColumnChangeSource, ColumnModel, ColumnPicker, isColumnAdded, isColumnRemoved, isColumnsReordered } from "../index.js";
+import { useContextPanel, useHideContextPanel } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const useTableColumnPickerDeprecated = ({ availableColumns, dataSource, onTableColumnChange, selectedColumns: initialSelectedColumns })=>{
+    const showContextPanel = useContextPanel();
+    const hideContextPanel = useHideContextPanel();
+    const contextPanelShowing = useRef(false);
+    const [selectedColumns, setSelectedColumns] = useState(initialSelectedColumns);
+    const columnModel = useMemo(()=>{
+        const available = availableColumns;
+        const selected = initialSelectedColumns;
+        return new ColumnModel(available, selected);
+    }, [
+        initialSelectedColumns,
+        availableColumns
+    ]);
+    const handleTableConfigChange = useCallback((_config, configChangeType)=>{
+        if (configChangeType?.type === "column-removed") {
+            columnModel.removeItemFromSelectedColumns(configChangeType.column.name, ColumnChangeSource.Table);
+            const idx = dataSource.columns.findIndex((col)=>col === configChangeType?.column.name);
+            if (idx >= 0) dataSource.columns = dataSource.columns.toSpliced(idx, 1);
+            setSelectedColumns((columns)=>columns.filter((col)=>col.name !== configChangeType.column.name));
+        }
+    }, [
+        columnModel,
+        dataSource
+    ]);
+    const handleChangeTableColumns = useCallback((columns, changeSource, changeDescriptor)=>{
+        if (changeSource === ColumnChangeSource.ColumnPicker) {
+            if (isColumnAdded(changeDescriptor)) dataSource.columns = dataSource.columns.concat(changeDescriptor.column.name);
+            if (isColumnRemoved(changeDescriptor)) {
+                const idx = dataSource.columns.findIndex((col)=>col === changeDescriptor?.column.name);
+                if (idx >= 0) dataSource.columns = dataSource.columns.toSpliced(idx, 1);
+            }
+            setSelectedColumns((columns)=>{
+                const getNewColumns = ()=>{
+                    if (isColumnAdded(changeDescriptor)) return columns.concat(changeDescriptor.column);
+                    if (isColumnRemoved(changeDescriptor)) return columns.filter((col)=>col.name !== changeDescriptor.column.name);
+                    if (isColumnsReordered(changeDescriptor)) {
+                        const unMatched = columns.filter((configColumn)=>!columns.some((col)=>col.name === configColumn.name));
+                        return [
+                            ...columns,
+                            ...unMatched
+                        ];
+                    }
+                    return columns;
+                };
+                const newColumns = getNewColumns();
+                onTableColumnChange?.(newColumns, changeDescriptor);
+                return newColumns;
+            });
+        }
+    }, [
+        dataSource,
+        onTableColumnChange
+    ]);
+    useEffect(()=>{
+        columnModel.on("change", handleChangeTableColumns);
+        return ()=>{
+            columnModel.removeListener("change", handleChangeTableColumns);
+        };
+    }, [
+        columnModel,
+        handleChangeTableColumns
+    ]);
+    const showColumnPicker = useCallback((title = "Column Picker")=>{
+        contextPanelShowing.current = true;
+        showContextPanel(/*#__PURE__*/ jsx(ColumnPicker, {
+            columnModel: columnModel
+        }), title);
+    }, [
+        columnModel,
+        showContextPanel
+    ]);
+    useEffect(()=>()=>{
+            if (contextPanelShowing.current) hideContextPanel?.();
+        }, [
+        hideContextPanel
+    ]);
+    return {
+        onTableConfigChange: handleTableConfigChange,
+        showColumnPicker,
+        selectedColumns
+    };
+};
+export { useTableColumnPickerDeprecated };

package/src/column-settings-panel/ColumnNameLabel.css.js

@@ -0,0 +1,18 @@
+const css = `
+.vuuColumnNameLabel-calculated {
+  cursor: pointer;
+  gap: 2px;
+  display: flex;
+}
+
+.vuuColumnNameLabel-edit {
+  margin-left: auto;
+}
+
+.vuuColumnNameLabel-placeholder {
+  color: var(--vuu-color-gray-35);
+}
+
+
+`;
+export default css;

package/src/column-settings-panel/ColumnNameLabel.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { getCalculatedColumnDetails, isCalculatedColumn } from "@vuu-ui/vuu-utils";
+import ColumnNameLabel from "./ColumnNameLabel.css";
+const classBase = "vuuColumnNameLabel";
+const ColumnNameLabel_ColumnNameLabel = ({ column, onClick })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-label",
+        css: ColumnNameLabel,
+        window: targetWindow
+    });
+    if (!isCalculatedColumn(column.name)) return /*#__PURE__*/ jsx("div", {
+        className: classBase,
+        children: column.name
+    });
+    {
+        const { name, serverDataType, expression } = getCalculatedColumnDetails(column);
+        const displayName = name || "name";
+        const displayExpression = "=expression";
+        const nameClass = "name" === displayName ? `${classBase}-placeholder` : void 0;
+        const expressionClass = "" === expression ? `${classBase}-placeholder` : void 0;
+        return /*#__PURE__*/ jsxs("div", {
+            className: clsx(classBase, `${classBase}-calculated`),
+            onClick: onClick,
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: nameClass,
+                    children: displayName
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    children: ":"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    children: serverDataType || "string"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    children: ":"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: expressionClass,
+                    children: displayExpression
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: `${classBase}-edit`,
+                    "data-icon": "edit"
+                })
+            ]
+        });
+    }
+};
+export { ColumnNameLabel_ColumnNameLabel as ColumnNameLabel };

package/src/column-settings-panel/ColumnSettingsPanel.css.js

@@ -0,0 +1,70 @@
+const css = `
+.vuuColumnSettingsPanel {
+  --vuu-svg-align-left: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M9.33333 10H2.66667C2.3 10 2 10.3 2 10.6667C2 11.0333 2.3 11.3333 2.66667 11.3333H9.33333C9.7 11.3333 10 11.0333 10 10.6667C10 10.3 9.7 10 9.33333 10ZM9.33333 4.66667H2.66667C2.3 4.66667 2 4.96667 2 5.33333C2 5.7 2.3 6 2.66667 6H9.33333C9.7 6 10 5.7 10 5.33333C10 4.96667 9.7 4.66667 9.33333 4.66667ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>");
+  --vuu-svg-align-right: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM6.66667 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H6.66667C6.3 10 6 10.3 6 10.6667C6 11.0333 6.3 11.3333 6.66667 11.3333ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM6.66667 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H6.66667C6.3 4.66667 6 4.96667 6 5.33333C6 5.7 6.3 6 6.66667 6ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>");
+  --vuu-svg-pin-left: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M7.33333 9.86V8.66666H13.3333C13.7 8.66666 14 8.36666 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333L7.33333 7.33333V6.14C7.33333 5.84 6.97333 5.69333 6.76667 5.90666L4.90667 7.76666C4.77333 7.89999 4.77333 8.10666 4.90667 8.24L6.76667 10.1C6.97333 10.3067 7.33333 10.16 7.33333 9.86ZM2.66667 13.3333C3.03333 13.3333 3.33333 13.0333 3.33333 12.6667L3.33333 3.33333C3.33333 2.96666 3.03333 2.66666 2.66667 2.66666C2.3 2.66666 2 2.96666 2 3.33333L2 12.6667C2 13.0333 2.3 13.3333 2.66667 13.3333Z\" /></svg>");
+  --vuu-svg-pin-float: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6 4.66667H4.66667V6H6V4.66667ZM6 7.33333H4.66667V8.66667H6V7.33333ZM6 2C5.26 2 4.66667 2.6 4.66667 3.33333H6V2ZM8.66667 10H7.33333V11.3333H8.66667V10ZM12.6667 2V3.33333H14C14 2.6 13.4 2 12.6667 2ZM8.66667 2H7.33333V3.33333H8.66667V2ZM6 11.3333V10H4.66667C4.66667 10.7333 5.26 11.3333 6 11.3333ZM12.6667 8.66667H14V7.33333H12.6667V8.66667ZM12.6667 6H14V4.66667H12.6667V6ZM12.6667 11.3333C13.4 11.3333 14 10.7333 14 10H12.6667V11.3333ZM2.66667 4.66667C2.3 4.66667 2 4.96667 2 5.33333V12.6667C2 13.4 2.6 14 3.33333 14H10.6667C11.0333 14 11.3333 13.7 11.3333 13.3333C11.3333 12.9667 11.0333 12.6667 10.6667 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V5.33333C3.33333 4.96667 3.03333 4.66667 2.66667 4.66667ZM10 3.33333H11.3333V2H10V3.33333ZM10 11.3333H11.3333V10H10V11.3333Z\" /></svg>");
+  --vuu-svg-pin-right: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.66667 6.14V7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36666 2.3 8.66666 2.66667 8.66666H8.66667V9.86C8.66667 10.16 9.02667 10.3067 9.23333 10.0933L11.0933 8.23333C11.2267 8.1 11.2267 7.89333 11.0933 7.76L9.23333 5.9C9.02667 5.69333 8.66667 5.84 8.66667 6.14ZM13.3333 13.3333C13.7 13.3333 14 13.0333 14 12.6667V3.33333C14 2.96666 13.7 2.66666 13.3333 2.66666C12.9667 2.66666 12.6667 2.96666 12.6667 3.33333V12.6667C12.6667 13.0333 12.9667 13.3333 13.3333 13.3333Z\"/></svg>");
+  --vuuDropdown-height: 24px;
+  --vuuDropdown-width: 100%;
+  flex-direction: column;
+  gap: 24px;
+  height: 100%;
+  display: flex;
+}
+
+.vuuColumnSettingsPanel-header {
+  padding: 24px 2px 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.vuuColumnSettingsPanel-buttonBar {
+  justify-content: space-between;
+  align-items: center;
+  margin-top: auto;
+  display: flex;
+}
+
+.vuuColumnSettingsPanel-buttonBar[data-align="right"] {
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.vuuColumnSettingsPanel-buttonNavPrev {
+  --vuu-icon-left: 6px;
+  padding-left: 24px;
+}
+
+.vuuColumnSettingsPanel-buttonNavNext {
+  --vuu-icon-left: calc(100% - 18px);
+  padding-right: 24px;
+}
+
+[data-icon="align-left"] {
+  --vuu-icon-svg: var(--vuu-svg-align-left);
+}
+
+[data-icon="align-right"] {
+  --vuu-icon-svg: var(--vuu-svg-align-right);
+}
+
+[data-icon="pin-left"] {
+  --vuu-icon-svg: var(--vuu-svg-pin-left);
+}
+
+[data-icon="pin-float"] {
+  --vuu-icon-svg: var(--vuu-svg-pin-float);
+}
+
+[data-icon="pin-right"] {
+  --vuu-icon-svg: var(--vuu-svg-pin-right);
+}
+
+.vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {
+  display: none;
+}
+
+
+`;
+export default css;