@trackunit/react-filter-components 1.3.28 → 1.3.32

package/index.cjs.js

@@ -3,7 +3,6 @@
 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');
 
@@ -29,7 +28,7 @@ const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge(["justify-norma
  * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
  *
  * @param {FilterProps} props - The props for the Filter component
- * @returns {JSX.Element} Filter component
+ * @returns {ReactElement} Filter component
  */
 const Filter = ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly, ...rest }) => {
     const buttonProps = { ...rest };
@@ -50,11 +49,10 @@ const cvaMenuListOverrides = cssClassVarianceUtilities.cvaMerge(["overflow-x-hid
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterBodyProps} props - The props for the FilterBody component
- * @returns {JSX.Element} FilterBody component
  */
-const FilterBody = react.forwardRef(({ children, className, dataTestId, limitSize = false, ...rest }, ref) => {
+const FilterBody = ({ children, className, dataTestId, limitSize = false, ref, ...rest }) => {
     return (jsxRuntime.jsx("div", { className: cvaFilterBody({ limitSize, className }), ref: ref, ...rest, "data-testid": dataTestId, children: children }));
-});
+};
 FilterBody.displayName = "FilterBody";
 const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "w-full"], {
     variants: {
@@ -74,7 +72,7 @@ const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "w-fu
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterFooterProps} props - The props for the FilterFooter component
- * @returns {JSX.Element} FilterFooter component
+ * @returns {ReactElement} FilterFooter component
  */
 const FilterFooter = ({ className, dataTestId, children, ...rest }) => {
     return (jsxRuntime.jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
@@ -87,7 +85,7 @@ const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
- * @returns {JSX.Element} 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] }));
@@ -109,7 +107,7 @@ const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
  * This component in generic and does not have any connection to the data.
  *
  * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
+ * @returns {ReactElement} FilterItem component
  */
 const CheckBoxFilterItem = ({ itemCount, className, suffix, dataTestId, label, ...rest }) => {
     return (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: reactComponents.cvaInteractableItem({
@@ -124,7 +122,7 @@ const CheckBoxFilterItem = ({ itemCount, className, suffix, dataTestId, label, .
  * This component in generic and does not have any connection to the data.
  *
  * @param {RadioFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
+ * @returns {ReactElement} FilterItem component
  */
 const RadioFilterItem = ({ value, label, itemCount, selected, dataTestId, suffix, className, ...rest }) => {
     return (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: reactComponents.cvaInteractableItem({

package/index.esm.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } 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 { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox, RadioItem } from '@trackunit/react-form-components';
 
@@ -27,7 +26,7 @@ const cvaFilterCustomButton = cvaMerge(["justify-normal"], {
  * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
  *
  * @param {FilterProps} props - The props for the Filter component
- * @returns {JSX.Element} Filter component
+ * @returns {ReactElement} Filter component
  */
 const Filter = ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly, ...rest }) => {
     const buttonProps = { ...rest };
@@ -48,11 +47,10 @@ const cvaMenuListOverrides = cvaMerge(["overflow-x-hidden", "relative", "!max-w-
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterBodyProps} props - The props for the FilterBody component
- * @returns {JSX.Element} FilterBody component
  */
-const FilterBody = forwardRef(({ children, className, dataTestId, limitSize = false, ...rest }, ref) => {
+const FilterBody = ({ children, className, dataTestId, limitSize = false, ref, ...rest }) => {
     return (jsx("div", { className: cvaFilterBody({ limitSize, className }), ref: ref, ...rest, "data-testid": dataTestId, children: children }));
-});
+};
 FilterBody.displayName = "FilterBody";
 const cvaFilterBody = cvaMerge(["grid", "gap-1", "w-full"], {
     variants: {
@@ -72,7 +70,7 @@ const cvaFilterBody = cvaMerge(["grid", "gap-1", "w-full"], {
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterFooterProps} props - The props for the FilterFooter component
- * @returns {JSX.Element} FilterFooter component
+ * @returns {ReactElement} FilterFooter component
  */
 const FilterFooter = ({ className, dataTestId, children, ...rest }) => {
     return (jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
@@ -85,7 +83,7 @@ const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
- * @returns {JSX.Element} 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] }));
@@ -107,7 +105,7 @@ const cvaFilterHeaderButton = cvaMerge([], {
  * This component in generic and does not have any connection to the data.
  *
  * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
+ * @returns {ReactElement} FilterItem component
  */
 const CheckBoxFilterItem = ({ itemCount, className, suffix, dataTestId, label, ...rest }) => {
     return (jsx(Checkbox, { className: cvaInteractableItem({
@@ -122,7 +120,7 @@ const CheckBoxFilterItem = ({ itemCount, className, suffix, dataTestId, label, .
  * This component in generic and does not have any connection to the data.
  *
  * @param {RadioFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
+ * @returns {ReactElement} FilterItem component
  */
 const RadioFilterItem = ({ value, label, itemCount, selected, dataTestId, suffix, className, ...rest }) => {
     return (jsx(RadioItem, { className: cvaInteractableItem({

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "1.3.28",
+  "version": "1.3.32",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=20.x"
   },
   "dependencies": {
-    "react": "18.3.1",
+    "react": "19.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.3.23",
-    "@trackunit/react-components": "1.4.23",
-    "@trackunit/react-form-components": "1.3.28"
+    "@trackunit/css-class-variance-utilities": "1.3.27",
+    "@trackunit/react-components": "1.4.27",
+    "@trackunit/react-form-components": "1.3.32"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Filter/Filter.d.ts

@@ -1,4 +1,5 @@
 import { ButtonProps, MenuListProps, PopoverProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
 export interface FilterProps extends ButtonProps {
     /**
      * The title/name of the filter.
@@ -48,6 +49,6 @@ export interface FilterProps extends ButtonProps {
  * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
  *
  * @param {FilterProps} props - The props for the Filter component
- * @returns {JSX.Element} Filter component
+ * @returns {ReactElement} Filter component
  */
-export declare const Filter: ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader, readOnly, ...rest }: FilterProps) => JSX.Element;
+export declare const Filter: ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader, readOnly, ...rest }: FilterProps) => ReactElement;

package/src/FilterBody/FilterBody.d.ts

@@ -1,5 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 export interface FilterBodyProps extends CommonProps {
     /**
      * Children to render in the body of the filter.
@@ -7,6 +7,10 @@ export interface FilterBodyProps extends CommonProps {
      */
     children?: ReactNode;
     limitSize?: boolean;
+    /**
+     * A ref for the component
+     */
+    ref?: Ref<HTMLDivElement>;
 }
 /**
  * The FilterBody component is used to display the title of the filter and a reset button.
@@ -14,6 +18,8 @@ export interface FilterBodyProps extends CommonProps {
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterBodyProps} props - The props for the FilterBody component
- * @returns {JSX.Element} FilterBody component
  */
-export declare const FilterBody: import("react").ForwardRefExoticComponent<FilterBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FilterBody: {
+    ({ children, className, dataTestId, limitSize, ref, ...rest }: FilterBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/FilterFooter/FilterFooter.d.ts

@@ -1,9 +1,10 @@
 import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
 export interface FilterFooterProps extends CommonProps {
     /**
      * Items to render in the filter footer
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 /**
  * The FilterFooter component is used to display the title of the filter and a reset button.
@@ -11,7 +12,7 @@ export interface FilterFooterProps extends CommonProps {
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterFooterProps} props - The props for the FilterFooter component
- * @returns {JSX.Element} FilterFooter component
+ * @returns {ReactElement} FilterFooter component
  */
 export declare const FilterFooter: ({ className, dataTestId, children, ...rest }: FilterFooterProps) => import("react/jsx-runtime").JSX.Element;
 export declare const cvaFilterFooter: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/FilterHeader/FilterHeader.d.ts

@@ -1,4 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
 export interface FilterHeaderProps extends CommonProps {
     /**
      * The title of the filter will be displayed in the header.
@@ -21,7 +22,7 @@ export interface FilterHeaderProps extends CommonProps {
      * Optional elements to render blow the title and reset button.
      * This is intended for use with the search component.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -29,7 +30,7 @@ export interface FilterHeaderProps extends CommonProps {
  * The reset button will only be visible if the showReset prop is set to true.
  *
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
- * @returns {JSX.Element} 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 cvaFilterHeaderButton: (props?: ({

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

@@ -4,6 +4,6 @@ import { CheckBoxFilterItemProps } from "../types";
  * This component in generic and does not have any connection to the data.
  *
  * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
+ * @returns {ReactElement} FilterItem component
  */
 export declare const CheckBoxFilterItem: ({ itemCount, className, suffix, dataTestId, label, ...rest }: CheckBoxFilterItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,6 @@ import { RadioFilterItemProps } from "../types";
  * This component in generic and does not have any connection to the data.
  *
  * @param {RadioFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
+ * @returns {ReactElement} FilterItem component
  */
 export declare const RadioFilterItem: ({ value, label, itemCount, selected, dataTestId, suffix, className, ...rest }: RadioFilterItemProps) => import("react/jsx-runtime").JSX.Element;