@wallarm-org/design-system 0.20.0 → 0.21.0

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

@@ -1,36 +1,11 @@
 import type { FC, HTMLAttributes } from 'react';
 import type { ExprNode, FieldMetadata } from './types';
 export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
-    /**
-     * Available fields from backend API config
-     */
     fields?: FieldMetadata[];
-    /**
-     * Current filter expression value (controlled mode)
-     */
     value?: ExprNode | null;
-    /**
-     * Callback when filter expression changes
-     */
     onChange?: (expression: ExprNode | null) => void;
-    /**
-     * Placeholder text to display when field is empty
-     * @default "Type to filter..."
-     */
     placeholder?: string;
-    /**
-     * Whether the field has a validation error
-     */
     error?: boolean;
-    /**
-     * Whether to show the keyboard hint (⌘K or Ctrl+K)
-     */
     showKeyboardHint?: boolean;
 }
-/**
- * FilterInput - Self-contained filter component.
- * Handles autocomplete flow (field → operator → value), chip creation, and expression management.
- * Supports multiple conditions joined by AND/OR connectors.
- * Just pass `fields` config from backend API and it works.
- */
 export declare const FilterInput: FC<FilterInputProps>;

package/dist/components/FilterInput/FilterInput.js

@@ -1,16 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { cn } from "../../utils/cn.js";
 import { FilterInputProvider, useFilterInputContextValue } from "./FilterInputContext/index.js";
 import { FilterInputErrors, parseFilterInputErrors } from "./FilterInputErrors/index.js";
 import { FilterInputField } from "./FilterInputField/index.js";
 import { FilterInputMenu } from "./FilterInputMenu/FilterInputMenu.js";
-import { useFilterInputAutocomplete, useFilterInputExpression } from "./hooks/index.js";
+import { useFilterInputAutocomplete, useFilterInputExpression, useFilterInputSelection } from "./hooks/index.js";
 const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const buildingChipRef = useRef(null);
-    const { conditions, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useFilterInputExpression({
+    const chipRegistryRef = useRef(new Map());
+    const registerChipRef = useCallback((id, el)=>{
+        if (el) chipRegistryRef.current.set(id, el);
+        else chipRegistryRef.current.delete(id);
+    }, []);
+    const { conditions, connectors, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useFilterInputExpression({
         fields,
         value,
         onChange,
@@ -29,6 +34,17 @@ const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filt
         buildingChipRef,
         inputRef
     });
+    const { allSelected, pasteError, clearSelection, dismissPasteError, handleMouseDown, handleKeyDown, handleCopy, handlePaste, retryParse } = useFilterInputSelection({
+        conditions,
+        connectors,
+        fields,
+        chipRegistryRef,
+        inputRef,
+        clearAll,
+        setInputText: autocomplete.setInputText,
+        closeMenu: autocomplete.closeAutocompleteMenu,
+        onChange
+    });
     const contextValue = useFilterInputContextValue({
         chips,
         autocomplete,
@@ -36,17 +52,43 @@ const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filt
         inputRef,
         placeholder,
         error,
-        showKeyboardHint
+        showKeyboardHint,
+        registerChipRef
     });
-    const errors = useMemo(()=>parseFilterInputErrors(conditions, fields), [
+    useEffect(()=>{
+        if (pasteError) dismissPasteError();
+    }, [
+        conditions.length
+    ]);
+    useEffect(()=>{
+        if (pasteError) retryParse(autocomplete.inputText);
+    }, [
+        autocomplete.inputText
+    ]);
+    const fieldErrors = useMemo(()=>parseFilterInputErrors(conditions, fields), [
         conditions,
         fields
     ]);
+    const errors = useMemo(()=>pasteError ? [
+            pasteError,
+            ...fieldErrors
+        ] : fieldErrors, [
+        pasteError,
+        fieldErrors
+    ]);
     return /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
-        className: cn('relative flex w-full flex-col gap-4', className),
+        className: cn('group/filter-input relative flex w-full flex-col gap-4', className),
         onFocus: autocomplete.handleFocus,
         onBlur: autocomplete.handleBlur,
+        onClick: allSelected ? clearSelection : void 0,
+        onKeyDown: handleKeyDown,
+        onMouseDown: handleMouseDown,
+        onCopy: handleCopy,
+        onPaste: handlePaste,
+        ...allSelected && {
+            'data-selected-all': ''
+        },
         children: [
             /*#__PURE__*/ jsx(FilterInputProvider, {
                 value: contextValue,

package/dist/components/FilterInput/FilterInputContext/types.d.ts

@@ -37,4 +37,6 @@ export interface FilterInputContextValue {
     menuRef: RefObject<HTMLDivElement | null>;
     /** Close autocomplete menu (used by connector chip to enforce single-dropdown constraint) */
     closeAutocompleteMenu: () => void;
+    /** Register/unregister a chip DOM element for selection tracking */
+    registerChipRef: (id: string, el: HTMLElement | null) => void;
 }

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.d.ts

@@ -34,6 +34,7 @@ interface UseFilterInputContextValueOptions {
     placeholder: string;
     error: boolean;
     showKeyboardHint: boolean;
+    registerChipRef: (id: string, el: HTMLElement | null) => void;
 }
-export declare const useFilterInputContextValue: ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint, }: UseFilterInputContextValueOptions) => FilterInputContextValue;
+export declare const useFilterInputContextValue: ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint, registerChipRef, }: UseFilterInputContextValueOptions) => FilterInputContextValue;
 export {};

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint })=>useMemo(()=>({
+const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint, registerChipRef })=>useMemo(()=>({
             chips,
             buildingChipData: autocomplete.buildingChipData,
             buildingChipRef,
@@ -27,7 +27,8 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onCustomValueCommit: autocomplete.handleCustomValueCommit,
             onCustomAttributeCommit: autocomplete.handleCustomAttributeCommit,
             menuRef: autocomplete.menuRef,
-            closeAutocompleteMenu: autocomplete.closeAutocompleteMenu
+            closeAutocompleteMenu: autocomplete.closeAutocompleteMenu,
+            registerChipRef
         }), [
         chips,
         autocomplete.buildingChipData,
@@ -52,6 +53,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleCustomAttributeCommit,
         autocomplete.menuRef,
         autocomplete.closeAutocompleteMenu,
+        registerChipRef,
         buildingChipRef,
         inputRef,
         placeholder,

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

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 import type { FilterInputChipData } from '../types';
 import type { ChipSegment } from './FilterInputChip';
 interface ChipsWithGapsProps {

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

@@ -1,9 +1,15 @@
 import { Fragment, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useFilterInputContext } from "../FilterInputContext/index.js";
 import { CONNECTOR_ID_PATTERN } from "../lib/index.js";
 import { FilterInputChip } from "./FilterInputChip/FilterInputChip.js";
 import { FilterInputConnectorChip } from "./FilterInputConnectorChip/index.js";
 import { InsertionGap } from "./InsertionGap/index.js";
 const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, onConnectorChange, onChipRemove, onGapClick })=>{
+    const { registerChipRef } = useFilterInputContext();
+    const chipRef = useCallback((id)=>(el)=>registerChipRef(id, el), [
+        registerChipRef
+    ]);
     const elements = [];
     let connectorIndex = 0;
     const connectorCount = chips.filter((c)=>'and' === c.variant || 'or' === c.variant).length;
@@ -11,6 +17,7 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
         const isCondition = 'chip' === chip.variant;
         const isConnector = 'and' === chip.variant || 'or' === chip.variant;
         if (isCondition) elements.push(/*#__PURE__*/ jsx("div", {
+            ref: chipRef(chip.id),
             className: "shrink-0 cursor-pointer hover:z-10",
             children: /*#__PURE__*/ jsx(FilterInputChip, {
                 chipId: chip.id,
@@ -35,6 +42,7 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
                 onClick: ()=>onGapClick(condIdx, false)
             }, `gap-before-${chip.id}`));
             elements.push(/*#__PURE__*/ jsx("div", {
+                ref: chipRef(chip.id),
                 className: "shrink-0",
                 children: /*#__PURE__*/ jsx(FilterInputConnectorChip, {
                     chipId: chip.id,

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

@@ -1,5 +1,7 @@
 import { cva } from "class-variance-authority";
-const chipVariants = cva('h-22 group/chip relative flex items-center justify-center px-5 py-0 border border-solid rounded-8 gap-4', {
+const selectionHighlight = "group-data-[selected-all]/filter-input:bg-bg-light-info group-data-[selected-all]/filter-input:border-border-info [[data-drag-selected]_&]:bg-bg-light-info [[data-drag-selected]_&]:border-border-info";
+const hiddenWhenSelected = "group-data-[selected-all]/filter-input:hidden [[data-drag-selected]_&]:hidden";
+const chipVariants = cva(`h-22 group/chip relative flex items-center justify-center px-5 py-0 border border-solid rounded-8 gap-4 ${selectionHighlight}`, {
     variants: {
         error: {
             true: 'bg-bg-light-danger border-border-danger',
@@ -61,7 +63,7 @@ const segmentTextVariants = cva('truncate text-sm', {
         error: false
     }
 });
-const removeButtonVariants = cva('absolute -right-[13px] top-[-1px] bottom-[-1px] flex items-center justify-center p-0 cursor-pointer w-[18px] border border-solid border-l-0 rounded-r-8 opacity-0 group-hover/chip:opacity-100 focus:opacity-100 transition-opacity', {
+const removeButtonVariants = cva(`absolute -right-[13px] top-[-1px] bottom-[-1px] flex items-center justify-center p-0 cursor-pointer w-[18px] border border-solid border-l-0 rounded-r-8 opacity-0 group-hover/chip:opacity-100 focus:opacity-100 transition-opacity ${hiddenWhenSelected}`, {
     variants: {
         error: {
             true: 'border-border-danger bg-bg-light-danger text-text-danger',

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

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 interface FilterInputSearchProps {
     hasContent: boolean;
-    minWidth?: number;
 }
 export declare const FilterInputSearch: FC<FilterInputSearchProps>;
 export {};

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

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useFilterInputContext } from "../FilterInputContext/index.js";
 import { filterInputInputVariants } from "./classes.js";
-const CHAR_WIDTH_PX = 8;
-const FilterInputSearch = ({ hasContent, minWidth = 4 })=>{
+const CHAR_WIDTH_PX = 10;
+const MIN_INPUT_WIDTH = 20;
+const FilterInputSearch = ({ hasContent })=>{
     const { inputText, inputRef, placeholder, error, menuOpen, onInputChange, onInputKeyDown, onInputClick } = useFilterInputContext();
     return /*#__PURE__*/ jsx("input", {
         ref: inputRef,
@@ -18,7 +19,7 @@ const FilterInputSearch = ({ hasContent, minWidth = 4 })=>{
         onClick: onInputClick,
         placeholder: hasContent ? void 0 : placeholder,
         style: hasContent ? {
-            width: `${Math.max(minWidth, inputText.length * CHAR_WIDTH_PX)}px`
+            width: `${Math.max(MIN_INPUT_WIDTH, (inputText.length + 1) * CHAR_WIDTH_PX)}px`
         } : void 0,
         className: filterInputInputVariants({
             hasContent

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

@@ -41,7 +41,7 @@ const filterInputInnerVariants = cva('flex min-h-[40px] w-full cursor-text flex-
 const filterInputInputVariants = cva('h-24 border-none bg-transparent p-0 text-sm shadow-none outline-none ring-0', {
     variants: {
         hasContent: {
-            true: 'ml-4',
+            true: 'ml-4 shrink-0',
             false: 'flex-1'
         }
     },

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

@@ -97,8 +97,9 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
         inputRef,
         menuRef
     });
+    const hasResults = filteredFields.length > 0 || !filterText;
     return /*#__PURE__*/ jsx(DropdownMenu, {
-        open: open,
+        open: open && hasResults,
         onOpenChange: onOpenChange,
         closeOnSelect: false,
         positioning: positioning,

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

@@ -1,2 +1,3 @@
 export { useFilterInputAutocomplete } from './useFilterInputAutocomplete';
 export { useFilterInputExpression } from './useFilterInputExpression';
+export { useFilterInputSelection } from './useFilterInputSelection';

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

@@ -1,3 +1,4 @@
 import { useFilterInputAutocomplete } from "./useFilterInputAutocomplete/index.js";
 import { useFilterInputExpression } from "./useFilterInputExpression/index.js";
-export { useFilterInputAutocomplete, useFilterInputExpression };
+import { useFilterInputSelection } from "./useFilterInputSelection/index.js";
+export { useFilterInputAutocomplete, useFilterInputExpression, useFilterInputSelection };

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

@@ -69,5 +69,6 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     menuRef: RefObject<HTMLDivElement | null>;
     closeAutocompleteMenu: () => void;
     blurCommitRef: RefObject<(() => boolean) | null>;
+    setInputText: import("react").Dispatch<import("react").SetStateAction<string>>;
 };
 export {};

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

@@ -233,7 +233,8 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         handleCustomAttributeCommit,
         menuRef,
         closeAutocompleteMenu,
-        blurCommitRef
+        blurCommitRef,
+        setInputText
     };
 };
 export { useFilterInputAutocomplete };

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

@@ -0,0 +1 @@
+export { useFilterInputSelection } from './useFilterInputSelection';

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

@@ -0,0 +1,2 @@
+import { useFilterInputSelection } from "./useFilterInputSelection.js";
+export { useFilterInputSelection };

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

@@ -0,0 +1,3 @@
+export declare const PASTE_ERROR_TIMEOUT = 5000;
+export declare const DRAG_THRESHOLD = 4;
+export declare const CHIP_ID_PREFIX = "chip-";

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

@@ -0,0 +1,4 @@
+const PASTE_ERROR_TIMEOUT = 5000;
+const DRAG_THRESHOLD = 4;
+const CHIP_ID_PREFIX = 'chip-';
+export { CHIP_ID_PREFIX, DRAG_THRESHOLD, PASTE_ERROR_TIMEOUT };

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

@@ -0,0 +1,8 @@
+export declare const clearDragAttributes: (chips: Map<string, HTMLElement>) => void;
+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;

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

@@ -0,0 +1,34 @@
+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()
+    ].forEach((chip)=>chip.removeAttribute(DRAG_ATTR));
+};
+const hasDragSelection = (chips)=>[
+        ...chips.values()
+    ].some((chip)=>chip.hasAttribute(DRAG_ATTR));
+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 = [
+        ...registry.entries()
+    ].filter(([id])=>id.startsWith(CHIP_ID_PREFIX));
+    return conditions.length > 0 && conditions.every(([, el])=>el.hasAttribute(DRAG_ATTR));
+};
+export { areAllConditionsDragged, clearDragAttributes, getSelectedConditionIndices, hasDragSelection, updateDragSelection };

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

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

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

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

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

@@ -0,0 +1,3 @@
+import type { Condition } from '../../../types';
+/** Serialize selected (drag) or all conditions into a text string */
+export declare const serializeSelectedOrAll: (conditions: Condition[], connectors: Array<"and" | "or">, chipRegistry: Map<string, HTMLElement>) => string;

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

@@ -0,0 +1,15 @@
+import { serializeExpression } from "../../../lib/index.js";
+import { buildExpression } from "../../useFilterInputExpression/expression.js";
+import { getSelectedConditionIndices } from "./dom.js";
+const serializeSelectedOrAll = (conditions, connectors, chipRegistry)=>{
+    const selectedIndices = getSelectedConditionIndices(chipRegistry);
+    if (selectedIndices.length > 0) {
+        const selected = selectedIndices.flatMap((i)=>conditions[i] ? [
+                conditions[i]
+            ] : []);
+        const selectedConnectors = selectedIndices.slice(1).map((_, i)=>connectors[selectedIndices[i]] ?? 'and');
+        return serializeExpression(buildExpression(selected, selectedConnectors));
+    }
+    return serializeExpression(buildExpression(conditions, connectors));
+};
+export { serializeSelectedOrAll };

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

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

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

@@ -0,0 +1,44 @@
+import { useCallback, useRef } from "react";
+import { DRAG_THRESHOLD, areAllConditionsDragged, clearDragAttributes, updateDragSelection } from "./lib/index.js";
+const useDragSelection = ({ chipRegistryRef, inputRef, onSelectAll })=>{
+    const isDraggingRef = useRef(false);
+    const dragStartXRef = useRef(0);
+    const handleMouseDown = useCallback((e)=>{
+        if (0 !== e.button) return;
+        const target = e.target;
+        if (target.closest('input, button, [role="combobox"]')) return;
+        dragStartXRef.current = e.clientX;
+        isDraggingRef.current = false;
+        const handleMouseMove = (moveEvent)=>{
+            if (Math.abs(moveEvent.clientX - dragStartXRef.current) < DRAG_THRESHOLD) return;
+            if (!isDraggingRef.current) {
+                isDraggingRef.current = true;
+                document.body.style.userSelect = 'none';
+            }
+            const hasSelected = updateDragSelection(chipRegistryRef.current, dragStartXRef.current, moveEvent.clientX);
+            if (hasSelected) inputRef.current?.blur();
+        };
+        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);
+        document.addEventListener('mouseup', handleMouseUp);
+    }, [
+        chipRegistryRef,
+        inputRef,
+        onSelectAll
+    ]);
+    return {
+        handleMouseDown
+    };
+};
+export { useDragSelection };

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

@@ -0,0 +1,25 @@
+import type { RefObject } from 'react';
+import type { Condition, ExprNode, FieldMetadata } from '../../types';
+interface UseFilterInputSelectionOptions {
+    conditions: Condition[];
+    connectors: Array<'and' | 'or'>;
+    fields: FieldMetadata[];
+    chipRegistryRef: RefObject<Map<string, HTMLElement>>;
+    inputRef: RefObject<HTMLInputElement | null>;
+    clearAll: () => void;
+    setInputText: (text: string) => void;
+    closeMenu: () => void;
+    onChange?: (expression: ExprNode | null) => void;
+}
+export declare const useFilterInputSelection: ({ conditions, connectors, fields, chipRegistryRef, inputRef, clearAll, setInputText, closeMenu, onChange, }: UseFilterInputSelectionOptions) => {
+    allSelected: boolean;
+    pasteError: string | null;
+    clearSelection: () => void;
+    dismissPasteError: () => void;
+    handleMouseDown: (e: import("react").MouseEvent<HTMLDivElement>) => void;
+    handleKeyDown: (e: import("react").KeyboardEvent<HTMLDivElement>) => void;
+    handleCopy: (e: import("react").ClipboardEvent<HTMLDivElement>) => void;
+    handlePaste: (e: import("react").ClipboardEvent<HTMLDivElement>) => void;
+    retryParse: (text: string) => void;
+};
+export {};

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

@@ -0,0 +1,54 @@
+import { useCallback, useState } from "react";
+import { clearDragAttributes } 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 [allSelected, setAllSelected] = useState(false);
+    const [pasteError, setPasteError] = useState(null);
+    const onSelectAll = useCallback(()=>setAllSelected(true), []);
+    const clearSelection = useCallback(()=>{
+        setAllSelected(false);
+        clearDragAttributes(chipRegistryRef.current);
+    }, [
+        chipRegistryRef
+    ]);
+    const dismissPasteError = useCallback(()=>setPasteError(null), []);
+    const { handleMouseDown } = useDragSelection({
+        chipRegistryRef,
+        inputRef,
+        onSelectAll
+    });
+    const { handleKeyDown } = useSelectionKeyboard({
+        allSelected,
+        conditionsCount: conditions.length,
+        chipRegistryRef,
+        inputRef,
+        clearAll,
+        clearSelection,
+        onSelectAll
+    });
+    const { handleCopy, handlePaste, retryParse } = useSelectionClipboard({
+        conditions,
+        connectors,
+        fields,
+        chipRegistryRef,
+        clearSelection,
+        setPasteError,
+        setInputText,
+        closeMenu,
+        onChange
+    });
+    return {
+        allSelected,
+        pasteError,
+        clearSelection,
+        dismissPasteError,
+        handleMouseDown,
+        handleKeyDown,
+        handleCopy,
+        handlePaste,
+        retryParse
+    };
+};
+export { useFilterInputSelection };

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

@@ -0,0 +1,19 @@
+import type { ClipboardEvent, RefObject } from 'react';
+import type { Condition, ExprNode, FieldMetadata } from '../../types';
+interface UseSelectionClipboardOptions {
+    conditions: Condition[];
+    connectors: Array<'and' | 'or'>;
+    fields: FieldMetadata[];
+    chipRegistryRef: RefObject<Map<string, HTMLElement>>;
+    clearSelection: () => void;
+    setPasteError: (error: string | null) => void;
+    setInputText: (text: string) => void;
+    closeMenu: () => void;
+    onChange?: (expression: ExprNode | null) => void;
+}
+export declare const useSelectionClipboard: ({ conditions, connectors, fields, chipRegistryRef, clearSelection, setPasteError, setInputText, closeMenu, onChange, }: UseSelectionClipboardOptions) => {
+    handleCopy: (e: ClipboardEvent<HTMLDivElement>) => void;
+    handlePaste: (e: ClipboardEvent<HTMLDivElement>) => void;
+    retryParse: (text: string) => void;
+};
+export {};