@trackunit/react-filter-components 0.0.164 → 0.0.171

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 (5) hide show
  1. package/index.cjs.js +39 -48
  2. package/index.esm.js +40 -50
  3. package/package.json +4 -4
  4. package/src/Filter/Filter.variants.d.ts +3 -0
  5. package/src/FilterHeader/FilterHeader.d.ts +3 -0
package/index.cjs.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var reactComponents = require('@trackunit/react-components');
7
- var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
7
+ var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
8
8
  var React = require('react');
9
9
  var reactFormComponents = require('@trackunit/react-form-components');
10
10
 
@@ -39,6 +39,18 @@ function __rest(s, e) {
39
39
  return t;
40
40
  }
41
41
 
42
+ const cvaFilterCustomButton = cssClassVarianceUtilities.cvaMerge([], {
43
+ variants: {
44
+ isActive: {
45
+ true: "border-primary-600",
46
+ false: "",
47
+ },
48
+ },
49
+ defaultVariants: {
50
+ isActive: false,
51
+ },
52
+ });
53
+
42
54
  /**
43
55
  * The Filter component is the base component used in the manager to filter data.
44
56
  *
@@ -54,19 +66,8 @@ function __rest(s, e) {
54
66
  const Filter = (_a) => {
55
67
  var { title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly } = _a, rest = __rest(_a, ["title", "children", "popoverProps", "isActive", "activeLabel", "menuListProps", "className", "dataTestId", "withStickyHeader", "readOnly"]);
56
68
  const buttonProps = Object.assign({}, rest);
57
- return (jsxRuntime.jsxs(reactComponents.Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsxs(CustomButton, Object.assign({ color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { "$isActive": isActive, className: className, children: [title, " ", isActive && jsxRuntime.jsx(ActiveLabel, { children: activeLabel })] })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(CustomMenuList, Object.assign({ withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children })) })] })));
69
+ return (jsxRuntime.jsxs(reactComponents.Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsxs(reactComponents.Button, Object.assign({ className: cvaFilterCustomButton({ isActive, className }), color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { children: [title, " ", isActive && jsxRuntime.jsx("span", { className: "text-primary-600", children: activeLabel })] })) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, Object.assign({ className: "overflow-x-hidden overflow-y-auto relative", withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children })) })] })));
58
70
  };
59
- const CustomButton = tailwindStyledComponents.twx(reactComponents.Button) `
60
- ${({ $isActive }) => ($isActive ? tailwindStyledComponents.tws `!border-primary-600` : "")}
61
- `;
62
- const CustomMenuList = tailwindStyledComponents.twx(reactComponents.MenuList) `
63
- overflow-x-hidden
64
- overflow-y-auto
65
- relative
66
- `;
67
- const ActiveLabel = tailwindStyledComponents.tw.span `
68
- text-primary-600
69
- `;
70
71
 
71
72
  /**
72
73
  * The FilterBody component is used to display the title of the filter and a reset button.
@@ -78,23 +79,19 @@ const ActiveLabel = tailwindStyledComponents.tw.span `
78
79
  */
79
80
  const FilterBody = React__default["default"].forwardRef((_a, ref) => {
80
81
  var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
81
- return (jsxRuntime.jsx(Root$1, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId, children: children })));
82
+ return (jsxRuntime.jsx("div", Object.assign({ className: cvaFilterBody({ limitSize }), ref: ref }, rest, { "data-testid": dataTestId, children: children })));
83
+ });
84
+ const cvaFilterBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
85
+ variants: {
86
+ limitSize: {
87
+ true: "overflow-hidden max-h-80 max-w-sm overflow-y-auto",
88
+ false: "",
89
+ },
90
+ },
91
+ defaultVariants: {
92
+ limitSize: false,
93
+ },
82
94
  });
83
- const Root$1 = tailwindStyledComponents.tw.div `
84
- grid
85
- gap-1
86
- p-1
87
- rounded
88
- w-full
89
- ${props => props.$limitSize
90
- ? tailwindStyledComponents.tws `
91
- overflow-hidden
92
- max-h-80
93
- max-w-sm
94
- overflow-y-auto
95
- `
96
- : ""}
97
- `;
98
95
 
99
96
  /**
100
97
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -106,26 +103,19 @@ const Root$1 = tailwindStyledComponents.tw.div `
106
103
  */
107
104
  const FilterHeader = (_a) => {
108
105
  var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
109
- return (jsxRuntime.jsxs(Root, Object.assign({}, rest, { "data-testid": dataTestId, children: [jsxRuntime.jsxs(HeadingContainer, { children: [jsxRuntime.jsx("h4", { children: title }), loading ? (jsxRuntime.jsx(reactComponents.Spinner, { size: "small" })) : (jsxRuntime.jsx(HiddenButton, { "data-testid": `${dataTestId}-reset-button`, "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
106
+ return (jsxRuntime.jsxs("div", Object.assign({ className: "grid gap-1 p-1" }, rest, { "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: "flex items-center pl-1 justify-between font-medium text-sm text-slate-600 uppercase", children: [jsxRuntime.jsx("h4", { children: title }), loading ? (jsxRuntime.jsx(reactComponents.Spinner, { size: "small" })) : (jsxRuntime.jsx(reactComponents.Button, { className: cvaFilterHeaderButton({ isVisible: showReset }), "data-testid": `${dataTestId}-reset-button`, size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
110
107
  };
111
- const HeadingContainer = tailwindStyledComponents.tw.div `
112
- flex
113
- items-center
114
- pl-1
115
- justify-between
116
- font-medium
117
- text-sm
118
- text-slate-600
119
- uppercase
120
- `;
121
- const HiddenButton = tailwindStyledComponents.twx(reactComponents.Button) `
122
- ${props => (props.$isVisible ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`)}
123
- `;
124
- const Root = tailwindStyledComponents.tw.div `
125
- grid
126
- gap-1
127
- p-1
128
- `;
108
+ const cvaFilterHeaderButton = cssClassVarianceUtilities.cvaMerge([], {
109
+ variants: {
110
+ isVisible: {
111
+ true: "visible",
112
+ false: "invisible",
113
+ },
114
+ },
115
+ defaultVariants: {
116
+ isVisible: true,
117
+ },
118
+ });
129
119
 
130
120
  /**
131
121
  * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
@@ -162,3 +152,4 @@ exports.Filter = Filter;
162
152
  exports.FilterBody = FilterBody;
163
153
  exports.FilterHeader = FilterHeader;
164
154
  exports.RadioFilterItem = RadioFilterItem;
155
+ exports.cvaFilterHeaderButton = cvaFilterHeaderButton;
package/index.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { Button, MenuList, Popover, PopoverTrigger, PopoverContent, Spinner, MenuItem, Text } from '@trackunit/react-components';
3
- import { twx, tws, tw } from '@trackunit/tailwind-styled-components';
2
+ import { Popover, PopoverTrigger, Button, PopoverContent, MenuList, Spinner, MenuItem, Text } from '@trackunit/react-components';
3
+ import { cvaMerge } from '@trackunit/css-class-variance-utilities';
4
4
  import React, { useRef } from 'react';
5
5
  import { Checkbox, RadioItem } from '@trackunit/react-form-components';
6
6
 
@@ -31,6 +31,18 @@ function __rest(s, e) {
31
31
  return t;
32
32
  }
33
33
 
34
+ const cvaFilterCustomButton = cvaMerge([], {
35
+ variants: {
36
+ isActive: {
37
+ true: "border-primary-600",
38
+ false: "",
39
+ },
40
+ },
41
+ defaultVariants: {
42
+ isActive: false,
43
+ },
44
+ });
45
+
34
46
  /**
35
47
  * The Filter component is the base component used in the manager to filter data.
36
48
  *
@@ -46,19 +58,8 @@ function __rest(s, e) {
46
58
  const Filter = (_a) => {
47
59
  var { title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly } = _a, rest = __rest(_a, ["title", "children", "popoverProps", "isActive", "activeLabel", "menuListProps", "className", "dataTestId", "withStickyHeader", "readOnly"]);
48
60
  const buttonProps = Object.assign({}, rest);
49
- return (jsxs(Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { children: [jsx(PopoverTrigger, { children: jsxs(CustomButton, Object.assign({ color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { "$isActive": isActive, className: className, children: [title, " ", isActive && jsx(ActiveLabel, { children: activeLabel })] })) }), jsx(PopoverContent, { children: jsx(CustomMenuList, Object.assign({ withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children })) })] })));
61
+ return (jsxs(Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { children: [jsx(PopoverTrigger, { children: jsxs(Button, Object.assign({ className: cvaFilterCustomButton({ isActive, className }), color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { children: [title, " ", isActive && jsx("span", { className: "text-primary-600", children: activeLabel })] })) }), jsx(PopoverContent, { children: jsx(MenuList, Object.assign({ className: "overflow-x-hidden overflow-y-auto relative", withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children })) })] })));
50
62
  };
51
- const CustomButton = twx(Button) `
52
- ${({ $isActive }) => ($isActive ? tws `!border-primary-600` : "")}
53
- `;
54
- const CustomMenuList = twx(MenuList) `
55
- overflow-x-hidden
56
- overflow-y-auto
57
- relative
58
- `;
59
- const ActiveLabel = tw.span `
60
- text-primary-600
61
- `;
62
63
 
63
64
  /**
64
65
  * The FilterBody component is used to display the title of the filter and a reset button.
@@ -70,23 +71,19 @@ const ActiveLabel = tw.span `
70
71
  */
71
72
  const FilterBody = React.forwardRef((_a, ref) => {
72
73
  var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
73
- return (jsx(Root$1, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId, children: children })));
74
+ return (jsx("div", Object.assign({ className: cvaFilterBody({ limitSize }), ref: ref }, rest, { "data-testid": dataTestId, children: children })));
75
+ });
76
+ const cvaFilterBody = cvaMerge(["grid", "gap-1", "p-1", "rounded", "w-full"], {
77
+ variants: {
78
+ limitSize: {
79
+ true: "overflow-hidden max-h-80 max-w-sm overflow-y-auto",
80
+ false: "",
81
+ },
82
+ },
83
+ defaultVariants: {
84
+ limitSize: false,
85
+ },
74
86
  });
75
- const Root$1 = tw.div `
76
- grid
77
- gap-1
78
- p-1
79
- rounded
80
- w-full
81
- ${props => props.$limitSize
82
- ? tws `
83
- overflow-hidden
84
- max-h-80
85
- max-w-sm
86
- overflow-y-auto
87
- `
88
- : ""}
89
- `;
90
87
 
91
88
  /**
92
89
  * The FilterHeader component is used to display the title of the filter and a reset button.
@@ -98,26 +95,19 @@ const Root$1 = tw.div `
98
95
  */
99
96
  const FilterHeader = (_a) => {
100
97
  var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
101
- return (jsxs(Root, Object.assign({}, rest, { "data-testid": dataTestId, children: [jsxs(HeadingContainer, { children: [jsx("h4", { children: title }), loading ? (jsx(Spinner, { size: "small" })) : (jsx(HiddenButton, { "data-testid": `${dataTestId}-reset-button`, "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
98
+ return (jsxs("div", Object.assign({ className: "grid gap-1 p-1" }, rest, { "data-testid": dataTestId, children: [jsxs("div", { className: "flex items-center pl-1 justify-between font-medium text-sm text-slate-600 uppercase", children: [jsx("h4", { children: title }), loading ? (jsx(Spinner, { size: "small" })) : (jsx(Button, { className: cvaFilterHeaderButton({ isVisible: showReset }), "data-testid": `${dataTestId}-reset-button`, size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
102
99
  };
103
- const HeadingContainer = tw.div `
104
- flex
105
- items-center
106
- pl-1
107
- justify-between
108
- font-medium
109
- text-sm
110
- text-slate-600
111
- uppercase
112
- `;
113
- const HiddenButton = twx(Button) `
114
- ${props => (props.$isVisible ? tws `visible` : tws `invisible`)}
115
- `;
116
- const Root = tw.div `
117
- grid
118
- gap-1
119
- p-1
120
- `;
100
+ const cvaFilterHeaderButton = cvaMerge([], {
101
+ variants: {
102
+ isVisible: {
103
+ true: "visible",
104
+ false: "invisible",
105
+ },
106
+ },
107
+ defaultVariants: {
108
+ isVisible: true,
109
+ },
110
+ });
121
111
 
122
112
  /**
123
113
  * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
@@ -149,4 +139,4 @@ const RadioFilterItem = (_a) => {
149
139
  return (jsx(MenuItem, Object.assign({ selected: selected, dataTestId: dataTestId, className: "flex justify-between cursor-default p-0 my-[2px]", suffix: jsx("small", { className: "pl-1 pr-3", children: itemCount }) }, menuItemProps, { children: jsx(RadioItem, Object.assign({}, rest, { value: value, className: "flex items-center w-full py-2 pl-2", dataTestId: dataTestId && `${dataTestId}-radio`, label: jsx(Text, { className: "cursor-pointer", type: "span", children: label }) })) })));
150
140
  };
151
141
 
152
- export { CheckBoxFilterItem, Filter, FilterBody, FilterHeader, RadioFilterItem };
142
+ export { CheckBoxFilterItem, Filter, FilterBody, FilterHeader, RadioFilterItem, cvaFilterHeaderButton };
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@trackunit/react-filter-components",
3
- "version": "0.0.164",
3
+ "version": "0.0.171",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
7
7
  "node": ">=18.x"
8
8
  },
9
9
  "dependencies": {
10
- "@trackunit/react-components": "0.1.140",
11
- "@trackunit/react-form-components": "0.0.106",
12
- "@trackunit/tailwind-styled-components": "0.0.60",
10
+ "@trackunit/css-class-variance-utilities": "0.0.11",
11
+ "@trackunit/react-components": "0.1.144",
12
+ "@trackunit/react-form-components": "0.0.113",
13
13
  "react": "18.2.0"
14
14
  },
15
15
  "module": "./index.esm.js",
package/src/Filter/Filter.variants.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const cvaFilterCustomButton: (props?: ({
2
+ isActive?: boolean | null | undefined;
3
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
package/src/FilterHeader/FilterHeader.d.ts CHANGED
@@ -33,3 +33,6 @@ export interface FilterHeaderProps extends CommonProps {
33
33
  * @returns {JSX.Element} FilterHeader component
34
34
  */
35
35
  export declare const FilterHeader: ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }: FilterHeaderProps) => JSX.Element;
36
+ export declare const cvaFilterHeaderButton: (props?: ({
37
+ isVisible?: boolean | null | undefined;
38
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;