@trackunit/react-filter-components 1.3.131 → 1.3.133

package/index.cjs.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
+var react = require('react');
 var tailwindMerge = require('tailwind-merge');
 var reactFormComponents = require('@trackunit/react-form-components');
 
@@ -30,9 +31,27 @@ const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge(["justify-norma
  * @param {FilterProps} props - The props for the Filter component
  * @returns {ReactElement} Filter component
  */
-const Filter = ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly, ...rest }) => {
-    const buttonProps = { ...rest };
-    return (jsxRuntime.jsxs(reactComponents.Popover, { dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "bottom-start", ...popoverProps, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsxs(reactComponents.Button, { className: cvaFilterCustomButton({ isActive, className }), dataTestId: dataTestId, disabled: readOnly, size: "small", variant: "secondary", ...buttonProps, 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 }) })) : undefined] }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { className: cvaMenuListOverrides({ withStickyHeader }), dataTestId: dataTestId ? dataTestId : undefined, withStickyHeader: withStickyHeader, ...menuListProps, children: children }) })] }));
+const Filter = ({ title, asIcon, children, popoverProps, isActive, activeLabel, activeOptionsCount, menuListProps, className, dataTestId, withStickyHeader = false, readOnly, visualStyle = "button", size = "small", }) => {
+    const handleClick = react.useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    const renderButton = () => {
+        if (asIcon) {
+            return (jsxRuntime.jsx(reactComponents.IconButton, { className: className, dataTestId: dataTestId, disabled: readOnly, icon: jsxRuntime.jsx(reactComponents.Icon, { color: isActive ? "primary" : undefined, name: asIcon, size: "small" }), onClick: handleClick, size: size, variant: "ghost-neutral" }));
+        }
+        return (jsxRuntime.jsxs(reactComponents.Button, { className: cvaFilterCustomButton({ isActive, className }), dataTestId: dataTestId, disabled: readOnly, onClick: handleClick, 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.jsx(reactComponents.Popover, { dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "top-start", ...popoverProps, children: modalState => {
+            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: visualStyle === "list-item" ? (jsxRuntime.jsxs("li", { className: reactComponents.cvaInteractableItem({
+                                disabled: readOnly,
+                                selected: modalState.isOpen,
+                                cursor: "pointer",
+                                className: [
+                                    className,
+                                    "text-secondary-700 hover:text-secondary-800 grid list-none grid-flow-col items-center justify-between gap-1 rounded px-3 py-2 text-sm",
+                                ],
+                            }), "data-testid": dataTestId, tabIndex: 0, children: [jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate", isActive && "font-semibold"), children: title }), jsxRuntime.jsxs("span", { className: "grid grid-flow-col items-center justify-between text-slate-900", children: [isActive && activeLabel ? (jsxRuntime.jsx(reactComponents.Badge, { className: !activeOptionsCount ? "mx-2" : "mx-1", compact: !activeOptionsCount, count: activeOptionsCount })) : null, readOnly ? null : jsxRuntime.jsx(reactComponents.Icon, { ariaHidden: true, color: "secondary", name: "ChevronRight", size: "small" })] })] })) : (renderButton()) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { className: cvaMenuListOverrides({ withStickyHeader }), dataTestId: dataTestId ? dataTestId : undefined, withStickyHeader: withStickyHeader, ...menuListProps, children: children }) })] }));
+        } }));
 };
 const cvaMenuListOverrides = cssClassVarianceUtilities.cvaMerge(["overflow-x-hidden", "relative", "!max-w-full", "p-0"], {
     variants: {
@@ -46,7 +65,7 @@ const cvaMenuListOverrides = cssClassVarianceUtilities.cvaMerge(["overflow-x-hid
 /**
  * The FilterBody component is used to display the title of the filter and a reset button.
  * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The reset button will be enabled if the showReset prop is set to true.
  *
  * @param {FilterBodyProps} props - The props for the FilterBody component
  */
@@ -82,13 +101,13 @@ const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
  * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The reset button will only be enabled if the showReset prop is set to true.
  *
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
  * @returns {ReactElement} FilterHeader component
  */
-const FilterHeader = ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, className, ...rest }) => {
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("grid gap-1 border-b-2 p-1", className), ...rest, "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: "flex h-6 items-center justify-between gap-1 pl-1 text-sm font-medium uppercase text-slate-600", children: [jsxRuntime.jsx("h4", { children: title }), loading ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : (jsxRuntime.jsx(reactComponents.Button, { className: cvaFilterHeaderButton({ isVisible: showReset }), "data-testid": `${dataTestId}-reset-button`, onClick: onReset, size: "small", variant: "ghost", children: resetLabel }))] }), children] }));
+const FilterHeader = ({ dataTestId, title, resetLabel, showReset, onReset, loading, children, searchComponent, className, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(className, "p-1", "min-w-[280px]"), ...rest, "data-testid": dataTestId, children: title ? (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-1 text-sm font-medium uppercase text-slate-600", children: [searchComponent, jsxRuntime.jsxs("div", { className: "flex w-full justify-between gap-1", children: [children, jsxRuntime.jsx("div", { className: "ml-auto", children: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { size: "small" })) : (jsxRuntime.jsx(reactComponents.Button, { "data-testid": `${dataTestId}-reset-button`, disabled: !showReset, onClick: onReset, size: "small", variant: "ghost", children: resetLabel })) })] }), jsxRuntime.jsx("hr", { className: "w-full border-slate-200" })] })) : null }));
 };
 const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
@@ -113,7 +132,7 @@ const CheckBoxFilterItem = ({ itemCount, className, suffix, dataTestId, label, .
     return (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: reactComponents.cvaInteractableItem({
             selected: "auto",
             focused: "auto",
-            className: tailwindMerge.twMerge(["py-1", "pl-2", "pr-3", "w-full", "h-auto", "items-center", "gap-x-2", "select-none", "rounded"], className),
+            className: tailwindMerge.twMerge(["py-1", "mx-1", "pl-2", "pr-3", "w-auto", "h-auto", "items-center", "gap-x-2", "select-none", "rounded"], className),
         }), dataTestId: dataTestId ?? `${label}-checkbox-filter-item`, label: label, suffix: itemCount !== undefined || suffix ? (jsxRuntime.jsxs("span", { className: reactComponents.cvaMenuItemSuffix({ selected: rest.checked }), children: [suffix, itemCount === undefined ? null : itemCount] })) : null, ...rest }));
 };
 

package/index.esm.js

@@ -1,6 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Popover, PopoverTrigger, Button, PopoverContent, MenuList, Spinner, cvaInteractableItem, cvaMenuItemSuffix } from '@trackunit/react-components';
+import { Popover, PopoverTrigger, cvaInteractableItem, Badge, Icon, PopoverContent, MenuList, IconButton, Button, Spinner, cvaMenuItemSuffix } from '@trackunit/react-components';
+import { useCallback } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox, RadioItem } from '@trackunit/react-form-components';
 
@@ -28,9 +29,27 @@ const cvaFilterCustomButton = cvaMerge(["justify-normal"], {
  * @param {FilterProps} props - The props for the Filter component
  * @returns {ReactElement} Filter component
  */
-const Filter = ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly, ...rest }) => {
-    const buttonProps = { ...rest };
-    return (jsxs(Popover, { dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "bottom-start", ...popoverProps, children: [jsx(PopoverTrigger, { children: jsxs(Button, { className: cvaFilterCustomButton({ isActive, className }), dataTestId: dataTestId, disabled: readOnly, size: "small", variant: "secondary", ...buttonProps, children: [title, " ", isActive ? (jsx("div", { className: "grid overflow-hidden text-ellipsis whitespace-nowrap", children: jsx("span", { className: "text-primary-600 truncate", children: activeLabel }) })) : undefined] }) }), jsx(PopoverContent, { children: jsx(MenuList, { className: cvaMenuListOverrides({ withStickyHeader }), dataTestId: dataTestId ? dataTestId : undefined, withStickyHeader: withStickyHeader, ...menuListProps, children: children }) })] }));
+const Filter = ({ title, asIcon, children, popoverProps, isActive, activeLabel, activeOptionsCount, menuListProps, className, dataTestId, withStickyHeader = false, readOnly, visualStyle = "button", size = "small", }) => {
+    const handleClick = useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    const renderButton = () => {
+        if (asIcon) {
+            return (jsx(IconButton, { className: className, dataTestId: dataTestId, disabled: readOnly, icon: jsx(Icon, { color: isActive ? "primary" : undefined, name: asIcon, size: "small" }), onClick: handleClick, size: size, variant: "ghost-neutral" }));
+        }
+        return (jsxs(Button, { className: cvaFilterCustomButton({ isActive, className }), dataTestId: dataTestId, disabled: readOnly, onClick: handleClick, 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 (jsx(Popover, { dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "top-start", ...popoverProps, children: modalState => {
+            return (jsxs(Fragment, { children: [jsx(PopoverTrigger, { children: visualStyle === "list-item" ? (jsxs("li", { className: cvaInteractableItem({
+                                disabled: readOnly,
+                                selected: modalState.isOpen,
+                                cursor: "pointer",
+                                className: [
+                                    className,
+                                    "text-secondary-700 hover:text-secondary-800 grid list-none grid-flow-col items-center justify-between gap-1 rounded px-3 py-2 text-sm",
+                                ],
+                            }), "data-testid": dataTestId, tabIndex: 0, children: [jsx("span", { className: twMerge("truncate", isActive && "font-semibold"), children: title }), jsxs("span", { className: "grid grid-flow-col items-center justify-between text-slate-900", children: [isActive && activeLabel ? (jsx(Badge, { className: !activeOptionsCount ? "mx-2" : "mx-1", compact: !activeOptionsCount, count: activeOptionsCount })) : null, readOnly ? null : jsx(Icon, { ariaHidden: true, color: "secondary", name: "ChevronRight", size: "small" })] })] })) : (renderButton()) }), jsx(PopoverContent, { children: jsx(MenuList, { className: cvaMenuListOverrides({ withStickyHeader }), dataTestId: dataTestId ? dataTestId : undefined, withStickyHeader: withStickyHeader, ...menuListProps, children: children }) })] }));
+        } }));
 };
 const cvaMenuListOverrides = cvaMerge(["overflow-x-hidden", "relative", "!max-w-full", "p-0"], {
     variants: {
@@ -44,7 +63,7 @@ const cvaMenuListOverrides = cvaMerge(["overflow-x-hidden", "relative", "!max-w-
 /**
  * The FilterBody component is used to display the title of the filter and a reset button.
  * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The reset button will be enabled if the showReset prop is set to true.
  *
  * @param {FilterBodyProps} props - The props for the FilterBody component
  */
@@ -80,13 +99,13 @@ const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
  * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The reset button will only be enabled if the showReset prop is set to true.
  *
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
  * @returns {ReactElement} FilterHeader component
  */
-const FilterHeader = ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, className, ...rest }) => {
-    return (jsxs("div", { className: twMerge("grid gap-1 border-b-2 p-1", className), ...rest, "data-testid": dataTestId, children: [jsxs("div", { className: "flex h-6 items-center justify-between gap-1 pl-1 text-sm font-medium uppercase text-slate-600", children: [jsx("h4", { children: title }), loading ? (jsx("div", { children: jsx(Spinner, { size: "small" }) })) : (jsx(Button, { className: cvaFilterHeaderButton({ isVisible: showReset }), "data-testid": `${dataTestId}-reset-button`, onClick: onReset, size: "small", variant: "ghost", children: resetLabel }))] }), children] }));
+const FilterHeader = ({ dataTestId, title, resetLabel, showReset, onReset, loading, children, searchComponent, className, ...rest }) => {
+    return (jsx("div", { className: twMerge(className, "p-1", "min-w-[280px]"), ...rest, "data-testid": dataTestId, children: title ? (jsxs("div", { className: "flex flex-col items-center justify-between gap-1 text-sm font-medium uppercase text-slate-600", children: [searchComponent, jsxs("div", { className: "flex w-full justify-between gap-1", children: [children, jsx("div", { className: "ml-auto", children: loading ? (jsx(Spinner, { size: "small" })) : (jsx(Button, { "data-testid": `${dataTestId}-reset-button`, disabled: !showReset, onClick: onReset, size: "small", variant: "ghost", children: resetLabel })) })] }), jsx("hr", { className: "w-full border-slate-200" })] })) : null }));
 };
 const cvaFilterHeaderButton = cvaMerge([], {
     variants: {
@@ -111,7 +130,7 @@ const CheckBoxFilterItem = ({ itemCount, className, suffix, dataTestId, label, .
     return (jsx(Checkbox, { className: cvaInteractableItem({
             selected: "auto",
             focused: "auto",
-            className: twMerge(["py-1", "pl-2", "pr-3", "w-full", "h-auto", "items-center", "gap-x-2", "select-none", "rounded"], className),
+            className: twMerge(["py-1", "mx-1", "pl-2", "pr-3", "w-auto", "h-auto", "items-center", "gap-x-2", "select-none", "rounded"], className),
         }), dataTestId: dataTestId ?? `${label}-checkbox-filter-item`, label: label, suffix: itemCount !== undefined || suffix ? (jsxs("span", { className: cvaMenuItemSuffix({ selected: rest.checked }), children: [suffix, itemCount === undefined ? null : itemCount] })) : null, ...rest }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "1.3.131",
+  "version": "1.3.133",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,9 +9,10 @@
   "dependencies": {
     "react": "19.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.3.97",
-    "@trackunit/react-components": "1.4.115",
-    "@trackunit/react-form-components": "1.3.131"
+    "@trackunit/ui-icons": "1.3.99",
+    "@trackunit/css-class-variance-utilities": "1.3.98",
+    "@trackunit/react-components": "1.4.117",
+    "@trackunit/react-form-components": "1.3.133"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Filter/Filter.d.ts

@@ -1,10 +1,12 @@
 import { ButtonProps, MenuListProps, PopoverProps } from "@trackunit/react-components";
+import { IconName } from "@trackunit/ui-icons";
 import { ReactElement } from "react";
+export type FilterVisualStyle = "button" | "list-item";
 export interface FilterProps extends ButtonProps {
     /**
      * The title/name of the filter.
      */
-    title: string;
+    title?: string;
     /**
      * Used to indicate if the user has any active selection in the filter.
      */
@@ -13,6 +15,14 @@ export interface FilterProps extends ButtonProps {
      * The label that will be displayed when the filter is active.
      */
     activeLabel?: string;
+    /**
+     * The number of active options for multi select filters.
+     */
+    activeOptionsCount?: number;
+    /**
+     * The icon to be displayed in the filter button.
+     */
+    asIcon?: IconName;
     /**
      * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
      * This intended to be used withe the FilterHeader component.
@@ -38,6 +48,12 @@ export interface FilterProps extends ButtonProps {
      * A flag to set a filter component into readonly mode used for presenting filtering rules that cannot be change by user
      */
     readOnly?: boolean;
+    /**
+     * The visual style of the filter. List-item or Button.
+     *
+     * @default "button"
+     */
+    visualStyle?: FilterVisualStyle;
 }
 /**
  * The Filter component is the base component used in the manager to filter data.
@@ -51,4 +67,4 @@ export interface FilterProps extends ButtonProps {
  * @param {FilterProps} props - The props for the Filter component
  * @returns {ReactElement} Filter component
  */
-export declare const Filter: ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader, readOnly, ...rest }: FilterProps) => ReactElement;
+export declare const Filter: ({ title, asIcon, children, popoverProps, isActive, activeLabel, activeOptionsCount, menuListProps, className, dataTestId, withStickyHeader, readOnly, visualStyle, size, }: FilterProps) => ReactElement;

package/src/FilterBody/FilterBody.d.ts

@@ -15,7 +15,7 @@ export interface FilterBodyProps extends CommonProps {
 /**
  * The FilterBody component is used to display the title of the filter and a reset button.
  * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The reset button will be enabled if the showReset prop is set to true.
  *
  * @param {FilterBodyProps} props - The props for the FilterBody component
  */

package/src/FilterHeader/FilterHeader.d.ts

@@ -1,12 +1,12 @@
 import { CommonProps } from "@trackunit/react-components";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 export interface FilterHeaderProps extends CommonProps {
     /**
      * The title of the filter will be displayed in the header.
      */
-    title: string;
+    title?: string;
     /**
-     * Used to indicate if the user has any active selection in the filter.
+     * Used to indicate if the user has any active selection in the filter that can be reset.
      */
     showReset?: boolean;
     /**
@@ -19,20 +19,24 @@ export interface FilterHeaderProps extends CommonProps {
      */
     onReset?: () => void;
     /**
-     * Optional elements to render blow the title and reset button.
-     * This is intended for use with the search component.
+     * Optional search component to render in the header.
+     */
+    searchComponent?: ReactNode;
+    /**
+     * Optional elements to render along the reset button.
+     * For example: a "Select All" button.
      */
     children?: ReactNode;
 }
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
  * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The reset button will only be enabled if the showReset prop is set to true.
  *
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
  * @returns {ReactElement} FilterHeader component
  */
-export declare const FilterHeader: ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, className, ...rest }: FilterHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterHeader: ({ dataTestId, title, resetLabel, showReset, onReset, loading, children, searchComponent, className, ...rest }: FilterHeaderProps) => ReactElement;
 export declare const cvaFilterHeaderButton: (props?: ({
     isVisible?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;