@trackunit/react-filter-components 0.0.203 → 0.0.205

package/index.cjs.js

@@ -113,7 +113,7 @@ const FilterFooter = (_a) => {
     var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
     return (jsxRuntime.jsx("div", Object.assign({ className: cvaFilterFooter({ className }), "data-testid": dataTestId }, rest, { children: children })));
 };
-const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "before:p-1"]);
+const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "p-1"]);
 
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -147,14 +147,17 @@ const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
  * @returns {JSX.Element} FilterItem component
  */
 const CheckBoxFilterItem = (_a) => {
-    var { itemCount, className, prefix, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps"]);
+    var { itemCount, className, prefix, dataTestId, menuItemProps, showTooltip } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps", "showTooltip"]);
     const checkboxProps = Object.assign({}, rest);
     const checkboxRef = React.useRef(null);
-    return (jsxRuntime.jsx(reactComponents.MenuItem, Object.assign({ onClick: e => {
+    const [labelRef, setLabelRef] = React.useState(null);
+    const enableTooltip = reactComponents.useIsTextCutOff(labelRef);
+    const Item = (jsxRuntime.jsx(reactComponents.MenuItem, Object.assign({ onClick: e => {
             var _a;
             e.preventDefault();
             (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsxRuntime.jsx("small", { children: itemCount }), children: jsxRuntime.jsx(reactFormComponents.Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
+        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsxRuntime.jsx("small", { children: itemCount }), children: jsxRuntime.jsx(reactFormComponents.Checkbox, Object.assign({ ref: checkboxRef, onLabelRefChange: label => setLabelRef(label) }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
+    return (jsxRuntime.jsx("div", { children: enableTooltip && Boolean(showTooltip) ? (jsxRuntime.jsx(reactComponents.Tooltip, { label: checkboxProps.label, contentTextType: "span", placement: "top", className: "w-full", children: Item }, "tooltip-" + checkboxProps.name)) : (Item) }));
 };
 
 /**

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { Popover, PopoverTrigger, Button, PopoverContent, MenuList, Spinner, MenuItem, Text } from '@trackunit/react-components';
-import React, { useRef } from 'react';
+import { Popover, PopoverTrigger, Button, PopoverContent, MenuList, Spinner, useIsTextCutOff, MenuItem, Tooltip, Text } from '@trackunit/react-components';
+import React, { useRef, useState } from 'react';
 import { Checkbox, RadioItem } from '@trackunit/react-form-components';
 
 /******************************************************************************
@@ -105,7 +105,7 @@ const FilterFooter = (_a) => {
     var { className, dataTestId, children } = _a, rest = __rest(_a, ["className", "dataTestId", "children"]);
     return (jsx("div", Object.assign({ className: cvaFilterFooter({ className }), "data-testid": dataTestId }, rest, { children: children })));
 };
-const cvaFilterFooter = cvaMerge(["flex", "justify-end", "before:p-1"]);
+const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
 
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -139,14 +139,17 @@ const cvaFilterHeaderButton = cvaMerge([], {
  * @returns {JSX.Element} FilterItem component
  */
 const CheckBoxFilterItem = (_a) => {
-    var { itemCount, className, prefix, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps"]);
+    var { itemCount, className, prefix, dataTestId, menuItemProps, showTooltip } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps", "showTooltip"]);
     const checkboxProps = Object.assign({}, rest);
     const checkboxRef = useRef(null);
-    return (jsx(MenuItem, Object.assign({ onClick: e => {
+    const [labelRef, setLabelRef] = useState(null);
+    const enableTooltip = useIsTextCutOff(labelRef);
+    const Item = (jsx(MenuItem, Object.assign({ onClick: e => {
             var _a;
             e.preventDefault();
             (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsx("small", { children: itemCount }), children: jsx(Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
+        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsx("small", { children: itemCount }), children: jsx(Checkbox, Object.assign({ ref: checkboxRef, onLabelRefChange: label => setLabelRef(label) }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
+    return (jsx("div", { children: enableTooltip && Boolean(showTooltip) ? (jsx(Tooltip, { label: checkboxProps.label, contentTextType: "span", placement: "top", className: "w-full", children: Item }, "tooltip-" + checkboxProps.name)) : (Item) }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "0.0.203",
+  "version": "0.0.205",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.14",
-    "@trackunit/react-components": "0.1.158",
-    "@trackunit/react-form-components": "0.0.144",
+    "@trackunit/react-components": "0.1.160",
+    "@trackunit/react-form-components": "0.0.146",
     "react": "18.2.0"
   },
   "module": "./index.esm.js",

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

@@ -7,4 +7,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, ...rest }: CheckBoxFilterItemProps) => JSX.Element;
+export declare const CheckBoxFilterItem: ({ itemCount, className, prefix, dataTestId, menuItemProps, showTooltip, ...rest }: CheckBoxFilterItemProps) => JSX.Element;

package/src/FilterItem/types.d.ts

@@ -1,12 +1,14 @@
 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 RadioFilterItemProps<V extends string | number = string> extends RadioItemProps<V>, BaseFilterItemProps {
     /**
      * An boolean flag to set checkbox to checked state
      */
     selected?: boolean;
+    showTooltip?: boolean;
 }
 interface BaseFilterItemProps {
     /**