@trackunit/react-filter-components 2.6.32 → 2.6.34

package/index.cjs.js

@@ -23,6 +23,9 @@ const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge(["justify-norma
  *
  * - This component in generic and does not have any connection to the data.
  * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ *   `prefix` is honoured by both visual styles; `suffix` only by `"button"`, because the
+ *   `"list-item"` style composes its own suffix from the active-filter badge and the submenu
+ *   chevron, and a caller's suffix would have to replace those rather than sit beside them.
  * - Color and size has special default values in this component, but can be overridden if needed.
  *
  * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
@@ -30,16 +33,19 @@ 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", listItemStopPropagation = true, }) => {
+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, prefix, suffix, }) => {
     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" }));
         }
-        return (jsxRuntime.jsxs(reactComponents.Button, { className: cvaFilterCustomButton({ isActive, className }), "data-testid": dataTestId, disabled: readOnly, size: size, variant: "secondary", children: [title, isActive ? (jsxRuntime.jsx("div", { className: "grid overflow-hidden text-ellipsis whitespace-nowrap", children: jsxRuntime.jsx("span", { className: "text-primary-600 truncate", children: activeLabel }) })) : null] }));
+        return (jsxRuntime.jsxs(reactComponents.Button, { className: cvaFilterCustomButton({ isActive, className }), "data-testid": dataTestId, disabled: readOnly, prefix: prefix, size: size, suffix: suffix, variant: "secondary", children: [title, isActive ? (jsxRuntime.jsx("div", { className: "grid overflow-hidden text-ellipsis whitespace-nowrap", children: jsxRuntime.jsx("span", { className: "text-primary-600 truncate", children: activeLabel }) })) : null] }));
     };
     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, stopPropagation: listItemStopPropagation, submenu: children !== undefined ? renderSubmenuContent() : undefined, 
+        return (jsxRuntime.jsx(reactComponents.MenuItem, { className: className, "data-testid": dataTestId, disabled: readOnly, label: title, 
+            // `MenuItem` has its own prefix slot before the label, so a caller's leading icon composes
+            // here as it does on the button. Its suffix slot is already spoken for, just below.
+            prefix: prefix, 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

@@ -21,6 +21,9 @@ const cvaFilterCustomButton = cvaMerge(["justify-normal"], {
  *
  * - This component in generic and does not have any connection to the data.
  * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ *   `prefix` is honoured by both visual styles; `suffix` only by `"button"`, because the
+ *   `"list-item"` style composes its own suffix from the active-filter badge and the submenu
+ *   chevron, and a caller's suffix would have to replace those rather than sit beside them.
  * - Color and size has special default values in this component, but can be overridden if needed.
  *
  * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
@@ -28,16 +31,19 @@ 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", listItemStopPropagation = true, }) => {
+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, prefix, suffix, }) => {
     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" }));
         }
-        return (jsxs(Button, { className: cvaFilterCustomButton({ isActive, className }), "data-testid": dataTestId, disabled: readOnly, size: size, variant: "secondary", children: [title, isActive ? (jsx("div", { className: "grid overflow-hidden text-ellipsis whitespace-nowrap", children: jsx("span", { className: "text-primary-600 truncate", children: activeLabel }) })) : null] }));
+        return (jsxs(Button, { className: cvaFilterCustomButton({ isActive, className }), "data-testid": dataTestId, disabled: readOnly, prefix: prefix, size: size, suffix: suffix, variant: "secondary", children: [title, isActive ? (jsx("div", { className: "grid overflow-hidden text-ellipsis whitespace-nowrap", children: jsx("span", { className: "text-primary-600 truncate", children: activeLabel }) })) : null] }));
     };
     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, stopPropagation: listItemStopPropagation, submenu: children !== undefined ? renderSubmenuContent() : undefined, 
+        return (jsx(MenuItem, { className: className, "data-testid": dataTestId, disabled: readOnly, label: title, 
+            // `MenuItem` has its own prefix slot before the label, so a caller's leading icon composes
+            // here as it does on the button. Its suffix slot is already spoken for, just below.
+            prefix: prefix, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "2.6.32",
+  "version": "2.6.34",
   "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.21",
-    "@trackunit/css-class-variance-utilities": "1.14.22",
-    "@trackunit/react-components": "2.10.25",
-    "@trackunit/react-form-components": "2.6.32"
+    "@trackunit/ui-icons": "1.14.22",
+    "@trackunit/css-class-variance-utilities": "1.14.23",
+    "@trackunit/react-components": "2.10.27",
+    "@trackunit/react-form-components": "2.6.34"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.114.29",

package/src/Filter/Filter.d.ts

@@ -69,6 +69,9 @@ export interface FilterProps extends ButtonProps {
  *
  * - This component in generic and does not have any connection to the data.
  * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ *   `prefix` is honoured by both visual styles; `suffix` only by `"button"`, because the
+ *   `"list-item"` style composes its own suffix from the active-filter badge and the submenu
+ *   chevron, and a caller's suffix would have to replace those rather than sit beside them.
  * - Color and size has special default values in this component, but can be overridden if needed.
  *
  * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
@@ -76,4 +79,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, listItemStopPropagation, }: FilterProps) => ReactElement;
+export declare const Filter: ({ title, asIcon, children, popoverProps, isActive, activeLabel, activeOptionsCount, menuListProps, className, "data-testid": dataTestId, withStickyHeader, readOnly, visualStyle, size, listItemStopPropagation, prefix, suffix, }: FilterProps) => ReactElement;