@wallarm-org/design-system 0.82.0 → 0.84.0

package/dist/components/Button/Button.d.ts

@@ -4,7 +4,7 @@ import type { TestableProps } from '../../utils/testId';
 import { type ButtonBaseProps } from '../ButtonBase';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "outline" | "ghost" | null | undefined;
-    color?: "neutral" | "destructive" | "brand" | "neutral-alt" | null | undefined;
+    color?: "destructive" | "brand" | "neutral" | "neutral-alt" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 export type ButtonProps<C extends ElementType = 'button'> = ButtonBaseProps<C> & ButtonVariantProps & TestableProps;

package/dist/components/Code/Code.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const codeVariants: (props?: ({
     size?: "s" | "xs" | "m" | "l" | null | undefined;
-    weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
+    weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
     color?: "primary" | "secondary" | "destructive" | "primary-alt" | null | undefined;
     italic?: boolean | null | undefined;
     truncate?: boolean | null | undefined;

package/dist/components/DropdownMenu/DropdownMenuLabel.js

@@ -2,12 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { dropdownMenuLabelVariants } from "./classes.js";
-const DropdownMenuLabel = ({ className, inset, ...props })=>{
+const DropdownMenuLabel = ({ className, inset, sticky, ...props })=>{
     const testId = useTestId('label');
     return /*#__PURE__*/ jsx("div", {
         "data-testid": testId,
         className: cn(dropdownMenuLabelVariants({
-            inset
+            inset,
+            sticky
         }), className),
         ...props
     });

package/dist/components/DropdownMenu/classes.d.ts

@@ -6,4 +6,5 @@ export declare const dropdownMenuItemVariants: (props?: ({
 export declare const dropdownMenuItemIndicatorClassName: string;
 export declare const dropdownMenuLabelVariants: (props?: ({
     inset?: boolean | null | undefined;
+    sticky?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/DropdownMenu/classes.js

@@ -23,6 +23,9 @@ const dropdownMenuLabelVariants = cva('flex justify-between gap-8 px-8 pt-8 pb-2
     variants: {
         inset: {
             true: 'pl-32'
+        },
+        sticky: {
+            true: 'sticky top-0 z-10 bg-bg-surface-2'
         }
     }
 });

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

@@ -83,6 +83,7 @@ const FilterInputConnectorChip = ({ chipId, variant, onChange, className })=>{
                         ]
                     }),
                     /*#__PURE__*/ jsxs(DropdownMenuFooter, {
+                        className: "justify-start",
                         children: [
                             /*#__PURE__*/ jsxs("span", {
                                 className: "flex items-center gap-4",

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

@@ -5,40 +5,46 @@ import { CircleSlash } from "../../../../icons/CircleSlash.js";
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator } from "../../../DropdownMenu/index.js";
 const RecentSection = ({ conditions, fields, onSelect, registerItem })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(DropdownMenuLabel, {
-                children: "Recent"
-            }),
-            /*#__PURE__*/ jsx(DropdownMenuGroup, {
-                children: conditions.map((condition, index)=>{
-                    const fieldMeta = fields.find((f)=>f.name === condition.field);
-                    const attribute = fieldMeta?.label || condition.field;
-                    const operator = String(condition.operator);
-                    const value = String(condition.value);
-                    return /*#__PURE__*/ jsx(DropdownMenuItem, {
-                        value: `recent-${index}`,
-                        ref: registerItem(`recent-${index}`),
-                        onSelect: ()=>{
-                            if (fieldMeta) onSelect(fieldMeta);
-                        },
-                        children: /*#__PURE__*/ jsxs("span", {
-                            className: "flex gap-2 items-center text-sm",
-                            children: [
-                                /*#__PURE__*/ jsx("span", {
-                                    className: "text-text-primary",
-                                    children: attribute
-                                }),
-                                /*#__PURE__*/ jsx("span", {
-                                    className: "text-text-secondary",
-                                    children: operator
-                                }),
-                                /*#__PURE__*/ jsx("span", {
-                                    className: "font-medium text-text-info",
-                                    children: value
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                        sticky: true,
+                        children: "Recent"
+                    }),
+                    /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                        children: conditions.map((condition, index)=>{
+                            const fieldMeta = fields.find((f)=>f.name === condition.field);
+                            const attribute = fieldMeta?.label || condition.field;
+                            const operator = String(condition.operator);
+                            const value = String(condition.value);
+                            return /*#__PURE__*/ jsx(DropdownMenuItem, {
+                                value: `recent-${index}`,
+                                ref: registerItem(`recent-${index}`),
+                                onSelect: ()=>{
+                                    if (fieldMeta) onSelect(fieldMeta);
+                                },
+                                children: /*#__PURE__*/ jsxs("span", {
+                                    className: "flex gap-2 items-center text-sm",
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-text-primary",
+                                            children: attribute
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-text-secondary",
+                                            children: operator
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "font-medium text-text-info",
+                                            children: value
+                                        })
+                                    ]
                                 })
-                            ]
+                            }, `recent-${index}`);
                         })
-                    }, `recent-${index}`);
-                })
+                    })
+                ]
             }),
             /*#__PURE__*/ jsx(DropdownMenuSeparator, {})
         ]
@@ -46,32 +52,38 @@ const RecentSection = ({ conditions, fields, onSelect, registerItem })=>/*#__PUR
 RecentSection.displayName = 'RecentSection';
 const SuggestionsSection = ({ fields, onSelect, registerItem })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(DropdownMenuLabel, {
-                children: "Suggestions"
-            }),
-            /*#__PURE__*/ jsx(DropdownMenuGroup, {
-                children: fields.map((field, index)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
-                        value: `suggested-${index}`,
-                        ref: registerItem(`suggested-${index}`),
-                        onSelect: ()=>onSelect(field),
-                        children: /*#__PURE__*/ jsxs("span", {
-                            className: "flex gap-2 items-center text-sm",
-                            children: [
-                                /*#__PURE__*/ jsx("span", {
-                                    className: "text-text-primary",
-                                    children: field.label
-                                }),
-                                /*#__PURE__*/ jsx("span", {
-                                    className: "text-text-secondary",
-                                    children: "operator"
-                                }),
-                                /*#__PURE__*/ jsx("span", {
-                                    className: "font-medium text-text-info",
-                                    children: "Value"
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col gap-1",
+                children: [
+                    /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                        sticky: true,
+                        children: "Suggestions"
+                    }),
+                    /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                        children: fields.map((field, index)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
+                                value: `suggested-${index}`,
+                                ref: registerItem(`suggested-${index}`),
+                                onSelect: ()=>onSelect(field),
+                                children: /*#__PURE__*/ jsxs("span", {
+                                    className: "flex gap-2 items-center text-sm",
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-text-primary",
+                                            children: field.label
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-text-secondary",
+                                            children: "operator"
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "font-medium text-text-info",
+                                            children: "Value"
+                                        })
+                                    ]
                                 })
-                            ]
-                        })
-                    }, `suggested-${index}`))
+                            }, `suggested-${index}`))
+                    })
+                ]
             }),
             /*#__PURE__*/ jsx(DropdownMenuSeparator, {})
         ]
@@ -110,24 +122,34 @@ const OperatorsSection = ({ onSelectAnd, onSelectOr, registerItem })=>/*#__PURE_
     });
 OperatorsSection.displayName = 'OperatorsSection';
 const FieldSections = ({ sections, onSelect, registerItem })=>/*#__PURE__*/ jsx(Fragment, {
-        children: sections.map((section, index)=>/*#__PURE__*/ jsxs(external_react_Fragment, {
+        children: sections.map((section, index)=>{
+            const group = /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                children: section.fields.map((field)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
+                        value: `field-${field.name}`,
+                        ref: registerItem(`field-${field.name}`),
+                        onSelect: ()=>onSelect(field),
+                        className: "scroll-mt-32",
+                        children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
+                            children: field.label
+                        })
+                    }, field.name))
+            });
+            return /*#__PURE__*/ jsxs(external_react_Fragment, {
                 children: [
                     index > 0 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
-                    section.label && /*#__PURE__*/ jsx(DropdownMenuLabel, {
-                        children: section.label
-                    }),
-                    /*#__PURE__*/ jsx(DropdownMenuGroup, {
-                        children: section.fields.map((field)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
-                                value: `field-${field.name}`,
-                                ref: registerItem(`field-${field.name}`),
-                                onSelect: ()=>onSelect(field),
-                                children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
-                                    children: field.label
-                                })
-                            }, field.name))
-                    })
+                    section.label ? /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-col gap-1",
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                                sticky: true,
+                                children: section.label
+                            }),
+                            group
+                        ]
+                    }) : group
                 ]
-            }, `${section.label ?? 'ungrouped'}-${index}`))
+            }, `${section.label ?? 'ungrouped'}-${index}`);
+        })
     });
 FieldSections.displayName = 'FieldSections';
 export { FieldSections, OperatorsSection, RecentSection, SuggestionsSection };

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

@@ -84,6 +84,7 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
                     registerItem: registerItem
                 }),
                 /*#__PURE__*/ jsxs(DropdownMenuFooter, {
+                    className: "justify-start",
                     children: [
                         /*#__PURE__*/ jsxs("span", {
                             className: "flex items-center gap-4",

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

@@ -83,6 +83,7 @@ const FilterInputOperatorMenu = ({ fieldType, operators, onSelect, open = false,
                         ]
                     }, `group-${groupIdx}`)) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
                 /*#__PURE__*/ jsx(DropdownMenuFooter, {
+                    className: "justify-start",
                     children: /*#__PURE__*/ jsxs("span", {
                         className: "flex items-center gap-4",
                         children: [

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

@@ -55,6 +55,7 @@ const FlatValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange,
             "data-filter-input-menu": "true",
             children: [
                 displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                    className: "flex flex-col gap-1",
                     children: displayValues.map((option)=>/*#__PURE__*/ jsx(ValueMenuItem, {
                             option: option,
                             isChecked: selectedValues.some((v)=>String(v) === String(option.value)),
@@ -69,6 +70,7 @@ const FlatValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange,
                         }, String(option.value)))
                 }) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
                 /*#__PURE__*/ jsx(DropdownMenuFooter, {
+                    className: "justify-start",
                     children: /*#__PURE__*/ jsx(ValueMenuFooterHints, {
                         multiSelect: multiSelect
                     })

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

@@ -1,8 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as external_react_Fragment, useMemo, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "../../../DropdownMenu/index.js";
-import { Text } from "../../../Text/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator } from "../../../DropdownMenu/index.js";
 import { buildValueMenuSections } from "../../lib/buildValueMenuSections.js";
 import { MenuEmptyState } from "../MenuEmptyState.js";
 import { NestedValueMenuItem } from "./NestedValueMenuItem.js";
@@ -11,9 +10,10 @@ import { ValueMenuFooterHints } from "./ValueMenuFooterHints.js";
 const NestedValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChange, onEscape, multiSelect = false, initialValues = [], width = 'standard', positioning, onBuildingValueChange, onItemToggle, inputRef, filterText = '', menuRef, blurCommitRef, className })=>{
     const submenuRef = useRef(null);
     const rowElsRef = useRef(new Map());
-    const sections = useMemo(()=>buildValueMenuSections(values, filterText), [
+    const sections = useMemo(()=>buildValueMenuSections(values, filterText, multiSelect), [
         values,
-        filterText
+        filterText,
+        multiSelect
     ]);
     const state = useNestedValueMenuState({
         sections,
@@ -43,13 +43,21 @@ const NestedValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChang
         };
     const submenuPositioning = useMemo(()=>({
             placement: 'right-start',
-            gutter: 8,
+            gutter: 4,
             getAnchorRect: ()=>state.openParentId && rowElsRef.current.get(state.openParentId)?.getBoundingClientRect() || null
         }), [
         state.openParentId
     ]);
     const openParentRow = state.openParentRow;
-    const allChecked = openParentRow ? state.allLeavesChecked(openParentRow.option) : false;
+    const submenuSelectAllRow = openParentRow && multiSelect ? {
+        id: SELECT_ALL_ID,
+        option: {
+            label: `All ${openParentRow.option.label}`,
+            children: openParentRow.option.children ?? []
+        },
+        isGroup: true,
+        isSelectAll: true
+    } : null;
     const hasRows = sections.some((section)=>section.rows.length > 0);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -65,31 +73,48 @@ const NestedValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChang
                     className: cn(widthClass, 'max-h-[430px]', className),
                     style: widthStyle,
                     "data-filter-input-menu": "true",
+                    onMouseMove: state.handleMainMouseMove,
                     children: [
-                        hasRows ? sections.map((section, index)=>/*#__PURE__*/ jsxs(external_react_Fragment, {
+                        hasRows ? sections.map((section, index)=>{
+                            const rows = /*#__PURE__*/ jsx(DropdownMenuGroup, {
+                                className: "flex flex-col gap-1",
+                                children: section.rows.map((row)=>{
+                                    const isParent = row.isGroup && !row.isSelectAll;
+                                    return /*#__PURE__*/ jsx(NestedValueMenuItem, {
+                                        id: row.id,
+                                        option: row.option,
+                                        isGroup: isParent,
+                                        checkedState: state.getRowCheckState(row),
+                                        isPending: state.topPendingIds.has(row.id),
+                                        multiSelect: multiSelect,
+                                        onSelect: ()=>state.selectRow(row, false),
+                                        onMouseEnter: isParent ? ()=>state.openParent(row.id) : void 0,
+                                        onMouseLeave: isParent ? ()=>state.scheduleClose() : void 0,
+                                        registerRef: setRowRef(row.id),
+                                        expanded: state.openParentId === row.id,
+                                        selectAll: row.isSelectAll,
+                                        highlight: filterText
+                                    }, row.id);
+                                })
+                            });
+                            return /*#__PURE__*/ jsxs(external_react_Fragment, {
                                 children: [
                                     index > 0 && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
-                                    section.label && /*#__PURE__*/ jsx(DropdownMenuLabel, {
-                                        children: section.label
-                                    }),
-                                    /*#__PURE__*/ jsx(DropdownMenuGroup, {
-                                        children: section.rows.map((row)=>/*#__PURE__*/ jsx(NestedValueMenuItem, {
-                                                id: row.id,
-                                                option: row.option,
-                                                isGroup: row.isGroup,
-                                                checkedState: state.getRowCheckState(row),
-                                                isPending: state.topPendingIds.has(row.id),
-                                                multiSelect: multiSelect,
-                                                onSelect: ()=>state.selectRow(row, false),
-                                                onMouseEnter: row.isGroup ? ()=>state.openParent(row.id) : void 0,
-                                                onMouseLeave: row.isGroup ? ()=>state.scheduleClose() : void 0,
-                                                registerRef: setRowRef(row.id),
-                                                expanded: state.openParentId === row.id
-                                            }, row.id))
-                                    })
+                                    section.label ? /*#__PURE__*/ jsxs("div", {
+                                        className: "flex flex-col gap-1",
+                                        children: [
+                                            /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                                                sticky: true,
+                                                children: section.label
+                                            }),
+                                            rows
+                                        ]
+                                    }) : rows
                                 ]
-                            }, section.label ?? `section-${index}`)) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
+                            }, section.label ?? `section-${index}`);
+                        }) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
                         /*#__PURE__*/ jsx(DropdownMenuFooter, {
+                            className: "justify-start",
                             children: /*#__PURE__*/ jsx(ValueMenuFooterHints, {
                                 multiSelect: multiSelect
                             })
@@ -111,19 +136,20 @@ const NestedValueMenu = ({ values, onSelect, onCommit, open = false, onOpenChang
                     onMouseEnter: state.cancelClose,
                     onMouseLeave: state.scheduleClose,
                     children: /*#__PURE__*/ jsxs(DropdownMenuGroup, {
+                        className: "flex flex-col gap-1",
                         children: [
-                            /*#__PURE__*/ jsx(DropdownMenuItem, {
-                                value: SELECT_ALL_ID,
-                                ref: state.registerSubmenuItem(SELECT_ALL_ID),
+                            submenuSelectAllRow && /*#__PURE__*/ jsx(NestedValueMenuItem, {
+                                id: SELECT_ALL_ID,
+                                option: submenuSelectAllRow.option,
+                                isGroup: false,
+                                checkedState: state.getRowCheckState(submenuSelectAllRow),
+                                isPending: state.submenuPendingIds.has(SELECT_ALL_ID),
+                                multiSelect: multiSelect,
                                 onSelect: ()=>state.toggleGroup(openParentRow.option),
-                                className: state.submenuPendingIds.has(SELECT_ALL_ID) ? 'bg-states-primary-hover' : void 0,
-                                children: /*#__PURE__*/ jsx(Text, {
-                                    size: "sm",
-                                    color: "secondary",
-                                    children: allChecked ? 'Unselect all' : 'Select all'
-                                })
+                                registerRef: state.registerSubmenuItem(SELECT_ALL_ID),
+                                selectAll: true
                             }),
-                            /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                            submenuSelectAllRow && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
                             state.submenuRows.map((row)=>/*#__PURE__*/ jsx(NestedValueMenuItem, {
                                     id: row.id,
                                     option: row.option,

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/NestedValueMenuItem.d.ts

@@ -15,12 +15,20 @@ interface NestedValueMenuItemProps {
     registerRef?: (el: HTMLElement | null) => void;
     /** For group rows: whether its submenu is currently open. */
     expanded?: boolean;
+    /**
+     * True for the synthetic "All {group}" bulk-select row: its label renders in a
+     * medium weight to read as a section-level control rather than a plain option.
+     */
+    selectAll?: boolean;
+    /** Active search query — its matched substring is emphasized in flat search. */
+    highlight?: string;
 }
 /**
- * A single row in the nested value menu — a committable leaf or a group
- * (parent category). Both render a (tri-state, for groups) checkbox; a group's
- * submenu opens on hover. No chevron: selection and bulk-selection are driven
- * entirely by the checkbox.
+ * A single row in the nested value menu — a committable leaf, a group (parent
+ * category), or the "All {group}" bulk-select row. Parent categories show a
+ * right-side chevron and open a submenu on hover; a checked row is highlighted
+ * with a persistent background. Selection is driven by the (tri-state, for
+ * groups) checkbox.
  */
 export declare const NestedValueMenuItem: FC<NestedValueMenuItemProps>;
 export {};

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

@@ -1,15 +1,48 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "../../../../icons/ChevronRight.js";
+import { cn } from "../../../../utils/cn.js";
 import { Badge } from "../../../Badge/index.js";
 import { Checkmark } from "../../../Checkmark/index.js";
 import { DropdownMenuItem } from "../../../DropdownMenu/index.js";
 import { Text } from "../../../Text/index.js";
-const NestedValueMenuItem = ({ id, option, isGroup, checkedState, isPending, multiSelect, onSelect, onMouseEnter, onMouseLeave, registerRef, expanded })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+const highlightMatch = (text, query)=>{
+    const q = query?.trim().toLowerCase();
+    if (!q) return text;
+    const lower = text.toLowerCase();
+    const parts = [];
+    let cursor = 0;
+    let key = 0;
+    while(cursor < text.length){
+        const at = lower.indexOf(q, cursor);
+        if (-1 === at) {
+            parts.push(/*#__PURE__*/ jsx("span", {
+                children: text.slice(cursor)
+            }, key++));
+            break;
+        }
+        if (at > cursor) parts.push(/*#__PURE__*/ jsx("span", {
+            children: text.slice(cursor, at)
+        }, key++));
+        parts.push(/*#__PURE__*/ jsx("mark", {
+            className: "bg-transparent font-medium text-text-brand",
+            children: text.slice(at, at + q.length)
+        }, key++));
+        cursor = at + q.length;
+    }
+    return parts;
+};
+const NestedValueMenuItem = ({ id, option, isGroup, checkedState, isPending, multiSelect, onSelect, onMouseEnter, onMouseLeave, registerRef, expanded, selectAll, highlight })=>{
+    const isChecked = true === checkedState;
+    const checkmark = multiSelect || !isGroup && checkedState ? /*#__PURE__*/ jsx(Checkmark, {
+        checkedState: multiSelect ? checkedState : true
+    }) : null;
+    return /*#__PURE__*/ jsxs(DropdownMenuItem, {
         value: id,
         ref: registerRef,
         onSelect: onSelect,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
-        className: isPending ? 'bg-states-primary-hover' : void 0,
+        className: cn('scroll-mt-32', isChecked && 'bg-states-primary-active', isPending && 'bg-states-primary-hover'),
         "aria-checked": multiSelect ? 'indeterminate' === checkedState ? 'mixed' : !!checkedState : void 0,
         ...isGroup && {
             'aria-haspopup': 'menu',
@@ -26,29 +59,30 @@ const NestedValueMenuItem = ({ id, option, isGroup, checkedState, isPending, mul
                 children: [
                     /*#__PURE__*/ jsx(Text, {
                         size: "sm",
+                        weight: selectAll ? 'medium' : 'regular',
                         truncate: true,
-                        children: option.label
+                        children: highlightMatch(option.label, highlight)
                     }),
                     option.description && /*#__PURE__*/ jsx(Text, {
                         size: "xs",
                         color: "secondary",
                         truncate: true,
-                        children: option.description
+                        children: highlightMatch(option.description, highlight)
                     })
                 ]
             }),
-            multiSelect ? /*#__PURE__*/ jsx("div", {
-                className: "flex shrink-0 items-start justify-end py-2 ml-auto",
-                children: /*#__PURE__*/ jsx(Checkmark, {
-                    checkedState: checkedState
-                })
-            }) : !isGroup && checkedState ? /*#__PURE__*/ jsx("div", {
-                className: "flex shrink-0 items-start justify-end py-2 ml-auto",
-                children: /*#__PURE__*/ jsx(Checkmark, {
-                    checkedState: true
-                })
-            }) : null
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex shrink-0 items-center justify-end gap-8 ml-auto",
+                children: [
+                    isGroup && /*#__PURE__*/ jsx("span", {
+                        className: "flex text-text-secondary",
+                        children: /*#__PURE__*/ jsx(ChevronRight, {})
+                    }),
+                    checkmark
+                ]
+            })
         ]
     });
+};
 NestedValueMenuItem.displayName = 'NestedValueMenuItem';
 export { NestedValueMenuItem };

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

@@ -32,12 +32,12 @@ const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect, re
                 ]
             }),
             multiSelect ? /*#__PURE__*/ jsx("div", {
-                className: "flex shrink-0 items-start justify-end py-2 ml-auto",
+                className: "flex shrink-0 items-start justify-end ml-auto",
                 children: /*#__PURE__*/ jsx(Checkmark, {
                     checkedState: isChecked
                 })
             }) : isChecked ? /*#__PURE__*/ jsx("div", {
-                className: "flex shrink-0 items-start justify-end py-2 ml-auto",
+                className: "flex shrink-0 items-start justify-end ml-auto",
                 children: /*#__PURE__*/ jsx(Checkmark, {
                     checkedState: true
                 })

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useNestedValueMenuState.d.ts

@@ -41,6 +41,10 @@ export declare const useNestedValueMenuState: ({ sections, allValues, open, mult
     closeParent: () => void;
     cancelClose: () => void;
     scheduleClose: () => void;
+    handleMainMouseMove: (event: {
+        clientX: number;
+        clientY: number;
+    }) => void;
     openParentRow: ValueMenuRow | undefined;
     submenuRows: ValueMenuRow[];
     selectRow: (row: ValueMenuRow, fromSubmenu: boolean) => void;