@trackunit/react-filter-components 2.4.8-alpha-0874090e5e0.0 → 2.4.10

package/index.cjs.js

@@ -30,7 +30,7 @@ const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge(["justify-norma
  * @param {FilterProps} props - The props for the Filter component
  * @returns {ReactElement} Filter component
  */
-const Filter = ({ title = "", asIcon = undefined, children, popoverProps, isActive = false, activeLabel, activeOptionsCount, menuListProps, className, "data-testid": dataTestId, withStickyHeader = false, readOnly = false, visualStyle = "button", size = "small", }) => {
+const Filter = ({ title = "", asIcon = undefined, children, popoverProps, isActive = false, activeLabel, activeOptionsCount, menuListProps, className, "data-testid": dataTestId, withStickyHeader = false, readOnly = false, visualStyle = "button", size = "small", listItemStopPropagation = true, }) => {
     const renderButton = () => {
         if (asIcon) {
             return (jsxRuntime.jsx(reactComponents.IconButton, { className: className, "data-testid": dataTestId, disabled: readOnly, icon: jsxRuntime.jsx(reactComponents.Icon, { name: asIcon, size: "small" }), size: size, title: title, variant: isActive ? "ghost" : "ghost-neutral" }));
@@ -39,7 +39,7 @@ const Filter = ({ title = "", asIcon = undefined, children, popoverProps, isActi
     };
     const renderSubmenuContent = () => children !== undefined ? (jsxRuntime.jsx(reactComponents.MenuContent, { className: cvaMenuShellOverrides({ withStickyHeader }), "data-testid": dataTestId ? dataTestId : undefined, listClassName: cvaMenuListOverrides({ withStickyHeader }), ...menuListProps, children: children })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
     if (visualStyle === "list-item") {
-        return (jsxRuntime.jsx(reactComponents.MenuItem, { className: className, "data-testid": dataTestId, disabled: readOnly, submenu: children !== undefined ? renderSubmenuContent() : undefined, 
+        return (jsxRuntime.jsx(reactComponents.MenuItem, { className: className, "data-testid": dataTestId, disabled: readOnly, stopPropagation: listItemStopPropagation, submenu: children !== undefined ? renderSubmenuContent() : undefined, 
             // See the sizing comment on the button variant's `Popover` below -- same reasoning applies to the
             // submenu Popover that `MenuItem` renders internally for this visual style.
             submenuSizing: popoverProps?.sizing ?? { minWidth: 280 }, suffix: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isActive && activeLabel && activeOptionsCount === undefined ? (jsxRuntime.jsx(reactComponents.Badge, { className: "mx-2", compact: true })) : (jsxRuntime.jsx("div", { className: "flex min-w-[30px] shrink-0 items-center justify-center", children: isActive && activeLabel && activeOptionsCount !== undefined ? (jsxRuntime.jsx(reactComponents.Badge, { count: activeOptionsCount, size: "condensed" })) : null })), readOnly ? null : jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, color: "neutral", name: "ChevronRight", size: "small" })] }), children: jsxRuntime.jsx("span", { className: "flex-grow truncate", children: title }) }));

package/index.esm.js

@@ -28,7 +28,7 @@ const cvaFilterCustomButton = cvaMerge(["justify-normal"], {
  * @param {FilterProps} props - The props for the Filter component
  * @returns {ReactElement} Filter component
  */
-const Filter = ({ title = "", asIcon = undefined, children, popoverProps, isActive = false, activeLabel, activeOptionsCount, menuListProps, className, "data-testid": dataTestId, withStickyHeader = false, readOnly = false, visualStyle = "button", size = "small", }) => {
+const Filter = ({ title = "", asIcon = undefined, children, popoverProps, isActive = false, activeLabel, activeOptionsCount, menuListProps, className, "data-testid": dataTestId, withStickyHeader = false, readOnly = false, visualStyle = "button", size = "small", listItemStopPropagation = true, }) => {
     const renderButton = () => {
         if (asIcon) {
             return (jsx(IconButton, { className: className, "data-testid": dataTestId, disabled: readOnly, icon: jsx(Icon, { name: asIcon, size: "small" }), size: size, title: title, variant: isActive ? "ghost" : "ghost-neutral" }));
@@ -37,7 +37,7 @@ const Filter = ({ title = "", asIcon = undefined, children, popoverProps, isActi
     };
     const renderSubmenuContent = () => children !== undefined ? (jsx(MenuContent, { className: cvaMenuShellOverrides({ withStickyHeader }), "data-testid": dataTestId ? dataTestId : undefined, listClassName: cvaMenuListOverrides({ withStickyHeader }), ...menuListProps, children: children })) : (jsx(Fragment, {}));
     if (visualStyle === "list-item") {
-        return (jsx(MenuItem, { className: className, "data-testid": dataTestId, disabled: readOnly, submenu: children !== undefined ? renderSubmenuContent() : undefined, 
+        return (jsx(MenuItem, { className: className, "data-testid": dataTestId, disabled: readOnly, stopPropagation: listItemStopPropagation, submenu: children !== undefined ? renderSubmenuContent() : undefined, 
             // See the sizing comment on the button variant's `Popover` below -- same reasoning applies to the
             // submenu Popover that `MenuItem` renders internally for this visual style.
             submenuSizing: popoverProps?.sizing ?? { minWidth: 280 }, suffix: jsxs(Fragment, { children: [isActive && activeLabel && activeOptionsCount === undefined ? (jsx(Badge, { className: "mx-2", compact: true })) : (jsx("div", { className: "flex min-w-[30px] shrink-0 items-center justify-center", children: isActive && activeLabel && activeOptionsCount !== undefined ? (jsx(Badge, { count: activeOptionsCount, size: "condensed" })) : null })), readOnly ? null : jsx(Icon, { ariaHidden: true, color: "neutral", name: "ChevronRight", size: "small" })] }), children: jsx("span", { className: "flex-grow truncate", children: title }) }));

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/filter-components/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "2.4.8-alpha-0874090e5e0.0",
+  "version": "2.4.10",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-icons": "1.14.4-alpha-0874090e5e0.0",
-    "@trackunit/css-class-variance-utilities": "1.14.4-alpha-0874090e5e0.0",
-    "@trackunit/react-components": "2.6.3-alpha-0874090e5e0.0",
-    "@trackunit/react-form-components": "2.4.8-alpha-0874090e5e0.0"
+    "@trackunit/ui-icons": "1.14.4",
+    "@trackunit/css-class-variance-utilities": "1.14.4",
+    "@trackunit/react-components": "2.6.4",
+    "@trackunit/react-form-components": "2.4.9"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.114.29",

package/src/Filter/Filter.d.ts

@@ -54,6 +54,15 @@ export interface FilterProps extends ButtonProps {
      * @default "button"
      */
     visualStyle?: FilterVisualStyle;
+    /**
+     * Only applies to `visualStyle="list-item"`. By default the row stops click propagation like any
+     * other `MenuItem`, so opening its own submenu never bubbles up and dismisses a parent menu. Set to
+     * `false` only when this row is deliberately composed as the trigger for an *external* popover
+     * (e.g. `FilterBarMenuItem`), where the click needs to reach that outer `PopoverTrigger`.
+     *
+     * @default true
+     */
+    listItemStopPropagation?: boolean;
 }
 /**
  * The Filter component is the base component used in the manager to filter data.
@@ -67,4 +76,4 @@ export interface FilterProps extends ButtonProps {
  * @param {FilterProps} props - The props for the Filter component
  * @returns {ReactElement} Filter component
  */
-export declare const Filter: ({ title, asIcon, children, popoverProps, isActive, activeLabel, activeOptionsCount, menuListProps, className, "data-testid": dataTestId, withStickyHeader, readOnly, visualStyle, size, }: FilterProps) => ReactElement;
+export declare const Filter: ({ title, asIcon, children, popoverProps, isActive, activeLabel, activeOptionsCount, menuListProps, className, "data-testid": dataTestId, withStickyHeader, readOnly, visualStyle, size, listItemStopPropagation, }: FilterProps) => ReactElement;