@trackunit/react-filter-components 0.0.47 → 0.0.48

package/index.cjs

@@ -68,22 +68,32 @@ const ActiveLabel = tailwindStyledComponents.tw.span `
 `;
 
 /**
- * The FilterItem 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.
+ * 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 {FilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
+ * @param {FilterBodyProps} props - The props for the FilterBody component
+ * @returns {JSX.Element} FilterBody component
  */
-const FilterItem = (_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(reactComponents.Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
-};
+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
+    ? 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.
@@ -95,7 +105,7 @@ const FilterItem = (_a) => {
  */
 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$1, 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] })));
+    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] })));
 };
 const HeadingContainer = tailwindStyledComponents.tw.div `
   flex
@@ -110,40 +120,44 @@ const HeadingContainer = tailwindStyledComponents.tw.div `
 const HiddenButton = tailwindStyledComponents.twx(reactComponents.Button) `
   ${props => (props.$isVisible ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`)}
 `;
-const Root$1 = tailwindStyledComponents.tw.div `
+const Root = tailwindStyledComponents.tw.div `
   grid
   gap-1
   p-1
 `;
 
 /**
- * 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.
+ * 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 {FilterBodyProps} props - The props for the FilterBody component
- * @returns {JSX.Element} FilterBody component
+ * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem 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, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId }, { children: children })));
-});
-const Root = tailwindStyledComponents.tw.div `
-  grid
-  gap-1
-  p-1
-  rounded
-  ${props => props.$limitSize
-    ? tailwindStyledComponents.tws `
-          overflow-hidden
-          max-h-80
-          max-w-sm
-          overflow-y-auto
-        `
-    : ""}
-`;
+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(reactComponents.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(reactComponents.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 })) })) })));
+};
 
+exports.CheckBoxFilterItem = CheckBoxFilterItem;
 exports.Filter = Filter;
 exports.FilterBody = FilterBody;
 exports.FilterHeader = FilterHeader;
-exports.FilterItem = FilterItem;
+exports.RadioFilterItem = RadioFilterItem;

package/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Button, MenuList, Popover, PopoverTrigger, PopoverContent, MenuItem, Checkbox, Spinner } from '@trackunit/react-components';
+import { Button, MenuList, Popover, PopoverTrigger, PopoverContent, Spinner, MenuItem, Checkbox, RadioItem, Text } from '@trackunit/react-components';
 import { twx, tws, tw } from '@trackunit/tailwind-styled-components';
 import React, { useRef } from 'react';
 
@@ -60,22 +60,32 @@ const ActiveLabel = tw.span `
 `;
 
 /**
- * The FilterItem 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.
+ * 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 {FilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
+ * @param {FilterBodyProps} props - The props for the FilterBody component
+ * @returns {JSX.Element} FilterBody component
  */
-const FilterItem = (_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" })) })));
-};
+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
+    ? 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.
@@ -87,7 +97,7 @@ const FilterItem = (_a) => {
  */
 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$1, 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] })));
+    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] })));
 };
 const HeadingContainer = tw.div `
   flex
@@ -102,37 +112,40 @@ const HeadingContainer = tw.div `
 const HiddenButton = twx(Button) `
   ${props => (props.$isVisible ? tws `visible` : tws `invisible`)}
 `;
-const Root$1 = tw.div `
+const Root = tw.div `
   grid
   gap-1
   p-1
 `;
 
 /**
- * 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.
+ * 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 {FilterBodyProps} props - The props for the FilterBody component
- * @returns {JSX.Element} FilterBody component
+ * @param {CheckBoxFilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
  */
-const FilterBody = React.forwardRef((_a, ref) => {
-    var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
-    return (jsx(Root, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId }, { children: children })));
-});
-const Root = tw.div `
-  grid
-  gap-1
-  p-1
-  rounded
-  ${props => props.$limitSize
-    ? tws `
-          overflow-hidden
-          max-h-80
-          max-w-sm
-          overflow-y-auto
-        `
-    : ""}
-`;
+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 })) })) })));
+};
 
-export { Filter, FilterBody, FilterHeader, FilterItem };
+export { CheckBoxFilterItem, Filter, FilterBody, FilterHeader, RadioFilterItem };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/react-components": "0.1.67",
+    "@trackunit/react-components": "0.1.68",
     "react": "18.2.0",
     "@trackunit/tailwind-styled-components": "0.0.54",
     "jest-canvas-mock": "2.4.0"

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

@@ -0,0 +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;

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

@@ -0,0 +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;

package/src/FilterItem/types.d.ts

@@ -0,0 +1,22 @@
+import { CheckboxProps, MenuItemProps, RadioItemProps } from "@trackunit/react-components";
+export interface CheckBoxFilterItemProps extends Omit<CheckboxProps, "prefix" | "suffix">, BaseFilterItemProps {
+}
+export interface RadioFilterItemProps extends RadioItemProps, 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,4 +1,5 @@
 export * from "./Filter/Filter";
-export * from "./FilterItem/FilterItem";
-export * from "./FilterHeader/FilterHeader";
 export * from "./FilterBody/FilterBody";
+export * from "./FilterHeader/FilterHeader";
+export * from "./FilterItem/CheckBoxFilter/CheckBoxFilterItem";
+export * from "./FilterItem/RadioFilter/RadioFilterItem";

package/src/FilterItem/FilterItem.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="react" />
-import { CheckboxProps, MenuItemProps } from "@trackunit/react-components";
-export interface FilterItemProps extends Omit<CheckboxProps, "prefix" | "suffix"> {
-    /**
-     * The number of results for the filter item.
-     * This displays the number next to the label.
-     */
-    itemCount?: number;
-    /**
-     * An boolean flag to set checkbox to checked state.
-     */
-    checked?: boolean;
-    /**
-     * An boolean flag to set checkbox to disabled state.
-     */
-    disabled?: boolean;
-    /**
-     * Properties to be passed to the MenuItem component.
-     */
-    menuItemProps?: MenuItemProps;
-    prefix?: MenuItemProps["prefix"];
-}
-/**
- * The FilterItem 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 {FilterItemProps} props - The props for the FilterItem component
- * @returns {JSX.Element} FilterItem component
- */
-export declare const FilterItem: ({ itemCount, className, prefix, dataTestId, menuItemProps, ...rest }: FilterItemProps) => JSX.Element;