@trackunit/react-filter-components 0.0.566 → 0.0.569
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.
- package/index.cjs.js +14 -60
- package/index.esm.js +14 -54
- package/package.json +5 -4
- package/src/Filter/Filter.d.ts +0 -1
- package/src/FilterFooter/FilterFooter.d.ts +1 -2
- package/src/FilterHeader/FilterHeader.d.ts +1 -2
- package/src/FilterItem/CheckBoxFilter/CheckBoxFilterItem.d.ts +1 -2
- package/src/FilterItem/RadioFilter/RadioFilterItem.d.ts +1 -2
package/index.cjs.js
CHANGED
@@ -1,49 +1,11 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
-
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
6
4
|
var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
|
7
5
|
var reactComponents = require('@trackunit/react-components');
|
8
6
|
var React = require('react');
|
9
7
|
var reactFormComponents = require('@trackunit/react-form-components');
|
10
8
|
|
11
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
12
|
-
|
13
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
14
|
-
|
15
|
-
/******************************************************************************
|
16
|
-
Copyright (c) Microsoft Corporation.
|
17
|
-
|
18
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
19
|
-
purpose with or without fee is hereby granted.
|
20
|
-
|
21
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
22
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
23
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
24
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
25
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
26
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
27
|
-
PERFORMANCE OF THIS SOFTWARE.
|
28
|
-
***************************************************************************** */
|
29
|
-
|
30
|
-
function __rest(s, e) {
|
31
|
-
var t = {};
|
32
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
33
|
-
t[p] = s[p];
|
34
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
35
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
36
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
37
|
-
t[p[i]] = s[p[i]];
|
38
|
-
}
|
39
|
-
return t;
|
40
|
-
}
|
41
|
-
|
42
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
43
|
-
var e = new Error(message);
|
44
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
45
|
-
};
|
46
|
-
|
47
9
|
const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge([], {
|
48
10
|
variants: {
|
49
11
|
isActive: {
|
@@ -68,10 +30,9 @@ const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge([], {
|
|
68
30
|
* @param {FilterProps} props - The props for the Filter component
|
69
31
|
* @returns {JSX.Element} Filter component
|
70
32
|
*/
|
71
|
-
const Filter = (
|
72
|
-
|
73
|
-
|
74
|
-
return (jsxRuntime.jsxs(reactComponents.Popover, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "bottom-start" }, popoverProps, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsxs(reactComponents.Button, Object.assign({ className: cvaFilterCustomButton({ isActive, className }), dataTestId: dataTestId, disabled: readOnly, size: "small", variant: "secondary" }, buttonProps, { children: [title, " ", isActive ? jsxRuntime.jsx("span", { className: "text-primary-600", children: activeLabel }) : undefined] })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, Object.assign({ className: cvaMenuListOverrides({ withStickyHeader }), dataTestId: dataTestId ? `${dataTestId}-menulist` : undefined, withStickyHeader: withStickyHeader }, menuListProps, { children: children })) })] })));
|
33
|
+
const Filter = ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly, ...rest }) => {
|
34
|
+
const buttonProps = { ...rest };
|
35
|
+
return (jsxRuntime.jsxs(reactComponents.Popover, { dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "bottom-start", ...popoverProps, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsxs(reactComponents.Button, { className: cvaFilterCustomButton({ isActive, className }), dataTestId: dataTestId, disabled: readOnly, size: "small", variant: "secondary", ...buttonProps, children: [title, " ", isActive ? jsxRuntime.jsx("span", { className: "text-primary-600", children: activeLabel }) : undefined] }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { className: cvaMenuListOverrides({ withStickyHeader }), dataTestId: dataTestId ? `${dataTestId}-menulist` : undefined, withStickyHeader: withStickyHeader, ...menuListProps, children: children }) })] }));
|
75
36
|
};
|
76
37
|
const cvaMenuListOverrides = cssClassVarianceUtilities.cvaMerge(["overflow-x-hidden", "relative"], {
|
77
38
|
variants: {
|
@@ -90,9 +51,8 @@ const cvaMenuListOverrides = cssClassVarianceUtilities.cvaMerge(["overflow-x-hid
|
|
90
51
|
* @param {FilterBodyProps} props - The props for the FilterBody component
|
91
52
|
* @returns {JSX.Element} FilterBody component
|
92
53
|
*/
|
93
|
-
const FilterBody =
|
94
|
-
|
95
|
-
return (jsxRuntime.jsx("div", Object.assign({ className: cvaFilterBody({ limitSize }), ref: ref }, rest, { "data-testid": dataTestId, children: children })));
|
54
|
+
const FilterBody = React.forwardRef(({ children, dataTestId, limitSize = false, ...rest }, ref) => {
|
55
|
+
return (jsxRuntime.jsx("div", { className: cvaFilterBody({ limitSize }), ref: ref, ...rest, "data-testid": dataTestId, children: children }));
|
96
56
|
});
|
97
57
|
FilterBody.displayName = "FilterBody";
|
98
58
|
const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
|
@@ -115,9 +75,8 @@ const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "p-1"
|
|
115
75
|
* @param {FilterFooterProps} props - The props for the FilterFooter component
|
116
76
|
* @returns {JSX.Element} FilterFooter component
|
117
77
|
*/
|
118
|
-
const FilterFooter = (
|
119
|
-
|
120
|
-
return (jsxRuntime.jsx("div", Object.assign({ className: cvaFilterFooter({ className }), "data-testid": dataTestId }, rest, { children: children })));
|
78
|
+
const FilterFooter = ({ className, dataTestId, children, ...rest }) => {
|
79
|
+
return (jsxRuntime.jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
|
121
80
|
};
|
122
81
|
const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end", "p-1"]);
|
123
82
|
|
@@ -129,9 +88,8 @@ const cvaFilterFooter = cssClassVarianceUtilities.cvaMerge(["flex", "justify-end
|
|
129
88
|
* @param {FilterHeaderProps} props - The props for the FilterHeader component
|
130
89
|
* @returns {JSX.Element} FilterHeader component
|
131
90
|
*/
|
132
|
-
const FilterHeader = (
|
133
|
-
|
134
|
-
return (jsxRuntime.jsxs("div", Object.assign({ className: "grid gap-1 p-1" }, rest, { "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: "flex h-6 items-center justify-between pl-1 text-sm font-medium uppercase text-slate-600 gap-1", 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: "secondary-danger", children: resetLabel }))] }), children] })));
|
91
|
+
const FilterHeader = ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }) => {
|
92
|
+
return (jsxRuntime.jsxs("div", { className: "grid gap-1 p-1", ...rest, "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: "flex h-6 items-center justify-between pl-1 text-sm font-medium uppercase text-slate-600 gap-1", 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: "secondary-danger", children: resetLabel }))] }), children] }));
|
135
93
|
};
|
136
94
|
const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
|
137
95
|
variants: {
|
@@ -152,17 +110,16 @@ const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
|
|
152
110
|
* @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
|
153
111
|
* @returns {JSX.Element} FilterItem component
|
154
112
|
*/
|
155
|
-
const CheckBoxFilterItem = (
|
156
|
-
|
157
|
-
const checkboxProps = Object.assign({}, rest);
|
113
|
+
const CheckBoxFilterItem = ({ itemCount, className, prefix, dataTestId, menuItemProps, showTooltip, ...rest }) => {
|
114
|
+
const checkboxProps = { ...rest };
|
158
115
|
const checkboxRef = React.useRef(null);
|
159
116
|
const [labelRef, setLabelRef] = React.useState(null);
|
160
117
|
const enableTooltip = reactComponents.useIsTextCutOff(labelRef);
|
161
|
-
const Item = (jsxRuntime.jsx(reactComponents.MenuItem,
|
118
|
+
const Item = (jsxRuntime.jsx(reactComponents.MenuItem, { className: className, dataTestId: dataTestId, disabled: checkboxProps.disabled, onClick: e => {
|
162
119
|
var _a;
|
163
120
|
e.preventDefault();
|
164
121
|
(_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
165
|
-
}, prefix: prefix, selected: checkboxProps.checked
|
122
|
+
}, prefix: prefix, selected: checkboxProps.checked, ...menuItemProps, suffix: jsxRuntime.jsx("small", { children: itemCount }), tabIndex: -1, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { onLabelRefChange: label => setLabelRef(label), ref: checkboxRef, ...checkboxProps, className: "flex-grow cursor-pointer", dataTestId: dataTestId ? `${dataTestId}-checkbox` : undefined }) }));
|
166
123
|
return (jsxRuntime.jsx("div", { children: enableTooltip && Boolean(showTooltip) ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", label: checkboxProps.label, placement: "top", children: Item }, "tooltip-" + checkboxProps.name)) : (Item) }));
|
167
124
|
};
|
168
125
|
|
@@ -173,10 +130,7 @@ const CheckBoxFilterItem = (_a) => {
|
|
173
130
|
* @param {RadioFilterItemProps} props - The props for the FilterItem component
|
174
131
|
* @returns {JSX.Element} FilterItem component
|
175
132
|
*/
|
176
|
-
const RadioFilterItem = (
|
177
|
-
var { value, label, itemCount, selected, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["value", "label", "itemCount", "selected", "dataTestId", "menuItemProps"]);
|
178
|
-
return (jsxRuntime.jsx(reactComponents.MenuItem, Object.assign({ className: "my-[2px] flex cursor-default justify-between p-0", dataTestId: dataTestId, selected: selected, suffix: jsxRuntime.jsx("small", { className: "pl-1 pr-3", children: itemCount }) }, menuItemProps, { children: jsxRuntime.jsx(reactFormComponents.RadioItem, Object.assign({}, rest, { className: "flex w-full items-center py-2 pl-2", dataTestId: dataTestId ? `${dataTestId}-radio` : undefined, label: jsxRuntime.jsx(reactComponents.Text, { className: "cursor-pointer", type: "span", children: label }), value: value })) })));
|
179
|
-
};
|
133
|
+
const RadioFilterItem = ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }) => (jsxRuntime.jsx(reactComponents.MenuItem, { className: "my-[2px] flex cursor-default justify-between p-0", dataTestId: dataTestId, selected: selected, suffix: jsxRuntime.jsx("small", { className: "pl-1 pr-3", children: itemCount }), ...menuItemProps, children: jsxRuntime.jsx(reactFormComponents.RadioItem, { ...rest, className: "flex w-full items-center py-2 pl-2", dataTestId: dataTestId ? `${dataTestId}-radio` : undefined, label: jsxRuntime.jsx(reactComponents.Text, { className: "cursor-pointer", type: "span", children: label }), value: value }) }));
|
180
134
|
|
181
135
|
exports.CheckBoxFilterItem = CheckBoxFilterItem;
|
182
136
|
exports.Filter = Filter;
|
package/index.esm.js
CHANGED
@@ -4,38 +4,6 @@ import { Popover, PopoverTrigger, Button, PopoverContent, MenuList, Spinner, use
|
|
4
4
|
import React, { useRef, useState } from 'react';
|
5
5
|
import { Checkbox, RadioItem } from '@trackunit/react-form-components';
|
6
6
|
|
7
|
-
/******************************************************************************
|
8
|
-
Copyright (c) Microsoft Corporation.
|
9
|
-
|
10
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
11
|
-
purpose with or without fee is hereby granted.
|
12
|
-
|
13
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
14
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
15
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
16
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
17
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
18
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
19
|
-
PERFORMANCE OF THIS SOFTWARE.
|
20
|
-
***************************************************************************** */
|
21
|
-
|
22
|
-
function __rest(s, e) {
|
23
|
-
var t = {};
|
24
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
25
|
-
t[p] = s[p];
|
26
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
27
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
28
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
29
|
-
t[p[i]] = s[p[i]];
|
30
|
-
}
|
31
|
-
return t;
|
32
|
-
}
|
33
|
-
|
34
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
35
|
-
var e = new Error(message);
|
36
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
37
|
-
};
|
38
|
-
|
39
7
|
const cvaFilterCustomButton = cvaMerge([], {
|
40
8
|
variants: {
|
41
9
|
isActive: {
|
@@ -60,10 +28,9 @@ const cvaFilterCustomButton = cvaMerge([], {
|
|
60
28
|
* @param {FilterProps} props - The props for the Filter component
|
61
29
|
* @returns {JSX.Element} Filter component
|
62
30
|
*/
|
63
|
-
const Filter = (
|
64
|
-
|
65
|
-
|
66
|
-
return (jsxs(Popover, Object.assign({ dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "bottom-start" }, popoverProps, { children: [jsx(PopoverTrigger, { children: jsxs(Button, Object.assign({ className: cvaFilterCustomButton({ isActive, className }), dataTestId: dataTestId, disabled: readOnly, size: "small", variant: "secondary" }, buttonProps, { children: [title, " ", isActive ? jsx("span", { className: "text-primary-600", children: activeLabel }) : undefined] })) }), jsx(PopoverContent, { children: jsx(MenuList, Object.assign({ className: cvaMenuListOverrides({ withStickyHeader }), dataTestId: dataTestId ? `${dataTestId}-menulist` : undefined, withStickyHeader: withStickyHeader }, menuListProps, { children: children })) })] })));
|
31
|
+
const Filter = ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly, ...rest }) => {
|
32
|
+
const buttonProps = { ...rest };
|
33
|
+
return (jsxs(Popover, { dataTestId: dataTestId ? `${dataTestId}-popover` : undefined, placement: "bottom-start", ...popoverProps, children: [jsx(PopoverTrigger, { children: jsxs(Button, { className: cvaFilterCustomButton({ isActive, className }), dataTestId: dataTestId, disabled: readOnly, size: "small", variant: "secondary", ...buttonProps, children: [title, " ", isActive ? jsx("span", { className: "text-primary-600", children: activeLabel }) : undefined] }) }), jsx(PopoverContent, { children: jsx(MenuList, { className: cvaMenuListOverrides({ withStickyHeader }), dataTestId: dataTestId ? `${dataTestId}-menulist` : undefined, withStickyHeader: withStickyHeader, ...menuListProps, children: children }) })] }));
|
67
34
|
};
|
68
35
|
const cvaMenuListOverrides = cvaMerge(["overflow-x-hidden", "relative"], {
|
69
36
|
variants: {
|
@@ -82,9 +49,8 @@ const cvaMenuListOverrides = cvaMerge(["overflow-x-hidden", "relative"], {
|
|
82
49
|
* @param {FilterBodyProps} props - The props for the FilterBody component
|
83
50
|
* @returns {JSX.Element} FilterBody component
|
84
51
|
*/
|
85
|
-
const FilterBody = React.forwardRef((
|
86
|
-
|
87
|
-
return (jsx("div", Object.assign({ className: cvaFilterBody({ limitSize }), ref: ref }, rest, { "data-testid": dataTestId, children: children })));
|
52
|
+
const FilterBody = React.forwardRef(({ children, dataTestId, limitSize = false, ...rest }, ref) => {
|
53
|
+
return (jsx("div", { className: cvaFilterBody({ limitSize }), ref: ref, ...rest, "data-testid": dataTestId, children: children }));
|
88
54
|
});
|
89
55
|
FilterBody.displayName = "FilterBody";
|
90
56
|
const cvaFilterBody = cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
|
@@ -107,9 +73,8 @@ const cvaFilterBody = cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
|
|
107
73
|
* @param {FilterFooterProps} props - The props for the FilterFooter component
|
108
74
|
* @returns {JSX.Element} FilterFooter component
|
109
75
|
*/
|
110
|
-
const FilterFooter = (
|
111
|
-
|
112
|
-
return (jsx("div", Object.assign({ className: cvaFilterFooter({ className }), "data-testid": dataTestId }, rest, { children: children })));
|
76
|
+
const FilterFooter = ({ className, dataTestId, children, ...rest }) => {
|
77
|
+
return (jsx("div", { className: cvaFilterFooter({ className }), "data-testid": dataTestId, ...rest, children: children }));
|
113
78
|
};
|
114
79
|
const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
|
115
80
|
|
@@ -121,9 +86,8 @@ const cvaFilterFooter = cvaMerge(["flex", "justify-end", "p-1"]);
|
|
121
86
|
* @param {FilterHeaderProps} props - The props for the FilterHeader component
|
122
87
|
* @returns {JSX.Element} FilterHeader component
|
123
88
|
*/
|
124
|
-
const FilterHeader = (
|
125
|
-
|
126
|
-
return (jsxs("div", Object.assign({ className: "grid gap-1 p-1" }, rest, { "data-testid": dataTestId, children: [jsxs("div", { className: "flex h-6 items-center justify-between pl-1 text-sm font-medium uppercase text-slate-600 gap-1", 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: "secondary-danger", children: resetLabel }))] }), children] })));
|
89
|
+
const FilterHeader = ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }) => {
|
90
|
+
return (jsxs("div", { className: "grid gap-1 p-1", ...rest, "data-testid": dataTestId, children: [jsxs("div", { className: "flex h-6 items-center justify-between pl-1 text-sm font-medium uppercase text-slate-600 gap-1", 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: "secondary-danger", children: resetLabel }))] }), children] }));
|
127
91
|
};
|
128
92
|
const cvaFilterHeaderButton = cvaMerge([], {
|
129
93
|
variants: {
|
@@ -144,17 +108,16 @@ const cvaFilterHeaderButton = cvaMerge([], {
|
|
144
108
|
* @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
|
145
109
|
* @returns {JSX.Element} FilterItem component
|
146
110
|
*/
|
147
|
-
const CheckBoxFilterItem = (
|
148
|
-
|
149
|
-
const checkboxProps = Object.assign({}, rest);
|
111
|
+
const CheckBoxFilterItem = ({ itemCount, className, prefix, dataTestId, menuItemProps, showTooltip, ...rest }) => {
|
112
|
+
const checkboxProps = { ...rest };
|
150
113
|
const checkboxRef = useRef(null);
|
151
114
|
const [labelRef, setLabelRef] = useState(null);
|
152
115
|
const enableTooltip = useIsTextCutOff(labelRef);
|
153
|
-
const Item = (jsx(MenuItem,
|
116
|
+
const Item = (jsx(MenuItem, { className: className, dataTestId: dataTestId, disabled: checkboxProps.disabled, onClick: e => {
|
154
117
|
var _a;
|
155
118
|
e.preventDefault();
|
156
119
|
(_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
|
157
|
-
}, prefix: prefix, selected: checkboxProps.checked
|
120
|
+
}, prefix: prefix, selected: checkboxProps.checked, ...menuItemProps, suffix: jsx("small", { children: itemCount }), tabIndex: -1, children: jsx(Checkbox, { onLabelRefChange: label => setLabelRef(label), ref: checkboxRef, ...checkboxProps, className: "flex-grow cursor-pointer", dataTestId: dataTestId ? `${dataTestId}-checkbox` : undefined }) }));
|
158
121
|
return (jsx("div", { children: enableTooltip && Boolean(showTooltip) ? (jsx(Tooltip, { className: "w-full", label: checkboxProps.label, placement: "top", children: Item }, "tooltip-" + checkboxProps.name)) : (Item) }));
|
159
122
|
};
|
160
123
|
|
@@ -165,9 +128,6 @@ const CheckBoxFilterItem = (_a) => {
|
|
165
128
|
* @param {RadioFilterItemProps} props - The props for the FilterItem component
|
166
129
|
* @returns {JSX.Element} FilterItem component
|
167
130
|
*/
|
168
|
-
const RadioFilterItem = (
|
169
|
-
var { value, label, itemCount, selected, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["value", "label", "itemCount", "selected", "dataTestId", "menuItemProps"]);
|
170
|
-
return (jsx(MenuItem, Object.assign({ className: "my-[2px] flex cursor-default justify-between p-0", dataTestId: dataTestId, selected: selected, suffix: jsx("small", { className: "pl-1 pr-3", children: itemCount }) }, menuItemProps, { children: jsx(RadioItem, Object.assign({}, rest, { className: "flex w-full items-center py-2 pl-2", dataTestId: dataTestId ? `${dataTestId}-radio` : undefined, label: jsx(Text, { className: "cursor-pointer", type: "span", children: label }), value: value })) })));
|
171
|
-
};
|
131
|
+
const RadioFilterItem = ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }) => (jsx(MenuItem, { className: "my-[2px] flex cursor-default justify-between p-0", dataTestId: dataTestId, selected: selected, suffix: jsx("small", { className: "pl-1 pr-3", children: itemCount }), ...menuItemProps, children: jsx(RadioItem, { ...rest, className: "flex w-full items-center py-2 pl-2", dataTestId: dataTestId ? `${dataTestId}-radio` : undefined, label: jsx(Text, { className: "cursor-pointer", type: "span", children: label }), value: value }) }));
|
172
132
|
|
173
133
|
export { CheckBoxFilterItem, Filter, FilterBody, FilterFooter, FilterHeader, RadioFilterItem, cvaFilterFooter, cvaFilterHeaderButton };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@trackunit/react-filter-components",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.569",
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
6
6
|
"engines": {
|
@@ -9,9 +9,10 @@
|
|
9
9
|
"dependencies": {
|
10
10
|
"@trackunit/css-class-variance-utilities": "*",
|
11
11
|
"@trackunit/react-components": "*",
|
12
|
-
"react": "
|
12
|
+
"react": "18.3.1",
|
13
13
|
"@trackunit/react-form-components": "*"
|
14
14
|
},
|
15
15
|
"module": "./index.esm.js",
|
16
|
-
"main": "./index.cjs.js"
|
17
|
-
|
16
|
+
"main": "./index.cjs.js",
|
17
|
+
"types": "./index.esm.d.ts"
|
18
|
+
}
|
package/src/Filter/Filter.d.ts
CHANGED
@@ -1,4 +1,3 @@
|
|
1
|
-
/// <reference types="react" />
|
2
1
|
import { CommonProps } from "@trackunit/react-components";
|
3
2
|
export interface FilterFooterProps extends CommonProps {
|
4
3
|
/**
|
@@ -14,5 +13,5 @@ export interface FilterFooterProps extends CommonProps {
|
|
14
13
|
* @param {FilterFooterProps} props - The props for the FilterFooter component
|
15
14
|
* @returns {JSX.Element} FilterFooter component
|
16
15
|
*/
|
17
|
-
export declare const FilterFooter: ({ className, dataTestId, children, ...rest }: FilterFooterProps) => JSX.Element;
|
16
|
+
export declare const FilterFooter: ({ className, dataTestId, children, ...rest }: FilterFooterProps) => import("react/jsx-runtime").JSX.Element;
|
18
17
|
export declare const cvaFilterFooter: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|
@@ -1,4 +1,3 @@
|
|
1
|
-
/// <reference types="react" />
|
2
1
|
import { CommonProps } from "@trackunit/react-components";
|
3
2
|
export interface FilterHeaderProps extends CommonProps {
|
4
3
|
/**
|
@@ -32,7 +31,7 @@ export interface FilterHeaderProps extends CommonProps {
|
|
32
31
|
* @param {FilterHeaderProps} props - The props for the FilterHeader component
|
33
32
|
* @returns {JSX.Element} FilterHeader component
|
34
33
|
*/
|
35
|
-
export declare const FilterHeader: ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }: FilterHeaderProps) => JSX.Element;
|
34
|
+
export declare const FilterHeader: ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }: FilterHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
36
35
|
export declare const cvaFilterHeaderButton: (props?: ({
|
37
36
|
isVisible?: boolean | null | undefined;
|
38
37
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
@@ -1,4 +1,3 @@
|
|
1
|
-
/// <reference types="react" />
|
2
1
|
import { CheckBoxFilterItemProps } from "../types";
|
3
2
|
/**
|
4
3
|
* The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
|
@@ -7,4 +6,4 @@ import { CheckBoxFilterItemProps } from "../types";
|
|
7
6
|
* @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
|
8
7
|
* @returns {JSX.Element} FilterItem component
|
9
8
|
*/
|
10
|
-
export declare const CheckBoxFilterItem: ({ itemCount, className, prefix, dataTestId, menuItemProps, showTooltip, ...rest }: CheckBoxFilterItemProps) => JSX.Element;
|
9
|
+
export declare const CheckBoxFilterItem: ({ itemCount, className, prefix, dataTestId, menuItemProps, showTooltip, ...rest }: CheckBoxFilterItemProps) => import("react/jsx-runtime").JSX.Element;
|
@@ -1,4 +1,3 @@
|
|
1
|
-
/// <reference types="react" />
|
2
1
|
import { RadioFilterItemProps } from "../types";
|
3
2
|
/**
|
4
3
|
* The RadioFilterItem component is the base component used in the manager to FilterItem data.
|
@@ -7,4 +6,4 @@ import { RadioFilterItemProps } from "../types";
|
|
7
6
|
* @param {RadioFilterItemProps} props - The props for the FilterItem component
|
8
7
|
* @returns {JSX.Element} FilterItem component
|
9
8
|
*/
|
10
|
-
export declare const RadioFilterItem: ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }: RadioFilterItemProps) => JSX.Element;
|
9
|
+
export declare const RadioFilterItem: ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }: RadioFilterItemProps) => import("react/jsx-runtime").JSX.Element;
|