@vuu-ui/vuu-filters 2.1.18 → 2.1.19-beta.2

package/src/custom-filters/filterBarFocusManagement.js

@@ -0,0 +1,25 @@
+import { getElementByDataIndex, getElementDataIndex, queryClosest } from "@vuu-ui/vuu-utils";
+const QUERY_ADD_BUTTON = '.saltButton:has([aria-label="Add filter"])';
+const navigateToNextItem = (el, direction = "fwd")=>{
+    const pill = queryClosest(el, ".vuuFilterPill");
+    if (pill) {
+        const index = getElementDataIndex(pill);
+        if ("number" == typeof index) {
+            const target = "fwd" === direction ? getElementByDataIndex(pill.parentElement, index + 1) : getElementByDataIndex(pill.parentElement, index - 1);
+            if (target) target.focus();
+            else if ("fwd" === direction) {
+                const filterBar = queryClosest(el, ".vuuFilterBar");
+                const addButton = filterBar?.querySelector(QUERY_ADD_BUTTON);
+                addButton?.focus();
+            }
+        }
+    } else {
+        const button = queryClosest(el, QUERY_ADD_BUTTON);
+        if (button) {
+            const filterBar = queryClosest(el, ".vuuFilterBar");
+            const target = filterBar?.querySelector(".vuuFilterPill:last-child");
+            target?.focus();
+        }
+    }
+};
+export { navigateToNextItem };

package/src/custom-filters/index.js

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

package/src/custom-filters/useCustomFilters.js

@@ -0,0 +1,237 @@
+import { NullEditAPI } from "@vuu-ui/vuu-ui-controls";
+import { getElementDataIndex, queryClosest } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { navigateToNextItem } from "./filterBarFocusManagement.js";
+import { useFilterState } from "./useFilterState.js";
+const isEditFilterState = (filterState)=>"edit" === filterState || "create" === filterState;
+const useCustomFilters = ({ columnDescriptors, containerRef, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged })=>{
+    const addButtonRef = useRef(null);
+    const [interactedFilterState, setInteractedFilterState] = useState();
+    const [promptProps, setPromptProps] = useState(null);
+    const editPillLabelAPI = useRef(NullEditAPI);
+    const columnsByName = useMemo(()=>columnDescriptorsByName(columnDescriptors), [
+        columnDescriptors
+    ]);
+    const { activeFilterIndex, filters, onAddFilter, onChangeFilter, onDeleteFilter, onRenameFilter, onToggleFilterActive } = useFilterState({
+        defaultFilterState,
+        filterState,
+        onFilterDeleted,
+        onFilterRenamed,
+        onFilterStateChanged
+    });
+    useEffect(()=>{
+        const activeFilters = activeFilterIndex.map((i)=>filters[i]);
+        const applyFilter = (filter)=>{
+            if (filter) onApplyFilter(filter);
+            else onClearFilter();
+        };
+        if (0 === activeFilters.length) applyFilter();
+        else if (1 === activeFilters.length) {
+            const [filter] = activeFilters;
+            applyFilter(filter);
+        } else applyFilter({
+            op: "and",
+            filters: activeFilters
+        });
+    }, [
+        activeFilterIndex,
+        columnsByName,
+        filters,
+        onApplyFilter,
+        onClearFilter
+    ]);
+    const editPillLabel = useCallback((index, filter)=>{
+        setTimeout(()=>{
+            setInteractedFilterState({
+                filter,
+                index,
+                state: "rename"
+            });
+        }, 100);
+    }, []);
+    const focusFilterPill = useCallback((index = 0)=>{
+        requestAnimationFrame(()=>{
+            const target = containerRef.current?.querySelector(`.vuuFilterPill[data-index="${index}"] button`);
+            if (target) target.focus();
+        });
+    }, [
+        containerRef
+    ]);
+    const deleteConfirmed = useCallback((filter)=>{
+        onDeleteFilter(filter);
+        requestAnimationFrame(()=>{
+            if (filters.length) focusFilterPill(0);
+        });
+    }, [
+        filters.length,
+        focusFilterPill,
+        onDeleteFilter
+    ]);
+    const getDeletePrompt = useMemo(()=>(filter)=>{
+            const close = ()=>{
+                setPromptProps(null);
+                focusFilterPill();
+            };
+            return {
+                className: "vuuFilterDeletePrompt",
+                confirmButtonLabel: "Remove",
+                icon: "warn-triangle",
+                initialFocusedItem: "confirm",
+                onCancel: close,
+                onClose: close,
+                onConfirm: ()=>{
+                    setPromptProps(null);
+                    deleteConfirmed(filter);
+                },
+                children: `Are you sure you want to delete filter '${filter.name}'`,
+                title: "Remove Filter",
+                status: "warning"
+            };
+        }, [
+        deleteConfirmed,
+        focusFilterPill
+    ]);
+    const deleteFilter = useCallback((filter, withPrompt)=>{
+        if (withPrompt) setPromptProps(getDeletePrompt(filter));
+        else deleteConfirmed(filter);
+    }, [
+        deleteConfirmed,
+        getDeletePrompt
+    ]);
+    const handleExitEditFilterName = useCallback((_, editedValue = "")=>{
+        if (interactedFilterState?.state === "rename" && interactedFilterState.filter) {
+            const { filter } = interactedFilterState;
+            const indexOfEditedFilter = onRenameFilter(filter, editedValue);
+            setInteractedFilterState(void 0);
+            focusFilterPill(indexOfEditedFilter);
+        }
+        setInteractedFilterState(void 0);
+    }, [
+        focusFilterPill,
+        interactedFilterState,
+        onRenameFilter
+    ]);
+    const handlePillMenuAction = useCallback((menuId, options)=>{
+        switch(menuId){
+            case "delete-filter":
+                {
+                    const { filter } = options;
+                    deleteFilter(filter, true);
+                    return true;
+                }
+            case "rename-filter":
+                {
+                    const { filter } = options;
+                    const index = filters.indexOf(filter);
+                    editPillLabel(index, filter);
+                    return true;
+                }
+            case "edit-filter":
+                {
+                    const { filter } = options;
+                    setInteractedFilterState({
+                        filter,
+                        index: filters.indexOf(filter),
+                        state: "edit"
+                    });
+                    return true;
+                }
+            default:
+                return false;
+        }
+    }, [
+        deleteFilter,
+        editPillLabel,
+        filters
+    ]);
+    const handlePillKeyDown = useCallback((e)=>{
+        if ("ArrowRight" === e.key || "ArrowLeft" === e.key) navigateToNextItem(e.target, "ArrowLeft" === e.key ? "bwd" : "fwd");
+    }, []);
+    const addIfNewElseUpdate = useCallback((newOrUpdatedFilter, existing)=>{
+        if (void 0 === existing) {
+            const idx = onAddFilter(newOrUpdatedFilter);
+            focusFilterPill(idx);
+            editPillLabel(idx, newOrUpdatedFilter);
+        } else {
+            const idx = onChangeFilter(existing, newOrUpdatedFilter);
+            focusFilterPill(idx);
+        }
+    }, [
+        editPillLabel,
+        focusFilterPill,
+        onAddFilter,
+        onChangeFilter
+    ]);
+    const filterSaveHandler = useCallback((filter)=>{
+        if (interactedFilterState) {
+            const { filter: existingFilter } = interactedFilterState;
+            setInteractedFilterState(void 0);
+            addIfNewElseUpdate(filter, existingFilter);
+        }
+    }, [
+        addIfNewElseUpdate,
+        interactedFilterState
+    ]);
+    const handlePillClick = useCallback((e)=>{
+        const isEditing = e.target.querySelector(".vuuEditableLabel-editing");
+        if (!isEditing) {
+            const pill = queryClosest(e.target, ".vuuFilterPill");
+            if (pill) {
+                const index = getElementDataIndex(pill);
+                onToggleFilterActive(index, e.shiftKey);
+            }
+        }
+    }, [
+        onToggleFilterActive
+    ]);
+    const FilterPillProps = {
+        editLabelApiRef: editPillLabelAPI,
+        onClick: handlePillClick,
+        onKeyDown: handlePillKeyDown,
+        onMenuAction: handlePillMenuAction,
+        onExitEditMode: handleExitEditFilterName
+    };
+    const handleClickAddButton = useCallback(()=>{
+        setInteractedFilterState({
+            index: -1,
+            state: "create"
+        });
+    }, []);
+    const handleKeyDownAddButton = useCallback((evt)=>{
+        if ("ArrowLeft" === evt.key) navigateToNextItem(evt.target, "bwd");
+    }, []);
+    const handleCancelEdit = useCallback(()=>{
+        if (interactedFilterState) {
+            const { index } = interactedFilterState;
+            if (-1 === index) addButtonRef.current?.focus();
+            else focusFilterPill(index);
+            setInteractedFilterState(void 0);
+        }
+    }, [
+        focusFilterPill,
+        interactedFilterState
+    ]);
+    const addButtonProps = {
+        ref: addButtonRef,
+        onClick: handleClickAddButton,
+        onKeyDown: handleKeyDownAddButton
+    };
+    return {
+        FilterPillProps,
+        activeFilterIndex,
+        addButtonProps,
+        columnsByName,
+        filters,
+        interactedFilterState,
+        onCancelEdit: handleCancelEdit,
+        onSave: filterSaveHandler,
+        promptProps
+    };
+};
+function columnDescriptorsByName(columns) {
+    return columns.reduce((m, col)=>({
+            ...m,
+            [col.name]: col
+        }), {});
+}
+export { isEditFilterState, useCustomFilters };

package/src/custom-filters/useFilterState.js

@@ -0,0 +1,123 @@
+import { useCallback } from "react";
+import { useControlled } from "@vuu-ui/vuu-ui-controls";
+const getActiveIndices = (indices, toggledIndex, preserveExisting)=>{
+    const isActive = indices.includes(toggledIndex);
+    if (isActive) if (preserveExisting) return indices.filter((i)=>i !== toggledIndex);
+    else return [];
+    if (preserveExisting) return indices.concat(toggledIndex);
+    return [
+        toggledIndex
+    ];
+};
+const useFilterState = ({ defaultFilterState, onFilterDeleted, onFilterRenamed, onFilterStateChanged, filterState: filterStateProp })=>{
+    const [filterState, setFilterState] = useControlled({
+        controlled: filterStateProp,
+        default: defaultFilterState ?? {
+            filters: [],
+            activeIndices: []
+        },
+        name: "useFilterState",
+        state: "FilterState"
+    });
+    const handleFilterStateChange = useCallback((s)=>{
+        setFilterState(s);
+        onFilterStateChanged?.(s);
+    }, [
+        onFilterStateChanged,
+        setFilterState
+    ]);
+    const handleAddFilter = useCallback((filter)=>{
+        const index = filterState.filters.length;
+        const newFilters = filterState.filters.concat(filter);
+        const newIndices = appendIfNotPresent(filterState.activeIndices, index);
+        handleFilterStateChange({
+            filters: newFilters,
+            activeIndices: newIndices
+        });
+        return index;
+    }, [
+        filterState,
+        handleFilterStateChange
+    ]);
+    const handleDeleteFilter = useCallback((filter)=>{
+        let index = -1;
+        const newFilters = filterState.filters.filter((f, i)=>{
+            if (f !== filter) return true;
+            index = i;
+            return false;
+        });
+        const newIndices = removeIndexAndDecrementLarger(filterState.activeIndices, index);
+        handleFilterStateChange({
+            filters: newFilters,
+            activeIndices: newIndices
+        });
+        onFilterDeleted?.(filter);
+        return index;
+    }, [
+        filterState.filters,
+        filterState.activeIndices,
+        handleFilterStateChange,
+        onFilterDeleted
+    ]);
+    const handleRenameFilter = useCallback((filter, name)=>{
+        let index = -1;
+        const newFilters = filterState.filters.map((f, i)=>{
+            if (f !== filter) return f;
+            index = i;
+            return {
+                ...filter,
+                name
+            };
+        });
+        handleFilterStateChange({
+            ...filterState,
+            filters: newFilters
+        });
+        onFilterRenamed?.(filter, name);
+        return index;
+    }, [
+        filterState,
+        handleFilterStateChange,
+        onFilterRenamed
+    ]);
+    const handleChangeFilter = useCallback((oldFilter, newFilter)=>{
+        let index = -1;
+        const newFilters = filterState.filters.map((f, i)=>{
+            if (f !== oldFilter) return f;
+            index = i;
+            return newFilter;
+        });
+        handleFilterStateChange({
+            ...filterState,
+            filters: newFilters
+        });
+        return index;
+    }, [
+        filterState,
+        handleFilterStateChange
+    ]);
+    const handleToggleFilterActive = useCallback((filterIndex, preserveRemainingFilters = false)=>{
+        handleFilterStateChange({
+            ...filterState,
+            activeIndices: getActiveIndices(filterState.activeIndices, filterIndex, preserveRemainingFilters)
+        });
+    }, [
+        filterState,
+        handleFilterStateChange
+    ]);
+    return {
+        activeFilterIndex: filterState.activeIndices,
+        filters: filterState.filters,
+        onToggleFilterActive: handleToggleFilterActive,
+        onAddFilter: handleAddFilter,
+        onChangeFilter: handleChangeFilter,
+        onDeleteFilter: handleDeleteFilter,
+        onRenameFilter: handleRenameFilter
+    };
+};
+const appendIfNotPresent = (ns, n)=>ns.includes(n) ? ns : ns.concat(n);
+const removeIndexAndDecrementLarger = (indices, idxToRemove)=>indices.reduce((res, i)=>{
+        if (i === idxToRemove) return res;
+        return res.concat(i > idxToRemove ? i - 1 : i);
+    }, []);
+export { useFilterState };

package/src/filter-bar/FilterBar.css.js

@@ -0,0 +1,81 @@
+const css = `
+.vuuFilterBar {
+  --vuu-svg-grid: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6.00004H4.66667V3.33337H3.33333C2.6 3.33337 2 3.93337 2 4.66671V6.00004ZM2 9.33337H4.66667V6.66671H2V9.33337ZM5.33333 9.33337H8V6.66671H5.33333V9.33337ZM8.66667 9.33337H11.3333V6.66671H8.66667V9.33337ZM5.33333 6.00004H8V3.33337H5.33333V6.00004ZM8.66667 3.33337V6.00004H11.3333V3.33337H8.66667ZM12 9.33337H14.6667V6.66671H12V9.33337ZM3.33333 12.6667H4.66667V10H2V11.3334C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3334V10H12V12.6667ZM12 3.33337V6.00004H14.6667V4.66671C14.6667 3.93337 14.0667 3.33337 13.3333 3.33337H12Z\"/></svg>");
+  --vuuOverflowContainer-minWidth: 0;
+  --filterbar-height: var(--vuuFilterBar-height, calc(var(--salt-size-base) + var(--salt-spacing-300)));
+  --vuuFilterEditor-height: var(--filterbar-height);
+  --icon-container-height: auto;
+  --flexbar-gap: var(--salt-spacing-100);
+  --icon-marginTop: 0;
+  background-color: var(--salt-container-secondary-background);
+  border-color: var(--salt-separable-secondary-borderColor);
+  border-style: var(--vuuFilterBar-borderStyle, none none solid none);
+  flex: var(--vuuFilterBar-flex);
+  align-items: center;
+  gap: var(--flexbar-gap);
+  height: var(--filterbar-height);
+  padding: var(--salt-spacing-100) var(--salt-spacing-200);
+  border-width: 1px;
+  flex-wrap: wrap;
+  grid-template-columns: 70px 1fr 28px;
+  grid-auto-rows: 28px 0;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.vuuFilterBar-quick-filter-mode {
+  --icon-container-height: 100%;
+  --icon-marginTop: 20px;
+  --filterbar-height: var(--vuuFilterBar-height, calc(2 * var(--salt-size-base)));
+  padding: var(--salt-spacing-100) var(--salt-spacing-200);
+  align-items: flex-end;
+}
+
+.vuuFilterBar:has(.vuuFilterEditor) {
+  height: calc(1px + var(--flexbar-gap) + (2 * var(--filterbar-height)));
+  grid-template-rows: 28px 28px;
+}
+
+.vuuFilterBar-iconContainer {
+  height: var(--icon-container-height);
+
+  & .saltToggleButtonGroup {
+    margin-top: var(--icon-marginTop);
+    transition: margin-top .1s ease-in;
+  }
+}
+
+.vuuFilterbar-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+}
+
+.vuuFilterBar [data-icon="grid"] {
+  --vuu-icon-size: 16px;
+  --vuu-icon-svg: var(--vuu-svg-grid);
+}
+
+.vuuFilterBar [data-icon="plus"] {
+  --vuu-icon-size: 16px;
+}
+
+.vuuFilterBar .vuuToolbar {
+  flex: 0 auto;
+}
+
+.vuuFilterBar-Editor {
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  flex-direction: row;
+  display: flex;
+}
+
+.vuuCustomFilters, .vuuCustomFilters-filters {
+  gap: var(--salt-spacing-100);
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/filter-bar/FilterBar.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@vuu-ui/vuu-ui-controls";
+import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useMemo } from "react";
+import { CustomFilters } from "../custom-filters/index.js";
+import { QuickFilters } from "../quick-filters/index.js";
+import { useFilterBar } from "./useFilterBar.js";
+import FilterBar from "./FilterBar.css";
+const classBase = "vuuFilterBar";
+const FilterBar_FilterBar = ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant = "custom-filters-only", ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-bar",
+        css: FilterBar,
+        window: targetWindow
+    });
+    const allowCustomFilters = "quick-filters-only" !== variant;
+    const allowQuickFilters = "custom-filters-only" !== variant;
+    const controlledFilterMode = allowCustomFilters ? allowQuickFilters ? filterModeProp : "custom-filter" : "quick-filter";
+    const { filterMode, onChangeFilterMode } = useFilterBar({
+        defaultFilterMode,
+        filterMode: controlledFilterMode,
+        onChangeFilterMode: onChangeFilterModeProp
+    });
+    const className = clsx(classBase, classNameProp);
+    const startAdornment = useMemo(()=>{
+        if (!allowQuickFilters) return /*#__PURE__*/ jsx(Icon, {
+            name: "sliders",
+            size: 16,
+            style: {
+                top: 2
+            }
+        });
+        return /*#__PURE__*/ jsxs(ToggleButtonGroup, {
+            "data-variant": "secondary",
+            onChange: onChangeFilterMode,
+            value: filterMode,
+            children: [
+                /*#__PURE__*/ jsx(ToggleButton, {
+                    className: "vuuIconToggleButton",
+                    value: "custom-filter",
+                    "aria-label": "Custom filters",
+                    tabIndex: -1,
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        name: "grid",
+                        size: 16
+                    })
+                }, "custom-filter"),
+                /*#__PURE__*/ jsx(ToggleButton, {
+                    className: "vuuIconToggleButton",
+                    value: "quick-filter",
+                    "aria-label": "Quick filters",
+                    tabIndex: -1,
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        name: "tune",
+                        size: 16
+                    })
+                }, "quick-filter")
+            ]
+        });
+    }, [
+        allowQuickFilters,
+        filterMode,
+        onChangeFilterMode
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(className, `${classBase}-${filterMode}-mode`),
+        children: [
+            "quick-filters-only" === variant ? null : /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-iconContainer`,
+                children: startAdornment
+            }),
+            "custom-filter" === filterMode ? /*#__PURE__*/ jsx(CustomFilters, {
+                columnDescriptors: columnDescriptors,
+                defaultFilterState: defaultFilterState,
+                filterState: filterState,
+                onApplyFilter: onApplyFilter,
+                onClearFilter: onClearFilter,
+                onFilterDeleted: onFilterDeleted,
+                onFilterRenamed: onFilterRenamed,
+                onFilterStateChanged: onFilterStateChanged,
+                vuuTable: vuuTable
+            }) : /*#__PURE__*/ jsx(QuickFilters, {
+                ...QuickFilterProps,
+                availableColumns: columnDescriptors,
+                onApplyFilter: onApplyFilter,
+                onClearFilter: onClearFilter,
+                vuuTable: vuuTable
+            })
+        ]
+    });
+};
+export { FilterBar_FilterBar as FilterBar };

package/src/filter-bar/FilterBarMenu.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { PopupMenu } from "@vuu-ui/vuu-popups";
+const FilterBarMenu = ()=>{
+    const classBase = "vuuFilterBarMenu";
+    return /*#__PURE__*/ jsx("div", {
+        className: classBase,
+        children: /*#__PURE__*/ jsx(PopupMenu, {
+            icon: "tune",
+            menuLocation: "filter-bar-menu",
+            tabIndex: -1
+        })
+    });
+};
+export { FilterBarMenu };

package/src/filter-bar/index.js

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

package/src/filter-bar/useFilterBar.js

@@ -0,0 +1,28 @@
+import { queryClosest } from "@vuu-ui/vuu-utils";
+import { useControlled } from "@salt-ds/core";
+import { useCallback } from "react";
+const isFilterMode = (value)=>"custom-filter" === value || "quick-filter" === value;
+const useFilterBar = ({ defaultFilterMode, filterMode: filterModeProp, onChangeFilterMode })=>{
+    const [filterMode, setFilterMode] = useControlled({
+        controlled: filterModeProp,
+        default: defaultFilterMode ?? "custom-filter",
+        name: "useFilterBar",
+        state: "filterMode"
+    });
+    const handleChangeFilterMode = useCallback((e)=>{
+        const button = queryClosest(e.target, "button");
+        const newFilterMode = button?.value;
+        if (isFilterMode(newFilterMode)) {
+            setFilterMode(newFilterMode);
+            onChangeFilterMode?.(newFilterMode);
+        }
+    }, [
+        onChangeFilterMode,
+        setFilterMode
+    ]);
+    return {
+        filterMode,
+        onChangeFilterMode: handleChangeFilterMode
+    };
+};
+export { useFilterBar };

package/src/filter-clause/ExpandoCombobox.css.js

@@ -0,0 +1,54 @@
+const css = `
+.vuuExpandoCombobox {
+  --expando-combobox-height: var(--vuuExpandoCombobox-height, var(--salt-size-base));
+  --expando-combobox-fontSize: var(--vuuExpandoCombobox-fontSize, 12px);
+  --saltPillInput-paddingLeft: 0px;
+  --saltPillInput-paddingRight: 0px;
+  height: var(--expando-combobox-height);
+  flex-direction: column;
+  min-width: 4px;
+  padding: 0;
+  display: inline-flex;
+
+  & .saltPill {
+    height: 100%;
+    padding-block: 0;
+  }
+
+  & .saltPillInput {
+    min-height: var(--expando-combobox-height);
+    min-width: 0;
+  }
+
+  & .saltPillInput-inputWrapper {
+    height: 100%;
+    padding: 0;
+  }
+
+  & .saltPillInput-input {
+    width: 0;
+  }
+
+  & .saltPillInput-endAdornmentContainer, & .saltPillInput-activationIndicator {
+    display: none;
+  }
+}
+
+.vuuExpandoOption {
+  min-width: calc(var(--salt-size-base) * 2);
+  padding-left: var(--salt-spacing-200);
+  padding-right: var(--salt-spacing-200);
+}
+
+.vuuExpandoCombobox:before {
+  content: attr(data-text);
+  font-size: var(--expando-combobox-fontSize);
+  white-space: pre-wrap;
+  height: 0;
+  display: block;
+  overflow: hidden;
+}
+
+
+`;
+export default css;