@trackunit/react-filter-components 1.13.22 → 1.13.26

package/index.cjs.js

@@ -96,8 +96,8 @@ const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "w-fu
  * @param {FilterFooterProps} props - The props for the FilterFooter component
  * @returns {ReactElement} FilterFooter component
  */
-const FilterFooter = ({ className, "data-testid": dataTestId, children, ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
+const FilterFooter = ({ className, "data-testid": dataTestId, children, ref, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "border-t", "border-neutral-200", "p-1"]);
 
@@ -109,8 +109,8 @@ const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
  * @returns {ReactElement} FilterHeader component
  */
-const FilterHeader = ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(className, "min-w-[280px]"), ...rest, "data-testid": dataTestId, children: title ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "p-1", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-1 text-sm font-medium uppercase text-neutral-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-neutral-200" })] })) : null }));
+const FilterHeader = ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ref, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(className, "min-w-[280px]"), ...rest, "data-testid": dataTestId, ref: ref, children: title ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "p-1", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-1 text-sm font-medium uppercase text-neutral-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-neutral-200" })] })) : null }));
 };
 const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
@@ -131,12 +131,12 @@ const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
  * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
  * @returns {ReactElement} FilterItem component
  */
-const CheckBoxFilterItem = ({ itemCount, className, suffix, "data-testid": dataTestId, label, ...rest }) => {
+const CheckBoxFilterItem = ({ itemCount, className, suffix, "data-testid": dataTestId, label, ref, ...rest }) => {
     return (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: reactComponents.cvaInteractableItem({
             selection: "auto",
             focus: "auto",
             className: tailwindMerge.twMerge(["py-1", "mx-1", "pl-2", "pr-3", "w-auto", "h-auto", "items-center", "gap-x-2", "select-none", "rounded"], className),
-        }), "data-testid": 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 }));
+        }), "data-testid": dataTestId ?? `${label}-checkbox-filter-item`, label: label, ref: ref, 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

@@ -94,8 +94,8 @@ const cvaFilterBody = cvaMerge(["grid", "gap-1", "w-full"], {
  * @param {FilterFooterProps} props - The props for the FilterFooter component
  * @returns {ReactElement} FilterFooter component
  */
-const FilterFooter = ({ className, "data-testid": dataTestId, children, ...rest }) => {
-    return (jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
+const FilterFooter = ({ className, "data-testid": dataTestId, children, ref, ...rest }) => {
+    return (jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 const cvaFilterFooter = cvaMerge(["flex", "justify-end", "border-t", "border-neutral-200", "p-1"]);
 
@@ -107,8 +107,8 @@ const cvaFilterFooter = cvaMerge(["flex", "justify-end", "border-t", "border-neu
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
  * @returns {ReactElement} FilterHeader component
  */
-const FilterHeader = ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ...rest }) => {
-    return (jsx("div", { className: twMerge(className, "min-w-[280px]"), ...rest, "data-testid": dataTestId, children: title ? (jsxs(Fragment, { children: [jsx("div", { className: "p-1", children: jsxs("div", { className: "flex flex-col items-center justify-between gap-1 text-sm font-medium uppercase text-neutral-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-neutral-200" })] })) : null }));
+const FilterHeader = ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ref, ...rest }) => {
+    return (jsx("div", { className: twMerge(className, "min-w-[280px]"), ...rest, "data-testid": dataTestId, ref: ref, children: title ? (jsxs(Fragment, { children: [jsx("div", { className: "p-1", children: jsxs("div", { className: "flex flex-col items-center justify-between gap-1 text-sm font-medium uppercase text-neutral-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-neutral-200" })] })) : null }));
 };
 const cvaFilterHeaderButton = cvaMerge([], {
     variants: {
@@ -129,12 +129,12 @@ const cvaFilterHeaderButton = cvaMerge([], {
  * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
  * @returns {ReactElement} FilterItem component
  */
-const CheckBoxFilterItem = ({ itemCount, className, suffix, "data-testid": dataTestId, label, ...rest }) => {
+const CheckBoxFilterItem = ({ itemCount, className, suffix, "data-testid": dataTestId, label, ref, ...rest }) => {
     return (jsx(Checkbox, { className: cvaInteractableItem({
             selection: "auto",
             focus: "auto",
             className: twMerge(["py-1", "mx-1", "pl-2", "pr-3", "w-auto", "h-auto", "items-center", "gap-x-2", "select-none", "rounded"], className),
-        }), "data-testid": 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 }));
+        }), "data-testid": dataTestId ?? `${label}-checkbox-filter-item`, label: label, ref: ref, 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.13.22",
+  "version": "1.13.26",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "react": "19.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-icons": "1.11.41",
-    "@trackunit/css-class-variance-utilities": "1.11.42",
-    "@trackunit/react-components": "1.17.17",
-    "@trackunit/react-form-components": "1.14.19"
+    "@trackunit/ui-icons": "1.11.42",
+    "@trackunit/css-class-variance-utilities": "1.11.43",
+    "@trackunit/react-components": "1.17.21",
+    "@trackunit/react-form-components": "1.14.23"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/FilterFooter/FilterFooter.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactNode } from "react";
-export interface FilterFooterProps extends CommonProps {
+export interface FilterFooterProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * Items to render in the filter footer
      */
@@ -13,5 +13,5 @@ export interface FilterFooterProps extends CommonProps {
  * @param {FilterFooterProps} props - The props for the FilterFooter component
  * @returns {ReactElement} FilterFooter component
  */
-export declare const FilterFooter: ({ className, "data-testid": dataTestId, children, ...rest }: FilterFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterFooter: ({ className, "data-testid": dataTestId, children, ref, ...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,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-export interface FilterHeaderProps extends CommonProps {
+export interface FilterHeaderProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The title of the filter will be displayed in the header.
      */
@@ -36,7 +36,7 @@ export interface FilterHeaderProps extends CommonProps {
  * @param {FilterHeaderProps} props - The props for the FilterHeader component
  * @returns {ReactElement} FilterHeader component
  */
-export declare const FilterHeader: ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading, children, searchComponent, className, ...rest }: FilterHeaderProps) => ReactElement;
+export declare const FilterHeader: ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading, children, searchComponent, className, ref, ...rest }: FilterHeaderProps) => ReactElement;
 export declare const cvaFilterHeaderButton: (props?: ({
     isVisible?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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 {ReactElement} FilterItem component
  */
-export declare const CheckBoxFilterItem: ({ itemCount, className, suffix, "data-testid": dataTestId, label, ...rest }: CheckBoxFilterItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBoxFilterItem: ({ itemCount, className, suffix, "data-testid": dataTestId, label, ref, ...rest }: CheckBoxFilterItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/FilterItem/types.d.ts

@@ -1,5 +1,6 @@
+import { Refable } from "@trackunit/react-components";
 import { CheckboxProps, RadioItemProps } from "@trackunit/react-form-components";
-export type CheckBoxFilterItemProps = CheckboxProps & BaseFilterItemProps;
+export type CheckBoxFilterItemProps = CheckboxProps & BaseFilterItemProps & Refable<HTMLInputElement>;
 export interface RadioFilterItemProps<TProps extends string | number = string> extends RadioItemProps<TProps>, BaseFilterItemProps {
     /**
      * An boolean flag to set checkbox to checked state