@trackunit/react-filter-components 1.24.0 → 1.24.2

package/index.cjs.js

@@ -73,8 +73,8 @@ const cvaMenuListOverrides = cssClassVarianceUtilities.cvaMerge(["overflow-x-hid
  *
  * @param {FilterBodyProps} props - The props for the FilterBody component
  */
-const FilterBody = ({ children, className, "data-testid": dataTestId, limitSize = false, ref, ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: cvaFilterBody({ limitSize, className }), ref: ref, ...rest, "data-testid": dataTestId, children: children }));
+const FilterBody = ({ children, className, "data-testid": dataTestId, limitSize = false, ref, style, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: cvaFilterBody({ limitSize, className }), ref: ref, style: style, ...rest, "data-testid": dataTestId, children: children }));
 };
 FilterBody.displayName = "FilterBody";
 const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "w-full"], {
@@ -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, ref, ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
+const FilterFooter = ({ className, "data-testid": dataTestId, children, ref, style, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ref: ref, style: style, ...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, 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, 
+const FilterHeader = ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ref, style, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(className, "min-w-[280px]"), style: style, ...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, 
                                             // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
                                             onClick: onReset, size: "small", variant: "ghost", children: resetLabel })) })] })] }) }), jsxRuntime.jsx("hr", { className: "w-full border-neutral-200" })] })) : null }));
 };

package/index.esm.js

@@ -71,8 +71,8 @@ const cvaMenuListOverrides = cvaMerge(["overflow-x-hidden", "relative", "!max-w-
  *
  * @param {FilterBodyProps} props - The props for the FilterBody component
  */
-const FilterBody = ({ children, className, "data-testid": dataTestId, limitSize = false, ref, ...rest }) => {
-    return (jsx("div", { className: cvaFilterBody({ limitSize, className }), ref: ref, ...rest, "data-testid": dataTestId, children: children }));
+const FilterBody = ({ children, className, "data-testid": dataTestId, limitSize = false, ref, style, ...rest }) => {
+    return (jsx("div", { className: cvaFilterBody({ limitSize, className }), ref: ref, style: style, ...rest, "data-testid": dataTestId, children: children }));
 };
 FilterBody.displayName = "FilterBody";
 const cvaFilterBody = cvaMerge(["grid", "gap-1", "w-full"], {
@@ -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, ref, ...rest }) => {
-    return (jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
+const FilterFooter = ({ className, "data-testid": dataTestId, children, ref, style, ...rest }) => {
+    return (jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ref: ref, style: style, ...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, 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, 
+const FilterHeader = ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ref, style, ...rest }) => {
+    return (jsx("div", { className: twMerge(className, "min-w-[280px]"), style: style, ...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, 
                                             // eslint-disable-next-line @trackunit/prefer-event-specific-callback-naming
                                             onClick: onReset, size: "small", variant: "ghost", children: resetLabel })) })] })] }) }), jsx("hr", { className: "w-full border-neutral-200" })] })) : null }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "1.24.0",
+  "version": "1.24.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,10 +8,10 @@
   },
   "dependencies": {
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-icons": "1.13.0",
-    "@trackunit/css-class-variance-utilities": "1.13.0",
-    "@trackunit/react-components": "1.24.0",
-    "@trackunit/react-form-components": "1.25.0"
+    "@trackunit/ui-icons": "1.13.1",
+    "@trackunit/css-class-variance-utilities": "1.13.1",
+    "@trackunit/react-components": "1.24.1",
+    "@trackunit/react-form-components": "1.25.2"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.114.29",

package/src/FilterBody/FilterBody.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, type Styleable } from "@trackunit/react-components";
 import { ReactNode, Ref } from "react";
-export interface FilterBodyProps extends CommonProps {
+export interface FilterBodyProps extends CommonProps, Styleable {
     /**
      * Children to render in the body of the filter.
      * This is intended for FilterItems.
@@ -20,6 +20,6 @@ export interface FilterBodyProps extends CommonProps {
  * @param {FilterBodyProps} props - The props for the FilterBody component
  */
 export declare const FilterBody: {
-    ({ children, className, "data-testid": dataTestId, limitSize, ref, ...rest }: FilterBodyProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, "data-testid": dataTestId, limitSize, ref, style, ...rest }: FilterBodyProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/FilterFooter/FilterFooter.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactNode } from "react";
-export interface FilterFooterProps extends CommonProps, Refable<HTMLDivElement> {
+export interface FilterFooterProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * Items to render in the filter footer
      */
@@ -13,5 +13,5 @@ export interface FilterFooterProps extends CommonProps, Refable<HTMLDivElement>
  * @param {FilterFooterProps} props - The props for the FilterFooter component
  * @returns {ReactElement} FilterFooter component
  */
-export declare const FilterFooter: ({ className, "data-testid": dataTestId, children, ref, ...rest }: FilterFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterFooter: ({ className, "data-testid": dataTestId, children, ref, style, ...rest }: FilterFooterProps) => import("react/jsx-runtime").JSX.Element;
 export declare const cvaFilterFooter: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/FilterHeader/FilterHeader.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-export interface FilterHeaderProps extends CommonProps, Refable<HTMLDivElement> {
+export interface FilterHeaderProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * The title of the filter will be displayed in the header.
      */
@@ -36,7 +36,7 @@ export interface FilterHeaderProps extends CommonProps, Refable<HTMLDivElement>
  * @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, ref, ...rest }: FilterHeaderProps) => ReactElement;
+export declare const FilterHeader: ({ "data-testid": dataTestId, title, resetLabel, showReset, onReset, loading, children, searchComponent, className, ref, style, ...rest }: FilterHeaderProps) => ReactElement;
 export declare const cvaFilterHeaderButton: (props?: ({
     isVisible?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;