@trackunit/react-components 0.1.193 → 0.1.194

package/index.cjs.js

@@ -19361,7 +19361,7 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "fl
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, id, }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
     return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { id: id, className: cvaMenuItem({
             selected,
@@ -19370,7 +19370,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
             size,
             className: containerProps.className,
         }), onClick: e => {
-            e.stopPropagation();
+            stopPropagation && e.stopPropagation();
             onClick && onClick(e);
         }, tabIndex: 0, children: [prefix && (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })), children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId && `${dataTestId}-label`, children: children !== null && children !== void 0 ? children : label })), suffix && (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix }))] })));
 };
@@ -19397,10 +19397,10 @@ const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge([
  * @returns {JSX.Element} MenuList component
  */
 const MenuList = (_a) => {
-    var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest$1(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
+    var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a, args = __rest$1(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = React.Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx("hr", { className: cvaMenuListDivider() })] }))) }));
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", onClick: args.onClick, children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx("hr", { className: cvaMenuListDivider() })] }))) }));
 };
 
 const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-4"]);

package/index.esm.js

@@ -19332,7 +19332,7 @@ const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-40
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, id, }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
     return (jsxs("div", Object.assign({}, containerProps, { id: id, className: cvaMenuItem({
             selected,
@@ -19341,7 +19341,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
             size,
             className: containerProps.className,
         }), onClick: e => {
-            e.stopPropagation();
+            stopPropagation && e.stopPropagation();
             onClick && onClick(e);
         }, tabIndex: 0, children: [prefix && (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })), children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId && `${dataTestId}-label`, children: children !== null && children !== void 0 ? children : label })), suffix && (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix }))] })));
 };
@@ -19368,10 +19368,10 @@ const cvaMenuListDivider = cvaMerge([
  * @returns {JSX.Element} MenuList component
  */
 const MenuList = (_a) => {
-    var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest$1(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
+    var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a, args = __rest$1(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx("hr", { className: cvaMenuListDivider() })] }))) }));
+    return (jsx("div", { "data-testid": dataTestId, className: cvaMenuList({ stickyHeader: withStickyHeader, className }), tabIndex: 0, role: "list", onClick: args.onClick, children: Children.map(childrenArr, (menuItem, index) => (jsxs(Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsx("hr", { className: cvaMenuListDivider() })] }))) }));
 };
 
 const cvaMoreMenu = cvaMerge(["p-4"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.193",
+  "version": "0.1.194",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -54,6 +54,11 @@ export interface MenuItemProps extends CommonProps {
      * used in disabled select options
      */
     disabled?: boolean;
+    /**
+     * A boolean prop to stop propagation of onClick event
+     * used in Menu and Select components
+     */
+    stopPropagation?: boolean;
 }
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
@@ -61,5 +66,5 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, id, }: MenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, }: MenuItemProps) => JSX.Element;
 export {};

package/src/components/Menu/MenuList/MenuList.d.ts

@@ -19,6 +19,8 @@ export interface MenuListProps extends CommonProps {
      * @default false
      */
     withStickyHeader?: boolean;
+    /** Click handler - typically used to trigger close action. when propagation is NOT prevented on menuItem */
+    onClick?: () => void;
 }
 /**
  * The MenuList component is used for menus and selects.