@wallarm-org/design-system 0.29.0 → 0.29.1-rc-feature-AS-882.1

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

@@ -51,6 +51,7 @@ const FilterInputDateValueMenu = ({ open, onSelect, onRangeSelect, onOpenChange,
         children: /*#__PURE__*/ jsx(DropdownMenuContent, {
             ref: menuRef,
             className: cn('w-fit', className),
+            "data-filter-input-menu": "",
             onKeyDown: (e)=>{
                 if ('Escape' === e.key) {
                     e.preventDefault();

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

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

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

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

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

@@ -54,6 +54,7 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
             ref: menuRef,
             className: cn(widthClass, 'max-h-[430px]', className),
             style: widthStyle,
+            "data-filter-input-menu": "",
             children: [
                 displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
                     children: displayValues.map((option)=>/*#__PURE__*/ jsx(ValueMenuItem, {

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

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
-import { applyAcceptChar, chipIdToConditionIndex } from "../../lib/index.js";
+import { applyAcceptChar, chipIdToConditionIndex, isMenuRelated } from "../../lib/index.js";
 import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
 import { useChipEditing } from "./useChipEditing.js";
 import { useFocusManagement } from "./useFocusManagement.js";
@@ -61,11 +61,14 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
             flushSync(doReset);
             setMenuState('field');
         } else doReset();
-        inputRef.current?.focus();
+        const active = document.activeElement;
+        const stayedInside = !active || active === document.body || containerRef.current?.contains(active) || isMenuRelated(active);
+        if (stayedInside) inputRef.current?.focus();
     }, [
         editing,
         dateRange,
         inputRef,
+        containerRef,
         resetMenuOffset
     ]);
     const selectedFieldRef = useRef(selectedField);

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

@@ -14,12 +14,15 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         setIsFocused(false);
         const committed = blurCommitRef.current?.() || commitBuildingOnBlur();
         if (!committed) resetState();
+        related?.focus();
+        if (document.activeElement === inputRef.current) inputRef.current?.blur();
     }, [
         containerRef,
         blurCommitRef,
         commitBuildingOnBlur,
         resetState,
-        setIsFocused
+        setIsFocused,
+        inputRef
     ]);
     const prevFocusedRef = useRef(false);
     useEffect(()=>{
@@ -37,12 +40,17 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
     ]);
     useEffect(()=>{
         if ('closed' === menuState) return;
+        if (!isFocused) return;
         let outerRaf = 0;
         let innerRaf = 0;
         outerRaf = requestAnimationFrame(()=>{
             innerRaf = requestAnimationFrame(()=>{
+                const container = containerRef.current;
+                if (!container) return;
+                const active = document.activeElement;
+                if (active && !container.contains(active) && !isMenuRelated(active)) return;
                 if (editingSegment) {
-                    const segmentInput = containerRef.current?.querySelector(`[data-slot="segment-${editingSegment}"] input`);
+                    const segmentInput = container.querySelector(`[data-slot="segment-${editingSegment}"] input`);
                     if (segmentInput && document.activeElement !== segmentInput) {
                         segmentInput.focus();
                         segmentInput.select();
@@ -56,6 +64,7 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         };
     }, [
         menuState,
+        isFocused,
         inputRef,
         editingSegment,
         containerRef

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

@@ -1,4 +1,12 @@
-/** Check if an element belongs to a menu/portal overlay (dropdown, date-picker, etc.) */
+/**
+ * Check if an element belongs to a FilterInput-owned menu/portal overlay.
+ *
+ * Menus are marked with `data-filter-input-menu` on their `DropdownMenuContent`
+ * root. Generic Ark UI selectors (`[role="menu"]`, `[data-part="content"]`,
+ * `[data-scope="date-picker"]`) intentionally DO NOT match — otherwise blur
+ * handlers mistake unrelated page popups (tenant switcher, other dropdowns)
+ * for FilterInput's own menu and refuse to close. See AS-882.
+ */
 export declare const isMenuRelated: (el: HTMLElement | null) => boolean;
 /**
  * Build a DOMRect-compatible object anchored vertically to the container

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

@@ -1,4 +1,4 @@
-const isMenuRelated = (el)=>!!(el?.closest('[role="menu"]') || el?.closest('[data-scope="menu"]') || el?.closest('[data-scope="date-picker"]') || el?.closest('[data-part="content"]'));
+const isMenuRelated = (el)=>!!el?.closest('[data-filter-input-menu]');
 const buildContainerAnchoredRect = (containerRect, anchorLeft, anchorRight = containerRect.right)=>({
         x: anchorLeft,
         y: containerRect.top,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.28.0",
-  "generatedAt": "2026-04-24T12:14:20.763Z",
+  "version": "0.29.0",
+  "generatedAt": "2026-04-24T15:27:31.236Z",
   "components": [
     {
       "name": "Alert",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.29.0",
+  "version": "0.29.1-rc-feature-AS-882.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",