@wallarm-org/design-system 0.14.2 → 0.14.3

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

@@ -1,13 +1,13 @@
 import { cva } from "class-variance-authority";
-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', {
+const chipVariants = cva('group/chip relative flex items-center justify-center pl-4 pr-0 py-0 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 px-4',
-            false: ''
+            true: 'cursor-pointer px-4 h-24',
+            false: 'h-[22px]'
         }
     },
     defaultVariants: {

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Maximize2 } from "../../../icons/Maximize2.js";
 import { Minimize2 } from "../../../icons/Minimize2.js";
 import { X } from "../../../icons/X.js";
@@ -14,46 +14,53 @@ const FilterInputFieldActions = ({ isExpanded, isOverflowing, onToggleExpand })=
     const hasChips = chips.length > 0;
     const hasContent = hasChips || null != buildingChipData;
     const showExpandCollapse = isOverflowing || isExpanded;
-    return /*#__PURE__*/ jsxs("div", {
-        className: "absolute right-8 top-0 z-10 flex items-center gap-8 pt-8",
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            showKeyboardHint && !hasContent && /*#__PURE__*/ jsxs(KbdGroup, {
-                children: [
-                    /*#__PURE__*/ jsx(Kbd, {
-                        children: "⌘"
-                    }),
-                    /*#__PURE__*/ jsx(Kbd, {
-                        children: "K"
-                    })
-                ]
+            showKeyboardHint && !hasContent && /*#__PURE__*/ jsx("div", {
+                className: "absolute right-8 top-0 bottom-0 z-10 flex items-center",
+                children: /*#__PURE__*/ jsxs(KbdGroup, {
+                    children: [
+                        /*#__PURE__*/ jsx(Kbd, {
+                            children: "⌘"
+                        }),
+                        /*#__PURE__*/ jsx(Kbd, {
+                            children: "K"
+                        })
+                    ]
+                })
             }),
-            showExpandCollapse && /*#__PURE__*/ jsxs(Tooltip, {
+            (showExpandCollapse || hasChips) && /*#__PURE__*/ jsxs("div", {
+                className: "absolute right-8 top-0 z-10 flex items-center gap-8 pt-8",
                 children: [
-                    /*#__PURE__*/ jsx(TooltipTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ jsx(Button, {
-                            variant: "ghost",
-                            color: "neutral",
-                            size: "small",
-                            onClick: onToggleExpand,
-                            "aria-label": isExpanded ? 'Collapse' : 'Expand',
-                            className: "text-icon-secondary",
-                            children: isExpanded ? /*#__PURE__*/ jsx(Minimize2, {}) : /*#__PURE__*/ jsx(Maximize2, {})
-                        })
+                    showExpandCollapse && /*#__PURE__*/ jsxs(Tooltip, {
+                        children: [
+                            /*#__PURE__*/ jsx(TooltipTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "ghost",
+                                    color: "neutral",
+                                    size: "small",
+                                    onClick: onToggleExpand,
+                                    "aria-label": isExpanded ? 'Collapse' : 'Expand',
+                                    className: "text-icon-secondary",
+                                    children: isExpanded ? /*#__PURE__*/ jsx(Minimize2, {}) : /*#__PURE__*/ jsx(Maximize2, {})
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(TooltipContent, {
+                                children: isExpanded ? 'Collapse' : 'Expand'
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ jsx(TooltipContent, {
-                        children: isExpanded ? 'Collapse' : 'Expand'
+                    hasChips && /*#__PURE__*/ jsx(Button, {
+                        variant: "ghost",
+                        color: "neutral",
+                        size: "small",
+                        onClick: onClear,
+                        "aria-label": "Clear all filters",
+                        className: "text-icon-secondary",
+                        children: /*#__PURE__*/ jsx(X, {})
                     })
                 ]
-            }),
-            hasChips && /*#__PURE__*/ jsx(Button, {
-                variant: "ghost",
-                color: "neutral",
-                size: "small",
-                onClick: onClear,
-                "aria-label": "Clear all filters",
-                className: "text-icon-secondary",
-                children: /*#__PURE__*/ jsx(X, {})
             })
         ]
     });

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 min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg ml-8";
+export declare const buildingChipWrapperClass = "flex items-center min-w-0 h-24 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

@@ -1,18 +1,17 @@
 import { cva } from "class-variance-authority";
 const VISIBLE_ROWS = 3;
-const CHIP_ROW_HEIGHT = 22;
+const CHIP_ROW_HEIGHT = 24;
 const ROW_GAP = 4;
-const PADDING_Y = 8;
+const PADDING_Y = 16;
 const EDGE_GAP = 8;
 const CONTAINER_BORDER = 2;
-const BOTTOM_REVEAL = 6;
-const COLLAPSED_MAX_HEIGHT = VISIBLE_ROWS * CHIP_ROW_HEIGHT + (VISIBLE_ROWS - 1) * ROW_GAP + PADDING_Y + EDGE_GAP + CONTAINER_BORDER + BOTTOM_REVEAL;
+const COLLAPSED_MAX_HEIGHT = VISIBLE_ROWS * CHIP_ROW_HEIGHT + (VISIBLE_ROWS - 1) * ROW_GAP + PADDING_Y + EDGE_GAP + CONTAINER_BORDER;
 const BUTTON_SIZE = 24;
 const BUTTON_COUNT = 2;
 const BUTTON_GAP = 8;
 const ACTIONS_RIGHT = 8;
 const ACTIONS_PADDING = BUTTON_COUNT * BUTTON_SIZE + BUTTON_GAP + ACTIONS_RIGHT;
-const filterInputContainerVariants = cva('relative flex min-h-40 w-full overflow-hidden px-0 focus-within:outline-none focus-within:ring-3', {
+const filterInputContainerVariants = cva('relative flex box-border min-h-40 w-full overflow-hidden px-0 focus-within:outline-none focus-within:ring-3', {
     variants: {
         error: {
             true: 'focus-within:ring-focus-destructive',
@@ -28,10 +27,10 @@ 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-8', {
+const filterInputInnerVariants = cva('flex min-h-[40px] w-full cursor-text flex-wrap items-center gap-y-4 py-[8px]', {
     variants: {
         hasContent: {
-            true: 'pl-4',
+            true: 'pl-8',
             false: 'pl-12 pr-4'
         }
     },
@@ -39,7 +38,7 @@ const filterInputInnerVariants = cva('flex min-h-full w-full cursor-text flex-wr
         hasContent: false
     }
 });
-const buildingChipWrapperClass = 'flex items-center min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg ml-8';
+const buildingChipWrapperClass = 'flex items-center min-w-0 h-24 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/FilterInputOperatorMenu.js

@@ -7,10 +7,10 @@ import { KbdGroup } from "../../Kbd/KbdGroup.js";
 import { OPERATORS_BY_TYPE, OPERATOR_SYMBOLS, getOperatorLabel } from "../lib/index.js";
 import { useKeyboardNav } from "./hooks/useKeyboardNav.js";
 import { MenuEmptyState } from "./MenuEmptyState.js";
-function filterOperatorGroups(groups, operators) {
+const filterOperatorGroups = (groups, operators)=>{
     const allowed = new Set(operators);
     return groups.map((group)=>group.filter((op)=>allowed.has(op))).filter((group)=>group.length > 0);
-}
+};
 const HIDE_SYMBOLS_FOR = new Set([
     'boolean'
 ]);

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

@@ -3,17 +3,9 @@ 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 { getDocumentOffsetTop } from "./lib/getDocumentOffsetTop.js";
 import { TableBodyVirtualizedCore } from "./TableBodyVirtualizedCore.js";
 import { useSmoothScrollOnSort } from "./useSmoothScrollOnSort.js";
-function getDocumentOffsetTop(el) {
-    let offset = 0;
-    let current = el;
-    while(current){
-        offset += current.offsetTop;
-        current = current.offsetParent;
-    }
-    return offset;
-}
 const TableBodyVirtualizedWindow = ()=>{
     const { table, estimateRowHeight, overscan } = useTableContext();
     const tbodyRef = useRef(null);

package/dist/components/Table/TableBody/lib/getDocumentOffsetTop.d.ts

@@ -0,0 +1,2 @@
+/** Walk up the offsetParent chain to get absolute offset from document top. */
+export declare const getDocumentOffsetTop: (el: HTMLElement) => number;

package/dist/components/Table/TableBody/lib/getDocumentOffsetTop.js

@@ -0,0 +1,10 @@
+const getDocumentOffsetTop = (el)=>{
+    let offset = 0;
+    let current = el;
+    while(current){
+        offset += current.offsetTop;
+        current = current.offsetParent;
+    }
+    return offset;
+};
+export { getDocumentOffsetTop };

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

@@ -4,4 +4,4 @@ import type { Table as TanStackTable } from '@tanstack/react-table';
  * 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;
+export declare const useSmoothScrollOnSort: <T>(table: TanStackTable<T>, getScrollTarget: () => HTMLElement | Window | null) => void;

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-function useSmoothScrollOnSort(table, getScrollTarget) {
+const useSmoothScrollOnSort = (table, getScrollTarget)=>{
     const prevSortingRef = useRef(table.getState().sorting);
     const sorting = table.getState().sorting;
     useEffect(()=>{
@@ -15,5 +15,5 @@ function useSmoothScrollOnSort(table, getScrollTarget) {
         sorting,
         getScrollTarget
     ]);
-}
+};
 export { useSmoothScrollOnSort };

package/dist/components/Table/hooks/useEndReached.d.ts

@@ -15,5 +15,5 @@ interface UseEndReachedOptions {
  * A cooldown guard prevents rapid re-fires that can occur when new rows
  * are appended (scrollHeight grows → firedRef resets → still at bottom).
  */
-export declare function useEndReached({ mode, scrollRef, onEndReached, threshold, }: UseEndReachedOptions): void;
+export declare const useEndReached: ({ mode, scrollRef, onEndReached, threshold, }: UseEndReachedOptions) => void;
 export {};

package/dist/components/Table/hooks/useEndReached.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import { TABLE_END_REACHED_THRESHOLD } from "../lib/index.js";
 const COOLDOWN_MS = 200;
-function useEndReached({ mode, scrollRef, onEndReached, threshold = TABLE_END_REACHED_THRESHOLD }) {
+const useEndReached = ({ mode, scrollRef, onEndReached, threshold = TABLE_END_REACHED_THRESHOLD })=>{
     const firedRef = useRef(false);
     const lastFiredAtRef = useRef(0);
     useEffect(()=>{
@@ -46,5 +46,5 @@ function useEndReached({ mode, scrollRef, onEndReached, threshold = TABLE_END_RE
         onEndReached,
         threshold
     ]);
-}
+};
 export { useEndReached };

package/dist/components/Table/lib/createTableColumnHelper.d.ts

@@ -3,4 +3,4 @@ export interface TableColumnHelper<T> {
     accessor: <K extends keyof T & string>(key: K, options?: Omit<TableAccessorColumnDef<T, T[K]>, 'accessorKey'>) => TableAccessorColumnDef<T, T[K]>;
     display: (options: Omit<TableDisplayColumnDef<T>, 'accessorKey'>) => TableDisplayColumnDef<T>;
 }
-export declare function createTableColumnHelper<T>(): TableColumnHelper<T>;
+export declare const createTableColumnHelper: <T>() => TableColumnHelper<T>;

package/dist/components/Table/lib/createTableColumnHelper.js

@@ -1,5 +1,4 @@
-function createTableColumnHelper() {
-    return {
+const createTableColumnHelper = ()=>({
         accessor: (key, options = {})=>({
                 ...options,
                 accessorKey: key
@@ -8,6 +7,5 @@ function createTableColumnHelper() {
                 ...options,
                 accessorKey: void 0
             })
-    };
-}
+    });
 export { createTableColumnHelper };

package/dist/components/Table/lib/getPinningStyles.d.ts

@@ -3,4 +3,4 @@ import type { Column } from '@tanstack/react-table';
 /**
  * Gets pinning-related CSS properties for a cell/header.
  */
-export declare function getPinningStyles<T>(column: Column<T>): CSSProperties;
+export declare const getPinningStyles: <T>(column: Column<T>) => CSSProperties;

package/dist/components/Table/lib/getPinningStyles.js

@@ -1,4 +1,4 @@
-function getPinningStyles(column) {
+const getPinningStyles = (column)=>{
     const isPinned = column.getIsPinned();
     if (!isPinned) return {};
     if ('left' !== isPinned) return {};
@@ -6,5 +6,5 @@ function getPinningStyles(column) {
         left: `${column.getStart('left')}px`,
         position: 'sticky'
     };
-}
+};
 export { getPinningStyles };

package/dist/components/Table/lib/isLastPinnedLeft.d.ts

@@ -1,9 +1,9 @@
 /**
  * Checks if a column is the last pinned column on the left side.
  */
-export declare function isLastPinnedLeft(column: {
-    getIsPinned: () => false | 'left' | 'right';
+export declare const isLastPinnedLeft: (column: {
+    getIsPinned: () => false | "left" | "right";
 }, allColumns: {
-    getIsPinned: () => false | 'left' | 'right';
+    getIsPinned: () => false | "left" | "right";
     id: string;
-}[], columnId: string): boolean;
+}[], columnId: string) => boolean;

package/dist/components/Table/lib/isLastPinnedLeft.js

@@ -1,6 +1,6 @@
-function isLastPinnedLeft(column, allColumns, columnId) {
+const isLastPinnedLeft = (column, allColumns, columnId)=>{
     if ('left' !== column.getIsPinned()) return false;
     const leftPinned = allColumns.filter((c)=>'left' === c.getIsPinned());
     return leftPinned[leftPinned.length - 1]?.id === columnId;
-}
+};
 export { isLastPinnedLeft };

package/dist/components/Table/mocks.d.ts

@@ -39,10 +39,10 @@ export declare const groupedHeaderData: SecurityHeaderEntry[];
 export declare const headerColumnHelper: import(".").TableColumnHelper<SecurityHeaderEntry>;
 export declare const headerColumns: TableColumnDef<SecurityHeaderEntry>[];
 export declare const headerColumnIds: string[];
-export declare function createLargeGroupedData(groupCount?: number, childrenPerGroup?: number): SecurityHeaderEntry[];
-export declare function createLargeSecurityEvents(count?: number): SecurityEvent[];
+export declare const createLargeGroupedData: (groupCount?: number, childrenPerGroup?: number) => SecurityHeaderEntry[];
+export declare const createLargeSecurityEvents: (count?: number) => SecurityEvent[];
 export declare const fullFeaturedColumns: TableColumnDef<SecurityHeaderEntry>[];
-export declare function useInfiniteData(): {
+export declare const useInfiniteData: () => {
     data: SecurityEvent[];
     isFetching: boolean;
     hasMore: boolean;

package/dist/components/Table/mocks.js

@@ -593,8 +593,7 @@ const ENDPOINTS = [
     '/v1/webhooks/process/{event_type}',
     '/v1/analytics/track/{metric}'
 ];
-function createLargeGroupedData(groupCount = 12, childrenPerGroup = 50) {
-    return Array.from({
+const createLargeGroupedData = (groupCount = 12, childrenPerGroup = 50)=>Array.from({
         length: groupCount
     }, (_, gi)=>{
         const groupName = HEADER_GROUPS.at(gi % HEADER_GROUPS.length);
@@ -626,9 +625,7 @@ function createLargeGroupedData(groupCount = 12, childrenPerGroup = 50) {
                 }))
         };
     });
-}
-function createLargeSecurityEvents(count = 1000) {
-    return Array.from({
+const createLargeSecurityEvents = (count = 1000)=>Array.from({
         length: count
     }, (_, i)=>{
         const base = securityEvents.at(i % securityEvents.length);
@@ -639,7 +636,6 @@ function createLargeSecurityEvents(count = 1000) {
             firstDetected: `2026-01-${String(i % 28 + 1).padStart(2, '0')}T${String(i % 24).padStart(2, '0')}:00:00`
         };
     });
-}
 const fullFeaturedColumns = headerColumns.map((col)=>{
     const key = 'accessorKey' in col ? col.accessorKey : void 0;
     if ('objectName' === key) return {
@@ -852,7 +848,7 @@ const fullFeaturedColumns = headerColumns.map((col)=>{
 });
 const INFINITE_PAGE_SIZE = 50;
 const INFINITE_MAX_ITEMS = 500;
-function useInfiniteData() {
+const useInfiniteData = ()=>{
     const allData = useMemo(()=>createLargeSecurityEvents(INFINITE_MAX_ITEMS), []);
     const [data, setData] = useState(()=>allData.slice(0, INFINITE_PAGE_SIZE));
     const [isFetching, setIsFetching] = useState(false);
@@ -876,5 +872,5 @@ function useInfiniteData() {
         totalItems: INFINITE_MAX_ITEMS,
         fetchNextPage
     };
-}
+};
 export { METHOD_COLORS, createLargeGroupedData, createLargeSecurityEvents, fullFeaturedColumns, groupedHeaderData, headerColumnHelper, headerColumnIds, headerColumns, securityColumnHelper, securityColumnIds, securityColumns, securityEvents, useInfiniteData };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.1",
-  "generatedAt": "2026-03-20T04:01:58.193Z",
+  "version": "0.14.2",
+  "generatedAt": "2026-03-23T08:20:42.578Z",
   "components": [
     {
       "name": "Alert",

package/package.json

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