@mongodb-js/compass-components 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongodb-js/compass-components",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "React Components used in Compass",
   "license": "SSPL",
   "main": "lib/index.js",
@@ -31,61 +31,68 @@
     "reformat": "npm run prettier -- --write ."
   },
   "dependencies": {
-    "@leafygreen-ui/badge": "^6.1.2",
-    "@leafygreen-ui/banner": "^5.0.3",
-    "@leafygreen-ui/button": "^16.1.1",
-    "@leafygreen-ui/card": "^7.1.1",
-    "@leafygreen-ui/checkbox": "^10.1.1",
-    "@leafygreen-ui/code": "^12.1.1",
-    "@leafygreen-ui/combobox": "^3.1.1",
-    "@leafygreen-ui/confirmation-modal": "^3.1.1",
+    "@dnd-kit/core": "^6.0.7",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
+    "@leafygreen-ui/badge": "^8.0.1",
+    "@leafygreen-ui/banner": "^7.0.1",
+    "@leafygreen-ui/button": "^19.0.3",
+    "@leafygreen-ui/card": "^9.0.2",
+    "@leafygreen-ui/checkbox": "^12.0.2",
+    "@leafygreen-ui/code": "^14.1.0",
+    "@leafygreen-ui/confirmation-modal": "^4.0.1",
     "@leafygreen-ui/emotion": "^4.0.3",
-    "@leafygreen-ui/icon": "^11.11.1",
-    "@leafygreen-ui/icon-button": "^13.2.1",
-    "@leafygreen-ui/leafygreen-provider": "^2.3.5",
-    "@leafygreen-ui/logo": "^6.3.0",
-    "@leafygreen-ui/marketing-modal": "^3.0.7",
-    "@leafygreen-ui/menu": "^16.0.0",
-    "@leafygreen-ui/modal": "^10.1.2",
-    "@leafygreen-ui/palette": "^3.4.4",
-    "@leafygreen-ui/pipeline": "^3.0.0",
-    "@leafygreen-ui/popover": "^9.1.1",
-    "@leafygreen-ui/portal": "^4.0.6",
-    "@leafygreen-ui/radio-box-group": "^9.1.1",
-    "@leafygreen-ui/radio-group": "^8.1.1",
-    "@leafygreen-ui/segmented-control": "^3.1.1",
-    "@leafygreen-ui/select": "^7.1.2",
-    "@leafygreen-ui/table": "^6.1.1",
-    "@leafygreen-ui/tabs": "^9.2.1",
-    "@leafygreen-ui/text-area": "^6.2.1",
-    "@leafygreen-ui/text-input": "^10.2.1",
-    "@leafygreen-ui/toast": "^2.0.3",
-    "@leafygreen-ui/toggle": "^8.0.5",
-    "@leafygreen-ui/tokens": "^1.3.4",
-    "@leafygreen-ui/tooltip": "^7.1.3",
-    "@leafygreen-ui/typography": "^13.2.1",
-    "@mongodb-js/compass-logging": "^1.1.1",
+    "@leafygreen-ui/hooks": "^7.3.3",
+    "@leafygreen-ui/icon": "^11.12.3",
+    "@leafygreen-ui/icon-button": "^15.0.3",
+    "@leafygreen-ui/inline-definition": "^6.0.0",
+    "@leafygreen-ui/leafygreen-provider": "^3.1.0",
+    "@leafygreen-ui/lib": "^10.0.0",
+    "@leafygreen-ui/logo": "^7.0.0",
+    "@leafygreen-ui/marketing-modal": "^3.0.10",
+    "@leafygreen-ui/menu": "^19.0.1",
+    "@leafygreen-ui/modal": "^14.0.0",
+    "@leafygreen-ui/palette": "^3.4.6",
+    "@leafygreen-ui/pipeline": "^5.0.1",
+    "@leafygreen-ui/popover": "^11.0.1",
+    "@leafygreen-ui/portal": "^4.0.7",
+    "@leafygreen-ui/radio-box-group": "^12.0.1",
+    "@leafygreen-ui/radio-group": "^10.0.3",
+    "@leafygreen-ui/segmented-control": "^7.0.0",
+    "@leafygreen-ui/select": "^10.1.0",
+    "@leafygreen-ui/table": "^9.0.1",
+    "@leafygreen-ui/tabs": "^11.0.1",
+    "@leafygreen-ui/text-area": "^8.0.1",
+    "@leafygreen-ui/text-input": "^12.1.1",
+    "@leafygreen-ui/toast": "^4.0.1",
+    "@leafygreen-ui/toggle": "^10.0.2",
+    "@leafygreen-ui/tokens": "^1.4.1",
+    "@leafygreen-ui/tooltip": "^9.0.2",
+    "@leafygreen-ui/typography": "^15.2.0",
+    "@mongodb-js/compass-logging": "^1.1.2",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/tooltip": "^3.2.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",
     "@react-stately/tooltip": "^3.0.5",
-    "bson": "^4.6.1",
+    "bson": "^4.7.1",
     "focus-trap-react": "^8.4.2",
-    "hadron-document": "^8.0.1",
+    "hadron-document": "^8.1.0",
     "hadron-type-checker": "^7.0.0",
+    "is-electron-renderer": "^2.0.1",
+    "lodash": "^4.17.21",
     "polished": "^4.2.2",
-    "react-intersection-observer": "^8.25.1",
-    "react-sortable-hoc": "^2.0.0",
+    "prop-types": "^15.7.2",
+    "react-intersection-observer": "^8.34.0",
     "react-window": "^1.8.6"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-ace": "^9.5.0"
   },
   "devDependencies": {
-    "@mongodb-js/eslint-config-compass": "^1.0.1",
-    "@mongodb-js/mocha-config-compass": "^1.0.1",
+    "@mongodb-js/eslint-config-compass": "^1.0.2",
+    "@mongodb-js/mocha-config-compass": "^1.0.2",
     "@mongodb-js/prettier-config-compass": "^1.0.0",
     "@mongodb-js/tsconfig-compass": "^1.0.1",
     "@testing-library/dom": "^8.11.1",
@@ -96,14 +103,16 @@
     "@types/chai-dom": "^0.0.10",
     "@types/mocha": "^9.0.0",
     "@types/react": "^17.0.5",
+    "@types/reflux": "^6.4.3",
     "chai": "^4.3.4",
     "eslint": "^7.25.0",
     "mocha": "^8.4.0",
     "nyc": "^15.0.0",
     "prettier": "^2.7.1",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-ace": "^9.5.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
+    "reflux": "^0.4.1",
     "rimraf": "^3.0.2",
     "sinon": "^9.0.0",
     "typescript": "^4.8.3"
@@ -116,5 +125,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "10815be8fd57f3bfd89d061e1592eb7136d4a0fb"
+  "gitHead": "cfe9a829fd77fc84e090f2c7b38663167071ebc5"
 }

package/lib/components/checkbox.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { Checkbox as LeafyGreenCheckbox } from './leafygreen';
-declare function Checkbox(props: React.ComponentProps<typeof LeafyGreenCheckbox>): ReturnType<typeof LeafyGreenCheckbox>;
-export { Checkbox };
-//# sourceMappingURL=checkbox.d.ts.map

package/lib/components/checkbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAG9D,iBAAS,QAAQ,CACf,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,GACrD,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAMvC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/lib/components/checkbox.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const react_1 = __importDefault(require("react"));
-const leafygreen_1 = require("./leafygreen");
-const use_theme_1 = require("../hooks/use-theme");
-function Checkbox(props) {
-    const theme = (0, use_theme_1.useTheme)();
-    return (react_1.default.createElement(leafygreen_1.Checkbox, { darkMode: (theme === null || theme === void 0 ? void 0 : theme.theme) === use_theme_1.Theme.Dark, ...props }));
-}
-exports.Checkbox = Checkbox;
-//# sourceMappingURL=checkbox.js.map

package/lib/components/checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,6CAA8D;AAC9D,kDAAqD;AAErD,SAAS,QAAQ,CACf,KAAsD;IAEtD,MAAM,KAAK,GAAG,IAAA,oBAAQ,GAAE,CAAC;IAEzB,OAAO,CACL,8BAAC,qBAAkB,IAAC,QAAQ,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,iBAAK,CAAC,IAAI,KAAM,KAAK,GAAI,CACzE,CAAC;AACJ,CAAC;AAEQ,4BAAQ"}

package/lib/components/document-list/font-awesome-icon.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-declare const FA_ICONS: {
-    remove: string;
-    revert: string;
-    collapsed: string;
-    expanded: string;
-    addChild: string;
-    addSibling: string;
-};
-export declare const FontAwesomeIcon: React.FunctionComponent<{
-    icon: keyof typeof FA_ICONS;
-}>;
-export {};
-//# sourceMappingURL=font-awesome-icon.d.ts.map

package/lib/components/document-list/font-awesome-icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"font-awesome-icon.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/font-awesome-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,QAAQ;;;;;;;CAOb,CAAC;AASF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACpD,IAAI,EAAE,MAAM,OAAO,QAAQ,CAAC;CAC7B,CAQA,CAAC"}

package/lib/components/document-list/font-awesome-icon.js

@@ -1,29 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontAwesomeIcon = void 0;
-const react_1 = __importDefault(require("react"));
-const emotion_1 = require("@leafygreen-ui/emotion");
-const tokens_1 = require("@leafygreen-ui/tokens");
-const FA_ICONS = {
-    remove: 'times-circle',
-    revert: 'rotate-left',
-    collapsed: 'angle-right',
-    expanded: 'angle-right  fa-rotate-90',
-    addChild: 'level-down fa-rotate-90',
-    addSibling: 'plus-square-o',
-};
-const faIcon = (0, emotion_1.css)({
-    width: tokens_1.spacing[3],
-    height: tokens_1.spacing[3],
-    padding: '2px',
-    textAlign: 'center',
-});
-const FontAwesomeIcon = ({ icon }) => {
-    const faClassName = FA_ICONS[icon];
-    return (react_1.default.createElement("span", { role: "presentation", className: (0, emotion_1.cx)(faIcon, `fa fa-${faClassName}`) }));
-};
-exports.FontAwesomeIcon = FontAwesomeIcon;
-//# sourceMappingURL=font-awesome-icon.js.map

package/lib/components/document-list/font-awesome-icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"font-awesome-icon.js","sourceRoot":"","sources":["../../../src/components/document-list/font-awesome-icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,oDAAiD;AACjD,kDAAgD;AAEhD,MAAM,QAAQ,GAAG;IACf,MAAM,EAAE,cAAc;IACtB,MAAM,EAAE,aAAa;IACrB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE,2BAA2B;IACrC,QAAQ,EAAE,yBAAyB;IACnC,UAAU,EAAE,eAAe;CAC5B,CAAC;AAEF,MAAM,MAAM,GAAG,IAAA,aAAG,EAAC;IACjB,KAAK,EAAE,gBAAO,CAAC,CAAC,CAAC;IACjB,MAAM,EAAE,gBAAO,CAAC,CAAC,CAAC;IAClB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEI,MAAM,eAAe,GAEvB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAChB,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnC,OAAO,CACL,wCACE,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,IAAA,YAAE,EAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC,GACvC,CACT,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,eAAe,mBAU1B"}

package/lib/components/toggle.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { Toggle as LeafyGreenToggle } from './leafygreen';
-declare function Toggle(props: React.ComponentProps<typeof LeafyGreenToggle>): ReturnType<typeof LeafyGreenToggle>;
-export { Toggle };
-//# sourceMappingURL=toggle.d.ts.map

package/lib/components/toggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAG1D,iBAAS,MAAM,CACb,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,GACnD,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAIrC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/components/toggle.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
-const react_1 = __importDefault(require("react"));
-const leafygreen_1 = require("./leafygreen");
-const use_theme_1 = require("../hooks/use-theme");
-function Toggle(props) {
-    const theme = (0, use_theme_1.useTheme)();
-    return react_1.default.createElement(leafygreen_1.Toggle, { darkMode: (theme === null || theme === void 0 ? void 0 : theme.theme) === use_theme_1.Theme.Dark, ...props });
-}
-exports.Toggle = Toggle;
-//# sourceMappingURL=toggle.js.map

package/lib/components/toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,6CAA0D;AAC1D,kDAAqD;AAErD,SAAS,MAAM,CACb,KAAoD;IAEpD,MAAM,KAAK,GAAG,IAAA,oBAAQ,GAAE,CAAC;IAEzB,OAAO,8BAAC,mBAAgB,IAAC,QAAQ,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,MAAK,iBAAK,CAAC,IAAI,KAAM,KAAK,GAAI,CAAC;AAChF,CAAC;AAEQ,wBAAM"}