@trackunit/react-components 0.1.362 → 0.1.364

package/index.cjs.js

@@ -3686,6 +3686,7 @@ const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
     "select-none",
     "rounded",
     "hover:bg-slate-100",
+    "focus-within:outline-native",
 ], {
     variants: {
         selected: {
@@ -3745,7 +3746,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, stopPropagation = true, id, }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
     return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { className: cvaMenuItem({
             selected,
@@ -3756,7 +3757,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
         }), id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
-        }, tabIndex: 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] })));
+        }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsxRuntime.jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] })));
 };
 
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
@@ -4434,15 +4435,11 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
             alternating: ["even:bg-slate-100"],
             line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
             none: "",
-        },
-        focused: {
-            true: ["rounded-lg", "outline", "outline-2", "outline-primary-600"],
-            false: "",
+            space: "[&:not(:last-child)]:pb-0.5",
         },
     },
     defaultVariants: {
         separator: "none",
-        focused: false,
     },
 });
 
@@ -4456,72 +4453,24 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
- * @property {(index: number) => void} [onRowClick] - A function that is called when a row is clicked.
- * @property {(index: number) => void} [onRowSelect] - A function that is called when a row is selected with spacebar.
  */
-const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", onRowClick, onRowSelectToggle: onRowSelect, }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", onRowClick, }) => {
     var _a;
     const containerRef = React.useRef(null);
     const listRef = React.useRef(null);
-    const [focusedIndex, setFocusedIndex] = React.useState(null);
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = reactTablePagination.useInfiniteScroll({
         pagination: pagination || reactTablePagination.noPagination,
         containerRef,
         rowSize: ((_a = pagination === null || pagination === void 0 ? void 0 : pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.hasNextPage) && pagination.isLoading ? count + 1 : count,
         rowHeight,
     });
-    React.useEffect(() => {
-        const handleKeyDown = (event) => {
-            var _a;
-            const shiftKey = event.shiftKey;
-            const jumpCount = focusedIndex && shiftKey ? Math.min(5, count - focusedIndex - 1) : 1;
-            switch (event.code) {
-                case "ArrowDown":
-                    event.preventDefault();
-                    if (focusedIndex !== null && focusedIndex < count - 1) {
-                        setFocusedIndex(focusedIndex + jumpCount);
-                    }
-                    else if (focusedIndex === null) {
-                        setFocusedIndex(0);
-                    }
-                    break;
-                case "ArrowUp":
-                    event.preventDefault();
-                    if (focusedIndex !== null && focusedIndex > 0) {
-                        setFocusedIndex(focusedIndex - jumpCount);
-                    }
-                    break;
-                case "Space":
-                    if (onRowSelect && focusedIndex !== null) {
-                        event.preventDefault();
-                        onRowSelect(focusedIndex);
-                    }
-                    break;
-            }
-            // Auto-scroll focused item into view
-            const focusedElement = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${focusedIndex}"]`);
-            if (focusedElement) {
-                focusedElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
-            }
-        };
-        const listElement = listRef.current;
-        if (listElement) {
-            listElement.addEventListener("keydown", handleKeyDown);
-        }
-        return () => {
-            if (listElement) {
-                listElement.removeEventListener("keydown", handleKeyDown);
-            }
-        };
-    }, [focusedIndex, count, onRowSelect]);
     return (jsxRuntime.jsx("div", { className: cvaVirtualizedListContainer({ className }), "data-testid": dataTestId, 
         // eslint-disable-next-line local-rules/no-typescript-assertion
-        onScroll: e => fetchMoreOnBottomReached(e.target), ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, tabIndex: 0, children: getVirtualItems().map((virtualRow, index) => {
+        onScroll: e => fetchMoreOnBottomReached(e.target), ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
                 const isLoaderRow = virtualRow.index > count - 1;
-                const focused = focusedIndex === index;
-                return (jsxRuntime.jsx("li", { className: cvaVirtualizedListItem({ separator, focused }), "data-index": virtualRow.index, onClick: () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(virtualRow.index), ref: measureElement, style: {
+                return (jsxRuntime.jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, onClick: onRowClick ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,
-                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loadingIndicator === "spinner" && jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsxRuntime.jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+                    }, tabIndex: -1, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loadingIndicator === "spinner" && jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsxRuntime.jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
             }) }) }));
 };
 

package/index.esm.js

@@ -3655,6 +3655,7 @@ const cvaMenuItem = cvaMerge([
     "select-none",
     "rounded",
     "hover:bg-slate-100",
+    "focus-within:outline-native",
 ], {
     variants: {
         selected: {
@@ -3714,7 +3715,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, stopPropagation = true, id, }) => {
+const MenuItem = ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, }) => {
     const containerProps = useContainerProps({ className, dataTestId: dataTestId || "menu-item" });
     return (jsxs("div", Object.assign({}, containerProps, { className: cvaMenuItem({
             selected,
@@ -3725,7 +3726,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
         }), id: id, onClick: e => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
-        }, tabIndex: 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] })));
+        }, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0, children: [prefix ? (jsx("div", { className: cvaMenuItemPrefix({ selected }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, children && typeof children !== "string" ? (children) : (jsx("div", { className: cvaMenuItemLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, children: children !== null && children !== void 0 ? children : label })), suffix ? (jsx("div", { className: cvaMenuItemSuffix({ selected }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] })));
 };
 
 const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
@@ -4403,15 +4404,11 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
             alternating: ["even:bg-slate-100"],
             line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
             none: "",
-        },
-        focused: {
-            true: ["rounded-lg", "outline", "outline-2", "outline-primary-600"],
-            false: "",
+            space: "[&:not(:last-child)]:pb-0.5",
         },
     },
     defaultVariants: {
         separator: "none",
-        focused: false,
     },
 });
 
@@ -4425,72 +4422,24 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
- * @property {(index: number) => void} [onRowClick] - A function that is called when a row is clicked.
- * @property {(index: number) => void} [onRowSelect] - A function that is called when a row is selected with spacebar.
  */
-const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", onRowClick, onRowSelectToggle: onRowSelect, }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", onRowClick, }) => {
     var _a;
     const containerRef = useRef(null);
     const listRef = useRef(null);
-    const [focusedIndex, setFocusedIndex] = useState(null);
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = useInfiniteScroll({
         pagination: pagination || noPagination,
         containerRef,
         rowSize: ((_a = pagination === null || pagination === void 0 ? void 0 : pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.hasNextPage) && pagination.isLoading ? count + 1 : count,
         rowHeight,
     });
-    useEffect(() => {
-        const handleKeyDown = (event) => {
-            var _a;
-            const shiftKey = event.shiftKey;
-            const jumpCount = focusedIndex && shiftKey ? Math.min(5, count - focusedIndex - 1) : 1;
-            switch (event.code) {
-                case "ArrowDown":
-                    event.preventDefault();
-                    if (focusedIndex !== null && focusedIndex < count - 1) {
-                        setFocusedIndex(focusedIndex + jumpCount);
-                    }
-                    else if (focusedIndex === null) {
-                        setFocusedIndex(0);
-                    }
-                    break;
-                case "ArrowUp":
-                    event.preventDefault();
-                    if (focusedIndex !== null && focusedIndex > 0) {
-                        setFocusedIndex(focusedIndex - jumpCount);
-                    }
-                    break;
-                case "Space":
-                    if (onRowSelect && focusedIndex !== null) {
-                        event.preventDefault();
-                        onRowSelect(focusedIndex);
-                    }
-                    break;
-            }
-            // Auto-scroll focused item into view
-            const focusedElement = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${focusedIndex}"]`);
-            if (focusedElement) {
-                focusedElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
-            }
-        };
-        const listElement = listRef.current;
-        if (listElement) {
-            listElement.addEventListener("keydown", handleKeyDown);
-        }
-        return () => {
-            if (listElement) {
-                listElement.removeEventListener("keydown", handleKeyDown);
-            }
-        };
-    }, [focusedIndex, count, onRowSelect]);
     return (jsx("div", { className: cvaVirtualizedListContainer({ className }), "data-testid": dataTestId, 
         // eslint-disable-next-line local-rules/no-typescript-assertion
-        onScroll: e => fetchMoreOnBottomReached(e.target), ref: containerRef, children: jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, tabIndex: 0, children: getVirtualItems().map((virtualRow, index) => {
+        onScroll: e => fetchMoreOnBottomReached(e.target), ref: containerRef, children: jsx("ul", { className: cvaVirtualizedList(), ref: listRef, style: { height: `${getTotalSize()}px`, outline: "none" }, children: getVirtualItems().map(virtualRow => {
                 const isLoaderRow = virtualRow.index > count - 1;
-                const focused = focusedIndex === index;
-                return (jsx("li", { className: cvaVirtualizedListItem({ separator, focused }), "data-index": virtualRow.index, onClick: () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(virtualRow.index), ref: measureElement, style: {
+                return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, onClick: onRowClick ? () => onRowClick(virtualRow.index) : undefined, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,
-                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+                    }, tabIndex: -1, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
             }) }) }));
 };
 

package/package.json

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

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

@@ -59,6 +59,7 @@ export interface MenuItemProps extends CommonProps {
      * used in Menu and Select components
      */
     stopPropagation?: boolean;
+    tabIndex?: number;
 }
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
@@ -66,5 +67,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, }: MenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, size, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, }: MenuItemProps) => JSX.Element;
 export {};

package/src/components/VirtualizedList/VirtualizedList.d.ts

@@ -14,7 +14,6 @@ export interface VirtualizedListProps extends CommonProps {
     loadingIndicator?: LoadingIndicator;
     skeletonLinesHeight?: string;
     onRowClick?: (index: number) => void;
-    onRowSelectToggle?: (index: number) => void;
 }
 /**
  * Render a performant virtualized list of items. Optionally with infinite scrolling.
@@ -26,8 +25,6 @@ export interface VirtualizedListProps extends CommonProps {
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
  * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
  * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
- * @property {(index: number) => void} [onRowClick] - A function that is called when a row is clicked.
- * @property {(index: number) => void} [onRowSelect] - A function that is called when a row is selected with spacebar.
  */
-export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, onRowClick, onRowSelectToggle: onRowSelect, }: VirtualizedListProps) => JSX.Element;
+export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, onRowClick, }: VirtualizedListProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
 export declare const cvaVirtualizedListContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaVirtualizedList: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaVirtualizedListItem: (props?: ({
-    separator?: "alternating" | "line" | "none" | null | undefined;
-    focused?: boolean | null | undefined;
+    separator?: "alternating" | "line" | "none" | "space" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;