@flux-ui/components 3.0.0-next.61 → 3.0.0-next.64

package/src/component/FluxTooltipProvider.vue

@@ -21,6 +21,7 @@
         const {tooltip} = useFluxStore();
 
         const elementRef = ref<HTMLElement | null>(null);
+        const hostRef = ref<HTMLElement | null>(null);
         const position = ref<PositionData | null>(null);
 
         const content = computed(() => unref(tooltip) ? unref(tooltip)!.contentSlot?.() ?? [unref(tooltip)!.content] : null);
@@ -66,34 +67,64 @@
 
         watch(content, () => requestAnimationFrame(calculate));
 
-        return () => h(FluxTooltipTransition, {}, {
-            default: () => {
-                if (!unref(has)) {
-                    return;
-                }
+        watch(has, isVisible => {
+            if (!isVisible) {
+                return;
+            }
 
-                const pos = unref(position);
-
-                return h('div', {
-                    ref: elementRef,
-                    class: pos
-                        ? clsx(
-                            pos.transition === 'above' && $style.tooltipAbove,
-                            pos.transition === 'below' && $style.tooltipBelow,
-                            pos.transition === 'end' && $style.tooltipEnd,
-                            pos.transition === 'start' && $style.tooltipStart
-                        )
-                        : $style.tooltip,
-                    style: {
-                        '--x': pos?.x ?? undefined,
-                        '--y': pos?.y ?? undefined,
-                        '--arrowAngle': pos?.arrowAngle ?? undefined,
-                        '--arrowX': pos?.arrowX ?? undefined,
-                        '--arrowY': pos?.arrowY ?? undefined
-                    }
-                }, unref(content));
+            const host = unrefTemplateElement(hostRef);
+
+            if (host && !host.matches(':popover-open')) {
+                host.showPopover();
             }
         });
+
+        return () => h('div', {
+            ref: hostRef,
+            popover: 'manual',
+            class: $style.tooltipHost
+        }, [
+            h(FluxTooltipTransition, {
+                onAfterLeave: () => {
+                    if (unref(has)) {
+                        return;
+                    }
+
+                    const host = unrefTemplateElement(hostRef);
+
+                    if (host && host.matches(':popover-open')) {
+                        host.hidePopover();
+                    }
+                }
+            }, {
+                default: () => {
+                    if (!unref(has)) {
+                        return;
+                    }
+
+                    const pos = unref(position);
+
+                    return h('div', {
+                        ref: elementRef,
+                        class: pos
+                            ? clsx(
+                                pos.transition === 'above' && $style.tooltipAbove,
+                                pos.transition === 'below' && $style.tooltipBelow,
+                                pos.transition === 'end' && $style.tooltipEnd,
+                                pos.transition === 'start' && $style.tooltipStart
+                            )
+                            : $style.tooltip,
+                        style: {
+                            '--x': pos?.x ?? undefined,
+                            '--y': pos?.y ?? undefined,
+                            '--arrowAngle': pos?.arrowAngle ?? undefined,
+                            '--arrowX': pos?.arrowX ?? undefined,
+                            '--arrowY': pos?.arrowY ?? undefined
+                        }
+                    }, unref(content));
+                }
+            })
+        ]);
     });
 
     function calculateHorizontalPosition(top: number, left: number, width: number, height: number, originWidth: number, originHeight: number, margin: number, safeZone: number): PositionData {

package/src/component/index.ts

@@ -25,7 +25,6 @@ export { default as FluxCommandPaletteItem } from './FluxCommandPaletteItem.vue'
 export { default as FluxComment } from './FluxComment.vue';
 export { default as FluxColorPicker } from './FluxColorPicker.vue';
 export { default as FluxColorSelect } from './FluxColorSelect.vue';
-export { default as FluxColumn } from './FluxColumn.vue';
 export { default as FluxContainer } from './FluxContainer.vue';
 export { default as FluxDataTable } from './FluxDataTable.vue';
 export { default as FluxDatePicker } from './FluxDatePicker.vue';
@@ -48,6 +47,8 @@ export { default as FluxFilterOptionAsync } from './FluxFilterOptionAsync.vue';
 export { default as FluxFilterOptions } from './FluxFilterOptions.vue';
 export { default as FluxFilterOptionsAsync } from './FluxFilterOptionsAsync.vue';
 export { default as FluxFilterRange } from './FluxFilterRange.vue';
+export { default as FluxFlex } from './FluxFlex.vue';
+export { default as FluxFlexItem } from './FluxFlexItem.vue';
 export { default as FluxFlickeringGrid } from './FluxFlickeringGrid.vue';
 export { default as FluxFlyout } from './FluxFlyout.vue';
 export { default as FluxFocalPointEditor } from './FluxFocalPointEditor.vue';
@@ -125,7 +126,7 @@ export { default as FluxPublishButton } from './FluxPublishButton.vue';
 export { default as FluxQuantitySelector } from './FluxQuantitySelector.vue';
 export { default as FluxRemove } from './FluxRemove.vue';
 export { default as FluxRoot } from './FluxRoot.vue';
-export { default as FluxRow } from './FluxRow.vue';
+export { default as FluxScroller } from './FluxScroller.vue';
 export { default as FluxSecondaryButton } from './FluxSecondaryButton.vue';
 export { default as FluxSecondaryLinkButton } from './FluxSecondaryLinkButton.vue';
 export { default as FluxSegmentedControl } from './FluxSegmentedControl.vue';
@@ -138,11 +139,13 @@ export { default as FluxSpacer } from './FluxSpacer.vue';
 export { default as FluxSpacing } from './FluxSpacing.vue';
 export { default as FluxSpinner } from './FluxSpinner.vue';
 export { default as FluxSplitButton } from './FluxSplitButton.vue';
-export { default as FluxStack } from './FluxStack.vue';
+export { default as FluxSplitView } from './FluxSplitView.vue';
+export { default as FluxSplitViewPane } from './FluxSplitViewPane.vue';
 export { default as FluxStatistic } from './FluxStatistic.vue';
 export { default as FluxStepper } from './FluxStepper.vue';
 export { default as FluxStepperStep } from './FluxStepperStep.vue';
 export { default as FluxStepperSteps } from './FluxStepperSteps.vue';
+export { default as FluxSticky } from './FluxSticky.vue';
 export { default as FluxTab } from './FluxTab.vue';
 export { default as FluxTabBar } from './FluxTabBar.vue';
 export { default as FluxTabBarItem } from './FluxTabBarItem.vue';

package/src/component/primitive/FilterBadge.vue

@@ -11,7 +11,7 @@
     lang="ts"
     setup>
     import { useLoaded } from '@basmilius/common';
-    import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+    import type { FluxFilterDefinition, FluxFilterValue } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
     import FluxBadge from '../FluxBadge.vue';
     import $style from '~flux/components/css/component/Filter.module.scss';
@@ -24,7 +24,7 @@
         item,
         value
     } = defineProps<{
-        readonly item: FluxFilterItem;
+        readonly item: FluxFilterDefinition;
         readonly value: FluxFilterValue;
     }>();
 

package/src/component/primitive/FilterItem.vue

@@ -3,6 +3,7 @@
         :command="valueLabel"
         command-icon="angle-right"
         :command-loading="isLoading"
+        :disabled="disabled"
         :icon-leading="item.icon"
         :label="item.label"
         type="button"
@@ -13,7 +14,7 @@
     lang="ts"
     setup>
     import { useLoaded } from '@basmilius/common';
-    import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+    import type { FluxFilterDefinition, FluxFilterValue } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
     import FluxMenuItem from '../FluxMenuItem.vue';
 
@@ -25,8 +26,9 @@
         item,
         value
     } = defineProps<{
-        readonly item: FluxFilterItem;
+        readonly item: FluxFilterDefinition;
         readonly value: FluxFilterValue;
+        readonly disabled?: boolean;
     }>();
 
     const {isLoading, loaded} = useLoaded();

package/src/component/primitive/FilterMenuRenderer.ts

@@ -1,4 +1,4 @@
-import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+import type { FluxFilterDefinition, FluxFilterValue } from '@flux-ui/types';
 import { defineComponent, h, isVNode, type VNode, unref } from 'vue';
 import { useFilterInjection } from '~flux/components/composable';
 import FluxMenuGroup from '../FluxMenuGroup.vue';
@@ -14,11 +14,11 @@ export const FilterMenuRenderer = defineComponent({
     setup(props) {
         const {state} = useFilterInjection();
 
-        return () => props.menuItems.map((group, index) => renderFilterGroup(group as (FluxFilterItem | VNode)[], index, props.navigate, unref(state) as Record<string, FluxFilterValue>));
+        return () => props.menuItems.map((group, index) => renderFilterGroup(group as (FluxFilterDefinition | VNode)[], index, props.navigate, unref(state) as Record<string, FluxFilterValue>));
     }
 });
 
-function renderFilterGroup(group: (FluxFilterItem | VNode)[], index: number, navigate: Function, state: Record<string, FluxFilterValue>): VNode[] {
+function renderFilterGroup(group: (FluxFilterDefinition | VNode)[], index: number, navigate: Function, state: Record<string, FluxFilterValue>): VNode[] {
     const slot: VNode[] = [];
 
     if (index > 0) {
@@ -32,7 +32,7 @@ function renderFilterGroup(group: (FluxFilterItem | VNode)[], index: number, nav
     return slot;
 }
 
-function renderFilterItem(item: FluxFilterItem | VNode, navigate: Function, state: Record<string, FluxFilterValue>): VNode {
+function renderFilterItem(item: FluxFilterDefinition | VNode, navigate: Function, state: Record<string, FluxFilterValue>): VNode {
     if (isVNode(item)) {
         return item;
     }
@@ -40,6 +40,11 @@ function renderFilterItem(item: FluxFilterItem | VNode, navigate: Function, stat
     return h(FilterItem, {
         item,
         value: state[item.name] ?? null,
-        onClick: () => navigate(item.name)
+        disabled: item.disabled,
+        onClick: () => {
+            if (!item.disabled) {
+                navigate(item.name);
+            }
+        }
     });
 }

package/src/component/primitive/FilterOptionBase.vue

@@ -38,7 +38,7 @@
     lang="ts"
     setup>
     import type { FluxFilterOptionItem, FluxFilterOptionRow, FluxFilterValueSingle } from '@flux-ui/types';
-    import { isFluxFilterOptionHeader, isFluxFilterOptionItem } from '~flux/components/data';
+    import { isFluxFilterOptionHeader, isFluxFilterOptionItem } from '~flux/components/util';
     import FluxFormInput from '../FluxFormInput.vue';
     import FluxMenuGroup from '../FluxMenuGroup.vue';
     import FluxMenuItem from '../FluxMenuItem.vue';

package/src/composable/private/index.ts

@@ -3,6 +3,7 @@ export { default as useDateFlyout } from './useDateFlyout';
 export { default as useDropdownPopup, type UseDropdownPopupOptions, type UseDropdownPopupReturn } from './useDropdownPopup';
 export { default as useFormSelect } from './useFormSelect';
 export { useKanban } from './useKanban';
+export { useSplitView, type SplitViewPane, type UseSplitViewOptions, type UseSplitViewReturn } from './useSplitView';
 export { default as useTranslate } from './useTranslate';
 export { useCommandPalette, type CommandPaletteGroup, type CommandPaletteResultItem } from './useCommandPalette';
 export { useFilterOptionMulti, useFilterOptionSingle, type FilterOptionMulti, type FilterOptionSingle } from './useFilterOption';

package/src/composable/private/useAsyncFilterOptions.ts

@@ -1,7 +1,7 @@
 import { useDebouncedRef, useLoaded } from '@basmilius/common';
 import type { FluxFilterOptionRow, FluxFilterValue } from '@flux-ui/types';
 import { computed, ref, unref, watch, type ComputedRef, type ModelRef, type Ref } from 'vue';
-import { isFluxFilterOptionItem } from '~flux/components/data';
+import { isFluxFilterOptionItem } from '~flux/components/util';
 
 type UseAsyncFilterOptionsParams = {
     readonly currentValueIds: ComputedRef<FluxFilterValue[]>;

package/src/composable/private/useFilterOption.ts

@@ -52,7 +52,7 @@ export function useFilterOptionMulti(name: string): FilterOptionMulti {
             values.push(value);
         }
 
-        setValue(name, values);
+        setValue(name, values.length > 0 ? values : null);
     }
 
     return {currentValue, onSelect};

package/src/composable/private/useSplitView.ts

@@ -0,0 +1,249 @@
+import { useRemembered } from '@flux-ui/internals';
+import type { FluxDirection } from '@flux-ui/types';
+import { computed, type ComputedRef, nextTick, onMounted, ref, type Ref, watch } from 'vue';
+
+export type SplitViewPane = {
+    readonly id: number;
+    readonly defaultSize: number | string | undefined;
+    readonly minSize: number;
+    readonly maxSize: number | undefined;
+    readonly isResizable: boolean;
+};
+
+export type UseSplitViewOptions = {
+    readonly containerRef: Readonly<Ref<HTMLElement | null>>;
+    readonly direction: Readonly<Ref<FluxDirection>>;
+    readonly panes: Readonly<Ref<readonly SplitViewPane[]>>;
+    readonly rememberKey: string | undefined;
+};
+
+export type UseSplitViewReturn = {
+    readonly sizes: Readonly<Ref<readonly number[]>>;
+    readonly templateStyle: ComputedRef<Record<string, string>>;
+    readonly isDragging: Readonly<Ref<boolean>>;
+
+    onHandleKeyDown(evt: KeyboardEvent, handleIndex: number): void;
+    onHandlePointerDown(evt: PointerEvent, handleIndex: number): void;
+};
+
+const HANDLE_SIZE = 6;
+const KEY_STEP = 16;
+const KEY_STEP_LARGE = 64;
+
+export function useSplitView(options: UseSplitViewOptions): UseSplitViewReturn {
+    const sizes = ref<number[]>([]);
+    const isDragging = ref(false);
+    const persisted = options.rememberKey
+        ? useRemembered<number[] | null>(`split-view/${options.rememberKey}`, null)
+        : null;
+
+    const containerSize = (): number => {
+        const el = options.containerRef.value;
+
+        if (!el) {
+            return 0;
+        }
+
+        return options.direction.value === 'horizontal' ? el.clientWidth : el.clientHeight;
+    };
+
+    const computeInitialSizes = (): number[] => {
+        const persistedValue = persisted?.value;
+
+        if (persistedValue && persistedValue.length === options.panes.value.length) {
+            return [...persistedValue];
+        }
+
+        const total = containerSize();
+        const handleSpace = Math.max(0, options.panes.value.length - 1) * HANDLE_SIZE;
+        const available = Math.max(0, total - handleSpace);
+        const result: number[] = [];
+
+        let claimed = 0;
+        let flexCount = 0;
+
+        for (const pane of options.panes.value) {
+            if (typeof pane.defaultSize === 'number') {
+                result.push(pane.defaultSize);
+                claimed += pane.defaultSize;
+            } else if (typeof pane.defaultSize === 'string' && pane.defaultSize.endsWith('%')) {
+                const percentage = parseFloat(pane.defaultSize) / 100;
+                const size = available * percentage;
+                result.push(size);
+                claimed += size;
+            } else {
+                result.push(-1);
+                flexCount++;
+            }
+        }
+
+        const flexShare = flexCount > 0 ? Math.max(0, (available - claimed) / flexCount) : 0;
+
+        return result.map(size => size === -1 ? flexShare : size);
+    };
+
+    const clampSizes = (next: number[]): number[] => {
+        return next.map((size, i) => {
+            const pane = options.panes.value[i];
+            const min = pane.minSize;
+            const max = pane.maxSize ?? Infinity;
+            return Math.min(Math.max(size, min), max);
+        });
+    };
+
+    onMounted(async () => {
+        await nextTick();
+        sizes.value = computeInitialSizes();
+    });
+
+    watch(() => options.panes.value.length, () => {
+        sizes.value = computeInitialSizes();
+    });
+
+    watch(sizes, value => {
+        if (persisted && !isDragging.value) {
+            persisted.value = [...value];
+        }
+    }, {deep: true});
+
+    const templateStyle = computed(() => {
+        const direction = options.direction.value;
+        const property = direction === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows';
+        const tracks: string[] = [];
+
+        for (let i = 0; i < sizes.value.length; i++) {
+            tracks.push(`${sizes.value[i]}px`);
+
+            if (i < sizes.value.length - 1) {
+                tracks.push(`${HANDLE_SIZE}px`);
+            }
+        }
+
+        return {[property]: tracks.join(' ')};
+    });
+
+    function applyDelta(handleIndex: number, delta: number): void {
+        const next = [...sizes.value];
+        const leftIndex = handleIndex;
+        const rightIndex = handleIndex + 1;
+        const leftPane = options.panes.value[leftIndex];
+        const rightPane = options.panes.value[rightIndex];
+
+        const leftMin = leftPane.minSize;
+        const leftMax = leftPane.maxSize ?? Infinity;
+        const rightMin = rightPane.minSize;
+        const rightMax = rightPane.maxSize ?? Infinity;
+
+        let newLeft = next[leftIndex] + delta;
+        let newRight = next[rightIndex] - delta;
+
+        if (newLeft < leftMin) {
+            const overshoot = leftMin - newLeft;
+            newLeft = leftMin;
+            newRight -= overshoot;
+        } else if (newLeft > leftMax) {
+            const overshoot = newLeft - leftMax;
+            newLeft = leftMax;
+            newRight += overshoot;
+        }
+
+        if (newRight < rightMin) {
+            const overshoot = rightMin - newRight;
+            newRight = rightMin;
+            newLeft -= overshoot;
+        } else if (newRight > rightMax) {
+            const overshoot = newRight - rightMax;
+            newRight = rightMax;
+            newLeft += overshoot;
+        }
+
+        next[leftIndex] = newLeft;
+        next[rightIndex] = newRight;
+
+        sizes.value = clampSizes(next);
+    }
+
+    function onHandlePointerDown(evt: PointerEvent, handleIndex: number): void {
+        if (evt.button !== 0) {
+            return;
+        }
+
+        evt.preventDefault();
+        const target = evt.currentTarget as HTMLElement;
+        target.setPointerCapture(evt.pointerId);
+
+        isDragging.value = true;
+
+        const isHorizontal = options.direction.value === 'horizontal';
+        const startCoord = isHorizontal ? evt.clientX : evt.clientY;
+        const startSizes = [...sizes.value];
+
+        const onMove = (moveEvt: PointerEvent): void => {
+            const currentCoord = isHorizontal ? moveEvt.clientX : moveEvt.clientY;
+            const delta = currentCoord - startCoord;
+
+            sizes.value = clampSizes(startSizes.map((size, i) => {
+                if (i === handleIndex) {
+                    return size + delta;
+                }
+
+                if (i === handleIndex + 1) {
+                    return size - delta;
+                }
+
+                return size;
+            }));
+        };
+
+        const onUp = (upEvt: PointerEvent): void => {
+            target.releasePointerCapture(upEvt.pointerId);
+            target.removeEventListener('pointermove', onMove);
+            target.removeEventListener('pointerup', onUp);
+            target.removeEventListener('pointercancel', onUp);
+
+            isDragging.value = false;
+
+            if (persisted) {
+                persisted.value = [...sizes.value];
+            }
+        };
+
+        target.addEventListener('pointermove', onMove);
+        target.addEventListener('pointerup', onUp);
+        target.addEventListener('pointercancel', onUp);
+    }
+
+    function onHandleKeyDown(evt: KeyboardEvent, handleIndex: number): void {
+        const isHorizontal = options.direction.value === 'horizontal';
+        const decreaseKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        const increaseKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const step = evt.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
+
+        if (evt.key === decreaseKey) {
+            evt.preventDefault();
+            applyDelta(handleIndex, -step);
+        } else if (evt.key === increaseKey) {
+            evt.preventDefault();
+            applyDelta(handleIndex, step);
+        } else if (evt.key === 'Home') {
+            evt.preventDefault();
+            const leftPane = options.panes.value[handleIndex];
+            const delta = leftPane.minSize - sizes.value[handleIndex];
+            applyDelta(handleIndex, delta);
+        } else if (evt.key === 'End') {
+            evt.preventDefault();
+            const leftPane = options.panes.value[handleIndex];
+            const max = leftPane.maxSize ?? sizes.value[handleIndex] + sizes.value[handleIndex + 1] - options.panes.value[handleIndex + 1].minSize;
+            const delta = max - sizes.value[handleIndex];
+            applyDelta(handleIndex, delta);
+        }
+    }
+
+    return {
+        sizes,
+        templateStyle,
+        isDragging,
+        onHandleKeyDown,
+        onHandlePointerDown
+    };
+}

package/src/composable/useFilterInjection.ts

@@ -7,9 +7,11 @@ export default function () {
         //  Vue, so that explains the empty getter and function below.
         state: ref({}),
         back: () => void 0,
-        reset: () => void 0,
+        clear: () => void 0,
+        getDefinition: () => undefined,
         getValue: () => void 0,
         hasValue: () => false,
+        reset: () => void 0,
         setValue: () => void 0
     });
 }

package/src/css/component/Calendar.module.scss

@@ -1,13 +1,15 @@
 @use '~flux/components/css/mixin';
 
 .calendar {
-    composes: basePaneStructure from './base/Pane.module.scss';
+    flex-grow: 1;
+}
+
+.calendarView {
+    contain: paint;
 
     display: flex;
     flex-flow: column;
     flex-grow: 1;
-    box-shadow: var(--shadow-sm);
-    contain: paint;
 }
 
 .calendarItemRegistry {
@@ -90,16 +92,14 @@
     }
 }
 
-/* region Month view */
-
 .calendarCells {
     display: grid;
     flex-grow: 1;
     gap: 1px;
     grid-template-columns: repeat(7, minmax(180px, 1fr));
-    grid-auto-rows: auto;
-    overflow-x: auto;
+    grid-template-rows: min-content repeat(6, auto);
     background: var(--gray-100);
+    overflow-x: auto;
 }
 
 .calendarCell {
@@ -113,9 +113,9 @@
     padding-left: 0;
     padding-right: 0;
     color: var(--foreground-secondary);
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1em;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 30px;
     text-align: center;
     text-transform: capitalize;
 }
@@ -127,7 +127,7 @@
     min-height: 90px;
     padding-top: 33px;
     outline: 2px dashed transparent;
-    outline-offset: 2px;
+    outline-offset: -2px;
     transition: 210ms var(--swift-out);
     transition-property: background, outline-color, z-index;
     z-index: 0;
@@ -181,10 +181,6 @@
     gap: 3px;
 }
 
-/* endregion */
-
-/* region Time-grid view */
-
 .timeGrid {
     display: flex;
     flex-flow: column;
@@ -393,5 +389,3 @@
     z-index: 5;
     pointer-events: none;
 }
-
-/* endregion */

package/src/css/component/Comment.module.scss

@@ -41,8 +41,8 @@
 .commentContent {
     min-width: 0;
     padding: 12px 18px;
-    background: linear-gradient(to bottom, var(--gray-25), var(--gray-50));
-    border: 1px solid var(--gray-200);
+    background: var(--primary-50);
+    border: 1px solid var(--primary-200);
     border-radius: calc(var(--radius) * 2);
     box-shadow: var(--shadow-xs);
 }
@@ -52,7 +52,7 @@
 }
 
 .comment.isReceived .commentContent {
-    background: linear-gradient(to bottom, var(--gray-50), var(--gray-100));
+    background: var(--gray-50);
     border-color: var(--gray-200);
     border-bottom-left-radius: var(--radius);
 }
@@ -87,14 +87,6 @@
     }
 }
 
-[dark] .commentContent {
-    background: linear-gradient(to bottom, var(--gray-50), var(--gray-25));
-}
-
-[dark] .comment.isReceived .commentContent {
-    background: linear-gradient(to bottom, var(--gray-100), var(--gray-50));
-}
-
 @keyframes commentTyping {
     0%,
     80%,

package/src/css/component/Filter.module.scss

@@ -2,7 +2,7 @@
     max-height: 50dvh;
     max-width: 100%;
     padding: 9px;
-    width: 270px;
+    width: 300px;
     overflow: auto;
     scrollbar-width: none;
     transition: height 150ms var(--deceleration-curve);
@@ -85,11 +85,15 @@
     flex-grow: 1;
 }
 
-.filterReset {
+.filterAction {
     width: 42px;
     justify-content: center;
 }
 
+.filterHeaderActions {
+    justify-content: flex-end;
+}
+
 .filterDatePicker {
     margin: -9px;
 }