@trackunit/react-filter-components 1.7.29 → 1.7.30

package/index.cjs.js

@@ -90,9 +90,8 @@ const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "w-fu
 });
 
 /**
- * The FilterFooter component is used to display the title of the filter and a reset button.
- * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The FilterFooter component is a container component for filter footer content.
+ * It provides a flexible layout with right-aligned content for filter components.
  *
  * @param {FilterFooterProps} props - The props for the FilterFooter component
  * @returns {ReactElement} FilterFooter component
@@ -100,7 +99,7 @@ const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "w-fu
 const FilterFooter = ({ className, dataTestId, children, ...rest }) => {
     return (jsxRuntime.jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
-const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "p-1"]);
+const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "border-t", "border-neutral-200", "p-1"]);
 
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -111,7 +110,7 @@ const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end
  * @returns {ReactElement} FilterHeader component
  */
 const FilterHeader = ({ dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(className, "p-1", "min-w-[280px]"), ...rest, "data-testid": dataTestId, children: title ? (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 }));
+    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 cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
     variants: {

package/index.esm.js

@@ -88,9 +88,8 @@ const cvaFilterBody = cvaMerge(["grid", "gap-1", "w-full"], {
 });
 
 /**
- * The FilterFooter component is used to display the title of the filter and a reset button.
- * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The FilterFooter component is a container component for filter footer content.
+ * It provides a flexible layout with right-aligned content for filter components.
  *
  * @param {FilterFooterProps} props - The props for the FilterFooter component
  * @returns {ReactElement} FilterFooter component
@@ -98,7 +97,7 @@ const cvaFilterBody = cvaMerge(["grid", "gap-1", "w-full"], {
 const FilterFooter = ({ className, dataTestId, children, ...rest }) => {
     return (jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
-const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
+const cvaFilterFooter = cvaMerge(["flex", "justify-end", "border-t", "border-neutral-200", "p-1"]);
 
 /**
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -109,7 +108,7 @@ const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
  * @returns {ReactElement} FilterHeader component
  */
 const FilterHeader = ({ dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ...rest }) => {
-    return (jsx("div", { className: twMerge(className, "p-1", "min-w-[280px]"), ...rest, "data-testid": dataTestId, children: title ? (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 }));
+    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 cvaFilterHeaderButton = cvaMerge([], {
     variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "1.7.29",
+  "version": "1.7.30",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/FilterFooter/FilterFooter.d.ts

@@ -7,9 +7,8 @@ export interface FilterFooterProps extends CommonProps {
     children?: ReactNode;
 }
 /**
- * The FilterFooter component is used to display the title of the filter and a reset button.
- * IT is intended for use in the Filter component.
- * The reset button will only be visible if the showReset prop is set to true.
+ * The FilterFooter component is a container component for filter footer content.
+ * It provides a flexible layout with right-aligned content for filter components.
  *
  * @param {FilterFooterProps} props - The props for the FilterFooter component
  * @returns {ReactElement} FilterFooter component