@mongodb-js/compass-components 0.7.0 → 0.10.0

package/lib/components/virtual-grid.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+declare type RenderItem = React.FunctionComponent<React.HTMLProps<HTMLDivElement> & {
+    index: number;
+    ['data-vlist-item-idx']: number;
+}>;
+declare type RenderHeader = React.FunctionComponent;
+declare type VirtualGridProps = {
+    itemMinWidth: number;
+    itemHeight: number;
+    itemsCount: number;
+    colCount?: number;
+    renderItem: RenderItem;
+    headerHeight?: number;
+    renderHeader?: RenderHeader;
+    overscanCount?: number;
+    classNames?: {
+        container?: string;
+        header?: string;
+        grid?: string;
+        row?: string;
+        cell?: string;
+    };
+};
+export declare const VirtualGrid: React.ForwardRefExoticComponent<Pick<VirtualGridProps & Omit<React.HTMLProps<HTMLDivElement>, keyof VirtualGridProps>, "height" | "color" | "content" | "translate" | "width" | "start" | "hidden" | "default" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "children" | "className" | "onClick" | "name" | "open" | "id" | "onChange" | "disabled" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "download" | "href" | "hrefLang" | "media" | "rel" | "target" | "type" | "as" | "max" | "method" | "min" | "crossOrigin" | "classID" | "useMap" | "wmode" | "cellPadding" | "cellSpacing" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "integrity" | "sizes" | "charSet" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "async" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "size" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "defer" | "nonce" | "scoped" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "wrap" | "kind" | "srcLang" | "poster" | keyof VirtualGridProps> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=virtual-grid.d.ts.map

package/lib/components/virtual-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-grid.d.ts","sourceRoot":"","sources":["../../src/components/virtual-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAUf,aAAK,UAAU,GAAG,KAAK,CAAC,iBAAiB,CACvC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CACjC,CACF,CAAC;AACF,aAAK,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;AAE5C,aAAK,gBAAgB,GAAG;IAKtB,YAAY,EAAE,MAAM,CAAC;IAIrB,UAAU,EAAE,MAAM,CAAC;IAInB,UAAU,EAAE,MAAM,CAAC;IAKnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,UAAU,EAAE,UAAU,CAAC;IAIvB,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAI5B,aAAa,CAAC,EAAE,MAAM,CAAC;IAIvB,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAmIF,eAAO,MAAM,WAAW,s5LAyFtB,CAAC"}

package/lib/components/virtual-grid.js

@@ -0,0 +1,136 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualGrid = void 0;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const react_window_1 = require("react-window");
+const use_dom_rect_1 = require("../hooks/use-dom-rect");
+const use_virtual_grid_1 = require("../hooks/use-virtual-grid");
+const merge_props_1 = require("../utils/merge-props");
+const GridContext = (0, react_1.createContext)({
+    headerHeight: 0,
+    renderHeader: () => null,
+    renderItem: () => null,
+    itemsCount: 0,
+    rowCount: 0,
+    colCount: 0,
+    currentTabbable: 0,
+    gridProps: {},
+});
+const GridWithHeader = (0, react_1.forwardRef)(function GridHeader({ style, children, ...props }, ref) {
+    const { headerHeight, renderHeader, gridProps, classNames } = (0, react_1.useContext)(GridContext);
+    return (react_1.default.createElement("div", { ref: ref, style: {
+            ...style,
+            height: style.height + headerHeight,
+        }, ...props },
+        react_1.default.createElement("div", { className: classNames === null || classNames === void 0 ? void 0 : classNames.header }, react_1.default.createElement(renderHeader, {})),
+        react_1.default.createElement("div", { ...gridProps }, children)));
+});
+const row = (0, emotion_1.css)({
+    display: 'grid',
+    alignItems: 'stretch',
+    gridTemplateRows: 'auto',
+    gridTemplateColumns: '1fr',
+    gridAutoColumns: '1fr',
+    gridAutoFlow: 'column',
+});
+const cell = (0, emotion_1.css)({
+    width: '100%',
+    minWidth: 0,
+});
+const Row = ({ style, index }) => {
+    const { colCount, itemsCount, renderItem, currentTabbable, classNames } = (0, react_1.useContext)(GridContext);
+    const rowStart = index * colCount;
+    const cells = (0, react_1.useMemo)(() => {
+        return Array.from({ length: colCount }, (_, cellIdx) => {
+            const itemIdx = rowStart + cellIdx;
+            const isEmpty = itemIdx >= itemsCount;
+            return isEmpty ? (react_1.default.createElement("div", { className: (0, emotion_1.cx)(cell, classNames === null || classNames === void 0 ? void 0 : classNames.cell), key: `empty${cellIdx}` })) : (react_1.default.createElement(renderItem, {
+                role: 'gridcell',
+                className: (0, emotion_1.cx)(cell, classNames === null || classNames === void 0 ? void 0 : classNames.cell),
+                tabIndex: itemIdx === currentTabbable ? 0 : -1,
+                ['data-vlist-item-idx']: itemIdx,
+                index: itemIdx,
+            }));
+        });
+    }, [
+        colCount,
+        rowStart,
+        itemsCount,
+        classNames === null || classNames === void 0 ? void 0 : classNames.cell,
+        renderItem,
+        currentTabbable,
+    ]);
+    return (react_1.default.createElement("div", { style: style, className: (0, emotion_1.cx)(row, classNames === null || classNames === void 0 ? void 0 : classNames.row), role: "row", "aria-rowindex": index + 1 }, cells));
+};
+const container = (0, emotion_1.css)({
+    width: '100%',
+    flex: 1,
+    overflow: 'hidden',
+    display: 'grid',
+    gridTemplateRows: 'auto 1fr',
+    gridTemplateColumns: '100%',
+    outline: 'none',
+});
+const grid = (0, emotion_1.css)({
+    position: 'relative',
+});
+exports.VirtualGrid = (0, react_1.forwardRef)(function VirtualGrid({ itemMinWidth, itemHeight, itemsCount, colCount: _colCount, renderItem, headerHeight = 0, renderHeader = () => null, overscanCount = 3, classNames, ...containerProps }, ref) {
+    const listRef = (0, react_1.useRef)(null);
+    const [rectProps, { width: _width, height }] = (0, use_dom_rect_1.useDOMRect)();
+    const width = Math.max(_width, itemMinWidth);
+    const colCount = _colCount !== null && _colCount !== void 0 ? _colCount : Math.max(1, Math.floor(width / itemMinWidth));
+    const rowCount = Math.ceil(itemsCount / colCount);
+    const onFocusMove = (0, react_1.useCallback)((idx) => {
+        var _a;
+        const rowIdx = Math.floor(idx / colCount);
+        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(rowIdx);
+    }, [listRef, colCount]);
+    const [navigationProps, currentTabbable] = (0, use_virtual_grid_1.useVirtualGridArrowNavigation)({
+        itemsCount,
+        colCount,
+        rowCount,
+    });
+    const rovingFocusProps = (0, use_virtual_grid_1.useVirtualRovingTabIndex)({
+        currentTabbable,
+        onFocusMove,
+    });
+    const gridContainerProps = (0, merge_props_1.mergeProps)({ ref, className: (0, emotion_1.cx)(container, classNames === null || classNames === void 0 ? void 0 : classNames.container) }, containerProps, rectProps);
+    return (react_1.default.createElement(GridContext.Provider, { value: {
+            rowCount,
+            colCount,
+            itemsCount,
+            renderItem,
+            headerHeight,
+            renderHeader,
+            currentTabbable,
+            classNames,
+            gridProps: (0, merge_props_1.mergeProps)({
+                role: 'grid',
+                'aria-rowcount': rowCount,
+                className: (0, emotion_1.cx)(grid, classNames === null || classNames === void 0 ? void 0 : classNames.grid),
+            }, navigationProps, rovingFocusProps),
+        } },
+        react_1.default.createElement("div", { ...gridContainerProps },
+            react_1.default.createElement(react_window_1.FixedSizeList, { ref: listRef, width: width, height: height, innerElementType: GridWithHeader, itemCount: rowCount, itemSize: itemHeight, overscanCount: overscanCount }, Row))));
+});
+//# sourceMappingURL=virtual-grid.js.map

package/lib/components/virtual-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-grid.js","sourceRoot":"","sources":["../../src/components/virtual-grid.tsx"],"names":[],"mappings":"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"}

package/lib/hooks/use-default-action.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function useDefaultAction<T>(onDefaultAction: (evt: React.KeyboardEvent<T> | React.MouseEvent<T>) => void): React.HTMLAttributes<T>;
+//# sourceMappingURL=use-default-action.d.ts.map

package/lib/hooks/use-default-action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-default-action.d.ts","sourceRoot":"","sources":["../../src/hooks/use-default-action.ts"],"names":[],"mappings":";AAUA,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,eAAe,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,GAC3E,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAiCzB"}

package/lib/hooks/use-default-action.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultAction = void 0;
+const react_1 = require("react");
+function useDefaultAction(onDefaultAction) {
+    const onMouseDown = (0, react_1.useCallback)((evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+    }, []);
+    const onClick = (0, react_1.useCallback)((evt) => {
+        evt.stopPropagation();
+        onDefaultAction(evt);
+    }, [onDefaultAction]);
+    const onKeyDown = (0, react_1.useCallback)((evt) => {
+        if (evt.target === evt.currentTarget &&
+            [' ', 'Enter'].includes(evt.key)) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            onDefaultAction(evt);
+        }
+    }, [onDefaultAction]);
+    return { onMouseDown, onClick, onKeyDown };
+}
+exports.useDefaultAction = useDefaultAction;
+//# sourceMappingURL=use-default-action.js.map

package/lib/hooks/use-default-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-default-action.js","sourceRoot":"","sources":["../../src/hooks/use-default-action.ts"],"names":[],"mappings":";;;AAAA,iCAAoC;AAUpC,SAAgB,gBAAgB,CAC9B,eAA4E;IAK5E,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,CAAC,GAAwB,EAAE,EAAE;QAC3D,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,GAAwB,EAAE,EAAE;QAC3B,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,eAAe,CAAC,GAAG,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,mBAAW,EAC3B,CAAC,GAA2B,EAAE,EAAE;QAC9B,IAEE,GAAG,CAAC,MAAM,KAAK,GAAG,CAAC,aAAa;YAChC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAChC;YACA,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,eAAe,CAAC,GAAG,CAAC,CAAC;SACtB;IACH,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AAC7C,CAAC;AAnCD,4CAmCC"}

package/lib/hooks/use-dom-rect.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function useDOMRect<T extends HTMLElement = HTMLDivElement>(): [
+    React.HTMLProps<T>,
+    DOMRectReadOnly
+];
+//# sourceMappingURL=use-dom-rect.d.ts.map

package/lib/hooks/use-dom-rect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dom-rect.d.ts","sourceRoot":"","sources":["../../src/hooks/use-dom-rect.ts"],"names":[],"mappings":";AAEA,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,KAAK;IACpE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAClB,eAAe;CAChB,CAqBA"}

package/lib/hooks/use-dom-rect.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDOMRect = void 0;
+const react_1 = require("react");
+function useDOMRect() {
+    const [rect, setRect] = (0, react_1.useState)(() => new DOMRectReadOnly());
+    const ref = (0, react_1.useRef)(null);
+    const observer = (0, react_1.useRef)(null);
+    if (observer.current === null) {
+        observer.current = new ResizeObserver((entry) => {
+            setRect(entry[0].contentRect);
+        });
+    }
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (ref.current) {
+            const el = ref.current;
+            (_a = observer.current) === null || _a === void 0 ? void 0 : _a.observe(ref.current);
+            return () => {
+                var _a;
+                (_a = observer.current) === null || _a === void 0 ? void 0 : _a.unobserve(el);
+            };
+        }
+    }, []);
+    return [{ ref }, rect];
+}
+exports.useDOMRect = useDOMRect;
+//# sourceMappingURL=use-dom-rect.js.map

package/lib/hooks/use-dom-rect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dom-rect.js","sourceRoot":"","sources":["../../src/hooks/use-dom-rect.ts"],"names":[],"mappings":";;;AAAA,iCAA0D;AAE1D,SAAgB,UAAU;IAIxB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAC9B,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,CAC5B,CAAC;IACF,MAAM,GAAG,GAAG,IAAA,cAAM,EAAW,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACrD,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE;QAC7B,QAAQ,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE,EAAE;YAC9C,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;KACJ;IACD,IAAA,uBAAe,EAAC,GAAG,EAAE;;QACnB,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;YACvB,MAAA,QAAQ,CAAC,OAAO,0CAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACvC,OAAO,GAAG,EAAE;;gBACV,MAAA,QAAQ,CAAC,OAAO,0CAAE,SAAS,CAAC,EAAE,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CAAC,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,CAAC;AACzB,CAAC;AAxBD,gCAwBC"}

package/lib/hooks/use-focus-hover.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+export declare enum FocusState {
+    NoFocus = "NoFocus",
+    FocusVisible = "FocusVisible",
+    Focus = "Focus",
+    FocusWithinVisible = "FocusWithinVisible",
+    FocusWithin = "FocusWithin"
+}
+export declare function useFocusState(): [
+    React.HTMLAttributes<HTMLElement>,
+    FocusState,
+    React.MutableRefObject<FocusState>
+];
+export declare function useHoverState(): [React.HTMLAttributes<HTMLElement>, boolean];
+//# sourceMappingURL=use-focus-hover.d.ts.map

package/lib/hooks/use-focus-hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-hover.d.ts","sourceRoot":"","sources":["../../src/hooks/use-focus-hover.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,KAAK,UAAU;IACf,kBAAkB,uBAAuB;IACzC,WAAW,gBAAgB;CAC5B;AAkBD,wBAAgB,aAAa,IAAI;IAC/B,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACjC,UAAU;IACV,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC;CACnC,CAoBA;AAED,wBAAgB,aAAa,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAW5E"}

package/lib/hooks/use-focus-hover.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHoverState = exports.useFocusState = exports.FocusState = void 0;
+const interactions_1 = require("@react-aria/interactions");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+var FocusState;
+(function (FocusState) {
+    FocusState["NoFocus"] = "NoFocus";
+    FocusState["FocusVisible"] = "FocusVisible";
+    FocusState["Focus"] = "Focus";
+    FocusState["FocusWithinVisible"] = "FocusWithinVisible";
+    FocusState["FocusWithin"] = "FocusWithin";
+})(FocusState = exports.FocusState || (exports.FocusState = {}));
+function getFocusState(isFocused, isFocusWithin, isFocusVisible) {
+    return isFocused && isFocusVisible
+        ? FocusState.FocusVisible
+        : isFocused
+            ? FocusState.Focus
+            : isFocusWithin && isFocusVisible
+                ? FocusState.FocusWithinVisible
+                : isFocusWithin
+                    ? FocusState.FocusWithin
+                    : FocusState.NoFocus;
+}
+function useFocusState() {
+    const focusStateRef = (0, react_1.useRef)(FocusState.NoFocus);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isFocusWithin, setIsFocusWithin] = (0, react_1.useState)(false);
+    const { isFocusVisible } = (0, interactions_1.useFocusVisible)();
+    const { focusWithinProps } = (0, interactions_1.useFocusWithin)({
+        onFocusWithinChange: setIsFocusWithin,
+    });
+    const { focusProps } = (0, interactions_1.useFocus)({
+        onFocusChange: setIsFocused,
+    });
+    const mergedProps = (0, react_1.useMemo)(() => {
+        return (0, utils_1.mergeProps)(focusProps, focusWithinProps);
+    }, [focusProps, focusWithinProps]);
+    focusStateRef.current = getFocusState(isFocused, isFocusWithin, isFocusVisible);
+    return [mergedProps, focusStateRef.current, focusStateRef];
+}
+exports.useFocusState = useFocusState;
+function useHoverState() {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const hoverProps = {
+        onMouseEnter() {
+            setIsHovered(true);
+        },
+        onMouseLeave() {
+            setIsHovered(false);
+        },
+    };
+    return [hoverProps, isHovered];
+}
+exports.useHoverState = useHoverState;
+//# sourceMappingURL=use-focus-hover.js.map

package/lib/hooks/use-focus-hover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-hover.js","sourceRoot":"","sources":["../../src/hooks/use-focus-hover.ts"],"names":[],"mappings":";;;AAAA,2DAIkC;AAClC,6CAA+C;AAE/C,iCAAkD;AAElD,IAAY,UAMX;AAND,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,2CAA6B,CAAA;IAC7B,6BAAe,CAAA;IACf,uDAAyC,CAAA;IACzC,yCAA2B,CAAA;AAC7B,CAAC,EANW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAMrB;AAED,SAAS,aAAa,CACpB,SAAkB,EAClB,aAAsB,EACtB,cAAuB;IAEvB,OAAO,SAAS,IAAI,cAAc;QAChC,CAAC,CAAC,UAAU,CAAC,YAAY;QACzB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,UAAU,CAAC,KAAK;YAClB,CAAC,CAAC,aAAa,IAAI,cAAc;gBACjC,CAAC,CAAC,UAAU,CAAC,kBAAkB;gBAC/B,CAAC,CAAC,aAAa;oBACf,CAAC,CAAC,UAAU,CAAC,WAAW;oBACxB,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;AACzB,CAAC;AAED,SAAgB,aAAa;IAK3B,MAAM,aAAa,GAAG,IAAA,cAAM,EAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,8BAAe,GAAE,CAAC;IAC7C,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,6BAAc,EAAC;QAC1C,mBAAmB,EAAE,gBAAgB;KACtC,CAAC,CAAC;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAQ,EAAC;QAC9B,aAAa,EAAE,YAAY;KAC5B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,OAAO,IAAA,kBAAU,EAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACnC,aAAa,CAAC,OAAO,GAAG,aAAa,CACnC,SAAS,EACT,aAAa,EACb,cAAc,CACf,CAAC;IACF,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;AAC7D,CAAC;AAxBD,sCAwBC;AAED,SAAgB,aAAa;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG;QACjB,YAAY;YACV,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;QACD,YAAY;YACV,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;KACF,CAAC;IACF,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AACjC,CAAC;AAXD,sCAWC"}

package/lib/hooks/use-focus-ring.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare const focusRing: string;
+export declare const focusRingVisible: string;
+export declare function useFocusRing<T extends HTMLElement>(): React.HTMLProps<T>;
+//# sourceMappingURL=use-focus-ring.d.ts.map

package/lib/hooks/use-focus-ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-ring.d.ts","sourceRoot":"","sources":["../../src/hooks/use-focus-ring.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,SAAS,QAepB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAK3B,CAAC;AAEH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAUxE"}

package/lib/hooks/use-focus-ring.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusRing = exports.focusRingVisible = exports.focusRing = void 0;
+const tokens_1 = require("@leafygreen-ui/tokens");
+const emotion_1 = require("@leafygreen-ui/emotion");
+const palette_1 = require("@leafygreen-ui/palette");
+const use_focus_hover_1 = require("./use-focus-hover");
+exports.focusRing = (0, emotion_1.css)({
+    position: 'relative',
+    outline: 'none',
+    '&::after': {
+        position: 'absolute',
+        content: '""',
+        pointerEvents: 'none',
+        top: 3,
+        right: 3,
+        bottom: 3,
+        left: 3,
+        borderRadius: tokens_1.spacing[1],
+        boxShadow: `0 0 0 0 ${palette_1.uiColors.focus}`,
+        transition: 'box-shadow .16s ease-in',
+    },
+});
+exports.focusRingVisible = (0, emotion_1.css)({
+    '&::after': {
+        boxShadow: `0 0 0 3px ${palette_1.uiColors.focus}`,
+        transitionTimingFunction: 'ease-out',
+    },
+});
+function useFocusRing() {
+    const [focusProps, focusState] = (0, use_focus_hover_1.useFocusState)();
+    return {
+        ...focusProps,
+        className: (0, emotion_1.cx)(exports.focusRing, focusState === use_focus_hover_1.FocusState.FocusVisible && exports.focusRingVisible),
+    };
+}
+exports.useFocusRing = useFocusRing;
+//# sourceMappingURL=use-focus-ring.js.map

package/lib/hooks/use-focus-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-ring.js","sourceRoot":"","sources":["../../src/hooks/use-focus-ring.ts"],"names":[],"mappings":";;;AACA,kDAAgD;AAChD,oDAAiD;AACjD,oDAAkD;AAClD,uDAA8D;AAEjD,QAAA,SAAS,GAAG,IAAA,aAAG,EAAC;IAC3B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE;QACV,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,MAAM;QACrB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,YAAY,EAAE,gBAAO,CAAC,CAAC,CAAC;QACxB,SAAS,EAAE,WAAW,kBAAQ,CAAC,KAAK,EAAE;QACtC,UAAU,EAAE,yBAAyB;KACtC;CACF,CAAC,CAAC;AAEU,QAAA,gBAAgB,GAAG,IAAA,aAAG,EAAC;IAClC,UAAU,EAAE;QACV,SAAS,EAAE,aAAa,kBAAQ,CAAC,KAAK,EAAE;QACxC,wBAAwB,EAAE,UAAU;KACrC;CACF,CAAC,CAAC;AAEH,SAAgB,YAAY;IAC1B,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,IAAA,+BAAa,GAAE,CAAC;IAEjD,OAAO;QACL,GAAG,UAAU;QACb,SAAS,EAAE,IAAA,YAAE,EACX,iBAAS,EACT,UAAU,KAAK,4BAAU,CAAC,YAAY,IAAI,wBAAgB,CAC3D;KACF,CAAC;AACJ,CAAC;AAVD,oCAUC"}

package/lib/hooks/use-virtual-grid.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare function useVirtualGridArrowNavigation<T extends HTMLElement = HTMLElement>({ colCount, rowCount, itemsCount, resetActiveItemOnBlur, pageSize, defaultCurrentTabbable, }: {
+    colCount: number;
+    rowCount: number;
+    itemsCount: number;
+    resetActiveItemOnBlur?: boolean;
+    pageSize?: number;
+    defaultCurrentTabbable?: number;
+}): [React.HTMLProps<T>, number];
+export declare function useVirtualRovingTabIndex<T extends HTMLElement = HTMLElement>({ currentTabbable, onFocusMove, }: {
+    currentTabbable: number;
+    onFocusMove(idx: number): void;
+}): React.HTMLProps<T>;
+//# sourceMappingURL=use-virtual-grid.d.ts.map

package/lib/hooks/use-virtual-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-virtual-grid.d.ts","sourceRoot":"","sources":["../../src/hooks/use-virtual-grid.ts"],"names":[],"mappings":";AAGA,wBAAgB,6BAA6B,CAC3C,CAAC,SAAS,WAAW,GAAG,WAAW,EACnC,EACA,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,qBAA4B,EAC5B,QAAY,EACZ,sBAA0B,GAC3B,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAoG/B;AAED,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EAC5E,eAAe,EACf,WAAW,GACZ,EAAE;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAwCrB"}

package/lib/hooks/use-virtual-grid.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVirtualRovingTabIndex = exports.useVirtualGridArrowNavigation = void 0;
+const react_1 = require("react");
+const use_focus_hover_1 = require("./use-focus-hover");
+function useVirtualGridArrowNavigation({ colCount, rowCount, itemsCount, resetActiveItemOnBlur = true, pageSize = 3, defaultCurrentTabbable = 0, }) {
+    const rootNode = (0, react_1.useRef)(null);
+    const [focusProps, focusState] = (0, use_focus_hover_1.useFocusState)();
+    const [currentTabbable, setCurrentTabbable] = (0, react_1.useState)(defaultCurrentTabbable);
+    (0, react_1.useEffect)(() => {
+        if (resetActiveItemOnBlur && focusState === use_focus_hover_1.FocusState.NoFocus) {
+            setCurrentTabbable(defaultCurrentTabbable);
+        }
+    }, [resetActiveItemOnBlur, focusState, defaultCurrentTabbable]);
+    const onKeyDown = (0, react_1.useCallback)((evt) => {
+        const target = evt.target;
+        if (rootNode.current &&
+            rootNode.current.contains(target) &&
+            target.dataset.vlistItemIdx) {
+            let nextTabbableIndex = -1;
+            if (evt.key === 'ArrowUp') {
+                evt.preventDefault();
+                evt.stopPropagation();
+                nextTabbableIndex =
+                    rowCount === 1 ? currentTabbable - 1 : currentTabbable - colCount;
+            }
+            if (evt.key === 'ArrowDown') {
+                evt.preventDefault();
+                evt.stopPropagation();
+                nextTabbableIndex =
+                    rowCount === 1 ? currentTabbable + 1 : currentTabbable + colCount;
+            }
+            if (evt.key === 'ArrowLeft') {
+                evt.stopPropagation();
+                nextTabbableIndex = currentTabbable - 1;
+            }
+            if (evt.key === 'ArrowRight') {
+                evt.stopPropagation();
+                nextTabbableIndex = currentTabbable + 1;
+            }
+            if (evt.key === 'Home') {
+                evt.preventDefault();
+                evt.stopPropagation();
+                if (evt.ctrlKey) {
+                    nextTabbableIndex = 0;
+                }
+                else {
+                    nextTabbableIndex =
+                        colCount * Math.floor(currentTabbable / colCount);
+                }
+            }
+            if (evt.key === 'End') {
+                evt.preventDefault();
+                evt.stopPropagation();
+                if (evt.ctrlKey) {
+                    nextTabbableIndex = itemsCount - 1;
+                }
+                else {
+                    nextTabbableIndex =
+                        colCount * Math.floor(currentTabbable / colCount) +
+                            (colCount - 1);
+                }
+            }
+            if (evt.key === 'PageUp') {
+                evt.preventDefault();
+                evt.stopPropagation();
+                const currRow = Math.floor(currentTabbable / colCount);
+                const pageStep = Math.min(currRow, pageSize);
+                nextTabbableIndex = currentTabbable - colCount * pageStep;
+            }
+            if (evt.key === 'PageDown') {
+                evt.preventDefault();
+                evt.stopPropagation();
+                const currRow = Math.floor(currentTabbable / colCount);
+                const pageStep = Math.min(rowCount - 1 - currRow, pageSize);
+                nextTabbableIndex = currentTabbable + colCount * pageStep;
+            }
+            if (nextTabbableIndex !== currentTabbable &&
+                nextTabbableIndex >= 0 &&
+                nextTabbableIndex < itemsCount) {
+                setCurrentTabbable(nextTabbableIndex);
+            }
+        }
+    }, [currentTabbable, itemsCount, rowCount, colCount, pageSize]);
+    return [{ ref: rootNode, onKeyDown, ...focusProps }, currentTabbable];
+}
+exports.useVirtualGridArrowNavigation = useVirtualGridArrowNavigation;
+function useVirtualRovingTabIndex({ currentTabbable, onFocusMove, }) {
+    const rootNode = (0, react_1.useRef)(null);
+    const [tabIndex, setTabIndex] = (0, react_1.useState)(0);
+    const [focusProps, focusState] = (0, use_focus_hover_1.useFocusState)();
+    const focusTabbable = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        const selector = currentTabbable >= 0
+            ? `[data-vlist-item-idx="${currentTabbable}"]`
+            : '[tabindex=0]';
+        (_b = (_a = rootNode.current) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [rootNode, currentTabbable]);
+    (0, react_1.useEffect)(() => {
+        if ([
+            use_focus_hover_1.FocusState.Focus,
+            use_focus_hover_1.FocusState.FocusVisible,
+            use_focus_hover_1.FocusState.FocusWithin,
+            use_focus_hover_1.FocusState.FocusWithinVisible,
+        ].includes(focusState)) {
+            setTabIndex(-1);
+            onFocusMove(currentTabbable);
+            const frame = requestAnimationFrame(() => {
+                focusTabbable();
+            });
+            return () => {
+                cancelAnimationFrame(frame);
+            };
+        }
+        else {
+            setTabIndex(0);
+        }
+    }, [focusState, onFocusMove, focusTabbable, currentTabbable]);
+    return { ref: rootNode, tabIndex, ...focusProps };
+}
+exports.useVirtualRovingTabIndex = useVirtualRovingTabIndex;
+//# sourceMappingURL=use-virtual-grid.js.map

package/lib/hooks/use-virtual-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-virtual-grid.js","sourceRoot":"","sources":["../../src/hooks/use-virtual-grid.ts"],"names":[],"mappings":"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"}

package/lib/hooks/use-virtual-grid.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-virtual-grid.test.d.ts.map

package/lib/hooks/use-virtual-grid.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-virtual-grid.test.d.ts","sourceRoot":"","sources":["../../src/hooks/use-virtual-grid.test.tsx"],"names":[],"mappings":""}