@trackunit/react-components 0.1.321-alpha-05e60997159.0 → 0.1.323

package/index.cjs.js

@@ -3257,6 +3257,18 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
         jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (jsxRuntime.jsx(ImageSource, { height: 200, width: 200 })), title ? jsxRuntime.jsx(Heading, { variant: "secondary", children: title }) : null, description ? jsxRuntime.jsx(Text, { align: "center", children: description }) : null, action] })) }));
 };
 
+const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-gray-400"]);
+
+/**
+ *  Show intentionality in empty values in the UI
+ *
+ * @param {EmptyValueProps} props - The props for the EmptyValue component
+ * @returns {JSX.Element} EmptyValue component
+ */
+const EmptyValue = ({ className, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, children: "-" }));
+};
+
 const cvaExternalLink = cssClassVarianceUtilities.cvaMerge(["underline", "text-primary-600", "hover:text-primary-500"]);
 
 /**
@@ -4492,7 +4504,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
 };
 
 const cvaVirtualizedListContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "overflow-auto"]);
-const cvaVirtualizedList = cssClassVarianceUtilities.cvaMerge(["relative"]);
+const cvaVirtualizedList = cssClassVarianceUtilities.cvaMerge(["relative", "m-1"]);
 const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     variants: {
         separator: {
@@ -4500,9 +4512,14 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
             line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
             none: "",
         },
+        focused: {
+            true: ["rounded-lg", "outline", "outline-2", "outline-blue-600"],
+            false: "",
+        },
     },
     defaultVariants: {
         separator: "none",
+        focused: false,
     },
 });
 
@@ -4516,23 +4533,72 @@ 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", }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", onRowClick, onRowSelectToggle: onRowSelect, }) => {
     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(), style: { height: `${getTotalSize()}px` }, children: getVirtualItems().map(virtualRow => {
+        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) => {
                 const isLoaderRow = virtualRow.index > count - 1;
-                return (jsxRuntime.jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, ref: measureElement, style: {
+                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: {
                         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));
+                    }, 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(index)) }, virtualRow.key));
             }) }) }));
 };
 
@@ -4624,6 +4690,7 @@ exports.CompletionStatusIndicator = CompletionStatusIndicator;
 exports.CopyableText = CopyableText;
 exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
+exports.EmptyValue = EmptyValue;
 exports.ExternalLink = ExternalLink;
 exports.Heading = Heading;
 exports.Icon = Icon;

package/index.esm.js

@@ -3225,6 +3225,18 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
         jsxs(Fragment, { children: [customImageSrc ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (jsx(ImageSource, { height: 200, width: 200 })), title ? jsx(Heading, { variant: "secondary", children: title }) : null, description ? jsx(Text, { align: "center", children: description }) : null, action] })) }));
 };
 
+const cvaEmptyValue = cvaMerge(["text-gray-400"]);
+
+/**
+ *  Show intentionality in empty values in the UI
+ *
+ * @param {EmptyValueProps} props - The props for the EmptyValue component
+ * @returns {JSX.Element} EmptyValue component
+ */
+const EmptyValue = ({ className, dataTestId }) => {
+    return (jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, children: "-" }));
+};
+
 const cvaExternalLink = cvaMerge(["underline", "text-primary-600", "hover:text-primary-500"]);
 
 /**
@@ -4460,7 +4472,7 @@ const ValueBar = ({ value, min = 0, max = 100, unit, size = "small", levelColors
 };
 
 const cvaVirtualizedListContainer = cvaMerge(["h-full", "overflow-auto"]);
-const cvaVirtualizedList = cvaMerge(["relative"]);
+const cvaVirtualizedList = cvaMerge(["relative", "m-1"]);
 const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
     variants: {
         separator: {
@@ -4468,9 +4480,14 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
             line: ["[&:not(:last-child)]:border-b", "border-gray-200"],
             none: "",
         },
+        focused: {
+            true: ["rounded-lg", "outline", "outline-2", "outline-blue-600"],
+            false: "",
+        },
     },
     defaultVariants: {
         separator: "none",
+        focused: false,
     },
 });
 
@@ -4484,23 +4501,72 @@ 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", }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", onRowClick, onRowSelectToggle: onRowSelect, }) => {
     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(), style: { height: `${getTotalSize()}px` }, children: getVirtualItems().map(virtualRow => {
+        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) => {
                 const isLoaderRow = virtualRow.index > count - 1;
-                return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, ref: measureElement, style: {
+                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: {
                         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));
+                    }, 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(index)) }, virtualRow.key));
             }) }) }));
 };
 
@@ -4577,4 +4643,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, Modal, ModalBackdrop, 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, 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, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+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, Modal, ModalBackdrop, 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, 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, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.321-alpha-05e60997159.0",
+  "version": "0.1.323",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/EmptyValue/EmptyValue.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+export interface EmptyValueProps extends CommonProps {
+}
+/**
+ *  Show intentionality in empty values in the UI
+ *
+ * @param {EmptyValueProps} props - The props for the EmptyValue component
+ * @returns {JSX.Element} EmptyValue component
+ */
+export declare const EmptyValue: ({ className, dataTestId }: EmptyValueProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export declare const cvaEmptyValue: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -13,6 +13,8 @@ export interface VirtualizedListProps extends CommonProps {
     separator?: Separator;
     loadingIndicator?: LoadingIndicator;
     skeletonLinesHeight?: string;
+    onRowClick?: (index: number) => void;
+    onRowSelectToggle?: (index: number) => void;
 }
 /**
  * Render a performant virtualized list of items. Optionally with infinite scrolling.
@@ -24,6 +26,8 @@ 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, }: VirtualizedListProps) => JSX.Element;
+export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, onRowClick, onRowSelectToggle: onRowSelect, }: VirtualizedListProps) => JSX.Element;
 export {};

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

@@ -2,4 +2,5 @@ export declare const cvaVirtualizedListContainer: (props?: import("class-varianc
 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;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/index.d.ts

@@ -7,6 +7,7 @@ export * from "./CompletionStatusIndicator/CompletionStatusIndicator";
 export * from "./CopyableText";
 export * from "./Drawer/Drawer";
 export * from "./EmptyState/EmptyState";
+export * from "./EmptyValue/EmptyValue";
 export * from "./ExternalLink/ExternalLink";
 export * from "./Heading";
 export * from "./Icon/Icon";