@mongodb-js/compass-components 0.7.0 → 0.8.0

package/lib/{components/compass-ui-colors.d.ts → compass-ui-colors.d.ts}

@@ -1,2 +1,3 @@
 export declare const gray8 = "#f5f6f7";
 export declare const transparentGray = "rgba(180, 180, 180, 0.5)";
+export declare const transparentWhite = "rgba(255, 255, 255, 0.5)";

package/lib/compass-ui-colors.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transparentWhite = exports.transparentGray = exports.gray8 = void 0;
+exports.gray8 = '#f5f6f7';
+exports.transparentGray = 'rgba(180, 180, 180, 0.5)';
+exports.transparentWhite = 'rgba(255, 255, 255, 0.5)';
+//# sourceMappingURL=compass-ui-colors.js.map

package/lib/compass-ui-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compass-ui-colors.js","sourceRoot":"","sources":["../src/compass-ui-colors.tsx"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAAG,SAAS,CAAC;AAClB,QAAA,eAAe,GAAG,0BAA0B,CAAC;AAC7C,QAAA,gBAAgB,GAAG,0BAA0B,CAAC"}

package/lib/components/accordion.js

@@ -49,9 +49,9 @@ const containerStyles = css_1.css({
     marginTop: tokens_1.spacing[3],
     display: 'flex',
     alignItems: 'center',
-    '&:hover': {
-        cursor: 'pointer',
-    },
+});
+const buttonIconStyles = css_1.css({
+    marginRight: tokens_1.spacing[1],
 });
 function Accordion(props) {
     const [open, setOpen] = react_1.useState(false);
@@ -63,7 +63,7 @@ function Accordion(props) {
                 react_1.default.createElement("button", { className: buttonStyles, type: "button", "aria-expanded": open ? 'true' : 'false', "aria-controls": regionId, onClick: () => {
                         setOpen((currentOpen) => !currentOpen);
                     } },
-                    react_1.default.createElement(icon_1.default, { glyph: open ? 'ChevronDown' : 'ChevronRight' }),
+                    react_1.default.createElement(icon_1.default, { className: buttonIconStyles, glyph: open ? 'ChevronDown' : 'ChevronRight' }),
                     props.text))),
         open && (react_1.default.createElement("div", { role: "region", "aria-labelledby": labelId, id: regionId }, props.children))));
 }

package/lib/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,kDAAgD;AAChD,sCAAmC;AACnC,+DAAuC;AACvC,oDAAkD;AAClD,6CAA0C;AAE1C,MAAM,WAAW,GAAG,SAAG,CAAC;IACtB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,SAAG,CAAC;IACvB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,8BAA8B;IAC1C,iBAAiB,EAAE;QACjB,SAAS,EAAE,aAAa,kBAAQ,CAAC,KAAK,EAAE;KACzC;CACF,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,SAAG,CAAC;IAC1B,SAAS,EAAE,gBAAO,CAAC,CAAC,CAAC;IACrB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAKH,SAAS,SAAS,CAChB,KAA8C;IAE9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,aAAK,CAAC,SAAS,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,aAAK,CAAC,QAAQ,CAAC,CAAC;IAChC,OAAO,CACL,sDAAkB,KAAK,CAAC,UAAU;QAChC,uCAAK,SAAS,EAAE,eAAe;YAC7B,qCAAG,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,OAAO;gBACpC,0CACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBACvB,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;oBACzC,CAAC;oBAED,8BAAC,cAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,GAAI;oBACrD,KAAK,CAAC,IAAI,CACJ,CACP,CACA;QAEL,IAAI,IAAI,CACP,uCAAK,IAAI,EAAC,QAAQ,qBAAkB,OAAO,EAAE,EAAE,EAAE,QAAQ,IACtD,KAAK,CAAC,QAAQ,CACX,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,kDAAgD;AAChD,sCAAmC;AACnC,+DAAuC;AACvC,oDAAkD;AAClD,6CAA0C;AAE1C,MAAM,WAAW,GAAG,SAAG,CAAC;IACtB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,SAAG,CAAC;IACvB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,8BAA8B;IAC1C,iBAAiB,EAAE;QACjB,SAAS,EAAE,aAAa,kBAAQ,CAAC,KAAK,EAAE;KACzC;CACF,CAAC,CAAC;AACH,MAAM,eAAe,GAAG,SAAG,CAAC;IAC1B,SAAS,EAAE,gBAAO,CAAC,CAAC,CAAC;IACrB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AACH,MAAM,gBAAgB,GAAG,SAAG,CAAC;IAC3B,WAAW,EAAE,gBAAO,CAAC,CAAC,CAAC;CACxB,CAAC,CAAC;AAKH,SAAS,SAAS,CAChB,KAA8C;IAE9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,aAAK,CAAC,SAAS,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,aAAK,CAAC,QAAQ,CAAC,CAAC;IAChC,OAAO,CACL,sDAAkB,KAAK,CAAC,UAAU;QAChC,uCAAK,SAAS,EAAE,eAAe;YAC7B,qCAAG,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,OAAO;gBACpC,0CACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBACvB,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;oBACzC,CAAC;oBAED,8BAAC,cAAI,IACH,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,GAC5C;oBACD,KAAK,CAAC,IAAI,CACJ,CACP,CACA;QAEL,IAAI,IAAI,CACP,uCAAK,IAAI,EAAC,QAAQ,qBAAkB,OAAO,EAAE,EAAE,EAAE,QAAQ,IACtD,KAAK,CAAC,QAAQ,CACX,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,SAAS,CAAC"}

package/lib/components/content-with-fallback.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const ContentWithFallback: React.FunctionComponent<{
+    content(shouldRender: boolean, shouldAnimate: boolean): React.ReactElement | boolean;
+    fallback(shouldRender: boolean): React.ReactElement | boolean;
+    isContentReady: boolean;
+    contentAfterFallbackTimeout?: number;
+    fallbackTimeout?: number;
+}>;

package/lib/components/content-with-fallback.js

@@ -0,0 +1,78 @@
+"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.ContentWithFallback = void 0;
+const react_1 = __importStar(require("react"));
+var RenderStatus;
+(function (RenderStatus) {
+    RenderStatus["Nothing"] = "Nothing";
+    RenderStatus["Fallback"] = "Fallback";
+    RenderStatus["Content"] = "Content";
+    RenderStatus["ContentAnimated"] = "ContentAnimated";
+})(RenderStatus || (RenderStatus = {}));
+function isContent(status) {
+    return [RenderStatus.ContentAnimated, RenderStatus.Content].includes(status);
+}
+function useRenderWithFallback(isContentReady, { contentAfterFallbackTimeout = 200, fallbackTimeout = 30 } = {}) {
+    const [renderStatus, setRenderStatus] = react_1.useState(isContentReady ? RenderStatus.Content : RenderStatus.Nothing);
+    react_1.useEffect(() => {
+        if (isContent(renderStatus)) {
+            return;
+        }
+        if (isContentReady && renderStatus === RenderStatus.Nothing) {
+            setRenderStatus(RenderStatus.Content);
+            return;
+        }
+        if (isContentReady && renderStatus === RenderStatus.Fallback) {
+            const timeout = setTimeout(() => {
+                setRenderStatus(RenderStatus.ContentAnimated);
+            }, contentAfterFallbackTimeout);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+        if (!isContentReady && renderStatus === RenderStatus.Nothing) {
+            const timeout = setTimeout(() => {
+                setRenderStatus(RenderStatus.Fallback);
+            }, fallbackTimeout);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [
+        renderStatus,
+        isContentReady,
+        contentAfterFallbackTimeout,
+        fallbackTimeout,
+    ]);
+    return renderStatus;
+}
+const ContentWithFallback = ({ content, fallback, isContentReady, contentAfterFallbackTimeout, fallbackTimeout, }) => {
+    const renderStatus = useRenderWithFallback(isContentReady, {
+        contentAfterFallbackTimeout,
+        fallbackTimeout,
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        content(isContent(renderStatus), renderStatus === RenderStatus.ContentAnimated),
+        fallback(renderStatus === RenderStatus.Fallback)));
+};
+exports.ContentWithFallback = ContentWithFallback;
+//# sourceMappingURL=content-with-fallback.js.map

package/lib/components/content-with-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-with-fallback.js","sourceRoot":"","sources":["../../src/components/content-with-fallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,+CAAmD;AAEnD,IAAK,YAOJ;AAPD,WAAK,YAAY;IACf,mCAAmB,CAAA;IACnB,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IAGnB,mDAAmC,CAAA;AACrC,CAAC,EAPI,YAAY,KAAZ,YAAY,QAOhB;AACD,SAAS,SAAS,CAAC,MAAoB;IACrC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC/E,CAAC;AACD,SAAS,qBAAqB,CAC5B,cAAuB,EACvB,EAAE,2BAA2B,GAAG,GAAG,EAAE,eAAe,GAAG,EAAE,EAAE,GAAG,EAAE;IAEhE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,gBAAQ,CAC9C,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAC7D,CAAC;IAEF,iBAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE;YAC3B,OAAO;SACR;QACD,IAAI,cAAc,IAAI,YAAY,KAAK,YAAY,CAAC,OAAO,EAAE;YAC3D,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YACtC,OAAO;SACR;QACD,IAAI,cAAc,IAAI,YAAY,KAAK,YAAY,CAAC,QAAQ,EAAE;YAC5D,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC9B,eAAe,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;YAChD,CAAC,EAAE,2BAA2B,CAAC,CAAC;YAChC,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC;SACH;QACD,IAAI,CAAC,cAAc,IAAI,YAAY,KAAK,YAAY,CAAC,OAAO,EAAE;YAC5D,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC9B,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzC,CAAC,EAAE,eAAe,CAAC,CAAC;YACpB,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC;SACH;IACH,CAAC,EAAE;QACD,YAAY;QACZ,cAAc;QACd,2BAA2B;QAC3B,eAAe;KAChB,CAAC,CAAC;IAEH,OAAO,YAAY,CAAC;AACtB,CAAC;AACM,MAAM,mBAAmB,GAS3B,CAAC,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,2BAA2B,EAC3B,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,qBAAqB,CAAC,cAAc,EAAE;QACzD,2BAA2B;QAC3B,eAAe;KAChB,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,CACN,SAAS,CAAC,YAAY,CAAC,EACvB,YAAY,KAAK,YAAY,CAAC,eAAe,CAC9C;QACA,QAAQ,CAAC,YAAY,KAAK,YAAY,CAAC,QAAQ,CAAC,CAChD,CACJ,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,mBAAmB,uBA8B9B"}

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

@@ -0,0 +1,13 @@
+import 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
+];
+export declare function useHoverState(): [React.HTMLAttributes<HTMLElement>, boolean];

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHoverState = exports.useFocusState = exports.FocusState = void 0;
+const interactions_1 = require("@react-aria/interactions");
+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 useFocusState() {
+    const [isFocused, setIsFocused] = react_1.useState(false);
+    const [isFocusWithin, setIsFocusWithin] = react_1.useState(false);
+    const { isFocusVisible } = interactions_1.useFocusVisible();
+    const { focusWithinProps } = interactions_1.useFocusWithin({
+        onFocusWithinChange: setIsFocusWithin,
+    });
+    const { focusProps } = interactions_1.useFocus({
+        onFocusChange: setIsFocused,
+    });
+    const mergedProps = {
+        onFocus(evt) {
+            var _a, _b;
+            (_a = focusProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(focusProps, evt);
+            (_b = focusWithinProps.onFocus) === null || _b === void 0 ? void 0 : _b.call(focusWithinProps, evt);
+        },
+        onBlur(evt) {
+            var _a, _b;
+            (_a = focusProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(focusProps, evt);
+            (_b = focusWithinProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(focusWithinProps, evt);
+        },
+    };
+    return [
+        mergedProps,
+        isFocused && isFocusVisible
+            ? FocusState.FocusVisible
+            : isFocused
+                ? FocusState.Focus
+                : isFocusWithin && isFocusVisible
+                    ? FocusState.FocusWithinVisible
+                    : isFocusWithin
+                        ? FocusState.FocusWithin
+                        : FocusState.NoFocus,
+    ];
+}
+exports.useFocusState = useFocusState;
+function useHoverState() {
+    const [isHovered, setIsHovered] = 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,iCAAwC;AAExC,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,SAAgB,aAAa;IAI3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,cAAc,EAAE,GAAG,8BAAe,EAAE,CAAC;IAC7C,MAAM,EAAE,gBAAgB,EAAE,GAAG,6BAAc,CAAC;QAC1C,mBAAmB,EAAE,gBAAgB;KACtC,CAAC,CAAC;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,uBAAQ,CAAC;QAC9B,aAAa,EAAE,YAAY;KAC5B,CAAC,CAAC;IACH,MAAM,WAAW,GAAG;QAClB,OAAO,CAAC,GAAkC;;YACxC,MAAA,UAAU,CAAC,OAAO,+CAAlB,UAAU,EAAW,GAAG,CAAC,CAAC;YAC1B,MAAA,gBAAgB,CAAC,OAAO,+CAAxB,gBAAgB,EAAW,GAAG,CAAC,CAAC;QAClC,CAAC;QACD,MAAM,CAAC,GAAkC;;YACvC,MAAA,UAAU,CAAC,MAAM,+CAAjB,UAAU,EAAU,GAAG,CAAC,CAAC;YACzB,MAAA,gBAAgB,CAAC,MAAM,+CAAvB,gBAAgB,EAAU,GAAG,CAAC,CAAC;QACjC,CAAC;KACF,CAAC;IACF,OAAO;QACL,WAAW;QACX,SAAS,IAAI,cAAc;YACzB,CAAC,CAAC,UAAU,CAAC,YAAY;YACzB,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,UAAU,CAAC,KAAK;gBAClB,CAAC,CAAC,aAAa,IAAI,cAAc;oBACjC,CAAC,CAAC,UAAU,CAAC,kBAAkB;oBAC/B,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,UAAU,CAAC,WAAW;wBACxB,CAAC,CAAC,UAAU,CAAC,OAAO;KACvB,CAAC;AACJ,CAAC;AAnCD,sCAmCC;AAED,SAAgB,aAAa;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAC,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/index.d.ts

@@ -16,8 +16,9 @@ export { AtlasLogoMark, MongoDBLogoMark, MongoDBLogo, } from '@leafygreen-ui/log
 export { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu';
 export { default as Modal } from '@leafygreen-ui/modal';
 export { uiColors } from '@leafygreen-ui/palette';
-export * as compassUIColors from './components/compass-ui-colors';
+export * as compassUIColors from './compass-ui-colors';
 export { default as Portal } from '@leafygreen-ui/portal';
+export { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
 export { Select, Option, Size as SelectSize } from '@leafygreen-ui/select';
 export { Tabs, Tab } from '@leafygreen-ui/tabs';
 export { default as TextArea } from '@leafygreen-ui/text-area';
@@ -28,3 +29,5 @@ export { breakpoints, spacing } from '@leafygreen-ui/tokens';
 export { default as Tooltip } from '@leafygreen-ui/tooltip';
 export { H2, H3, Link, Subtitle, Label, Description, } from '@leafygreen-ui/typography';
 export { Accordion, CancelLoader, ConfirmationModal, FileInput, SpinLoader, ResizeHandle, ResizeDirection, };
+export { useFocusState, useHoverState, FocusState, } from './hooks/use-focus-hover';
+export { ContentWithFallback } from './components/content-with-fallback';

package/lib/index.js

@@ -22,7 +22,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResizeDirection = exports.ResizeHandle = exports.SpinLoader = exports.FileInput = exports.ConfirmationModal = exports.CancelLoader = exports.Accordion = exports.Description = exports.Label = exports.Subtitle = exports.Link = exports.H3 = exports.H2 = exports.Tooltip = exports.spacing = exports.breakpoints = exports.Toggle = exports.ToastVariant = exports.Toast = exports.TextInput = exports.TextArea = exports.Tab = exports.Tabs = exports.SelectSize = exports.Option = exports.Select = exports.Portal = exports.compassUIColors = exports.uiColors = exports.Modal = exports.MenuItem = exports.MenuSeparator = exports.Menu = exports.MongoDBLogo = exports.MongoDBLogoMark = exports.AtlasLogoMark = exports.LeafyGreenProvider = exports.IconButton = exports.Icon = exports.Checkbox = exports.Card = exports.ButtonVariant = exports.ButtonSize = exports.Button = exports.BannerVariant = exports.Banner = exports.BadgeVariant = exports.Badge = void 0;
+exports.ResizeDirection = exports.ResizeHandle = exports.SpinLoader = exports.FileInput = exports.ConfirmationModal = exports.CancelLoader = exports.Accordion = exports.Description = exports.Label = exports.Subtitle = exports.Link = exports.H3 = exports.H2 = exports.Tooltip = exports.spacing = exports.breakpoints = exports.Toggle = exports.ToastVariant = exports.Toast = exports.TextInput = exports.TextArea = exports.Tab = exports.Tabs = exports.SelectSize = exports.Option = exports.Select = exports.RadioBoxGroup = exports.RadioBox = exports.Portal = exports.compassUIColors = exports.uiColors = exports.Modal = exports.MenuItem = exports.MenuSeparator = exports.Menu = exports.MongoDBLogo = exports.MongoDBLogoMark = exports.AtlasLogoMark = exports.LeafyGreenProvider = exports.IconButton = exports.Icon = exports.Checkbox = exports.Card = exports.ButtonVariant = exports.ButtonSize = exports.Button = exports.BannerVariant = exports.Banner = exports.BadgeVariant = exports.Badge = void 0;
+exports.ContentWithFallback = exports.FocusState = exports.useHoverState = exports.useFocusState = void 0;
 const cancel_loader_1 = __importDefault(require("./components/cancel-loader"));
 exports.CancelLoader = cancel_loader_1.default;
 const confirmation_modal_1 = __importDefault(require("./components/confirmation-modal"));
@@ -68,9 +69,12 @@ var modal_1 = require("@leafygreen-ui/modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(modal_1).default; } });
 var palette_1 = require("@leafygreen-ui/palette");
 Object.defineProperty(exports, "uiColors", { enumerable: true, get: function () { return palette_1.uiColors; } });
-exports.compassUIColors = __importStar(require("./components/compass-ui-colors"));
+exports.compassUIColors = __importStar(require("./compass-ui-colors"));
 var portal_1 = require("@leafygreen-ui/portal");
 Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return __importDefault(portal_1).default; } });
+var radio_box_group_1 = require("@leafygreen-ui/radio-box-group");
+Object.defineProperty(exports, "RadioBox", { enumerable: true, get: function () { return radio_box_group_1.RadioBox; } });
+Object.defineProperty(exports, "RadioBoxGroup", { enumerable: true, get: function () { return radio_box_group_1.RadioBoxGroup; } });
 var select_1 = require("@leafygreen-ui/select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return select_1.Select; } });
 Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return select_1.Option; } });
@@ -99,4 +103,10 @@ Object.defineProperty(exports, "Link", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "Subtitle", { enumerable: true, get: function () { return typography_1.Subtitle; } });
 Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return typography_1.Label; } });
 Object.defineProperty(exports, "Description", { enumerable: true, get: function () { return typography_1.Description; } });
+var use_focus_hover_1 = require("./hooks/use-focus-hover");
+Object.defineProperty(exports, "useFocusState", { enumerable: true, get: function () { return use_focus_hover_1.useFocusState; } });
+Object.defineProperty(exports, "useHoverState", { enumerable: true, get: function () { return use_focus_hover_1.useHoverState; } });
+Object.defineProperty(exports, "FocusState", { enumerable: true, get: function () { return use_focus_hover_1.FocusState; } });
+var content_with_fallback_1 = require("./components/content-with-fallback");
+Object.defineProperty(exports, "ContentWithFallback", { enumerable: true, get: function () { return content_with_fallback_1.ContentWithFallback; } });
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+EAAsD;AAuDpD,uBAvDK,uBAAY,CAuDL;AAtDd,yFAAgE;AAuD9D,4BAvDK,4BAAiB,CAuDL;AAtDnB,yEAAgD;AAuD9C,oBAvDK,oBAAS,CAuDL;AAtDX,2EAAkD;AAuDhD,qBAvDK,qBAAU,CAuDL;AAtDZ,8DAA2E;AAuDzE,6FAvDO,4BAAY,OAuDP;AACZ,gGAxDqB,+BAAe,OAwDrB;AAvDjB,uEAA+C;AAiD7C,oBAjDK,mBAAS,CAiDL;AAhDX,8CAG8B;AAF5B,+GAAA,OAAO,OAAS;AAChB,qGAAA,OAAO,OAAgB;AAEzB,gDAG+B;AAF7B,iHAAA,OAAO,OAAU;AACjB,uGAAA,OAAO,OAAiB;AAE1B,gDAI+B;AAH7B,iHAAA,OAAO,OAAU;AACjB,oGAAA,IAAI,OAAc;AAClB,uGAAA,OAAO,OAAiB;AAE1B,4CAAsD;AAA7C,6GAAA,OAAO,OAAQ;AACxB,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,4CAAsD;AAA7C,6GAAA,OAAO,OAAQ;AACxB,0DAAmE;AAA1D,0HAAA,OAAO,OAAc;AAC9B,0EAAmF;AAA1E,0IAAA,OAAO,OAAsB;AACtC,4CAI6B;AAH3B,qGAAA,aAAa,OAAA;AACb,uGAAA,eAAe,OAAA;AACf,mGAAA,WAAW,OAAA;AAEb,4CAAoE;AAA3D,4FAAA,IAAI,OAAA;AAAE,qGAAA,aAAa,OAAA;AAAE,gGAAA,QAAQ,OAAA;AACtC,8CAAwD;AAA/C,+GAAA,OAAO,OAAS;AACzB,kDAAkD;AAAzC,mGAAA,QAAQ,OAAA;AACjB,kFAAkE;AAClE,gDAA0D;AAAjD,iHAAA,OAAO,OAAU;AAC1B,gDAA2E;AAAlE,gGAAA,MAAM,OAAA;AAAE,gGAAA,MAAM,OAAA;AAAE,oGAAA,IAAI,OAAc;AAC3C,4CAAgD;AAAvC,4FAAA,IAAI,OAAA;AAAE,2FAAA,GAAG,OAAA;AAClB,sDAA+D;AAAtD,sHAAA,OAAO,OAAY;AAC5B,wDAAiE;AAAxD,wHAAA,OAAO,OAAa;AAC7B,8CAG8B;AAF5B,+GAAA,OAAO,OAAS;AAChB,qGAAA,OAAO,OAAgB;AAEzB,gDAA0D;AAAjD,iHAAA,OAAO,OAAU;AAC1B,gDAA6D;AAApD,qGAAA,WAAW,OAAA;AAAE,iGAAA,OAAO,OAAA;AAC7B,kDAA4D;AAAnD,mHAAA,OAAO,OAAW;AAC3B,wDAOmC;AANjC,gGAAA,EAAE,OAAA;AACF,gGAAA,EAAE,OAAA;AACF,kGAAA,IAAI,OAAA;AACJ,sGAAA,QAAQ,OAAA;AACR,mGAAA,KAAK,OAAA;AACL,yGAAA,WAAW,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+EAAsD;AAwDpD,uBAxDK,uBAAY,CAwDL;AAvDd,yFAAgE;AAwD9D,4BAxDK,4BAAiB,CAwDL;AAvDnB,yEAAgD;AAwD9C,oBAxDK,oBAAS,CAwDL;AAvDX,2EAAkD;AAwDhD,qBAxDK,qBAAU,CAwDL;AAvDZ,8DAA2E;AAwDzE,6FAxDO,4BAAY,OAwDP;AACZ,gGAzDqB,+BAAe,OAyDrB;AAxDjB,uEAA+C;AAkD7C,oBAlDK,mBAAS,CAkDL;AAjDX,8CAG8B;AAF5B,+GAAA,OAAO,OAAS;AAChB,qGAAA,OAAO,OAAgB;AAEzB,gDAG+B;AAF7B,iHAAA,OAAO,OAAU;AACjB,uGAAA,OAAO,OAAiB;AAE1B,gDAI+B;AAH7B,iHAAA,OAAO,OAAU;AACjB,oGAAA,IAAI,OAAc;AAClB,uGAAA,OAAO,OAAiB;AAE1B,4CAAsD;AAA7C,6GAAA,OAAO,OAAQ;AACxB,oDAA8D;AAArD,qHAAA,OAAO,OAAY;AAC5B,4CAAsD;AAA7C,6GAAA,OAAO,OAAQ;AACxB,0DAAmE;AAA1D,0HAAA,OAAO,OAAc;AAC9B,0EAAmF;AAA1E,0IAAA,OAAO,OAAsB;AACtC,4CAI6B;AAH3B,qGAAA,aAAa,OAAA;AACb,uGAAA,eAAe,OAAA;AACf,mGAAA,WAAW,OAAA;AAEb,4CAAoE;AAA3D,4FAAA,IAAI,OAAA;AAAE,qGAAA,aAAa,OAAA;AAAE,gGAAA,QAAQ,OAAA;AACtC,8CAAwD;AAA/C,+GAAA,OAAO,OAAS;AACzB,kDAAkD;AAAzC,mGAAA,QAAQ,OAAA;AACjB,uEAAuD;AACvD,gDAA0D;AAAjD,iHAAA,OAAO,OAAU;AAC1B,kEAAyE;AAAhE,2GAAA,QAAQ,OAAA;AAAE,gHAAA,aAAa,OAAA;AAChC,gDAA2E;AAAlE,gGAAA,MAAM,OAAA;AAAE,gGAAA,MAAM,OAAA;AAAE,oGAAA,IAAI,OAAc;AAC3C,4CAAgD;AAAvC,4FAAA,IAAI,OAAA;AAAE,2FAAA,GAAG,OAAA;AAClB,sDAA+D;AAAtD,sHAAA,OAAO,OAAY;AAC5B,wDAAiE;AAAxD,wHAAA,OAAO,OAAa;AAC7B,8CAG8B;AAF5B,+GAAA,OAAO,OAAS;AAChB,qGAAA,OAAO,OAAgB;AAEzB,gDAA0D;AAAjD,iHAAA,OAAO,OAAU;AAC1B,gDAA6D;AAApD,qGAAA,WAAW,OAAA;AAAE,iGAAA,OAAO,OAAA;AAC7B,kDAA4D;AAAnD,mHAAA,OAAO,OAAW;AAC3B,wDAOmC;AANjC,gGAAA,EAAE,OAAA;AACF,gGAAA,EAAE,OAAA;AACF,kGAAA,IAAI,OAAA;AACJ,sGAAA,QAAQ,OAAA;AACR,mGAAA,KAAK,OAAA;AACL,yGAAA,WAAW,OAAA;AAWb,2DAIiC;AAH/B,gHAAA,aAAa,OAAA;AACb,gHAAA,aAAa,OAAA;AACb,6GAAA,UAAU,OAAA;AAEZ,4EAAyE;AAAhE,4HAAA,mBAAmB,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongodb-js/compass-components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React Components used in Compass",
   "license": "SSPL",
   "main": "lib/index.js",
@@ -48,6 +48,7 @@
     "@leafygreen-ui/modal": "^7.0.0",
     "@leafygreen-ui/palette": "^3.2.2",
     "@leafygreen-ui/portal": "^3.1.3",
+    "@leafygreen-ui/radio-box-group": "^6.1.4",
     "@leafygreen-ui/select": "^3.0.4",
     "@leafygreen-ui/tabs": "^5.1.3",
     "@leafygreen-ui/text-area": "^4.0.3",
@@ -57,7 +58,8 @@
     "@leafygreen-ui/tokens": "^0.5.3",
     "@leafygreen-ui/tooltip": "^6.2.2",
     "@leafygreen-ui/typography": "^8.0.2",
-    "@mongodb-js/compass-logging": "^0.4.0",
+    "@mongodb-js/compass-logging": "^0.5.0",
+    "@react-aria/interactions": "^3.6.0",
     "@react-aria/utils": "^3.9.0"
   },
   "peerDependencies": {
@@ -66,11 +68,13 @@
   },
   "devDependencies": {
     "@emotion/css": "^11.5.0",
-    "@mongodb-js/eslint-config-compass": "^0.4.0",
-    "@mongodb-js/mocha-config-compass": "^0.5.0",
-    "@mongodb-js/prettier-config-compass": "^0.3.0",
-    "@mongodb-js/tsconfig-compass": "^0.3.0",
+    "@mongodb-js/eslint-config-compass": "^0.5.0",
+    "@mongodb-js/mocha-config-compass": "^0.6.0",
+    "@mongodb-js/prettier-config-compass": "^0.4.0",
+    "@mongodb-js/tsconfig-compass": "^0.4.0",
+    "@testing-library/dom": "^8.11.1",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.5.0",
     "@types/chai": "^4.2.21",
     "@types/chai-dom": "^0.0.10",
     "@types/mocha": "^9.0.0",
@@ -96,5 +100,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8ef2cccaaab6d84a5fcd633ea8dfc4c7a4db551f"
+  "gitHead": "77166e3754e36e95c7ff7efb5a0ce5e0990b0ff7"
 }

package/lib/components/compass-ui-colors.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.transparentGray = exports.gray8 = void 0;
-exports.gray8 = '#f5f6f7';
-exports.transparentGray = 'rgba(180, 180, 180, 0.5)';
-//# sourceMappingURL=compass-ui-colors.js.map

package/lib/components/compass-ui-colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"compass-ui-colors.js","sourceRoot":"","sources":["../../src/components/compass-ui-colors.tsx"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAAG,SAAS,CAAC;AAClB,QAAA,eAAe,GAAG,0BAA0B,CAAC"}