@persona/design-system 0.10.13 → 0.10.15

package/dist/{TableBoxCell-C65YFYqj.d.mts → TableBoxCell-DiKY6wne.d.mts}

@@ -1,11 +1,11 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-DoKiRjgS.mjs";
-import { a as TableCellProps, i as TableCell } from "./TableCell-CQsF7t4e.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-CK-b79uD.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-D2X8exFX.mjs";
+import { a as TableCellProps, i as TableCell } from "./TableCell-uv_jqT5e.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-B3DdXy6r.mjs";
 import { n as ReorderConfig, t as DragDirection } from "./useTableBoxDragAndDrop-MwbXWWDQ.mjs";
-import { t as RowAction } from "./TableBoxRowActions-CRaabjaY.mjs";
+import { t as RowAction } from "./TableBoxRowActions-BYXYa9s5.mjs";
+import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
-import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/TableBox/TableBox.d.ts
@@ -273,4 +273,4 @@ declare const TableBoxCell: ({
 }: TableBoxCellProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBox as a, PinnedActionsCell as i, TableBoxCellProps as n, TableBoxContext as o, InlineEditConfig as r, TableBoxProps as s, TableBoxCell as t };
-//# sourceMappingURL=TableBoxCell-C65YFYqj.d.mts.map
+//# sourceMappingURL=TableBoxCell-DiKY6wne.d.mts.map

package/dist/TableBoxCell.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-C65YFYqj.mjs";
+import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-DiKY6wne.mjs";
 export { TableBoxCellProps, TableBoxCell as default };

package/dist/{TableBoxField-CHpClgsE.d.mts → TableBoxField-DPq_rueS.d.mts}

@@ -1,7 +1,7 @@
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
-import { o as ImplementsFormField } from "./inputFields-Dobwb4kT.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-CK-b79uD.mjs";
-import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-C65YFYqj.mjs";
+import { l as MenuItemProps } from "./Menu-DNJMfxfw.mjs";
+import { o as ImplementsFormField } from "./inputFields-CxgQOm9E.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-B3DdXy6r.mjs";
+import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-DiKY6wne.mjs";
 import { MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -100,4 +100,4 @@ declare const TableBoxField: {
 };
 //#endregion
 export { TableBoxFieldActionGroup as a, TableBoxFieldActionEntry as i, TableBoxField as n, TableBoxFieldAction as r, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL as t };
-//# sourceMappingURL=TableBoxField-CHpClgsE.d.mts.map
+//# sourceMappingURL=TableBoxField-DPq_rueS.d.mts.map

package/dist/TableBoxField.d.mts

@@ -1,2 +1,2 @@
-import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "./TableBoxField-CHpClgsE.mjs";
+import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "./TableBoxField-DPq_rueS.mjs";
 export { TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup, TableBoxField as default };

package/dist/{TableBoxRow-CK-b79uD.d.mts → TableBoxRow-B3DdXy6r.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
+import { l as MenuItemProps } from "./Menu-DNJMfxfw.mjs";
 import { t as TableRow } from "./TableRow-C4eHuRF3.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -83,4 +83,4 @@ declare const TableBoxRowOverlay: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBoxRowOverlay as n, TableBoxRowProps as r, TableBoxRow as t };
-//# sourceMappingURL=TableBoxRow-CK-b79uD.d.mts.map
+//# sourceMappingURL=TableBoxRow-B3DdXy6r.d.mts.map

package/dist/TableBoxRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-CK-b79uD.mjs";
+import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-B3DdXy6r.mjs";
 export { TableBoxRowOverlay, TableBoxRowProps, TableBoxRow as default };

package/dist/{TableBoxRowActions-CRaabjaY.d.mts → TableBoxRowActions-BYXYa9s5.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
+import { l as MenuItemProps } from "./Menu-DNJMfxfw.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -54,4 +54,4 @@ declare const RowActions: ({
 }: RowActionsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { RowActionsContainerWithFadeWidth as i, RowActions as n, RowActionsContainer as r, RowAction as t };
-//# sourceMappingURL=TableBoxRowActions-CRaabjaY.d.mts.map
+//# sourceMappingURL=TableBoxRowActions-BYXYa9s5.d.mts.map

package/dist/TableBoxRowActions.d.mts

@@ -1,2 +1,2 @@
-import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-CRaabjaY.mjs";
+import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-BYXYa9s5.mjs";
 export { RowAction, RowActions, RowActionsContainer, RowActionsContainerWithFadeWidth };

package/dist/{TableCell-CQsF7t4e.d.mts → TableCell-uv_jqT5e.d.mts}

@@ -1,6 +1,6 @@
 import { n as TableRowProps } from "./TableRow-C4eHuRF3.mjs";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Table/TableCell.d.ts
@@ -51,4 +51,4 @@ declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
 }, "role">;
 //#endregion
 export { TableCellProps as a, TableTD as c, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t };
-//# sourceMappingURL=TableCell-CQsF7t4e.d.mts.map
+//# sourceMappingURL=TableCell-uv_jqT5e.d.mts.map

package/dist/TableCell.d.mts

@@ -1,2 +1,2 @@
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-CQsF7t4e.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-uv_jqT5e.mjs";
 export { StickyTD, StickyTH, TableActionTD, TableCellProps, TableCellTitle, TableIconTD, TableTD, TableTR, TableCell as default };

package/dist/{TableControls-v1NmlFTW.d.mts → TableControls-C4tMGBao.d.mts}

@@ -1,7 +1,7 @@
-import { n as ControlBarProps } from "./ControlBar-CDb6b1_6.mjs";
-import { n as FilterBarProps } from "./FilterBar-CA4mDAXK.mjs";
-import { i as BaseFilterConfig, s as FilterConfig, u as FilterTypeResolver } from "./types-BTaKBrxG.mjs";
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-1nT8wneI.mjs";
+import { n as ControlBarProps } from "./ControlBar-Z_GGxMpa.mjs";
+import { n as FilterBarProps } from "./FilterBar-B1fwBKuZ.mjs";
+import { i as BaseFilterConfig, s as FilterConfig, u as FilterTypeResolver } from "./types-BwbQx3-v.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-BlQj0RyT.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -82,4 +82,4 @@ declare const TableControls: <TFilter extends BaseFilterConfig = FilterConfig>({
 }: TableControlsProps<TFilter>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableControlsFiltersV2Props as n, TableControlsProps as r, TableControls as t };
-//# sourceMappingURL=TableControls-v1NmlFTW.d.mts.map
+//# sourceMappingURL=TableControls-C4tMGBao.d.mts.map

package/dist/{TableControls-DM4RddQ_.mjs → TableControls-fuaMJFA6.mjs}

@@ -1,54 +1,54 @@
 import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
+import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
+import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
+import { transparent, withAlpha } from "./lib/color.mjs";
+import { popoverMotion } from "./mixins/motion.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
 import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-DaOKaFc2.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
 import { t as Spacer_default } from "./Spacer-C4d9Aho6.mjs";
 import { i as Paragraph, r as Label$1 } from "./Text-D0vEReED.mjs";
-import "./variables/transitions.mjs";
-import { a as Tooltip } from "./Tooltip-CVBxc1yf.mjs";
-import { transparent, withAlpha } from "./lib/color.mjs";
+import { a as Tooltip } from "./Tooltip-C2VB8I6y.mjs";
 import { letPointerDownReachDocument } from "./lib/letPointerDownReachDocument.mjs";
-import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { moveItemByIndex } from "./lib/reorderItems.mjs";
 import { mergeRefs as mergeRefs$1, useCloseFocus } from "./lib/useCloseFocus.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
-import { popoverMotion } from "./mixins/motion.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack, t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button, t as IconButton } from "./IconButton-Bj1fry_K.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-d4sdknti.mjs";
-import { r as InputGroup } from "./Input-DcbzPaax.mjs";
+import { n as Button, t as IconButton } from "./IconButton-kSjnfhWt.mjs";
+import { r as InputGroup } from "./Input-BIHbRmmU.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-BVn1jh46.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-Ip75l4Th.mjs";
-import { t as Combobox } from "./Combobox-DmFQ5cAy.mjs";
-import { n as Select, r as SelectHeader, t as Option } from "./Select-DbWEgH5c.mjs";
-import { s as Popover_default } from "./Popover-DP9DXReH.mjs";
-import { i as Modal_default } from "./Modal-SnCo7ecm.mjs";
-import { r as DateRangePicker, t as DatePicker } from "./DatePicker-CHVYVKB-.mjs";
-import { n as ErrorText } from "./FormControl-BoKGiWdQ.mjs";
-import { t as ListBox } from "./ListBox-BRgjgUSp.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-DQPxDJ11.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CYZTQS02.mjs";
+import { r as Description, t as Combobox } from "./Combobox-DPhX1GIR.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "./Select-Bicuj8VD.mjs";
+import { s as Popover_default } from "./Popover-BMX-ff3L.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-B7U2uVD3.mjs";
+import { i as Modal_default } from "./Modal-bsjGJxTM.mjs";
+import { r as DateRangePicker, t as DatePicker } from "./DatePicker-CZsjaBO2.mjs";
+import { n as ErrorText } from "./FormControl--iW9afGv.mjs";
+import { t as ListBox } from "./ListBox-CwC9YztW.mjs";
 import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-Bj4XkwkT.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-BfVrDOY0.mjs";
-import { t as Toggle } from "./Toggle-CzHoIR-n.mjs";
-import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { m as FormField, o as ComboboxField } from "./FormField-C_rAxIPH.mjs";
+import { t as Toggle } from "./Toggle-BU7Faaud.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime, Settings } from "luxon";
 import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, EyeIcon, EyeOffIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, TrashIcon, XIcon } from "@persona/icons";
 import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, LockedIcon as LockedIcon$1, MoreIcon as MoreIcon$1, PlusIcon as PlusIcon$1, SearchIcon as SearchIcon$1, StarIcon as StarIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
 import { debounce, isEqual, noop, partition, startCase, union, uniqueId } from "lodash-es";
 import { useId } from "react-aria";
-import { mergeRefs } from "@react-aria/utils";
 import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DndContext, PointerSensor, closestCenter, pointerWithin, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { mergeRefs } from "@react-aria/utils";
 import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import { v4 } from "uuid";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
@@ -233,6 +233,43 @@ const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus =
 	return searchBar;
 };
 //#endregion
+//#region src/components/DataTable/TableControls/FilterPanelVisibilityContext.ts
+/** False while the TableControls filter panel slot is hidden (mounted, display:none). */
+const FilterPanelVisibilityContext = createContext(true);
+const useFilterPanelVisible = () => useContext(FilterPanelVisibilityContext);
+//#endregion
+//#region src/components/DataTable/TableControls/FilterPanelSlot.tsx
+const Slot = styled.div`
+  display: ${({ $visible }) => $visible ? "contents" : "none"};
+`;
+/**
+* Wraps the resolved filter panel so it stays mounted while hidden.
+*
+* The panel mounts on first show and is afterwards toggled with
+* `display: none` instead of unmounting, so uncontrolled panels passed
+* through `controls.filterPanel` (e.g. a FilterBar holding applied pills in
+* internal state) keep their state across hide/show toggles. Deferring the
+* first mount preserves lazy-mount behavior for panels that do work on
+* mount, and `display: contents` while visible keeps the wrapper
+* layout-neutral. The slot carries the control bar's `filtersId` so the
+* toggle's `aria-controls` resolves for custom panels too. It publishes
+* visibility through context so panels such as FilterBar can close their
+* portaled popovers on hide; it never touches the panel's DOM.
+*/
+const FilterPanelSlot = ({ id, visible, children }) => {
+	const [hasBeenVisible, setHasBeenVisible] = useState(Boolean(visible));
+	if (visible && !hasBeenVisible) setHasBeenVisible(true);
+	if (!hasBeenVisible) return null;
+	return /* @__PURE__ */ jsx(Slot, {
+		id,
+		$visible: Boolean(visible),
+		children: /* @__PURE__ */ jsx(FilterPanelVisibilityContext.Provider, {
+			value: Boolean(visible),
+			children
+		})
+	});
+};
+//#endregion
 //#region src/components/DataTable/TableControls/CompactBar.tsx
 const DataTableCompactBar = styled(HStack)`
   border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", theme.color.border.secondary)};
@@ -318,7 +355,11 @@ const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId
 				children: action.label
 			}, action.label)) : tableActions]
 		})]
-	}), showFilters && filterPanel] });
+	}), filterPanel != null && /* @__PURE__ */ jsx(FilterPanelSlot, {
+		id: filtersId,
+		visible: showFilters,
+		children: filterPanel
+	})] });
 };
 //#endregion
 //#region src/components/DataTable/TableControls/utils/positioning.ts
@@ -1162,7 +1203,11 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, starredDefa
 				propertiesButton
 			]
 		}),
-		showFilters && filterPanel,
+		filterPanel != null && /* @__PURE__ */ jsx(FilterPanelSlot, {
+			id: filtersId,
+			visible: showFilters,
+			children: filterPanel
+		}),
 		/* @__PURE__ */ jsx(Modal_default, {
 			open: pendingViewAction != null,
 			onOpenChange: (open) => {
@@ -2172,6 +2217,7 @@ function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleI
 	const optionDisabledReason = useCallback((option) => registry.get(option.value)?.disabledReason, [registry]);
 	const operatorOptions = useMemo(() => operators.map((operator) => ({
 		label: getOperatorLabel(operator, field?.type, strings, field),
+		description: getConditionOperator(field, operator)?.description,
 		value: operator
 	})), [
 		operators,
@@ -3938,6 +3984,26 @@ const Footer = styled(HStack).attrs({
 * back through `onChangeOperator` and forwards open/close transitions
 * through Radix's controlled props.
 */
+function OperatorMenuItem({ field, operator, size, onChangeOperator }) {
+	const strings = usePDSStrings();
+	const labelId = useId();
+	const descriptionId = useId();
+	const description = getConditionOperator(field, operator)?.description;
+	return /* @__PURE__ */ jsxs(DropdownMenu_default.Item, {
+		size,
+		"aria-labelledby": labelId,
+		"aria-describedby": description ? descriptionId : void 0,
+		onClick: () => onChangeOperator(operator),
+		children: [/* @__PURE__ */ jsx("span", {
+			id: labelId,
+			children: getOperatorLabel(operator, field.type, strings, field)
+		}), description && /* @__PURE__ */ jsx(Description, {
+			id: descriptionId,
+			title: description,
+			children: description
+		})]
+	});
+}
 const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, onApply, trigger, open, onOpenChange, size, wide = false }) => {
 	const strings = usePDSStrings();
 	const resolvedSize = useFilterBarSize(size);
@@ -4017,10 +4083,11 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 								align: "start",
 								portal: true,
 								zIndex: Z_INDICES.layeredDropdown,
-								children: operatorOptions.map((op) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+								children: operatorOptions.map((op) => /* @__PURE__ */ jsx(OperatorMenuItem, {
+									field,
+									operator: op,
 									size: resolvedSize,
-									onClick: () => onChangeOperator(op),
-									children: getOperatorLabel(op, field.type, strings, field)
+									onChangeOperator
 								}, op))
 							}) : /* @__PURE__ */ jsx("span", { children: getOperatorLabel(operator, field.type, strings, field) })]
 						}),
@@ -4724,6 +4791,15 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 	}, [committedState]);
 	const pendingEditRuleIdRef = useRef(null);
 	const openedViaScrollIntoViewRef = useRef(false);
+	const panelVisible = useFilterPanelVisible();
+	useLayoutEffect(() => {
+		if (!panelVisible) {
+			pendingEditRuleIdRef.current = null;
+			openedViaScrollIntoViewRef.current = false;
+			setEditingRuleId(null);
+			setRulesPopoverOpen(false);
+		}
+	}, [panelVisible]);
 	const { addTopLevelRule } = filterState;
 	const handlePickField = useCallback((field) => {
 		const operator = registry.defaultOperatorFor(field.id);
@@ -4744,9 +4820,11 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 		previousRuleCountRef.current = ruleCount;
 		if (!grew || pendingEditRuleIdRef.current == null) return;
 		const openPendingRule = () => {
-			openedViaScrollIntoViewRef.current = true;
-			setEditingRuleId(pendingEditRuleIdRef.current);
+			const id = pendingEditRuleIdRef.current;
+			if (id == null) return;
 			pendingEditRuleIdRef.current = null;
+			openedViaScrollIntoViewRef.current = true;
+			setEditingRuleId(id);
 		};
 		const track = pillsScrollRef.current;
 		if (!track || !track.scrollTo) {
@@ -4776,7 +4854,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 			track.removeEventListener("scrollend", finish);
 			window.clearTimeout(fallbackTimer);
 		};
-	}, [ruleCount]);
+	}, [ruleCount, panelVisible]);
 	useEffect(() => {
 		if (editingRuleId == null) return;
 		const root = pillsScrollRef.current;
@@ -5295,19 +5373,15 @@ const TableControls = ({ filters = EMPTY_FILTERS, filterResolver, filtersV2, fil
 		activeFilters,
 		setActiveFilters,
 		children: /* @__PURE__ */ jsx(Filters, {
-			id: filtersId,
 			compact,
 			filterResolver
 		})
 	}) : void 0;
 	const usesFiltersV2 = filterPanel == null && filtersV2 != null;
-	const resolvedFilterPanel = resolveFilterArea(filterPanel, filtersV2 != null ? /* @__PURE__ */ jsx("div", {
-		id: filtersId,
-		children: /* @__PURE__ */ jsx(FilterBar, {
-			...filtersV2,
-			size: filtersV2.size ?? (compact ? "sm" : "md")
-		})
-	}) : void 0, generatedFilterPanel);
+	const resolvedFilterPanel = resolveFilterArea(filterPanel, filtersV2 != null ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FilterBar, {
+		...filtersV2,
+		size: filtersV2.size ?? (compact ? "sm" : "md")
+	}) }) : void 0, generatedFilterPanel);
 	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? (filterPanel == null && (usesFiltersV2 || activeFilters.length > 0)));
 	useEffect(() => {
 		setActiveFilters((current) => synchronizeActiveFilters(enabledFilters, current, filterResolver));
@@ -5692,4 +5766,4 @@ function decodeBase64(input) {
 //#endregion
 export { isCompleteDateRange as A, TableControlsProvider as B, useFilterBarSize as C, getDefaultOperatorForType as D, getConditionValueError as E, FiltersContainer as F, ControlBar as H, getActiveFilters as I, isFilterActive as L, isRangeOperator as M, isValuelessOperator as N, getOperatorsForField as O, reconcileValueForOperator as P, resolveFilterTypeDefinition as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, DataTableCompactBar as U, useTableControls as V, withDisabledReason as W, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isNumericComparisonOperator as j, getOperatorsForType as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsContext as z };
 
-//# sourceMappingURL=TableControls-DM4RddQ_.mjs.map
+//# sourceMappingURL=TableControls-fuaMJFA6.mjs.map