@mongodb-js/compass-components 1.67.1 → 1.69.0

package/dist/components/document-list/editors/default-editor.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultEditor = DefaultEditor;
+const react_1 = __importStar(require("react"));
+const input_editor_1 = require("./input-editor");
+const editor_with_label_1 = require("./editor-with-label");
+function DefaultEditor({ value, type, ...props }) {
+    const inputStyle = (0, react_1.useMemo)(() => {
+        return { width: `${Math.max(value.length, 1)}ch` };
+    }, [value]);
+    return (react_1.default.createElement(editor_with_label_1.EditorWithLabel, { type: type },
+        react_1.default.createElement(input_editor_1.InputEditor, { value: value, ...props, style: inputStyle })));
+}

package/dist/components/document-list/editors/editor-with-label.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TypeCastMap } from 'hadron-type-checker';
+export declare function EditorWithLabel({ type, children, }: {
+    type: keyof TypeCastMap;
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=editor-with-label.d.ts.map

package/dist/components/document-list/editors/editor-with-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-with-label.d.ts","sourceRoot":"","sources":["../../../../src/components/document-list/editors/editor-with-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAcvD,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,WAAW,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAUA"}

package/dist/components/document-list/editors/editor-with-label.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorWithLabel = EditorWithLabel;
+const react_1 = __importDefault(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const bson_utils_1 = require("../bson-utils");
+const containerStyles = (0, emotion_1.css)({
+    display: 'inline-flex',
+    alignItems: 'center',
+    maxWidth: '100%',
+});
+const labelStyles = (0, emotion_1.css)({
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+});
+function EditorWithLabel({ type, children, }) {
+    const label = bson_utils_1.BSON_TYPE_LABEL[type];
+    const bsonStyles = (0, bson_utils_1.useBsonThemeStyles)(type);
+    return (react_1.default.createElement("div", { className: containerStyles, style: bsonStyles },
+        label && react_1.default.createElement("span", { className: labelStyles },
+            label,
+            "('"),
+        children,
+        label && react_1.default.createElement("span", { className: labelStyles }, "')")));
+}

package/dist/components/document-list/editors/input-editor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EditorProps } from './shared';
+export declare function InputEditor({ value, valid, onChange, autoFocus, onBlur, className, ...props }: Omit<EditorProps, 'type'>): React.JSX.Element;
+//# sourceMappingURL=input-editor.d.ts.map

package/dist/components/document-list/editors/input-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/document-list/editors/input-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,qBA4B3B"}

package/dist/components/document-list/editors/input-editor.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputEditor = InputEditor;
+const react_1 = __importDefault(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const shared_1 = require("./shared");
+const use_theme_1 = require("../../../hooks/use-theme");
+// Base single-line editor shared by the default, date and UUID editors. Callers
+// only need to provide the value handling and their own width / placeholder.
+function InputEditor({ value, valid, onChange, autoFocus, onBlur, className, ...props }) {
+    const darkMode = (0, use_theme_1.useDarkMode)();
+    return (react_1.default.createElement("input", { ...props, type: "text", "data-testid": "hadron-document-value-editor", value: value, onChange: (evt) => {
+            onChange(evt.currentTarget.value);
+        }, onBlur: onBlur, 
+        // See ../element.tsx
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus: autoFocus, className: (0, emotion_1.cx)(shared_1.editorStyles, !valid && shared_1.editorInvalidStyles, !valid &&
+            (darkMode
+                ? shared_1.editorInvalidDarkModeStyles
+                : shared_1.editorInvalidLightModeStyles), className), spellCheck: "false" }));
+}

package/dist/components/document-list/editors/shared.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { TypeCastMap } from 'hadron-type-checker';
+export declare const editorStyles: string;
+export declare const editorInvalidStyles: string;
+export declare const editorInvalidLightModeStyles: string;
+export declare const editorInvalidDarkModeStyles: string;
+export type EditorInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'value' | 'onChange' | 'onBlur' | 'autoFocus'>;
+export type EditorProps = {
+    autoFocus?: boolean;
+    value: string;
+    valid: boolean;
+    onChange(newValue: string): void;
+    onBlur(): void;
+    type: keyof TypeCastMap;
+} & EditorInputProps;
+//# sourceMappingURL=shared.d.ts.map

package/dist/components/document-list/editors/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/components/document-list/editors/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAmBvD,eAAO,MAAM,YAAY,QAAiC,CAAC;AAE3D,eAAO,MAAM,mBAAmB,QAI9B,CAAC;AAEH,eAAO,MAAM,4BAA4B,QAGvC,CAAC;AAEH,eAAO,MAAM,2BAA2B,QAGtC,CAAC;AAIH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjC,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAC9C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,MAAM,IAAI,IAAI,CAAC;IACf,IAAI,EAAE,MAAM,WAAW,CAAC;CACzB,GAAG,gBAAgB,CAAC"}

package/dist/components/document-list/editors/shared.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editorInvalidDarkModeStyles = exports.editorInvalidLightModeStyles = exports.editorInvalidStyles = exports.editorStyles = void 0;
+const emotion_1 = require("@leafygreen-ui/emotion");
+const palette_1 = require("@leafygreen-ui/palette");
+const editorReset = (0, emotion_1.css)({
+    padding: 0,
+    margin: 0,
+    border: 'none',
+    boxShadow: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    maxWidth: '100%',
+});
+const editorOutline = (0, emotion_1.css)({
+    '&:focus, &:active': {
+        borderRadius: `2px`,
+        boxShadow: `0 0 0 2px ${palette_1.palette.blue.light1}`,
+    },
+});
+exports.editorStyles = (0, emotion_1.cx)(editorReset, editorOutline);
+exports.editorInvalidStyles = (0, emotion_1.css)({
+    '&:focus, &:active': {
+        boxShadow: `0 0 0 2px ${palette_1.palette.red.dark2}`,
+    },
+});
+exports.editorInvalidLightModeStyles = (0, emotion_1.css)({
+    backgroundColor: palette_1.palette.red.light2,
+    color: palette_1.palette.red.dark2,
+});
+exports.editorInvalidDarkModeStyles = (0, emotion_1.css)({
+    backgroundColor: palette_1.palette.red.dark2,
+    color: palette_1.palette.red.light2,
+});

package/dist/components/document-list/editors/text-editor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EditorProps } from './shared';
+export declare function TextEditor({ value: val, valid, onChange, autoFocus, onBlur, ...props }: Omit<EditorProps, 'type'>): React.JSX.Element;
+//# sourceMappingURL=text-editor.d.ts.map

package/dist/components/document-list/editors/text-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/document-list/editors/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAqB5C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EAAE,GAAG,EACV,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,qBA+C3B"}

package/dist/components/document-list/editors/text-editor.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextEditor = TextEditor;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const bson_value_1 = require("../../bson-value");
+const typography_1 = require("../typography");
+const shared_1 = require("./shared");
+const textareaContainer = (0, emotion_1.css)({
+    width: '100%',
+    maxWidth: '100%',
+    '&::before, &::after': {
+        content: "'\"'",
+        userSelect: 'none',
+    },
+});
+const editorTextarea = (0, emotion_1.css)({
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    minWidth: '5ch',
+    // 2ch for `"` around the textarea
+    maxWidth: 'calc(100% - 2ch)',
+    verticalAlign: 'top',
+    color: 'inherit',
+});
+function TextEditor({ value: val, valid, onChange, autoFocus, onBlur, ...props }) {
+    const inputStyle = (0, react_1.useMemo)(() => {
+        const lines = val.split('\n');
+        let longestLineCharLength = 0;
+        for (const line of lines) {
+            const length = line.length;
+            if (length > longestLineCharLength) {
+                longestLineCharLength = length;
+            }
+        }
+        const width = `${Math.min(
+        // Adding one to account for a textarea resize icon button thingie
+        longestLineCharLength + 1, 70)}ch`;
+        const minLines = Math.max(lines.length, longestLineCharLength > 70 ? 2 : 1);
+        const maxLines = Math.min(minLines, 10);
+        const minHeight = typography_1.documentTypography.lineHeight * Math.min(minLines, maxLines);
+        const height = typography_1.documentTypography.lineHeight * maxLines;
+        return { width, minHeight, height };
+    }, [val]);
+    return (react_1.default.createElement(bson_value_1.BSONValueContainer, { type: "String", className: (0, emotion_1.cx)(textareaContainer) },
+        react_1.default.createElement("textarea", { "data-testid": "hadron-document-value-editor", value: val, onChange: (evt) => {
+                onChange(evt.currentTarget.value);
+            }, onBlur: onBlur, 
+            // See ../element.tsx
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: autoFocus, className: (0, emotion_1.cx)(shared_1.editorStyles, editorTextarea, !valid && shared_1.editorInvalidStyles), spellCheck: "false", style: inputStyle, ...props })));
+}

package/dist/components/document-list/editors/uuid-editor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EditorProps } from './shared';
+export declare function UUIDEditor({ value, type, ...props }: EditorProps): React.JSX.Element;
+//# sourceMappingURL=uuid-editor.d.ts.map

package/dist/components/document-list/editors/uuid-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uuid-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/document-list/editors/uuid-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAW5C,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAiBhE"}

package/dist/components/document-list/editors/uuid-editor.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UUIDEditor = UUIDEditor;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const editor_with_label_1 = require("./editor-with-label");
+const input_editor_1 = require("./input-editor");
+const uuidEditorInput = (0, emotion_1.css)({
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    verticalAlign: 'top',
+    color: 'inherit',
+});
+function UUIDEditor({ value, type, ...props }) {
+    const inputStyle = (0, react_1.useMemo)(() => {
+        // UUID format is 36 characters (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)
+        return { width: `${Math.max(value.length, 36)}ch` };
+    }, [value]);
+    return (react_1.default.createElement(editor_with_label_1.EditorWithLabel, { type: type },
+        react_1.default.createElement(input_editor_1.InputEditor, { value: value, placeholder: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", ...props, className: uuidEditorInput, style: inputStyle })));
+}

package/dist/components/document-list/element-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element-actions.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/element-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAqBzD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CA2CA,CAAC;AA6CF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACpD,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAuEA,CAAC"}
+{"version":3,"file":"element-actions.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/element-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAqBzD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CA2CA,CAAC;AA6CF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACpD,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC,CAqEA,CAAC"}

package/dist/components/document-list/element-actions.js

@@ -35,10 +35,10 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddFieldActions = exports.EditActions = void 0;
 const react_1 = __importStar(require("react"));
-const menu_1 = require("@leafygreen-ui/menu");
+const leafygreen_1 = require("../leafygreen");
 const emotion_1 = require("@leafygreen-ui/emotion");
 const tokens_1 = require("@leafygreen-ui/tokens");
-const leafygreen_1 = require("../leafygreen");
+const leafygreen_2 = require("../leafygreen");
 const typography_1 = require("./typography");
 const buttonReset = (0, emotion_1.css)({
     margin: 0,
@@ -58,11 +58,11 @@ const EditActions = ({ editing, onRemove, onRevert }) => {
                 evt.stopPropagation();
                 onRevert();
             } },
-            react_1.default.createElement(leafygreen_1.Icon, { size: "xsmall", className: editActionIconStyle, glyph: "Undo" }))) : onRemove ? (react_1.default.createElement("button", { type: "button", "data-testid": "hadron-document-remove", className: buttonReset, title: "Remove field", "aria-label": "Remove field", onClick: (evt) => {
+            react_1.default.createElement(leafygreen_2.Icon, { size: "xsmall", className: editActionIconStyle, glyph: "Undo" }))) : onRemove ? (react_1.default.createElement("button", { type: "button", "data-testid": "hadron-document-remove", className: buttonReset, title: "Remove field", "aria-label": "Remove field", onClick: (evt) => {
                 evt.stopPropagation();
                 onRemove();
             } },
-            react_1.default.createElement(leafygreen_1.Icon, { size: "xsmall", glyph: "Trash", className: editActionIconStyle }))) : null)));
+            react_1.default.createElement(leafygreen_2.Icon, { size: "xsmall", glyph: "Trash", className: editActionIconStyle }))) : null)));
 };
 exports.EditActions = EditActions;
 const addFieldButton = (0, emotion_1.css)({
@@ -91,30 +91,31 @@ const AddFieldButton = (0, react_1.forwardRef)(function AddFieldButton({ onClick
 });
 const AddFieldActions = ({ editing, type, parentType, keyName, onAddFieldToElement, onAddFieldAfterElement, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const menuTriggerRef = (0, react_1.useRef)(null);
     if (!editing) {
         return null;
     }
     if (onAddFieldAfterElement && !onAddFieldToElement) {
         return react_1.default.createElement(AddFieldButton, { onClick: onAddFieldAfterElement });
     }
-    return (react_1.default.createElement(menu_1.Menu, { open: isOpen, setOpen: setIsOpen, align: "bottom", justify: "start", className: menu, trigger: ({ children, onClick, ref, ...props }) => {
+    return (react_1.default.createElement(leafygreen_1.Menu, { open: isOpen, setOpen: setIsOpen, align: "bottom", justify: "start", className: menu, refEl: menuTriggerRef, trigger: ({ children, ...props }) => {
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(AddFieldButton, { onClick: onClick, ref: ref, ...props }),
+                react_1.default.createElement(AddFieldButton, { ...props, ref: menuTriggerRef }),
                 children));
         } },
-        onAddFieldToElement && (react_1.default.createElement(menu_1.MenuItem, { "data-testid": "hadron-document-add-child", onClick: () => {
+        onAddFieldToElement && (react_1.default.createElement(leafygreen_1.MenuItem, { "data-testid": "hadron-document-add-child", onClick: () => {
                 setIsOpen(false);
                 onAddFieldToElement();
-            }, glyph: react_1.default.createElement(leafygreen_1.Icon, { glyph: "Relationship" }), className: menuItem },
+            }, glyph: react_1.default.createElement(leafygreen_2.Icon, { glyph: "Relationship" }), className: menuItem },
             react_1.default.createElement("div", null,
                 "Add ",
                 type === 'Array' ? 'item' : 'field',
                 " to ",
                 react_1.default.createElement("b", null, keyName)))),
-        react_1.default.createElement(menu_1.MenuItem, { "data-testid": "hadron-document-add-sibling", onClick: () => {
+        react_1.default.createElement(leafygreen_1.MenuItem, { "data-testid": "hadron-document-add-sibling", onClick: () => {
                 setIsOpen(false);
                 onAddFieldAfterElement();
-            }, glyph: react_1.default.createElement(leafygreen_1.Icon, { glyph: "PlusWithCircle" }), className: menuItem },
+            }, glyph: react_1.default.createElement(leafygreen_2.Icon, { glyph: "PlusWithCircle" }), className: menuItem },
             react_1.default.createElement("div", null,
                 "Add ",
                 parentType === 'Array' ? 'item' : 'field',
@@ -122,4 +123,3 @@ const AddFieldActions = ({ editing, type, parentType, keyName, onAddFieldToEleme
                 react_1.default.createElement("b", null, keyName)))));
 };
 exports.AddFieldActions = AddFieldActions;
-//# sourceMappingURL=element-actions.js.map

package/dist/components/document-list/element-editors.d.ts

@@ -13,7 +13,7 @@ export declare const KeyEditor: React.FunctionComponent<{
 export declare const ValueEditor: React.FunctionComponent<{
     editing?: boolean;
     onEditStart(): void;
-    type: string;
+    type: keyof TypeCastMap;
     value: string;
     valid: boolean;
     validationMessage: string | null;

package/dist/components/document-list/element-editors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element-editors.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/element-editors.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAkDvD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,IAAI,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAmFA,CAAC;AAwCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,IAAI,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,aAAa,EAAE,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB,CA6KA,CAAC;AA8CF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAmDA,CAAC"}
+{"version":3,"file":"element-editors.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/element-editors.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA8CvD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,IAAI,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CA6EA,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,IAAI,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,WAAW,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,aAAa,EAAE,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB,CA0EA,CAAC;AA8CF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAkDA,CAAC"}