@trackunit/react-filter-components 0.0.124 → 0.0.133

package/index.cjs

@@ -39,75 +39,75 @@ function __rest(s, e) {
     return t;
 }
 
-/**
- * The Filter component is the base component used in the manager to filter data.
- *
- * - This component in generic and does not have any connection to the data.
- * - The base props extends button props, and any button props such as prefix and suffix can be used.
- * - Color and size has special default values in this component, but can be overridden if needed.
- *
- * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
- *
- * @param {FilterProps} props - The props for the Filter component
- * @returns {JSX.Element} Filter component
- */
-const Filter = (_a) => {
-    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"]);
-    const buttonProps = Object.assign({}, rest);
-    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 })) })] })));
-};
+/**
+ * The Filter component is the base component used in the manager to filter data.
+ *
+ * - This component in generic and does not have any connection to the data.
+ * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ * - Color and size has special default values in this component, but can be overridden if needed.
+ *
+ * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
+ *
+ * @param {FilterProps} props - The props for the Filter component
+ * @returns {JSX.Element} Filter component
+ */
+const Filter = (_a) => {
+    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"]);
+    const buttonProps = Object.assign({}, rest);
+    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 })) })] })));
+};
 const CustomButton = tailwindStyledComponents.twx(reactComponents.Button) `
   ${({ $isActive }) => ($isActive ? tailwindStyledComponents.tws `!border-primary-600` : "")}
-`;
+`;
 const CustomMenuList = tailwindStyledComponents.twx(reactComponents.MenuList) `
   overflow-x-hidden
   overflow-y-auto
   relative
-`;
+`;
 const ActiveLabel = tailwindStyledComponents.tw.span `
   text-primary-600
 `;
 
-/**
- * The FilterBody 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.
- *
- * @param {FilterBodyProps} props - The props for the FilterBody component
- * @returns {JSX.Element} FilterBody component
- */
-const FilterBody = React__default["default"].forwardRef((_a, ref) => {
-    var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
-    return (jsxRuntime.jsx(Root$1, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId }, { children: children })));
-});
+/**
+ * The FilterBody 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.
+ *
+ * @param {FilterBodyProps} props - The props for the FilterBody component
+ * @returns {JSX.Element} FilterBody component
+ */
+const FilterBody = React__default["default"].forwardRef((_a, ref) => {
+    var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
+    return (jsxRuntime.jsx(Root$1, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId, children: children })));
+});
 const Root$1 = tailwindStyledComponents.tw.div `
   grid
   gap-1
   p-1
   rounded
   w-full
-  ${props => props.$limitSize
+  ${props => props.$limitSize
     ? tailwindStyledComponents.tws `
           overflow-hidden
           max-h-80
           max-w-sm
           overflow-y-auto
-        `
+        `
     : ""}
 `;
 
-/**
- * The FilterHeader 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.
- *
- * @param {FilterHeaderProps} props - The props for the FilterHeader component
- * @returns {JSX.Element} FilterHeader component
- */
-const FilterHeader = (_a) => {
-    var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
-    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, Object.assign({ "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset }, { children: resetLabel })))] }), children] })));
-};
+/**
+ * The FilterHeader 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.
+ *
+ * @param {FilterHeaderProps} props - The props for the FilterHeader component
+ * @returns {JSX.Element} FilterHeader component
+ */
+const FilterHeader = (_a) => {
+    var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
+    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, { "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
+};
 const HeadingContainer = tailwindStyledComponents.tw.div `
   flex
   items-center
@@ -117,44 +117,44 @@ const HeadingContainer = tailwindStyledComponents.tw.div `
   text-sm
   text-slate-600
   uppercase
-`;
+`;
 const HiddenButton = tailwindStyledComponents.twx(reactComponents.Button) `
   ${props => (props.$isVisible ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`)}
-`;
+`;
 const Root = tailwindStyledComponents.tw.div `
   grid
   gap-1
   p-1
 `;
 
-/**
- * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
- * This component in generic and does not have any connection to the data.
- *
- * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
- */
-const CheckBoxFilterItem = (_a) => {
-    var { itemCount, className, prefix, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps"]);
-    const checkboxProps = Object.assign({}, rest);
-    const checkboxRef = React.useRef(null);
-    return (jsxRuntime.jsx(reactComponents.MenuItem, Object.assign({ onClick: e => {
-            var _a;
-            e.preventDefault();
-            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsxRuntime.jsx("small", { children: itemCount }) }, { children: jsxRuntime.jsx(reactFormComponents.Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
+/**
+ * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+const CheckBoxFilterItem = (_a) => {
+    var { itemCount, className, prefix, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps"]);
+    const checkboxProps = Object.assign({}, rest);
+    const checkboxRef = React.useRef(null);
+    return (jsxRuntime.jsx(reactComponents.MenuItem, Object.assign({ onClick: e => {
+            var _a;
+            e.preventDefault();
+            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsxRuntime.jsx("small", { children: itemCount }), children: jsxRuntime.jsx(reactFormComponents.Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
 };
 
-/**
- * The RadioFilterItem component is the base component used in the manager to FilterItem data.
- * This component in generic and does not have any connection to the data.
- *
- * @param {RadioFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
- */
-const RadioFilterItem = (_a) => {
-    var { value, label, itemCount, selected, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["value", "label", "itemCount", "selected", "dataTestId", "menuItemProps"]);
-    return (jsxRuntime.jsx(reactComponents.MenuItem, Object.assign({ selected: selected, dataTestId: dataTestId, className: "flex justify-between cursor-default p-0 my-[2px]", suffix: jsxRuntime.jsx("small", Object.assign({ className: "pl-1 pr-3" }, { children: itemCount })) }, menuItemProps, { children: jsxRuntime.jsx(reactFormComponents.RadioItem, Object.assign({}, rest, { value: value, className: "flex items-center w-full py-2 pl-2", dataTestId: dataTestId && `${dataTestId}-radio`, label: jsxRuntime.jsx(reactComponents.Text, Object.assign({ className: "cursor-pointer", type: "span" }, { children: label })) })) })));
+/**
+ * The RadioFilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {RadioFilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+const RadioFilterItem = (_a) => {
+    var { value, label, itemCount, selected, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["value", "label", "itemCount", "selected", "dataTestId", "menuItemProps"]);
+    return (jsxRuntime.jsx(reactComponents.MenuItem, Object.assign({ selected: selected, dataTestId: dataTestId, className: "flex justify-between cursor-default p-0 my-[2px]", suffix: jsxRuntime.jsx("small", { className: "pl-1 pr-3", children: itemCount }) }, menuItemProps, { children: jsxRuntime.jsx(reactFormComponents.RadioItem, Object.assign({}, rest, { value: value, className: "flex items-center w-full py-2 pl-2", dataTestId: dataTestId && `${dataTestId}-radio`, label: jsxRuntime.jsx(reactComponents.Text, { className: "cursor-pointer", type: "span", children: label }) })) })));
 };
 
 exports.CheckBoxFilterItem = CheckBoxFilterItem;

package/index.js

@@ -31,75 +31,75 @@ function __rest(s, e) {
     return t;
 }
 
-/**
- * The Filter component is the base component used in the manager to filter data.
- *
- * - This component in generic and does not have any connection to the data.
- * - The base props extends button props, and any button props such as prefix and suffix can be used.
- * - Color and size has special default values in this component, but can be overridden if needed.
- *
- * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
- *
- * @param {FilterProps} props - The props for the Filter component
- * @returns {JSX.Element} Filter component
- */
-const Filter = (_a) => {
-    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"]);
-    const buttonProps = Object.assign({}, rest);
-    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 })) })] })));
-};
+/**
+ * The Filter component is the base component used in the manager to filter data.
+ *
+ * - This component in generic and does not have any connection to the data.
+ * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ * - Color and size has special default values in this component, but can be overridden if needed.
+ *
+ * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
+ *
+ * @param {FilterProps} props - The props for the Filter component
+ * @returns {JSX.Element} Filter component
+ */
+const Filter = (_a) => {
+    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"]);
+    const buttonProps = Object.assign({}, rest);
+    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 })) })] })));
+};
 const CustomButton = twx(Button) `
   ${({ $isActive }) => ($isActive ? tws `!border-primary-600` : "")}
-`;
+`;
 const CustomMenuList = twx(MenuList) `
   overflow-x-hidden
   overflow-y-auto
   relative
-`;
+`;
 const ActiveLabel = tw.span `
   text-primary-600
 `;
 
-/**
- * The FilterBody 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.
- *
- * @param {FilterBodyProps} props - The props for the FilterBody component
- * @returns {JSX.Element} FilterBody component
- */
-const FilterBody = React.forwardRef((_a, ref) => {
-    var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
-    return (jsx(Root$1, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId }, { children: children })));
-});
+/**
+ * The FilterBody 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.
+ *
+ * @param {FilterBodyProps} props - The props for the FilterBody component
+ * @returns {JSX.Element} FilterBody component
+ */
+const FilterBody = React.forwardRef((_a, ref) => {
+    var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
+    return (jsx(Root$1, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId, children: children })));
+});
 const Root$1 = tw.div `
   grid
   gap-1
   p-1
   rounded
   w-full
-  ${props => props.$limitSize
+  ${props => props.$limitSize
     ? tws `
           overflow-hidden
           max-h-80
           max-w-sm
           overflow-y-auto
-        `
+        `
     : ""}
 `;
 
-/**
- * The FilterHeader 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.
- *
- * @param {FilterHeaderProps} props - The props for the FilterHeader component
- * @returns {JSX.Element} FilterHeader component
- */
-const FilterHeader = (_a) => {
-    var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
-    return (jsxs(Root, Object.assign({}, rest, { "data-testid": dataTestId }, { children: [jsxs(HeadingContainer, { children: [jsx("h4", { children: title }), loading ? (jsx(Spinner, { size: "small" })) : (jsx(HiddenButton, Object.assign({ "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset }, { children: resetLabel })))] }), children] })));
-};
+/**
+ * The FilterHeader 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.
+ *
+ * @param {FilterHeaderProps} props - The props for the FilterHeader component
+ * @returns {JSX.Element} FilterHeader component
+ */
+const FilterHeader = (_a) => {
+    var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
+    return (jsxs(Root, Object.assign({}, rest, { "data-testid": dataTestId, children: [jsxs(HeadingContainer, { children: [jsx("h4", { children: title }), loading ? (jsx(Spinner, { size: "small" })) : (jsx(HiddenButton, { "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset, children: resetLabel }))] }), children] })));
+};
 const HeadingContainer = tw.div `
   flex
   items-center
@@ -109,44 +109,44 @@ const HeadingContainer = tw.div `
   text-sm
   text-slate-600
   uppercase
-`;
+`;
 const HiddenButton = twx(Button) `
   ${props => (props.$isVisible ? tws `visible` : tws `invisible`)}
-`;
+`;
 const Root = tw.div `
   grid
   gap-1
   p-1
 `;
 
-/**
- * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
- * This component in generic and does not have any connection to the data.
- *
- * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
- */
-const CheckBoxFilterItem = (_a) => {
-    var { itemCount, className, prefix, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps"]);
-    const checkboxProps = Object.assign({}, rest);
-    const checkboxRef = useRef(null);
-    return (jsx(MenuItem, Object.assign({ onClick: e => {
-            var _a;
-            e.preventDefault();
-            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
-        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsx("small", { children: itemCount }) }, { children: jsx(Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
+/**
+ * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+const CheckBoxFilterItem = (_a) => {
+    var { itemCount, className, prefix, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps"]);
+    const checkboxProps = Object.assign({}, rest);
+    const checkboxRef = useRef(null);
+    return (jsx(MenuItem, Object.assign({ onClick: e => {
+            var _a;
+            e.preventDefault();
+            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsx("small", { children: itemCount }), children: jsx(Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
 };
 
-/**
- * The RadioFilterItem component is the base component used in the manager to FilterItem data.
- * This component in generic and does not have any connection to the data.
- *
- * @param {RadioFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
- */
-const RadioFilterItem = (_a) => {
-    var { value, label, itemCount, selected, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["value", "label", "itemCount", "selected", "dataTestId", "menuItemProps"]);
-    return (jsx(MenuItem, Object.assign({ selected: selected, dataTestId: dataTestId, className: "flex justify-between cursor-default p-0 my-[2px]", suffix: jsx("small", Object.assign({ 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, Object.assign({ className: "cursor-pointer", type: "span" }, { children: label })) })) })));
+/**
+ * The RadioFilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {RadioFilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+const RadioFilterItem = (_a) => {
+    var { value, label, itemCount, selected, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["value", "label", "itemCount", "selected", "dataTestId", "menuItemProps"]);
+    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 }) })) })));
 };
 
 export { CheckBoxFilterItem, Filter, FilterBody, FilterHeader, RadioFilterItem };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "0.0.124",
+  "version": "0.0.133",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=16.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "0.1.117",
-    "@trackunit/react-form-components": "0.0.67",
-    "@trackunit/tailwind-styled-components": "0.0.57",
+    "@trackunit/react-components": "0.1.124",
+    "@trackunit/react-form-components": "0.0.76",
+    "@trackunit/tailwind-styled-components": "0.0.58",
     "react": "18.2.0"
   },
   "module": "./index.js",

package/src/Filter/Filter.d.ts

@@ -1,54 +1,54 @@
-/// <reference types="react" />
-import { ButtonProps, MenuListProps, PopoverProps } from "@trackunit/react-components";
-export interface FilterProps extends ButtonProps {
-    /**
-     * The title/name of the filter.
-     */
-    title: string;
-    /**
-     * Used to indicate if the user has any active selection in the filter.
-     */
-    isActive?: boolean;
-    /**
-     * The label that will be displayed when the filter is active.
-     */
-    activeLabel?: string;
-    /**
-     * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
-     * This intended to be used withe the FilterHeader component.
-     *
-     * @default false
-     */
-    withStickyHeader?: boolean;
-    /**
-     * Child elements will be rendered inside the menu list and are only visible when the popover is open.
-     */
-    children: MenuListProps["children"];
-    /**
-     * Can be used to override the pops of the popover.
-     * The render prop cannot be overridden.
-     */
-    popoverProps?: Omit<PopoverProps, "render">;
-    /**
-     * Can be used to override the pops of the MenuList.
-     * The render prop cannot be overridden.
-     */
-    menuListProps?: Omit<MenuListProps, "children">;
-    /**
-     * A flag to set a filter component into readonly mode used for presenting filtering rules that cannot be change by user
-     */
-    readOnly?: boolean;
-}
-/**
- * The Filter component is the base component used in the manager to filter data.
- *
- * - This component in generic and does not have any connection to the data.
- * - The base props extends button props, and any button props such as prefix and suffix can be used.
- * - Color and size has special default values in this component, but can be overridden if needed.
- *
- * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
- *
- * @param {FilterProps} props - The props for the Filter component
- * @returns {JSX.Element} Filter component
- */
-export declare const Filter: ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader, readOnly, ...rest }: FilterProps) => JSX.Element;
+/// <reference types="react" />
+import { ButtonProps, MenuListProps, PopoverProps } from "@trackunit/react-components";
+export interface FilterProps extends ButtonProps {
+    /**
+     * The title/name of the filter.
+     */
+    title: string;
+    /**
+     * Used to indicate if the user has any active selection in the filter.
+     */
+    isActive?: boolean;
+    /**
+     * The label that will be displayed when the filter is active.
+     */
+    activeLabel?: string;
+    /**
+     * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
+     * This intended to be used withe the FilterHeader component.
+     *
+     * @default false
+     */
+    withStickyHeader?: boolean;
+    /**
+     * Child elements will be rendered inside the menu list and are only visible when the popover is open.
+     */
+    children: MenuListProps["children"];
+    /**
+     * Can be used to override the pops of the popover.
+     * The render prop cannot be overridden.
+     */
+    popoverProps?: Omit<PopoverProps, "render">;
+    /**
+     * Can be used to override the pops of the MenuList.
+     * The render prop cannot be overridden.
+     */
+    menuListProps?: Omit<MenuListProps, "children">;
+    /**
+     * A flag to set a filter component into readonly mode used for presenting filtering rules that cannot be change by user
+     */
+    readOnly?: boolean;
+}
+/**
+ * The Filter component is the base component used in the manager to filter data.
+ *
+ * - This component in generic and does not have any connection to the data.
+ * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ * - Color and size has special default values in this component, but can be overridden if needed.
+ *
+ * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
+ *
+ * @param {FilterProps} props - The props for the Filter component
+ * @returns {JSX.Element} Filter component
+ */
+export declare const Filter: ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader, readOnly, ...rest }: FilterProps) => JSX.Element;

package/src/FilterBody/FilterBody.d.ts

@@ -1,19 +1,19 @@
-import { CommonProps } from "@trackunit/react-components";
-import React from "react";
-export interface FilterBodyProps extends CommonProps {
-    /**
-     * Children to render in the body of the filter.
-     * This is intended for FilterItems.
-     */
-    children?: React.ReactNode;
-    limitSize?: boolean;
-}
-/**
- * The FilterBody 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.
- *
- * @param {FilterBodyProps} props - The props for the FilterBody component
- * @returns {JSX.Element} FilterBody component
- */
-export declare const FilterBody: React.ForwardRefExoticComponent<FilterBodyProps & React.RefAttributes<HTMLDivElement>>;
+import { CommonProps } from "@trackunit/react-components";
+import React from "react";
+export interface FilterBodyProps extends CommonProps {
+    /**
+     * Children to render in the body of the filter.
+     * This is intended for FilterItems.
+     */
+    children?: React.ReactNode;
+    limitSize?: boolean;
+}
+/**
+ * The FilterBody 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.
+ *
+ * @param {FilterBodyProps} props - The props for the FilterBody component
+ * @returns {JSX.Element} FilterBody component
+ */
+export declare const FilterBody: React.ForwardRefExoticComponent<FilterBodyProps & React.RefAttributes<HTMLDivElement>>;

package/src/FilterHeader/FilterHeader.d.ts

@@ -1,35 +1,35 @@
-/// <reference types="react" />
-import { CommonProps } from "@trackunit/react-components";
-export interface FilterHeaderProps extends CommonProps {
-    /**
-     * The title of the filter will be displayed in the header.
-     */
-    title: string;
-    /**
-     * Used to indicate if the user has any active selection in the filter.
-     */
-    showReset?: boolean;
-    /**
-     * The Label to display on the reset button.
-     */
-    resetLabel?: string;
-    loading?: boolean;
-    /**
-     * The callback that will be called when the user clicks the reset button.
-     */
-    onReset?: () => void;
-    /**
-     * Optional elements to render blow the title and reset button.
-     * This is intended for use with the search component.
-     */
-    children?: React.ReactNode;
-}
-/**
- * The FilterHeader 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.
- *
- * @param {FilterHeaderProps} props - The props for the FilterHeader component
- * @returns {JSX.Element} FilterHeader component
- */
-export declare const FilterHeader: ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }: FilterHeaderProps) => JSX.Element;
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+export interface FilterHeaderProps extends CommonProps {
+    /**
+     * The title of the filter will be displayed in the header.
+     */
+    title: string;
+    /**
+     * Used to indicate if the user has any active selection in the filter.
+     */
+    showReset?: boolean;
+    /**
+     * The Label to display on the reset button.
+     */
+    resetLabel?: string;
+    loading?: boolean;
+    /**
+     * The callback that will be called when the user clicks the reset button.
+     */
+    onReset?: () => void;
+    /**
+     * Optional elements to render blow the title and reset button.
+     * This is intended for use with the search component.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The FilterHeader 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.
+ *
+ * @param {FilterHeaderProps} props - The props for the FilterHeader component
+ * @returns {JSX.Element} FilterHeader component
+ */
+export declare const FilterHeader: ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }: FilterHeaderProps) => JSX.Element;

package/src/FilterItem/CheckBoxFilter/CheckBoxFilterItem.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { CheckBoxFilterItemProps } from "../types";
-/**
- * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
- * This component in generic and does not have any connection to the data.
- *
- * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
- */
-export declare const CheckBoxFilterItem: ({ itemCount, className, prefix, dataTestId, menuItemProps, ...rest }: CheckBoxFilterItemProps) => JSX.Element;
+/// <reference types="react" />
+import { CheckBoxFilterItemProps } from "../types";
+/**
+ * The CheckBoxFilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+export declare const CheckBoxFilterItem: ({ itemCount, className, prefix, dataTestId, menuItemProps, ...rest }: CheckBoxFilterItemProps) => JSX.Element;

package/src/FilterItem/RadioFilter/RadioFilterItem.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { RadioFilterItemProps } from "../types";
-/**
- * The RadioFilterItem component is the base component used in the manager to FilterItem data.
- * This component in generic and does not have any connection to the data.
- *
- * @param {RadioFilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
- */
-export declare const RadioFilterItem: ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }: RadioFilterItemProps) => JSX.Element;
+/// <reference types="react" />
+import { RadioFilterItemProps } from "../types";
+/**
+ * The RadioFilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {RadioFilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+export declare const RadioFilterItem: ({ value, label, itemCount, selected, dataTestId, menuItemProps, ...rest }: RadioFilterItemProps) => JSX.Element;

package/src/FilterItem/types.d.ts

@@ -1,23 +1,23 @@
-import { MenuItemProps } from "@trackunit/react-components";
-import { CheckboxProps, RadioItemProps } from "@trackunit/react-form-components";
-export interface CheckBoxFilterItemProps extends Omit<CheckboxProps, "prefix" | "suffix">, BaseFilterItemProps {
-}
-export interface RadioFilterItemProps<V extends string | number = string> extends RadioItemProps<V>, BaseFilterItemProps {
-    /**
-     * An boolean flag to set checkbox to checked state
-     */
-    selected?: boolean;
-}
-interface BaseFilterItemProps {
-    /**
-     * The number of results for the filter item.
-     * This displays the number next to the label.
-     */
-    itemCount?: number;
-    /**
-     * Properties to be passed to the MenuItem component.
-     */
-    menuItemProps?: MenuItemProps;
-    prefix?: MenuItemProps["prefix"];
-}
-export {};
+import { MenuItemProps } from "@trackunit/react-components";
+import { CheckboxProps, RadioItemProps } from "@trackunit/react-form-components";
+export interface CheckBoxFilterItemProps extends Omit<CheckboxProps, "prefix" | "suffix">, BaseFilterItemProps {
+}
+export interface RadioFilterItemProps<V extends string | number = string> extends RadioItemProps<V>, BaseFilterItemProps {
+    /**
+     * An boolean flag to set checkbox to checked state
+     */
+    selected?: boolean;
+}
+interface BaseFilterItemProps {
+    /**
+     * The number of results for the filter item.
+     * This displays the number next to the label.
+     */
+    itemCount?: number;
+    /**
+     * Properties to be passed to the MenuItem component.
+     */
+    menuItemProps?: MenuItemProps;
+    prefix?: MenuItemProps["prefix"];
+}
+export {};

package/src/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./Filter/Filter";
-export * from "./FilterBody/FilterBody";
-export * from "./FilterHeader/FilterHeader";
-export * from "./FilterItem/CheckBoxFilter/CheckBoxFilterItem";
-export * from "./FilterItem/RadioFilter/RadioFilterItem";
+export * from "./Filter/Filter";
+export * from "./FilterBody/FilterBody";
+export * from "./FilterHeader/FilterHeader";
+export * from "./FilterItem/CheckBoxFilter/CheckBoxFilterItem";
+export * from "./FilterItem/RadioFilter/RadioFilterItem";