@trackunit/react-filter-components 0.0.602 → 0.0.604

package/index.cjs.js

@@ -5,6 +5,7 @@ var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities
 var reactComponents = require('@trackunit/react-components');
 var React = require('react');
 var reactFormComponents = require('@trackunit/react-form-components');
+var tailwindMerge = require('tailwind-merge');
 
 const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
@@ -55,7 +56,7 @@ const FilterBody = React.forwardRef(({ children, dataTestId, limitSize = false,
     return (jsxRuntime.jsx("div", { className: cvaFilterBody({ limitSize }), ref: ref, ...rest, "data-testid": dataTestId, children: children }));
 });
 FilterBody.displayName = "FilterBody";
-const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
+const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "rounded", "w-full"], {
     variants: {
         limitSize: {
             true: "max-h-80 max-w-sm overflow-hidden overflow-y-auto",
@@ -89,7 +90,7 @@ const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end
  * @returns {JSX.Element} FilterHeader component
  */
 const FilterHeader = ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }) => {
-    return (jsxRuntime.jsxs("div", { className: "grid gap-1 p-1", ...rest, "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: "flex h-6 items-center justify-between pl-1 text-sm font-medium uppercase text-slate-600 gap-1", 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: "secondary-danger", children: resetLabel }))] }), children] }));
+    return (jsxRuntime.jsxs("div", { className: "grid gap-1 border-b-2 p-1", ...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 cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
@@ -110,17 +111,12 @@ const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
  * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
  * @returns {JSX.Element} FilterItem component
  */
-const CheckBoxFilterItem = ({ itemCount, className, prefix, dataTestId, menuItemProps, showTooltip, ...rest }) => {
-    const checkboxProps = { ...rest };
-    const checkboxRef = React.useRef(null);
-    const [labelRef, setLabelRef] = React.useState(null);
-    const enableTooltip = reactComponents.useIsTextCutOff(labelRef);
-    const Item = (jsxRuntime.jsx(reactComponents.MenuItem, { className: className, dataTestId: dataTestId, disabled: checkboxProps.disabled, onClick: e => {
-            var _a;
-            e.preventDefault();
-            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }, prefix: prefix, selected: checkboxProps.checked, ...menuItemProps, suffix: jsxRuntime.jsx("small", { children: itemCount }), tabIndex: -1, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { onLabelRefChange: label => setLabelRef(label), ref: checkboxRef, ...checkboxProps, className: "flex-grow cursor-pointer", dataTestId: dataTestId ? `${dataTestId}-checkbox` : undefined }) }));
-    return (jsxRuntime.jsx("div", { children: enableTooltip && Boolean(showTooltip) ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", label: checkboxProps.label, placement: "top", children: Item }, "tooltip-" + checkboxProps.name)) : (Item) }));
+const CheckBoxFilterItem = ({ itemCount, className, suffix, dataTestId, label, ...rest }) => {
+    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),
+        }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? 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 }));
 };
 
 /**
@@ -130,7 +126,13 @@ const CheckBoxFilterItem = ({ itemCount, className, prefix, dataTestId, menuItem
  * @param {RadioFilterItemProps} props - The props for the FilterItem component
  * @returns {JSX.Element} FilterItem component
  */
-const RadioFilterItem = ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }) => (jsxRuntime.jsx(reactComponents.MenuItem, { className: "my-[2px] flex cursor-default justify-between p-0", dataTestId: dataTestId, selected: selected, suffix: jsxRuntime.jsx("small", { className: "pl-1 pr-3", children: itemCount }), ...menuItemProps, children: jsxRuntime.jsx(reactFormComponents.RadioItem, { ...rest, className: "flex w-full items-center py-2 pl-2", dataTestId: dataTestId ? `${dataTestId}-radio` : undefined, label: jsxRuntime.jsx(reactComponents.Text, { className: "cursor-pointer", type: "span", children: label }), value: value }) }));
+const RadioFilterItem = ({ value, label, itemCount, selected, dataTestId, suffix, className, ...rest }) => {
+    return (jsxRuntime.jsx(reactFormComponents.RadioItem, { 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),
+        }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : `${label}-radio-filter-item`, label: label, suffix: itemCount !== undefined || suffix ? (jsxRuntime.jsxs("span", { className: reactComponents.cvaMenuItemSuffix({ selected: rest.checked }), children: [suffix, itemCount === undefined ? null : itemCount] })) : null, value: value, ...rest }));
+};
 
 exports.CheckBoxFilterItem = CheckBoxFilterItem;
 exports.Filter = Filter;

package/index.esm.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Popover, PopoverTrigger, Button, PopoverContent, MenuList, Spinner, useIsTextCutOff, MenuItem, Tooltip, Text } from '@trackunit/react-components';
-import React, { useRef, useState } from 'react';
+import { Popover, PopoverTrigger, Button, PopoverContent, MenuList, Spinner, cvaInteractableItem, cvaMenuItemSuffix } from '@trackunit/react-components';
+import React from 'react';
 import { Checkbox, RadioItem } from '@trackunit/react-form-components';
+import { twMerge } from 'tailwind-merge';
 
 const cvaFilterCustomButton = cvaMerge([], {
     variants: {
@@ -53,7 +54,7 @@ const FilterBody = React.forwardRef(({ children, dataTestId, limitSize = false,
     return (jsx("div", { className: cvaFilterBody({ limitSize }), ref: ref, ...rest, "data-testid": dataTestId, children: children }));
 });
 FilterBody.displayName = "FilterBody";
-const cvaFilterBody = cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
+const cvaFilterBody = cvaMerge(["grid", "gap-1", "rounded", "w-full"], {
     variants: {
         limitSize: {
             true: "max-h-80 max-w-sm overflow-hidden overflow-y-auto",
@@ -87,7 +88,7 @@ const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
  * @returns {JSX.Element} FilterHeader component
  */
 const FilterHeader = ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }) => {
-    return (jsxs("div", { className: "grid gap-1 p-1", ...rest, "data-testid": dataTestId, children: [jsxs("div", { className: "flex h-6 items-center justify-between pl-1 text-sm font-medium uppercase text-slate-600 gap-1", 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: "secondary-danger", children: resetLabel }))] }), children] }));
+    return (jsxs("div", { className: "grid gap-1 border-b-2 p-1", ...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 cvaFilterHeaderButton = cvaMerge([], {
     variants: {
@@ -108,17 +109,12 @@ const cvaFilterHeaderButton = cvaMerge([], {
  * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
  * @returns {JSX.Element} FilterItem component
  */
-const CheckBoxFilterItem = ({ itemCount, className, prefix, dataTestId, menuItemProps, showTooltip, ...rest }) => {
-    const checkboxProps = { ...rest };
-    const checkboxRef = useRef(null);
-    const [labelRef, setLabelRef] = useState(null);
-    const enableTooltip = useIsTextCutOff(labelRef);
-    const Item = (jsx(MenuItem, { className: className, dataTestId: dataTestId, disabled: checkboxProps.disabled, onClick: e => {
-            var _a;
-            e.preventDefault();
-            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }, prefix: prefix, selected: checkboxProps.checked, ...menuItemProps, suffix: jsx("small", { children: itemCount }), tabIndex: -1, children: jsx(Checkbox, { onLabelRefChange: label => setLabelRef(label), ref: checkboxRef, ...checkboxProps, className: "flex-grow cursor-pointer", dataTestId: dataTestId ? `${dataTestId}-checkbox` : undefined }) }));
-    return (jsx("div", { children: enableTooltip && Boolean(showTooltip) ? (jsx(Tooltip, { className: "w-full", label: checkboxProps.label, placement: "top", children: Item }, "tooltip-" + checkboxProps.name)) : (Item) }));
+const CheckBoxFilterItem = ({ itemCount, className, suffix, dataTestId, label, ...rest }) => {
+    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),
+        }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? 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 }));
 };
 
 /**
@@ -128,6 +124,12 @@ const CheckBoxFilterItem = ({ itemCount, className, prefix, dataTestId, menuItem
  * @param {RadioFilterItemProps} props - The props for the FilterItem component
  * @returns {JSX.Element} FilterItem component
  */
-const RadioFilterItem = ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }) => (jsx(MenuItem, { className: "my-[2px] flex cursor-default justify-between p-0", dataTestId: dataTestId, selected: selected, suffix: jsx("small", { className: "pl-1 pr-3", children: itemCount }), ...menuItemProps, children: jsx(RadioItem, { ...rest, className: "flex w-full items-center py-2 pl-2", dataTestId: dataTestId ? `${dataTestId}-radio` : undefined, label: jsx(Text, { className: "cursor-pointer", type: "span", children: label }), value: value }) }));
+const RadioFilterItem = ({ value, label, itemCount, selected, dataTestId, suffix, className, ...rest }) => {
+    return (jsx(RadioItem, { 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),
+        }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : `${label}-radio-filter-item`, label: label, suffix: itemCount !== undefined || suffix ? (jsxs("span", { className: cvaMenuItemSuffix({ selected: rest.checked }), children: [suffix, itemCount === undefined ? null : itemCount] })) : null, value: value, ...rest }));
+};
 
 export { CheckBoxFilterItem, Filter, FilterBody, FilterFooter, FilterHeader, RadioFilterItem, cvaFilterFooter, cvaFilterHeaderButton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "0.0.602",
+  "version": "0.0.604",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,7 +10,8 @@
     "@trackunit/css-class-variance-utilities": "*",
     "@trackunit/react-components": "*",
     "react": "18.3.1",
-    "@trackunit/react-form-components": "*"
+    "@trackunit/react-form-components": "*",
+    "tailwind-merge": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/FilterItem/CheckBoxFilter/CheckBoxFilterItem.d.ts

@@ -6,4 +6,4 @@ import { CheckBoxFilterItemProps } from "../types";
  * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
  * @returns {JSX.Element} FilterItem component
  */
-export declare const CheckBoxFilterItem: ({ itemCount, className, prefix, dataTestId, menuItemProps, showTooltip, ...rest }: CheckBoxFilterItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBoxFilterItem: ({ itemCount, className, suffix, dataTestId, label, ...rest }: CheckBoxFilterItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/FilterItem/RadioFilter/RadioFilterItem.d.ts

@@ -6,4 +6,4 @@ import { RadioFilterItemProps } from "../types";
  * @param {RadioFilterItemProps} props - The props for the FilterItem component
  * @returns {JSX.Element} FilterItem component
  */
-export declare const RadioFilterItem: ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }: RadioFilterItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioFilterItem: ({ value, label, itemCount, selected, dataTestId, suffix, className, ...rest }: RadioFilterItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/FilterItem/types.d.ts

@@ -1,14 +1,11 @@
-import { MenuItemProps } from "@trackunit/react-components";
 import { CheckboxProps, RadioItemProps } from "@trackunit/react-form-components";
-export interface CheckBoxFilterItemProps extends Omit<CheckboxProps, "prefix" | "suffix">, BaseFilterItemProps {
-    showTooltip?: boolean;
+export interface CheckBoxFilterItemProps extends CheckboxProps, BaseFilterItemProps {
 }
 export interface RadioFilterItemProps<TProps extends string | number = string> extends RadioItemProps<TProps>, BaseFilterItemProps {
     /**
      * An boolean flag to set checkbox to checked state
      */
     selected?: boolean;
-    showTooltip?: boolean;
 }
 interface BaseFilterItemProps {
     /**
@@ -16,10 +13,5 @@ interface BaseFilterItemProps {
      * This displays the number next to the label.
      */
     itemCount?: number;
-    /**
-     * Properties to be passed to the MenuItem component.
-     */
-    menuItemProps?: MenuItemProps;
-    prefix?: MenuItemProps["prefix"];
 }
 export {};