@wallarm-org/design-system 0.21.0 → 0.21.1

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -31,7 +31,7 @@ const DropdownMenuContent = ({ className, children, ref, ...props })=>{
                         children: [
                             /*#__PURE__*/ jsx(ScrollAreaViewport, {
                                 children: /*#__PURE__*/ jsx(ScrollAreaContent, {
-                                    className: cn('flex flex-col gap-1'),
+                                    className: cn('flex flex-col gap-1 !min-w-0'),
                                     children: menuChildren
                                 })
                             }),

package/dist/components/FilterInput/FilterInput.js

@@ -38,6 +38,7 @@ const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filt
         conditions,
         connectors,
         fields,
+        containerRef,
         chipRegistryRef,
         inputRef,
         clearAll,

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

@@ -44,7 +44,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
             error: hasError,
             interactive,
             disabled
-        }), 'max-w-[600px]', className),
+        }), 'max-w-[320px]', className),
         "data-slot": "filter-input-condition-chip",
         ...props,
         children: [
@@ -65,7 +65,7 @@ const FilterInputChip = ({ ref, chipId, attribute, operator, value, error = fals
             }),
             (value || 'value' === activeSegment) && /*#__PURE__*/ jsx(Segment, {
                 variant: "value",
-                className: "shrink-0",
+                className: "min-w-0",
                 error: 'value' !== activeSegment && (true === error || 'value' === error),
                 valueParts: valueParts,
                 valueSeparator: valueSeparator,

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useFilterInputContext } from "../FilterInputContext/index.js";
 import { filterInputInputVariants } from "./classes.js";
 const CHAR_WIDTH_PX = 10;
-const MIN_INPUT_WIDTH = 20;
+const MIN_INPUT_WIDTH = 4;
 const FilterInputSearch = ({ hasContent })=>{
     const { inputText, inputRef, placeholder, error, menuOpen, onInputChange, onInputKeyDown, onInputClick } = useFilterInputContext();
     return /*#__PURE__*/ jsx("input", {

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

@@ -1,4 +1,4 @@
 /** Insertion gap button */
-export declare const insertionGapButton = "group relative z-20 flex h-24 w-8 shrink-0 cursor-text items-center justify-center";
+export declare const insertionGapButton = "group relative z-20 flex h-24 w-4 shrink-0 cursor-text items-center justify-center";
 /** Insertion gap divider indicator */
 export declare const insertionGapDivider = "h-16 w-1 rounded-full bg-transparent transition-colors group-hover:bg-border-primary/50";

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

@@ -1,3 +1,3 @@
-const insertionGapButton = 'group relative z-20 flex h-24 w-8 shrink-0 cursor-text items-center justify-center';
+const insertionGapButton = 'group relative z-20 flex h-24 w-4 shrink-0 cursor-text items-center justify-center';
 const insertionGapDivider = 'h-16 w-1 rounded-full bg-transparent transition-colors group-hover:bg-border-primary/50';
 export { insertionGapButton, insertionGapDivider };

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "../../../../icons/ChevronRight.js";
 import { Checkmark } from "../../../Checkmark/index.js";
-import { DropdownMenuItem, DropdownMenuItemText } from "../../../DropdownMenu/index.js";
+import { DropdownMenuItem } from "../../../DropdownMenu/index.js";
+import { Text } from "../../../Text/index.js";
 const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
         value: String(option.value),
         onSelect: onSelect,
@@ -17,20 +18,25 @@ const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect })=
                         className: "size-6 rounded-full bg-current"
                     }),
                     /*#__PURE__*/ jsx("span", {
-                        className: "leading-4 text-ellipsis",
+                        className: "min-w-0 truncate leading-4",
                         children: option.badge.text
                     })
                 ]
-            }) : /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                children: option.label
+            }) : /*#__PURE__*/ jsx("div", {
+                className: "min-w-0",
+                children: /*#__PURE__*/ jsx(Text, {
+                    size: "sm",
+                    truncate: true,
+                    children: option.label
+                })
             }),
             multiSelect ? /*#__PURE__*/ jsx("div", {
-                className: "flex items-start justify-end py-2 ml-auto",
+                className: "flex shrink-0 items-start justify-end py-2 ml-auto",
                 children: /*#__PURE__*/ jsx(Checkmark, {
                     checkedState: isChecked
                 })
             }) : isChecked ? /*#__PURE__*/ jsx("div", {
-                className: "flex items-start justify-end py-2 ml-auto",
+                className: "flex shrink-0 items-start justify-end py-2 ml-auto",
                 children: /*#__PURE__*/ jsx(Checkmark, {
                     checkedState: true
                 })

package/dist/components/FilterInput/hooks/useFilterInputSelection/lib/dom.d.ts

@@ -2,7 +2,21 @@ export declare const clearDragAttributes: (chips: Map<string, HTMLElement>) => v
 export declare const hasDragSelection: (chips: Map<string, HTMLElement>) => boolean;
 /** Get condition indices of drag-selected chips (chip-0, chip-2 → [0, 2]) */
 export declare const getSelectedConditionIndices: (chips: Map<string, HTMLElement>) => number[];
-/** Mark chips as drag-selected based on horizontal range. Returns true if any chip was selected. */
-export declare const updateDragSelection: (registry: Map<string, HTMLElement>, startX: number, currentX: number) => boolean;
-/** Check if every condition chip in the registry is drag-selected */
-export declare const areAllConditionsDragged: (registry: Map<string, HTMLElement>) => boolean;
+interface VisualEntry {
+    id: string;
+    el: HTMLElement;
+    rect: DOMRect;
+    /** Index in the full sorted array (preserved through condition filtering) */
+    allIdx: number;
+}
+/** Snapshot registry entries with cached rects, sorted by visual position (top→bottom, left→right) */
+export declare const getVisualEntries: (registry: Map<string, HTMLElement>) => VisualEntry[];
+/** Resolve the condition chip ID at the mousedown point (called once per drag). */
+export declare const resolveAnchorChipId: (registry: Map<string, HTMLElement>, target: HTMLElement, x: number, y: number) => string | null;
+/**
+ * Mark chips as drag-selected from a fixed anchor chip to the current cursor position.
+ * Both anchor and end are resolved in the same visually-sorted array so indices always match.
+ * Connectors between selected condition chips are included automatically.
+ */
+export declare const updateDragSelection: (all: VisualEntry[], anchorChipId: string, currentX: number, currentY: number) => boolean;
+export {};

package/dist/components/FilterInput/hooks/useFilterInputSelection/lib/dom.js

@@ -1,11 +1,5 @@
 import { CHIP_ID_PREFIX } from "./constants.js";
 const DRAG_ATTR = 'data-drag-selected';
-const isChipInRange = (chip, x1, x2)=>{
-    const rect = chip.getBoundingClientRect();
-    const minX = Math.min(x1, x2);
-    const maxX = Math.max(x1, x2);
-    return rect.left <= maxX && rect.right >= minX;
-};
 const clearDragAttributes = (chips)=>{
     [
         ...chips.values()
@@ -17,18 +11,79 @@ const hasDragSelection = (chips)=>[
 const getSelectedConditionIndices = (chips)=>[
         ...chips.entries()
     ].filter(([id, el])=>id.startsWith(CHIP_ID_PREFIX) && el.hasAttribute(DRAG_ATTR)).map(([id])=>Number(id.slice(CHIP_ID_PREFIX.length))).filter((index)=>!Number.isNaN(index)).sort((a, b)=>a - b);
-const updateDragSelection = (registry, startX, currentX)=>[
-        ...registry.values()
-    ].reduce((found, chip)=>{
-        const inRange = isChipInRange(chip, startX, currentX);
-        if (inRange) chip.setAttribute(DRAG_ATTR, '');
-        else chip.removeAttribute(DRAG_ATTR);
-        return found || inRange;
-    }, false);
-const areAllConditionsDragged = (registry)=>{
-    const conditions = [
+const getVisualEntries = (registry)=>[
+        ...registry.entries()
+    ].map(([id, el])=>({
+            id,
+            el,
+            rect: el.getBoundingClientRect(),
+            allIdx: 0
+        })).sort((a, b)=>{
+        const rowDiff = a.rect.top - b.rect.top;
+        if (Math.abs(rowDiff) > Math.min(a.rect.height, b.rect.height) / 2) return rowDiff;
+        return a.rect.left - b.rect.left;
+    }).map((entry, i)=>({
+            ...entry,
+            allIdx: i
+        }));
+const findClosestByDistance = (entries, x, y)=>entries.reduce((best, entry, i)=>{
+        const r = entry.rect;
+        const dx = Math.max(r.left - x, 0, x - r.right);
+        const dy = Math.max(r.top - y, 0, y - r.bottom);
+        const dist = dx * dx + dy * dy;
+        return dist < best.dist ? {
+            idx: i,
+            dist
+        } : best;
+    }, {
+        idx: -1,
+        dist: 1 / 0
+    }).idx;
+const findByReadingOrder = (entries, x, y)=>{
+    if (0 === entries.length) return -1;
+    const exactIdx = entries.findIndex((e)=>x >= e.rect.left && x <= e.rect.right && y >= e.rect.top && y <= e.rect.bottom);
+    if (-1 !== exactIdx) return exactIdx;
+    const chipHeight = entries[0].rect.height;
+    const lastBefore = entries.reduce((best, entry, i)=>{
+        const cy = (entry.rect.top + entry.rect.bottom) / 2;
+        const cx = (entry.rect.left + entry.rect.right) / 2;
+        const rowAbove = cy + chipHeight / 2 < y;
+        const sameRow = !rowAbove && Math.abs(cy - y) <= chipHeight;
+        if (rowAbove || sameRow && cx <= x) return i;
+        return best;
+    }, -1);
+    return lastBefore >= 0 ? lastBefore : findClosestByDistance(entries, x, y);
+};
+const resolveAnchorChipId = (registry, target, x, y)=>{
+    const hit = [
         ...registry.entries()
-    ].filter(([id])=>id.startsWith(CHIP_ID_PREFIX));
-    return conditions.length > 0 && conditions.every(([, el])=>el.hasAttribute(DRAG_ATTR));
+    ].find(([id, el])=>id.startsWith(CHIP_ID_PREFIX) && el.contains(target));
+    if (hit) return hit[0];
+    const conditions = getVisualEntries(registry).filter((e)=>e.id.startsWith(CHIP_ID_PREFIX));
+    if (0 === conditions.length) return null;
+    const idx = findClosestByDistance(conditions, x, y);
+    return idx >= 0 ? conditions[idx].id : null;
+};
+const updateDragSelection = (all, anchorChipId, currentX, currentY)=>{
+    if (0 === all.length) return false;
+    const conditions = all.filter((e)=>e.id.startsWith(CHIP_ID_PREFIX));
+    if (0 === conditions.length) return false;
+    const anchorIdx = conditions.findIndex((e)=>e.id === anchorChipId);
+    if (-1 === anchorIdx) return false;
+    const endIdx = findByReadingOrder(conditions, currentX, currentY);
+    if (-1 === endIdx) return false;
+    const minIdx = Math.min(anchorIdx, endIdx);
+    const maxIdx = Math.max(anchorIdx, endIdx);
+    const firstAll = conditions[minIdx].allIdx;
+    const lastAll = conditions[maxIdx].allIdx;
+    let found = false;
+    all.forEach((entry, i)=>{
+        const inRange = i >= firstAll && i <= lastAll;
+        if (inRange) {
+            entry.el.setAttribute(DRAG_ATTR, '');
+            found = true;
+        } else entry.el.removeAttribute(DRAG_ATTR);
+    });
+    return found;
 };
-export { areAllConditionsDragged, clearDragAttributes, getSelectedConditionIndices, hasDragSelection, updateDragSelection };
+export { clearDragAttributes, getSelectedConditionIndices, getVisualEntries, hasDragSelection, resolveAnchorChipId, updateDragSelection };

package/dist/components/FilterInput/hooks/useFilterInputSelection/lib/index.d.ts

@@ -1,3 +1,3 @@
 export { CHIP_ID_PREFIX, DRAG_THRESHOLD, PASTE_ERROR_TIMEOUT } from './constants';
-export { areAllConditionsDragged, clearDragAttributes, getSelectedConditionIndices, hasDragSelection, updateDragSelection, } from './dom';
+export { clearDragAttributes, getSelectedConditionIndices, getVisualEntries, hasDragSelection, resolveAnchorChipId, updateDragSelection, } from './dom';
 export { serializeSelectedOrAll } from './serialize';

package/dist/components/FilterInput/hooks/useFilterInputSelection/lib/index.js

@@ -1,4 +1,4 @@
 import { CHIP_ID_PREFIX, DRAG_THRESHOLD, PASTE_ERROR_TIMEOUT } from "./constants.js";
-import { areAllConditionsDragged, clearDragAttributes, getSelectedConditionIndices, hasDragSelection, updateDragSelection } from "./dom.js";
+import { clearDragAttributes, getSelectedConditionIndices, getVisualEntries, hasDragSelection, resolveAnchorChipId, updateDragSelection } from "./dom.js";
 import { serializeSelectedOrAll } from "./serialize.js";
-export { CHIP_ID_PREFIX, DRAG_THRESHOLD, PASTE_ERROR_TIMEOUT, areAllConditionsDragged, clearDragAttributes, getSelectedConditionIndices, hasDragSelection, serializeSelectedOrAll, updateDragSelection };
+export { CHIP_ID_PREFIX, DRAG_THRESHOLD, PASTE_ERROR_TIMEOUT, clearDragAttributes, getSelectedConditionIndices, getVisualEntries, hasDragSelection, resolveAnchorChipId, serializeSelectedOrAll, updateDragSelection };

package/dist/components/FilterInput/hooks/useFilterInputSelection/useDragSelection.d.ts

@@ -2,9 +2,9 @@ import type { MouseEvent, RefObject } from 'react';
 interface UseDragSelectionOptions {
     chipRegistryRef: RefObject<Map<string, HTMLElement>>;
     inputRef: RefObject<HTMLInputElement | null>;
-    onSelectAll: () => void;
+    closeMenu: () => void;
 }
-export declare const useDragSelection: ({ chipRegistryRef, inputRef, onSelectAll, }: UseDragSelectionOptions) => {
+export declare const useDragSelection: ({ chipRegistryRef, inputRef, closeMenu, }: UseDragSelectionOptions) => {
     handleMouseDown: (e: MouseEvent<HTMLDivElement>) => void;
 };
 export {};

package/dist/components/FilterInput/hooks/useFilterInputSelection/useDragSelection.js

@@ -1,33 +1,37 @@
 import { useCallback, useRef } from "react";
-import { DRAG_THRESHOLD, areAllConditionsDragged, clearDragAttributes, updateDragSelection } from "./lib/index.js";
-const useDragSelection = ({ chipRegistryRef, inputRef, onSelectAll })=>{
+import { DRAG_THRESHOLD, getVisualEntries, resolveAnchorChipId, updateDragSelection } from "./lib/index.js";
+const DRAG_IGNORE_SELECTOR = 'input, [role="combobox"]';
+const useDragSelection = ({ chipRegistryRef, inputRef, closeMenu })=>{
     const isDraggingRef = useRef(false);
     const dragStartXRef = useRef(0);
+    const dragStartYRef = useRef(0);
+    const anchorChipIdRef = useRef(null);
+    const visualEntriesRef = useRef([]);
     const handleMouseDown = useCallback((e)=>{
         if (0 !== e.button) return;
         const target = e.target;
-        if (target.closest('input, button, [role="combobox"]')) return;
+        if (target.closest(DRAG_IGNORE_SELECTOR)) return;
         dragStartXRef.current = e.clientX;
+        dragStartYRef.current = e.clientY;
         isDraggingRef.current = false;
+        anchorChipIdRef.current = resolveAnchorChipId(chipRegistryRef.current, target, e.clientX, e.clientY);
+        visualEntriesRef.current = getVisualEntries(chipRegistryRef.current);
         const handleMouseMove = (moveEvent)=>{
-            if (Math.abs(moveEvent.clientX - dragStartXRef.current) < DRAG_THRESHOLD) return;
+            const dx = moveEvent.clientX - dragStartXRef.current;
+            const dy = moveEvent.clientY - dragStartYRef.current;
+            if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
             if (!isDraggingRef.current) {
                 isDraggingRef.current = true;
                 document.body.style.userSelect = 'none';
+                closeMenu();
+                inputRef.current?.blur();
             }
-            const hasSelected = updateDragSelection(chipRegistryRef.current, dragStartXRef.current, moveEvent.clientX);
-            if (hasSelected) inputRef.current?.blur();
+            if (anchorChipIdRef.current) updateDragSelection(visualEntriesRef.current, anchorChipIdRef.current, moveEvent.clientX, moveEvent.clientY);
         };
         const handleMouseUp = ()=>{
             document.removeEventListener('mousemove', handleMouseMove);
             document.removeEventListener('mouseup', handleMouseUp);
             document.body.style.userSelect = '';
-            if (!isDraggingRef.current) return;
-            const registry = chipRegistryRef.current;
-            if (areAllConditionsDragged(registry)) {
-                clearDragAttributes(registry);
-                onSelectAll();
-            }
             isDraggingRef.current = false;
         };
         document.addEventListener('mousemove', handleMouseMove);
@@ -35,7 +39,7 @@ const useDragSelection = ({ chipRegistryRef, inputRef, onSelectAll })=>{
     }, [
         chipRegistryRef,
         inputRef,
-        onSelectAll
+        closeMenu
     ]);
     return {
         handleMouseDown

package/dist/components/FilterInput/hooks/useFilterInputSelection/useFilterInputSelection.d.ts

@@ -4,6 +4,7 @@ interface UseFilterInputSelectionOptions {
     conditions: Condition[];
     connectors: Array<'and' | 'or'>;
     fields: FieldMetadata[];
+    containerRef: RefObject<HTMLDivElement | null>;
     chipRegistryRef: RefObject<Map<string, HTMLElement>>;
     inputRef: RefObject<HTMLInputElement | null>;
     clearAll: () => void;
@@ -11,7 +12,7 @@ interface UseFilterInputSelectionOptions {
     closeMenu: () => void;
     onChange?: (expression: ExprNode | null) => void;
 }
-export declare const useFilterInputSelection: ({ conditions, connectors, fields, chipRegistryRef, inputRef, clearAll, setInputText, closeMenu, onChange, }: UseFilterInputSelectionOptions) => {
+export declare const useFilterInputSelection: ({ conditions, connectors, fields, containerRef, chipRegistryRef, inputRef, clearAll, setInputText, closeMenu, onChange, }: UseFilterInputSelectionOptions) => {
     allSelected: boolean;
     pasteError: string | null;
     clearSelection: () => void;

package/dist/components/FilterInput/hooks/useFilterInputSelection/useFilterInputSelection.js

@@ -1,9 +1,9 @@
-import { useCallback, useState } from "react";
-import { clearDragAttributes } from "./lib/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { clearDragAttributes, hasDragSelection } from "./lib/index.js";
 import { useDragSelection } from "./useDragSelection.js";
 import { useSelectionClipboard } from "./useSelectionClipboard.js";
 import { useSelectionKeyboard } from "./useSelectionKeyboard.js";
-const useFilterInputSelection = ({ conditions, connectors, fields, chipRegistryRef, inputRef, clearAll, setInputText, closeMenu, onChange })=>{
+const useFilterInputSelection = ({ conditions, connectors, fields, containerRef, chipRegistryRef, inputRef, clearAll, setInputText, closeMenu, onChange })=>{
     const [allSelected, setAllSelected] = useState(false);
     const [pasteError, setPasteError] = useState(null);
     const onSelectAll = useCallback(()=>setAllSelected(true), []);
@@ -14,10 +14,25 @@ const useFilterInputSelection = ({ conditions, connectors, fields, chipRegistryR
         chipRegistryRef
     ]);
     const dismissPasteError = useCallback(()=>setPasteError(null), []);
+    const allSelectedRef = useRef(false);
+    allSelectedRef.current = allSelected;
+    useEffect(()=>{
+        const handleClickOutside = (e)=>{
+            if (!containerRef.current?.contains(e.target)) {
+                if (allSelectedRef.current || hasDragSelection(chipRegistryRef.current)) clearSelection();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>document.removeEventListener('mousedown', handleClickOutside);
+    }, [
+        containerRef,
+        chipRegistryRef,
+        clearSelection
+    ]);
     const { handleMouseDown } = useDragSelection({
         chipRegistryRef,
         inputRef,
-        onSelectAll
+        closeMenu
     });
     const { handleKeyDown } = useSelectionKeyboard({
         allSelected,

package/dist/components/FilterInput/lib/parseExpression/tokenizer.js

@@ -67,6 +67,20 @@ const tokenize = (input)=>{
             push('OPERATOR', ch, i);
             continue;
         }
+        if ('"' === ch || "'" === ch) {
+            const quote = ch;
+            const start = i;
+            i++;
+            while(i < input.length && input[i] !== quote)i++;
+            if (i >= input.length) throw FilterParseError(`Unterminated string at position ${start}`);
+            tokens.push({
+                type: 'IDENT',
+                value: input.slice(start + 1, i),
+                pos: start
+            });
+            i++;
+            continue;
+        }
         if (isIdentChar(ch)) {
             const start = i;
             while(i < input.length && isIdentChar(input[i]))i++;

package/dist/components/FilterInput/lib/serializeExpression.js

@@ -1,10 +1,8 @@
+const quoteValue = (v)=>`"${v}"`;
 const serializeValue = (condition)=>{
     if ('is_null' === condition.operator || 'is_not_null' === condition.operator) return '';
-    if (Array.isArray(condition.value)) {
-        const parts = condition.value.map(String);
-        return `[${parts.join(', ')}]`;
-    }
-    return String(condition.value ?? '');
+    if (Array.isArray(condition.value)) return `[${condition.value.map(quoteValue).join(', ')}]`;
+    return quoteValue(condition.value ?? '');
 };
 const serializeCondition = (condition)=>{
     const field = condition.field;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.20.0",
-  "generatedAt": "2026-04-07T08:00:47.141Z",
+  "version": "0.21.0",
+  "generatedAt": "2026-04-08T11:20:13.053Z",
   "components": [
     {
       "name": "Alert",

package/package.json

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