@trackunit/react-components 1.4.124 → 1.4.125

package/index.cjs.js

@@ -2923,7 +2923,7 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
             false: "", // use compoundVariants instead
         },
         focused: {
-            true: "outline-native",
+            true: ["bg-neutral-600/5"],
             false: "",
             auto: "[&:has(:focus-visible)]:outline-native",
         },
@@ -3054,7 +3054,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -3069,6 +3069,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
             disabled,
             className,
             variant,
+            focused,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick?.(e);

package/index.esm.js

@@ -2921,7 +2921,7 @@ const cvaInteractableItem = cvaMerge("", {
             false: "", // use compoundVariants instead
         },
         focused: {
-            true: "outline-native",
+            true: ["bg-neutral-600/5"],
             false: "",
             auto: "[&:has(:focus-visible)]:outline-native",
         },
@@ -3052,7 +3052,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -3067,6 +3067,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
             disabled,
             className,
             variant,
+            focused,
         }), "data-testid": dataTestId ? `${dataTestId}-menu-item` : "menu-item", id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick?.(e);

package/package.json

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

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

@@ -1,5 +1,5 @@
-import { MouseEventHandler, ReactNode } from "react";
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { MouseEventHandler, ReactNode } from "react";
 import { CommonProps } from "../../../common";
 import { cvaMenuItemStyle } from "./MenuItem.variants";
 export type MenuItemVariant = "primary" | "danger";
@@ -30,12 +30,19 @@ export interface MenuItemProps extends CommonProps {
      */
     suffix?: ReactNode;
     /**
-     * An boolean flag to turn on/off selected state
+     * A boolean flag to turn on/off selected state
      * This is typically used highlight that item is selected
      *
      * @memberof MenuItemProps
      */
     selected?: boolean;
+    /**
+     * A boolean flag to turn on/off focused state
+     * This is typically used highlight that item is focused
+     *
+     * @memberof MenuItemProps
+     */
+    focused?: boolean;
     /**
      * OnClick event handler it is thrown on root element of the component tree
      *
@@ -78,4 +85,4 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, fieldSize, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, fieldSize, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;