@wallarm-org/design-system 0.14.1 → 0.14.2

package/dist/components/FilterInput/FilterInputField/FilterInputChip/classes.js

@@ -1,12 +1,12 @@
 import { cva } from "class-variance-authority";
-const chipVariants = cva('group/chip relative flex items-center justify-center px-4 py-0 min-h-[20px] border border-solid rounded-8', {
+const chipVariants = cva('group/chip relative flex items-center justify-center pl-4 pr-0 py-0 min-h-[20px] border border-solid rounded-8', {
     variants: {
         error: {
             true: 'bg-bg-light-danger border-border-danger',
             false: 'bg-badge-badge-bg border-border-primary'
         },
         interactive: {
-            true: 'cursor-pointer',
+            true: 'cursor-pointer px-4',
             false: ''
         }
     },

package/dist/components/FilterInput/FilterInputField/FilterInputField.js

@@ -106,7 +106,7 @@ const FilterInputField = ({ className, ...props })=>{
                                     }),
                                     buildingChipData ? /*#__PURE__*/ jsxs("div", {
                                         ref: buildingChipRef,
-                                        className: cn(buildingChipWrapperClass, hasContent && 'ml-8'),
+                                        className: buildingChipWrapperClass,
                                         children: [
                                             /*#__PURE__*/ jsx(FilterInputChip, {
                                                 building: true,

package/dist/components/FilterInput/FilterInputField/classes.d.ts

@@ -12,7 +12,7 @@ export declare const filterInputInnerVariants: (props?: ({
     hasContent?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Wrapper that visually groups the building chip and the filter input */
-export declare const buildingChipWrapperClass = "flex items-center gap-2 min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg";
+export declare const buildingChipWrapperClass = "flex items-center min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg ml-8";
 /** Native input element inside the query bar */
 export declare const filterInputInputVariants: (props?: ({
     hasContent?: boolean | null | undefined;

package/dist/components/FilterInput/FilterInputField/classes.js

@@ -20,7 +20,7 @@ const filterInputContainerVariants = cva('relative flex min-h-40 w-full overflow
         },
         multiRow: {
             true: 'items-start',
-            false: 'items-center'
+            false: 'items-stretch'
         }
     },
     defaultVariants: {
@@ -28,7 +28,7 @@ const filterInputContainerVariants = cva('relative flex min-h-40 w-full overflow
         multiRow: false
     }
 });
-const filterInputInnerVariants = cva('flex min-h-full w-full cursor-text flex-wrap items-center gap-y-4 py-4', {
+const filterInputInnerVariants = cva('flex min-h-full w-full cursor-text flex-wrap items-center gap-y-4 py-8', {
     variants: {
         hasContent: {
             true: 'pl-4',
@@ -39,7 +39,7 @@ const filterInputInnerVariants = cva('flex min-h-full w-full cursor-text flex-wr
         hasContent: false
     }
 });
-const buildingChipWrapperClass = 'flex items-center gap-2 min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg';
+const buildingChipWrapperClass = 'flex items-center min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg ml-8';
 const filterInputInputVariants = cva('h-auto border-none bg-transparent p-0 text-sm shadow-none outline-none ring-0', {
     variants: {
         hasContent: {

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FilterInputFieldMenu.js

@@ -106,7 +106,7 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
         onHighlightChange: onHighlightChange,
         children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
             ref: menuRef,
-            className: cn('w-[300px]', className),
+            className: cn('w-[300px] max-h-[430px]', className),
             "data-slot": "filter-input-field-menu",
             children: [
                 !filterText && showRecent && /*#__PURE__*/ jsx(RecentSection, {

package/dist/components/FilterInput/FilterInputMenu/FilterInputOperatorMenu.js

@@ -55,7 +55,7 @@ const FilterInputOperatorMenu = ({ fieldType, operators, onSelect, open = false,
         onHighlightChange: onHighlightChange,
         children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
             ref: menuRef,
-            className: cn('w-256', className),
+            className: cn('w-256 max-h-[430px]', className),
             children: [
                 filteredGroups.length > 0 ? filteredGroups.map((group, groupIdx)=>/*#__PURE__*/ jsxs(Fragment, {
                         children: [

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/FilterInputValueMenu.js

@@ -60,7 +60,7 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
         onHighlightChange: onHighlightChange,
         children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
             ref: menuRef,
-            className: cn(widthClass, className),
+            className: cn(widthClass, 'max-h-[430px]', className),
             style: widthStyle,
             children: [
                 displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {

package/dist/components/ScrollArea/ScrollAreaViewport.js

@@ -7,7 +7,7 @@ const ScrollAreaViewport = (props)=>{
     return /*#__PURE__*/ jsx(ScrollArea.Viewport, {
         ...props,
         "data-testid": testId,
-        className: cn('h-full outline-none overscroll-x-none')
+        className: cn('h-full outline-none')
     });
 };
 ScrollAreaViewport.displayName = 'ScrollAreaViewport';

package/dist/components/Table/TableBody/TableBodyVirtualizedContainer.js

@@ -1,18 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { TABLE_VIRTUALIZATION_OVERSCAN } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableBodyVirtualizedCore } from "./TableBodyVirtualizedCore.js";
+import { useSmoothScrollOnSort } from "./useSmoothScrollOnSort.js";
 const TableBodyVirtualizedContainer = ()=>{
     const { table, estimateRowHeight, overscan } = useTableContext();
     const tbodyRef = useRef(null);
+    const getScrollElement = useCallback(()=>tbodyRef.current?.closest('[data-table-scroll-container]') ?? null, []);
     const virtualizer = useVirtualizer({
         count: table.getRowModel().rows.length,
-        getScrollElement: ()=>tbodyRef.current?.closest('[data-table-scroll-container]') ?? null,
+        getScrollElement,
         estimateSize: estimateRowHeight ?? (()=>40),
         overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN
     });
+    useSmoothScrollOnSort(table, getScrollElement);
     return /*#__PURE__*/ jsx(TableBodyVirtualizedCore, {
         tbodyRef: tbodyRef,
         virtualizer: virtualizer

package/dist/components/Table/TableBody/TableBodyVirtualizedCore.d.ts

@@ -2,6 +2,6 @@ import type { FC, RefObject } from 'react';
 import type { Virtualizer } from '@tanstack/react-virtual';
 export interface TableBodyVirtualizedCoreProps {
     tbodyRef: RefObject<HTMLTableSectionElement | null>;
-    virtualizer: Virtualizer<Window, Element> | Virtualizer<Element, Element>;
+    virtualizer: Virtualizer<Window, Element> | Virtualizer<HTMLElement, Element> | Virtualizer<Element, Element>;
 }
 export declare const TableBodyVirtualizedCore: FC<TableBodyVirtualizedCoreProps>;

package/dist/components/Table/TableBody/TableBodyVirtualizedWindow.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 import { useWindowVirtualizer } from "@tanstack/react-virtual";
 import { TABLE_VIRTUALIZATION_OVERSCAN } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableBodyVirtualizedCore } from "./TableBodyVirtualizedCore.js";
+import { useSmoothScrollOnSort } from "./useSmoothScrollOnSort.js";
 function getDocumentOffsetTop(el) {
     let offset = 0;
     let current = el;
@@ -22,6 +23,8 @@ const TableBodyVirtualizedWindow = ()=>{
         overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN,
         scrollMargin: tbodyRef.current ? getDocumentOffsetTop(tbodyRef.current) : 0
     });
+    const getScrollTarget = useCallback(()=>window, []);
+    useSmoothScrollOnSort(table, getScrollTarget);
     return /*#__PURE__*/ jsx(TableBodyVirtualizedCore, {
         tbodyRef: tbodyRef,
         virtualizer: virtualizer

package/dist/components/Table/TableBody/useSmoothScrollOnSort.d.ts

@@ -0,0 +1,7 @@
+import type { Table as TanStackTable } from '@tanstack/react-table';
+/**
+ * Smooth-scrolls the table to the top when sorting changes.
+ * Prevents the jarring jump that occurs when the virtualizer
+ * recalculates row positions after a sort.
+ */
+export declare function useSmoothScrollOnSort<T>(table: TanStackTable<T>, getScrollTarget: () => HTMLElement | Window | null): void;

package/dist/components/Table/TableBody/useSmoothScrollOnSort.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+function useSmoothScrollOnSort(table, getScrollTarget) {
+    const prevSortingRef = useRef(table.getState().sorting);
+    const sorting = table.getState().sorting;
+    useEffect(()=>{
+        if (prevSortingRef.current === sorting) return;
+        prevSortingRef.current = sorting;
+        const target = getScrollTarget();
+        if (!target) return;
+        target.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }, [
+        sorting,
+        getScrollTarget
+    ]);
+}
+export { useSmoothScrollOnSort };

package/dist/components/Table/TableInner/TableInnerWindow.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useTestId } from "../../../utils/testId.js";
 import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
 import { useEndReached } from "../hooks/index.js";
@@ -13,85 +13,59 @@ const TableInnerWindow = ({ isEmpty, showSettings, ariaLabel, children })=>{
     const { table, onEndReached, onEndReachedThreshold } = useTableContext();
     const testId = useTestId('window');
     const rootRef = useRef(null);
-    const headerScrollRef = useRef(null);
-    const bodyScrollRef = useRef(null);
-    const isSyncing = useRef(false);
+    const scrollRef = useRef(null);
     const containerWidth = useContainerWidth(rootRef);
     useEndReached({
         mode: 'window',
         onEndReached,
         threshold: onEndReachedThreshold
     });
-    const syncScroll = useCallback((source, target)=>{
-        if (isSyncing.current) return;
-        isSyncing.current = true;
-        target.scrollLeft = source.scrollLeft;
-        isSyncing.current = false;
-    }, []);
     useEffect(()=>{
-        const header = headerScrollRef.current;
-        const body = bodyScrollRef.current;
-        if (!header || !body) return;
-        const onBodyScroll = ()=>{
-            syncScroll(body, header);
-            rootRef.current?.toggleAttribute('data-scrolled', body.scrollLeft > 0);
+        const scrollEl = scrollRef.current;
+        if (!scrollEl) return;
+        const onScroll = ()=>{
+            rootRef.current?.toggleAttribute('data-scrolled', scrollEl.scrollLeft > 0);
         };
-        const onHeaderScroll = ()=>syncScroll(header, body);
-        body.addEventListener('scroll', onBodyScroll, {
-            passive: true
-        });
-        header.addEventListener('scroll', onHeaderScroll, {
+        scrollEl.addEventListener('scroll', onScroll, {
             passive: true
         });
-        return ()=>{
-            body.removeEventListener('scroll', onBodyScroll);
-            header.removeEventListener('scroll', onHeaderScroll);
-        };
-    }, [
-        syncScroll
-    ]);
+        return ()=>scrollEl.removeEventListener('scroll', onScroll);
+    }, []);
     const totalSize = table.getTotalSize();
     const tableWidth = Math.max(containerWidth, totalSize);
     const tableStyles = 'table-fixed border-separate border-spacing-0';
     return /*#__PURE__*/ jsxs("div", {
         ref: rootRef,
         "data-testid": testId,
-        className: "group/scroll outline-none",
+        className: "group/scroll relative outline-none",
         children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "sticky top-0 z-30 relative",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        ref: headerScrollRef,
-                        className: "overflow-hidden rounded-t-12 border border-b-0 border-border-primary-light",
-                        children: /*#__PURE__*/ jsxs("table", {
-                            className: tableStyles,
-                            style: {
-                                width: tableWidth
-                            },
-                            "aria-hidden": true,
-                            children: [
-                                /*#__PURE__*/ jsx(TableColGroup, {
-                                    tableWidth: tableWidth
-                                }),
-                                /*#__PURE__*/ jsx(TableHead, {})
-                            ]
-                        })
-                    }),
-                    showSettings && /*#__PURE__*/ jsx(TableSettingsMenu, {})
-                ]
-            }),
             /*#__PURE__*/ jsxs(ScrollArea, {
-                className: "group/scroll rounded-b-12 border border-t-0 border-border-primary-light",
+                className: "group/scroll rounded-12 border border-border-primary-light",
                 children: [
                     /*#__PURE__*/ jsxs(ScrollAreaViewport, {
-                        ref: bodyScrollRef,
+                        ref: scrollRef,
                         "data-table-scroll-container": true,
                         style: {
                             overflowX: 'auto',
                             overflowY: 'hidden'
                         },
                         children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "sticky top-0 z-30",
+                                children: /*#__PURE__*/ jsxs("table", {
+                                    className: tableStyles,
+                                    style: {
+                                        width: tableWidth
+                                    },
+                                    "aria-hidden": true,
+                                    children: [
+                                        /*#__PURE__*/ jsx(TableColGroup, {
+                                            tableWidth: tableWidth
+                                        }),
+                                        /*#__PURE__*/ jsx(TableHead, {})
+                                    ]
+                                })
+                            }),
                             /*#__PURE__*/ jsxs("table", {
                                 className: tableStyles,
                                 style: {
@@ -112,7 +86,8 @@ const TableInnerWindow = ({ isEmpty, showSettings, ariaLabel, children })=>{
                         orientation: "horizontal"
                     })
                 ]
-            })
+            }),
+            showSettings && /*#__PURE__*/ jsx(TableSettingsMenu, {})
         ]
     });
 };

package/dist/components/Table/TableSettingsMenu/TableSettingsMenu.js

@@ -112,7 +112,7 @@ const TableSettingsMenu = ()=>{
                                     })
                                 }),
                                 /*#__PURE__*/ jsxs(DropdownMenuContent, {
-                                    className: cn('min-w-256'),
+                                    className: cn('min-w-256 max-h-[430px]'),
                                     children: [
                                         /*#__PURE__*/ jsx(DropdownMenuInput, {
                                             placeholder: "Search",

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0",
-  "generatedAt": "2026-03-19T08:25:17.978Z",
+  "version": "0.14.1",
+  "generatedAt": "2026-03-20T04:01:58.193Z",
   "components": [
     {
       "name": "Alert",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",