@trackunit/react-filter-components 1.7.29 → 1.7.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.cjs.js +4 -5
  2. package/index.esm.js +4 -5
  3. package/package.json +6 -6
  4. package/src/FilterFooter/FilterFooter.d.ts +2 -3
package/index.cjs.js CHANGED
@@ -90,9 +90,8 @@ const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "w-fu
90
90
  });
91
91
 
92
92
  /**
93
- * The FilterFooter component is used to display the title of the filter and a reset button.
94
- * IT is intended for use in the Filter component.
95
- * The reset button will only be visible if the showReset prop is set to true.
93
+ * The FilterFooter component is a container component for filter footer content.
94
+ * It provides a flexible layout with right-aligned content for filter components.
96
95
  *
97
96
  * @param {FilterFooterProps} props - The props for the FilterFooter component
98
97
  * @returns {ReactElement} FilterFooter component
@@ -100,7 +99,7 @@ const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "w-fu
100
99
  const FilterFooter = ({ className, dataTestId, children, ...rest }) => {
101
100
  return (jsxRuntime.jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
102
101
  };
103
- const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "p-1"]);
102
+ const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "border-t", "border-neutral-200", "p-1"]);
104
103
 
105
104
  /**
106
105
  * 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
111
110
  * @returns {ReactElement} FilterHeader component
112
111
  */
113
112
  const FilterHeader = ({ dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ...rest }) => {
114
- 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 }));
113
+ 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 }));
115
114
  };
116
115
  const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
117
116
  variants: {
package/index.esm.js CHANGED
@@ -88,9 +88,8 @@ const cvaFilterBody = cvaMerge(["grid", "gap-1", "w-full"], {
88
88
  });
89
89
 
90
90
  /**
91
- * The FilterFooter component is used to display the title of the filter and a reset button.
92
- * IT is intended for use in the Filter component.
93
- * The reset button will only be visible if the showReset prop is set to true.
91
+ * The FilterFooter component is a container component for filter footer content.
92
+ * It provides a flexible layout with right-aligned content for filter components.
94
93
  *
95
94
  * @param {FilterFooterProps} props - The props for the FilterFooter component
96
95
  * @returns {ReactElement} FilterFooter component
@@ -98,7 +97,7 @@ const cvaFilterBody = cvaMerge(["grid", "gap-1", "w-full"], {
98
97
  const FilterFooter = ({ className, dataTestId, children, ...rest }) => {
99
98
  return (jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
100
99
  };
101
- const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
100
+ const cvaFilterFooter = cvaMerge(["flex", "justify-end", "border-t", "border-neutral-200", "p-1"]);
102
101
 
103
102
  /**
104
103
  * 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"]);
109
108
  * @returns {ReactElement} FilterHeader component
110
109
  */
111
110
  const FilterHeader = ({ dataTestId, title, resetLabel, showReset, onReset, loading = false, children, searchComponent, className, ...rest }) => {
112
- 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 }));
111
+ 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 }));
113
112
  };
114
113
  const cvaFilterHeaderButton = cvaMerge([], {
115
114
  variants: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-filter-components",
3
- "version": "1.7.29",
3
+ "version": "1.7.32",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -9,11 +9,11 @@
9
9
  "dependencies": {
10
10
  "react": "19.0.0",
11
11
  "tailwind-merge": "^2.0.0",
12
- "@trackunit/ui-icons": "1.7.21",
13
- "@trackunit/css-class-variance-utilities": "1.7.19",
14
- "@trackunit/react-components": "1.9.29",
15
- "@trackunit/react-form-components": "1.8.29",
16
- "@trackunit/react-test-setup": "1.4.19"
12
+ "@trackunit/ui-icons": "1.7.23",
13
+ "@trackunit/css-class-variance-utilities": "1.7.21",
14
+ "@trackunit/react-components": "1.9.31",
15
+ "@trackunit/react-form-components": "1.8.31",
16
+ "@trackunit/react-test-setup": "1.4.21"
17
17
  },
18
18
  "module": "./index.esm.js",
19
19
  "main": "./index.cjs.js",
package/src/FilterFooter/FilterFooter.d.ts CHANGED
@@ -7,9 +7,8 @@ export interface FilterFooterProps extends CommonProps {
7
7
  children?: ReactNode;
8
8
  }
9
9
  /**
10
- * The FilterFooter component is used to display the title of the filter and a reset button.
11
- * IT is intended for use in the Filter component.
12
- * The reset button will only be visible if the showReset prop is set to true.
10
+ * The FilterFooter component is a container component for filter footer content.
11
+ * It provides a flexible layout with right-aligned content for filter components.
13
12
  *
14
13
  * @param {FilterFooterProps} props - The props for the FilterFooter component
15
14
  * @returns {ReactElement} FilterFooter component