@trackunit/react-components 0.5.25 → 0.5.26

package/index.cjs.js

@@ -3908,7 +3908,7 @@ const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
 });
 const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
 const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge("hover:!bg-blue-200");
-const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-[290px]");
+const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-[292px]");
 
 /**
  * The MenuDivider component is used to separate items in a menu list.
@@ -3974,15 +3974,11 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
 const cvaMenuItem = (props) => {
-    const { size, selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
-    return tailwindMerge.twMerge(cvaMenuItemStyle({ size, variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+    const { selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
+    return tailwindMerge.twMerge(cvaMenuItemStyle({ variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
 };
 const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
-        size: {
-            small: "py-1",
-            medium: "py-2",
-        },
         variant: {
             primary: [],
             danger: [
@@ -4079,7 +4075,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -4091,7 +4087,6 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
     return (jsxRuntime.jsxs("div", { "aria-disabled": disabled, className: cvaMenuItem({
             selected,
             disabled,
-            size,
             className,
             variant,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
@@ -4146,7 +4141,7 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
                             ? cvaMenuListMultiSelect({ className: menuItem.props.className })
                             : cvaMenuListItem({ className: menuItem.props.className }),
                         selected: isSelected,
-                        suffix: isMulti && isSelected ? (jsxRuntime.jsx(Icon, { className: "h-5 text-blue-600", name: "Check", size: "medium", type: "solid" })) : null,
+                        suffix: isMulti && isSelected ? jsxRuntime.jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null,
                     }) }, index));
             }
             return null;
@@ -4164,14 +4159,15 @@ const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-0"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
+    className: "text-secondary-800",
 }, iconButtonProps = {
-    size: "small",
+    size: "medium",
     circular: false,
     square: true,
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = React.useRef(null);
-    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : "more-menu", ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
@@ -4595,7 +4591,6 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                         className: tailwindMerge.twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (jsxRuntime.jsx(MoreMenu, { iconButtonProps: {
-                    circular: false,
                     variant: "ghost-neutral",
                 }, ...moreMenuProps, className: moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsxRuntime.jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: React.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]

package/index.esm.js

@@ -3888,7 +3888,7 @@ const cvaMenuList = cvaMerge([
 });
 const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
 const cvaMenuListMultiSelect = cvaMerge("hover:!bg-blue-200");
-const cvaMenuListItem = cvaMerge("max-w-[290px]");
+const cvaMenuListItem = cvaMerge("max-w-[292px]");
 
 /**
  * The MenuDivider component is used to separate items in a menu list.
@@ -3954,15 +3954,11 @@ const cvaInteractableItem = cvaMerge("", {
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
 const cvaMenuItem = (props) => {
-    const { size, selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
-    return twMerge(cvaMenuItemStyle({ size, variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+    const { selected, disabled, focused, className, variant } = props !== null && props !== void 0 ? props : {};
+    return twMerge(cvaMenuItemStyle({ variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
 };
 const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
-        size: {
-            small: "py-1",
-            medium: "py-2",
-        },
         variant: {
             primary: [],
             danger: [
@@ -4059,7 +4055,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, size, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -4071,7 +4067,6 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, pref
     return (jsxs("div", { "aria-disabled": disabled, className: cvaMenuItem({
             selected,
             disabled,
-            size,
             className,
             variant,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
@@ -4126,7 +4121,7 @@ const MenuList = ({ dataTestId, className, children, withStickyHeader = false, i
                             ? cvaMenuListMultiSelect({ className: menuItem.props.className })
                             : cvaMenuListItem({ className: menuItem.props.className }),
                         selected: isSelected,
-                        suffix: isMulti && isSelected ? (jsx(Icon, { className: "h-5 text-blue-600", name: "Check", size: "medium", type: "solid" })) : null,
+                        suffix: isMulti && isSelected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : null,
                     }) }, index));
             }
             return null;
@@ -4144,14 +4139,15 @@ const cvaMoreMenu = cvaMerge(["p-0"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
+    className: "text-secondary-800",
 }, iconButtonProps = {
-    size: "small",
+    size: "medium",
     circular: false,
     square: true,
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {
     const actionMenuRef = useRef(null);
-    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
+    return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId ? dataTestId : "more-menu", ref: actionMenuRef, children: jsxs(Popover, { placement: "bottom-end", ...popoverProps, children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, { dataTestId: "more-menu-icon", ...iconButtonProps, icon: jsx(Icon, { name: "EllipsisHorizontal", ...iconProps }) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] }) }));
 };
 
 const cvaNotice = cvaMerge(["flex", "items-center"]);
@@ -4575,7 +4571,6 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                         className: twMerge(child.props.className, itemVisibilityClassName(child.props.id)),
                     });
                 }) }), overflowItemCount > 0 ? (jsx(MoreMenu, { iconButtonProps: {
-                    circular: false,
                     variant: "ghost-neutral",
                 }, ...moreMenuProps, className: moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className, dataTestId: dataTestId ? `${dataTestId}-more-menu` : undefined, children: close => (jsx(MenuList, { ...menuListProps, dataTestId: dataTestId, children: React__default.Children.map(children, child => {
                         return itemOverflowMap[child.props.id]

package/package.json

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

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

@@ -1,5 +1,4 @@
-import { CommonProps, Size } from "../../../common";
-type MenuItemSize = Extract<Size, "small" | "medium">;
+import { CommonProps } from "../../../common";
 export type MenuItemVariant = "primary" | "danger";
 export interface MenuItemProps extends CommonProps {
     /**
@@ -15,10 +14,6 @@ export interface MenuItemProps extends CommonProps {
      * If you use this prop, the label prop will be ignored.
      */
     children?: React.ReactNode;
-    /**
-     * Size of the menu item
-     */
-    size?: MenuItemSize;
     /**
      * An React element to render before the label.
      * This is typically used to render an icon.
@@ -73,5 +68,4 @@ 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, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const MenuItem: ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,6 @@ import { MappedOmit } from "@trackunit/shared-utils";
 import { cvaInteractableItem } from "../../InteractableItem/InteractableItem.variants";
 import { MenuItemVariant } from "./MenuItem";
 type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
-    size?: "small" | "medium";
     variant?: MenuItemVariant;
     selected?: boolean | null | undefined;
 };
@@ -13,7 +12,6 @@ type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableIt
  */
 export declare const cvaMenuItem: (props?: CvaMenuItemProps) => string;
 export declare const cvaMenuItemStyle: (props?: ({
-    size?: "small" | "medium" | null | undefined;
     variant?: "primary" | "danger" | null | undefined;
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;