@trackunit/react-components 0.1.396 → 0.1.398

package/index.cjs.js

@@ -18,8 +18,8 @@ var reactRouter = require('@tanstack/react-router');
 var reactSwipeable = require('react-swipeable');
 var react = require('@floating-ui/react');
 var omit = require('lodash/omit');
-var reactHelmetAsync = require('react-helmet-async');
 var tailwindMerge = require('tailwind-merge');
+var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
 var dateFns = require('date-fns');
 var reactTablePagination = require('@trackunit/react-table-pagination');
@@ -3913,7 +3913,64 @@ const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconB
     return (jsxRuntime.jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [tooltipLabel ? (jsxRuntime.jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(CardContent, {}) })) : (jsxRuntime.jsx(CardContent, {})), !loading && jsxRuntime.jsx(reactSlot.Slottable, { children: rest.children })] }));
 };
 
-const cvaMenuItem = 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).
+ * To be used for elements that do not have typical interactive roles and behaviors, such as divs, table rows, cards etc.
+ *
+ * To not be used for buttons, links, or other elements that have their own specific interactive roles.
+ *
+ * @returns a cva function that takes in the selected, disabled, showPointer, and focusRing props
+ */
+const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge(["outline-none"], {
+    variants: {
+        showPointer: {
+            true: "cursor-pointer",
+            false: "",
+        },
+        selected: {
+            true: "bg-primary-600/[.08] hover:bg-primary-600/[.12] [&:has(:focus-visible)]:bg-primary-600/[.12] focus-visible:bg-primary-600/[.12]", // opacity 8% and 12% selected based on example at https://mui.com/x/react-data-grid/row-selection/#disable-row-selection-on-click
+            false: "",
+        },
+        disabled: {
+            true: "pointer-events-none !bg-neutral-100",
+            false: "",
+        },
+        focusRing: {
+            // necessary for accessibility during keyboard navigation
+            // used in compound variant below since it depends on other conditions to be applied
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            selected: false,
+            className: "hover:bg-neutral-600/5 focus-visible:bg-neutral-600/5 [&:has(:focus-visible)]:bg-neutral-600/5",
+        },
+        {
+            disabled: false,
+            focusRing: true,
+            className: 
+            // focus-visible is a pseudo-class that is used to style an element when it is focused, and the user is navigating using the keyboard.
+            // here we are targeting the parent element of the focus-visible element (so the parent containing a checkbox or radio button)
+            "[&:has(:focus-visible)]:ring-primary-700 focus-visible:ring-primary-700 focus-visible:ring-2 focus-visible:ring-inset [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-inset",
+        },
+    ],
+    defaultVariants: {
+        showPointer: false,
+        selected: false,
+        disabled: false,
+        focusRing: false,
+    },
+});
+
+/**
+ * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
+ * 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 = ({ size, selected, disabled, focusRing, className } = {}) => tailwindMerge.twMerge(cvaMenuItemStyle({ size }), cvaInteractableItem({ selected, disabled, showPointer: true, focusRing }), className);
+const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge([
     "py-2",
     "pl-2",
     "pr-3",
@@ -3926,35 +3983,13 @@ const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
     "gap-x-2",
     "select-none",
     "rounded",
-    "hover:bg-slate-100",
-    "focus-within:outline-native",
 ], {
     variants: {
-        selected: {
-            true: "bg-primary-100 hover:bg-primary-200",
-            false: "",
-        },
-        disabled: {
-            true: "pointer-events-none !bg-slate-100",
-            false: "",
-        },
-        focused: {
-            true: "bg-slate-100",
-            false: "",
-        },
         size: {
             small: "py-1",
             medium: "py-2",
         },
     },
-    compoundVariants: [
-        {
-            focused: true,
-            selected: true,
-            className: "bg-primary-200",
-            size: "medium",
-        },
-    ],
 });
 const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge([
     "flex-grow",
@@ -3987,12 +4022,12 @@ 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, stopPropagation = true, id, tabIndex, }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, focusRing = true, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
     return (jsxRuntime.jsxs("div", { ...containerProps, className: cvaMenuItem({
             selected,
-            focused,
             disabled,
+            focusRing,
             size,
             className: containerProps.className,
         }), id: id, onClick: e => {
@@ -4893,9 +4928,11 @@ exports.cvaIndicatorIcon = cvaIndicatorIcon;
 exports.cvaIndicatorIconBackground = cvaIndicatorIconBackground;
 exports.cvaIndicatorLabel = cvaIndicatorLabel;
 exports.cvaIndicatorPing = cvaIndicatorPing;
+exports.cvaInteractableItem = cvaInteractableItem;
 exports.cvaMenuItem = cvaMenuItem;
 exports.cvaMenuItemLabel = cvaMenuItemLabel;
 exports.cvaMenuItemPrefix = cvaMenuItemPrefix;
+exports.cvaMenuItemStyle = cvaMenuItemStyle;
 exports.cvaMenuItemSuffix = cvaMenuItemSuffix;
 exports.docs = docs;
 exports.getDevicePixelRatio = getDevicePixelRatio;

package/index.esm.js

@@ -17,8 +17,8 @@ import { Link, useBlocker } from '@tanstack/react-router';
 import { useSwipeable } from 'react-swipeable';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import omit from 'lodash/omit';
-import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { twMerge } from 'tailwind-merge';
+import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
 import { format, formatDistance } from 'date-fns';
 import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
@@ -3893,7 +3893,64 @@ const KPICard = ({ asChild = false, title, value, loading, unit, iconName, iconB
     return (jsxs(Comp, { className: cvaKPICardContainer({ className, isClickable: Boolean(asChild || onClick) }), "data-testid": `${dataTestId}-comp`, onClick: onClick, ...rest, children: [tooltipLabel ? (jsx(Tooltip, { className: "w-full", label: tooltipLabel, placement: "bottom", children: jsx(CardContent, {}) })) : (jsx(CardContent, {})), !loading && jsx(Slottable, { children: rest.children })] }));
 };
 
-const cvaMenuItem = cvaMerge([
+/**
+ * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
+ * To be used for elements that do not have typical interactive roles and behaviors, such as divs, table rows, cards etc.
+ *
+ * To not be used for buttons, links, or other elements that have their own specific interactive roles.
+ *
+ * @returns a cva function that takes in the selected, disabled, showPointer, and focusRing props
+ */
+const cvaInteractableItem = cvaMerge(["outline-none"], {
+    variants: {
+        showPointer: {
+            true: "cursor-pointer",
+            false: "",
+        },
+        selected: {
+            true: "bg-primary-600/[.08] hover:bg-primary-600/[.12] [&:has(:focus-visible)]:bg-primary-600/[.12] focus-visible:bg-primary-600/[.12]", // opacity 8% and 12% selected based on example at https://mui.com/x/react-data-grid/row-selection/#disable-row-selection-on-click
+            false: "",
+        },
+        disabled: {
+            true: "pointer-events-none !bg-neutral-100",
+            false: "",
+        },
+        focusRing: {
+            // necessary for accessibility during keyboard navigation
+            // used in compound variant below since it depends on other conditions to be applied
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            selected: false,
+            className: "hover:bg-neutral-600/5 focus-visible:bg-neutral-600/5 [&:has(:focus-visible)]:bg-neutral-600/5",
+        },
+        {
+            disabled: false,
+            focusRing: true,
+            className: 
+            // focus-visible is a pseudo-class that is used to style an element when it is focused, and the user is navigating using the keyboard.
+            // here we are targeting the parent element of the focus-visible element (so the parent containing a checkbox or radio button)
+            "[&:has(:focus-visible)]:ring-primary-700 focus-visible:ring-primary-700 focus-visible:ring-2 focus-visible:ring-inset [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-inset",
+        },
+    ],
+    defaultVariants: {
+        showPointer: false,
+        selected: false,
+        disabled: false,
+        focusRing: false,
+    },
+});
+
+/**
+ * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
+ * 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 = ({ size, selected, disabled, focusRing, className } = {}) => twMerge(cvaMenuItemStyle({ size }), cvaInteractableItem({ selected, disabled, showPointer: true, focusRing }), className);
+const cvaMenuItemStyle = cvaMerge([
     "py-2",
     "pl-2",
     "pr-3",
@@ -3906,35 +3963,13 @@ const cvaMenuItem = cvaMerge([
     "gap-x-2",
     "select-none",
     "rounded",
-    "hover:bg-slate-100",
-    "focus-within:outline-native",
 ], {
     variants: {
-        selected: {
-            true: "bg-primary-100 hover:bg-primary-200",
-            false: "",
-        },
-        disabled: {
-            true: "pointer-events-none !bg-slate-100",
-            false: "",
-        },
-        focused: {
-            true: "bg-slate-100",
-            false: "",
-        },
         size: {
             small: "py-1",
             medium: "py-2",
         },
     },
-    compoundVariants: [
-        {
-            focused: true,
-            selected: true,
-            className: "bg-primary-200",
-            size: "medium",
-        },
-    ],
 });
 const cvaMenuItemLabel = cvaMerge([
     "flex-grow",
@@ -3967,12 +4002,12 @@ 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, stopPropagation = true, id, tabIndex, }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, focusRing = true, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
     return (jsxs("div", { ...containerProps, className: cvaMenuItem({
             selected,
-            focused,
             disabled,
+            focusRing,
             size,
             className: containerProps.className,
         }), id: id, onClick: e => {
@@ -4806,4 +4841,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useWindowActivity };

package/package.json

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

package/src/components/InteractableItem/InteractableItem.variants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
+ * To be used for elements that do not have typical interactive roles and behaviors, such as divs, table rows, cards etc.
+ *
+ * To not be used for buttons, links, or other elements that have their own specific interactive roles.
+ *
+ * @returns a cva function that takes in the selected, disabled, showPointer, and focusRing props
+ */
+export declare const cvaInteractableItem: (props?: ({
+    showPointer?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    focusRing?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -42,12 +42,12 @@ export interface MenuItemProps extends CommonProps {
      */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
-     * An boolean flag to turn on/off focused state
-     * This is typically used for keyboard navigation
+     * An boolean flag to turn on/off focus rings
+     * This is used for keyboard navigation
      *
      * @memberof MenuItemProps
      */
-    focused?: boolean;
+    focusRing?: boolean;
     /**
      * A boolean prop to set menu item to disabled state
      * used in disabled select options
@@ -66,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, stopPropagation, id, tabIndex, }: MenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, focusRing, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, }: MenuItemProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,16 @@
-export declare const cvaMenuItem: (props?: ({
-    selected?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    focused?: boolean | null | undefined;
+interface CvaMenuItemProps {
+    size?: "small" | "medium";
+    selected?: boolean;
+    disabled?: boolean;
+    focusRing?: boolean;
+    className?: string;
+}
+/**
+ * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
+ * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
+ */
+export declare const cvaMenuItem: ({ size, selected, disabled, focusRing, className }?: CvaMenuItemProps) => string;
+export declare const cvaMenuItemStyle: (props?: ({
     size?: "small" | "medium" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaMenuItemLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
@@ -11,3 +20,4 @@ export declare const cvaMenuItemSuffix: (props?: ({
 export declare const cvaMenuItemPrefix: (props?: ({
     selected?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export {};

package/src/index.d.ts

@@ -1,8 +1,9 @@
 export * from "./common";
 export * from "./common/PackageNameStoryComponent";
 export * from "./components";
+export * from "./components/buttons/shared/Button.variants";
 export * from "./components/Clickable/Clickable.variants";
 export * from "./components/Indicator/Indicator.variants";
+export * from "./components/InteractableItem/InteractableItem.variants";
 export * from "./components/Menu/MenuItem/MenuItem.variants";
-export * from "./components/buttons/shared/Button.variants";
 export * from "./hooks";