@mongodb-js/compass-components 1.67.1 → 1.69.0

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

@@ -32,58 +32,50 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TypeEditor = exports.ValueEditor = exports.KeyEditor = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const hadron_type_checker_1 = __importStar(require("hadron-type-checker"));
 const emotion_1 = require("@leafygreen-ui/emotion");
 const palette_1 = require("@leafygreen-ui/palette");
 const tokens_1 = require("@leafygreen-ui/tokens");
-const bson_value_1 = __importStar(require("../bson-value"));
+const bson_value_1 = __importDefault(require("../bson-value"));
 const merge_props_1 = require("../../utils/merge-props");
-const typography_1 = require("./typography");
 const leafygreen_1 = require("../leafygreen");
 const use_theme_1 = require("../../hooks/use-theme");
+const shared_1 = require("./editors/shared");
+const date_editor_1 = require("./editors/date-editor");
+const default_editor_1 = require("./editors/default-editor");
+const text_editor_1 = require("./editors/text-editor");
+const uuid_editor_1 = require("./editors/uuid-editor");
 const maxWidth = (0, emotion_1.css)({
     maxWidth: '100%',
     overflowX: 'hidden',
     textOverflow: 'ellipsis',
 });
-const editorReset = (0, emotion_1.css)({
-    padding: 0,
-    margin: 0,
-    border: 'none',
-    boxShadow: 'none',
-    outline: 'none',
-    backgroundColor: 'transparent',
+// Sizes the input to its content by overlaying it on a hidden copy of the text,
+// so that the key occupies the same width when viewing and when editing.
+const keyEditorSizer = (0, emotion_1.css)({
+    display: 'inline-grid',
     maxWidth: '100%',
-});
-const editorOutline = (0, emotion_1.css)({
-    '&:focus, &:active': {
-        borderRadius: `2px`,
-        boxShadow: `0 0 0 2px ${palette_1.palette.blue.light1}`,
+    verticalAlign: 'bottom',
+    '&::after': {
+        content: 'attr(data-value)',
+        visibility: 'hidden',
+        whiteSpace: 'pre',
     },
-});
-const editorInvalid = (0, emotion_1.css)({
-    '&:focus, &:active': {
-        boxShadow: `0 0 0 2px ${palette_1.palette.red.dark2}`,
+    '&::after, & > input': {
+        gridArea: '1 / 1',
+        font: 'inherit',
+        width: '100%',
+        minWidth: 0,
     },
 });
-const editorInvalidLightMode = (0, emotion_1.css)({
-    backgroundColor: palette_1.palette.red.light2,
-    color: palette_1.palette.red.dark2,
-});
-const editorInvalidDarkMode = (0, emotion_1.css)({
-    backgroundColor: palette_1.palette.red.dark2,
-    color: palette_1.palette.red.light2,
-});
 const KeyEditor = ({ editing, value, valid, validationMessage, onChange, autoFocus, onEditStart, }) => {
     const darkMode = (0, use_theme_1.useDarkMode)();
-    // On Safari if a text is 5 mono-characters wide and is supposed to overflow /
-    // get ellipse'd only when shorter than that, it would still overflow and get
-    // ellipse'd under normal conditions, for unknown reasons. For that, we add a
-    // small amount to the width to tackle this issue.
-    const width = `${Math.max(value.length, 1)}.5ch`;
     return (react_1.default.createElement(react_1.default.Fragment, null, editing ? (react_1.default.createElement(leafygreen_1.Tooltip, { darkMode: true, enabled: !valid, trigger: ({ className, children, 
         // Having a tooltip connected to the input elements is not the most
         // accessible thing ever and so a lot of event listeners of the
@@ -93,124 +85,48 @@ const KeyEditor = ({ editing, value, valid, validationMessage, onChange, autoFoc
         // for our case
         onDragStart, onPointerUp, onPointerDown, onMouseDown, ...triggerProps }) => {
             return (react_1.default.createElement("div", { className: className },
-                react_1.default.createElement("input", { type: "text", "data-testid": "hadron-document-key-editor", value: value, onChange: (evt) => {
-                        onChange(evt.currentTarget.value);
-                    }, 
-                    // See ./element.tsx
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus: autoFocus, className: (0, emotion_1.cx)(maxWidth, editorReset, editorOutline, !valid && editorInvalid, !valid &&
-                        (darkMode
-                            ? editorInvalidDarkMode
-                            : editorInvalidLightMode)), style: { width }, spellCheck: "false", ...triggerProps }),
+                react_1.default.createElement("span", { className: keyEditorSizer, "data-value": value },
+                    react_1.default.createElement("input", { type: "text", size: 1, "data-testid": "hadron-document-key-editor", value: value, onChange: (evt) => {
+                            onChange(evt.currentTarget.value);
+                        }, 
+                        // See ./element.tsx
+                        // eslint-disable-next-line jsx-a11y/no-autofocus
+                        autoFocus: autoFocus, className: (0, emotion_1.cx)(maxWidth, shared_1.editorStyles, !valid && shared_1.editorInvalidStyles, !valid &&
+                            (darkMode
+                                ? shared_1.editorInvalidDarkModeStyles
+                                : shared_1.editorInvalidLightModeStyles)), spellCheck: "false", ...triggerProps })),
                 children));
-        } }, validationMessage)) : (
-    // Double-click is not accessible so no reason for this to be a button
-    react_1.default.createElement("div", { "data-testid": "hadron-document-clickable-key", onDoubleClick: onEditStart, className: maxWidth, style: { width } }, value))));
+        } }, validationMessage)) : (react_1.default.createElement("span", { "data-testid": "hadron-document-clickable-key", onDoubleClick: onEditStart }, value))));
 };
 exports.KeyEditor = KeyEditor;
-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',
-});
-// UUID editor container that shows: UUID(" <input> ")
-const uuidEditorContainer = (0, emotion_1.css)({
-    display: 'inline-flex',
-    alignItems: 'center',
-    maxWidth: '100%',
-});
-const uuidEditorInput = (0, emotion_1.css)({
-    display: 'inline-block',
-    whiteSpace: 'nowrap',
-    verticalAlign: 'top',
-    color: 'inherit',
-});
-const uuidEditorLabel = (0, emotion_1.css)({
-    userSelect: 'none',
-    whiteSpace: 'nowrap',
-});
 const ValueEditor = ({ editing, onEditStart, type, value, valid, validationMessage, originalValue, autoFocus, onChange, onFocus, onBlur, }) => {
-    const val = String(value);
-    const darkMode = (0, use_theme_1.useDarkMode)();
-    const inputStyle = (0, react_1.useMemo)(() => {
-        if (type === 'String') {
-            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 };
-        }
-        return { width: `${Math.max(val.length, 1)}ch` };
-    }, [val, type]);
-    const uuidInputStyle = (0, react_1.useMemo)(() => {
-        // UUID format is 36 characters (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)
-        return { width: `${Math.max(val.length, 36)}ch` };
-    }, [val]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, editing ? (react_1.default.createElement(leafygreen_1.Tooltip, { darkMode: true, enabled: !valid, trigger: ({ className, children, 
+    if (!editing) {
+        // Double-click is not accessible so no reason for this to be a button,
+        // users won't be able to interact with it anyway
+        return (react_1.default.createElement("span", { "data-testid": "hadron-document-clickable-value", onDoubleClick: onEditStart },
+            react_1.default.createElement(bson_value_1.default, { type: type, value: originalValue })));
+    }
+    const sharedProps = {
+        autoFocus,
+        value: String(value),
+        valid,
+        onChange,
+        onBlur,
+    };
+    return (react_1.default.createElement(leafygreen_1.Tooltip, { darkMode: true, enabled: !valid, trigger: ({ className, children, 
         // See above
         onDragStart, onPointerUp, onPointerDown, onMouseDown, ...triggerProps }) => {
             // NB: Order is important, if triggerProps has onFocus / onBlur we
             // want to merge them with ours, if they are not passed, we want our
             // listeners to overwrite undefined keys
-            const mergedProps = (0, merge_props_1.mergeProps)(triggerProps, { onBlur, onFocus });
+            const mergedProps = (0, merge_props_1.mergeProps)(triggerProps, {
+                onBlur,
+                onFocus,
+            });
             return (react_1.default.createElement("div", { className: className },
-                type === 'String' ? (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);
-                        }, 
-                        // See ./element.tsx
-                        // eslint-disable-next-line jsx-a11y/no-autofocus
-                        autoFocus: autoFocus, className: (0, emotion_1.cx)(editorReset, editorOutline, editorTextarea, !valid && editorInvalid), spellCheck: "false", style: inputStyle, ...mergedProps }))) : (0, hadron_type_checker_1.isUUIDType)(type) ? (react_1.default.createElement("div", { className: uuidEditorContainer },
-                    react_1.default.createElement("span", { className: uuidEditorLabel },
-                        type,
-                        "('"),
-                    react_1.default.createElement("input", { type: "text", "data-testid": "hadron-document-value-editor", value: val, placeholder: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", onChange: (evt) => {
-                            onChange(evt.currentTarget.value);
-                        }, 
-                        // See ./element.tsx
-                        // eslint-disable-next-line jsx-a11y/no-autofocus
-                        autoFocus: autoFocus, className: (0, emotion_1.cx)(editorReset, editorOutline, uuidEditorInput, !valid && editorInvalid, !valid &&
-                            (darkMode
-                                ? editorInvalidDarkMode
-                                : editorInvalidLightMode)), spellCheck: "false", style: uuidInputStyle, ...mergedProps }),
-                    react_1.default.createElement("span", { className: uuidEditorLabel }, "')"))) : (react_1.default.createElement("input", { type: "text", "data-testid": "hadron-document-value-editor", value: val, onChange: (evt) => {
-                        onChange(evt.currentTarget.value);
-                    }, 
-                    // See ./element.tsx
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus: autoFocus, className: (0, emotion_1.cx)(editorReset, editorOutline, !valid && editorInvalid, !valid &&
-                        (darkMode
-                            ? editorInvalidDarkMode
-                            : editorInvalidLightMode)), style: inputStyle, spellCheck: "false", ...mergedProps })),
+                type === 'String' ? (react_1.default.createElement(text_editor_1.TextEditor, { ...mergedProps, ...sharedProps })) : type === 'Date' ? (react_1.default.createElement(date_editor_1.DateEditor, { ...sharedProps, ...mergedProps, type: type })) : (0, hadron_type_checker_1.isUUIDType)(type) ? (react_1.default.createElement(uuid_editor_1.UUIDEditor, { ...sharedProps, ...mergedProps, type: type })) : (react_1.default.createElement(default_editor_1.DefaultEditor, { ...sharedProps, ...mergedProps, type: type })),
                 children));
-        } }, validationMessage)) : (
-    // Double-click is not accessible so no reason for this to be a button,
-    // users won't be able to interact with it anyway
-    react_1.default.createElement("div", { "data-testid": "hadron-document-clickable-value", onDoubleClick: onEditStart },
-        react_1.default.createElement(bson_value_1.default, { type: type, value: originalValue })))));
+        } }, validationMessage));
 };
 exports.ValueEditor = ValueEditor;
 const TYPES = hadron_type_checker_1.default.castableTypes(true);
@@ -257,7 +173,7 @@ const TypeEditor = ({ editing, autoFocus, type, onChange, visuallyActive }) => {
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus: autoFocus, onChange: (evt) => {
                 onChange(evt.currentTarget.value);
-            }, className: (0, emotion_1.cx)(editorReset, editorOutline, typeEditor, visuallyActive && typeEditorActive), onClick: (e) => {
+            }, className: (0, emotion_1.cx)(shared_1.editorStyles, typeEditor, visuallyActive && typeEditorActive), onClick: (e) => {
                 e.stopPropagation();
             } }, TYPES.map((type) => {
             return (react_1.default.createElement("option", { key: type, value: type, className: darkMode ? typeEditorOptionDark : typeEditorOptionLight }, type));
@@ -265,4 +181,3 @@ const TypeEditor = ({ editing, autoFocus, type, onChange, visuallyActive }) => {
         react_1.default.createElement(leafygreen_1.Icon, { glyph: "ChevronDown", size: "xsmall", className: typeEditorChevron })))));
 };
 exports.TypeEditor = TypeEditor;
-//# sourceMappingURL=element-editors.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAEV,OAAO,IAAI,iBAAiB,EAC7B,MAAM,iBAAiB,CAAC;AAiWzB,eAAO,MAAM,6BAA6B,GAAI,mEAK3C;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB,EAAE,OAAO,CAAC;IACnC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC,WAeA,CAAC;AAYF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GACrC,SAAS,iBAAiB,KACzB,MAcF,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClD,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IACpE,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC,CAyZA,CAAC"}
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAEV,OAAO,IAAI,iBAAiB,EAC7B,MAAM,iBAAiB,CAAC;AAiazB,eAAO,MAAM,6BAA6B,GAAI,mEAK3C;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB,EAAE,OAAO,CAAC;IACnC,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC,WAeA,CAAC;AAYF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GACrC,SAAS,iBAAiB,KACzB,MAcF,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClD,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IACpE,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC,CAqaA,CAAC"}

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

@@ -40,6 +40,7 @@ exports.HadronElement = exports.getNestedKeyPathForElement = exports.calculateSh
 const react_1 = __importStar(require("react"));
 const hadron_document_1 = require("hadron-document");
 const bson_value_1 = __importDefault(require("../bson-value"));
+const bson_utils_1 = require("./bson-utils");
 const tokens_1 = require("@leafygreen-ui/tokens");
 const element_editors_1 = require("./element-editors");
 const element_actions_1 = require("./element-actions");
@@ -53,7 +54,7 @@ const visible_field_toggle_1 = __importDefault(require("./visible-field-toggle")
 const mongodb_query_util_1 = require("mongodb-query-util");
 const context_menu_1 = require("../context-menu");
 const use_sync_state_on_prop_change_1 = require("../../hooks/use-sync-state-on-prop-change");
-const legacy_uuid_format_context_1 = require("./legacy-uuid-format-context");
+const bson_display_options_context_1 = require("./bson-display-options-context");
 function useElementEditor(el, displayType) {
     return (0, react_1.useMemo)(() => {
         const Editor = (0, hadron_document_1.getEditorByType)(displayType);
@@ -62,8 +63,8 @@ function useElementEditor(el, displayType) {
 }
 function useHadronElement(el) {
     const forceUpdate = (0, use_force_update_1.useForceUpdate)();
-    const legacyUUIDEncoding = (0, legacy_uuid_format_context_1.useLegacyUUIDDisplayContext)();
-    const displayType = (0, hadron_document_1.getDisplayType)(el, legacyUUIDEncoding);
+    const { legacyUUIDDisplayEncoding } = (0, bson_display_options_context_1.useBSONDisplayOptions)();
+    const displayType = (0, hadron_document_1.getDisplayType)(el, legacyUUIDDisplayEncoding);
     const editor = useElementEditor(el, displayType);
     // NB: Duplicate key state is kept local to the component and not derived on
     // every change so that only the changed key is highlighed as duplicate
@@ -114,6 +115,14 @@ function useHadronElement(el) {
         };
     }, [el, onElementChanged, onElementAddedOrRemoved, onElementReverted]);
     const isValid = el.isCurrentTypeValid();
+    const originalValue = el.currentType === 'Array'
+        ? [...(el.elements || [])]
+        : el.currentType === 'Object'
+            ? Object.fromEntries(Array.from(el.elements || []).map((e) => [
+                e.currentKey,
+                e.currentValue,
+            ]))
+            : el.currentValue;
     return {
         id: el.uuid,
         key: {
@@ -133,7 +142,7 @@ function useHadronElement(el) {
         },
         value: {
             value: editor.value(),
-            originalValue: el.currentType === 'Array' ? [...(el.elements || [])] : el.currentValue,
+            originalValue,
             change(newVal) {
                 editor.edit(newVal);
             },
@@ -159,6 +168,7 @@ function useHadronElement(el) {
         visibleChildren: el.getVisibleElements(),
         level: el.level,
         parentType: el.parent?.currentType,
+        modified: el.isModified(),
         removed: el.isRemoved(),
         internal: el.isInternalField(),
         expanded: el.expanded,
@@ -204,6 +214,7 @@ const elementRemovedLightMode = (0, emotion_1.css)({
         backgroundColor: palette_1.palette.red.light2,
     },
 });
+const elementModifiedLightMode = elementInvalidLightMode;
 const elementInvalidDarkMode = (0, emotion_1.css)({
     backgroundColor: palette_1.palette.yellow.dark3,
     '&:hover': {
@@ -216,16 +227,19 @@ const elementRemovedDarkMode = (0, emotion_1.css)({
         backgroundColor: palette_1.palette.red.dark2,
     },
 });
+const elementModifiedDarkMode = elementInvalidDarkMode;
 const elementActions = (0, emotion_1.css)({
     flex: 'none',
     width: tokens_1.spacing[300],
     position: 'relative',
+    userSelect: 'none',
 });
 const elementLineNumber = (0, emotion_1.css)({
     flex: 'none',
     position: 'relative',
     marginLeft: tokens_1.spacing[100],
     boxSizing: 'content-box',
+    userSelect: 'none',
 });
 const addFieldActionsContainer = (0, emotion_1.css)({
     position: 'absolute',
@@ -270,22 +284,37 @@ const lineNumberRemovedDarkMode = (0, emotion_1.css)({
 });
 const elementSpacer = (0, emotion_1.css)({
     flex: 'none',
+    userSelect: 'none',
 });
 const elementExpand = (0, emotion_1.css)({
     width: tokens_1.spacing[400],
     flex: 'none',
     display: 'flex',
     alignItems: 'center',
+    userSelect: 'none',
 });
 const elementKey = (0, emotion_1.css)({
     flex: 'none',
     fontWeight: 'bold',
+    minWidth: '1em',
     maxWidth: '60%',
 });
+const elementKeyInline = (0, emotion_1.css)({
+    // Inline-block to keep the key's own max width and ellipsis, aligned to the
+    // bottom for the box's baseline.
+    display: 'inline-block',
+    verticalAlign: 'bottom',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+});
 const elementKeyInternal = (0, emotion_1.css)({
     color: palette_1.palette.gray.base,
 });
 const elementDivider = (0, emotion_1.css)({
+    flex: 'none',
+    display: 'inline',
+});
+const elementDecryptedIcon = (0, emotion_1.css)({
     flex: 'none',
     userSelect: 'none',
 });
@@ -293,10 +322,27 @@ const elementValue = (0, emotion_1.css)({
     flex: 1,
     minWidth: 0,
     maxWidth: '100%',
+    display: 'inline',
+});
+const elementContent = (0, emotion_1.css)({
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+});
+// When not editing we want the key and value inline for copy-ability.
+const elementContentInline = (0, emotion_1.css)({
+    display: 'block',
+    flex: 1,
+    minWidth: 0,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    [bson_utils_1.bsonValueDisplayVar]: 'inline',
 });
 const elementType = (0, emotion_1.css)({
     flex: 'none',
     marginLeft: tokens_1.spacing[100],
+    userSelect: 'none',
 });
 const actions = (0, emotion_1.css)({
     display: 'none',
@@ -311,6 +357,15 @@ const actionsVisible = (0, emotion_1.css)({
     '[data-document-element="true"]:hover &, [data-document-element="true"]:focus-within &': {
         display: 'block',
     },
+    // Keep the actions visible while a menu opened from them is expanded. The
+    // add-field menu's trigger sets `aria-expanded="true"` while open; otherwise
+    // the gutter is hidden as soon as the row loses `:hover` (and the menu's focus
+    // is not `:focus-within` the row), which collapses the trigger to 0x0 and
+    // makes leafygreen's popover positioning lose its reference — throwing the
+    // open menu offscreen so clicks on its items miss.
+    '&:has([aria-expanded="true"])': {
+        display: 'block',
+    },
 });
 const lineNumberCountHidden = (0, emotion_1.css)({
     // See above
@@ -368,7 +423,7 @@ exports.getNestedKeyPathForElement = getNestedKeyPathForElement;
 const HadronElement = ({ value: element, editable, editingEnabled, onEditStart, lineNumberSize, onAddElement, extraGutterWidth = 0, onUpdateQuery, query, }) => {
     const darkMode = (0, use_theme_1.useDarkMode)();
     const autoFocus = (0, auto_focus_context_1.useAutoFocusContext)();
-    const { id, key, value, type, revert, remove, expandable, children, visibleChildren, level, parentType, removed, internal, expanded, expand, collapse, } = useHadronElement(element);
+    const { id, key, value, type, revert, remove, expandable, children, visibleChildren, level, parentType, modified, removed, internal, expanded, expand, collapse, } = useHadronElement(element);
     // Function to check if a field is in the query
     // TODO: COMPASS-9541 Improve the functionality when checking for nested objects.
     const isFieldInQuery = (0, react_1.useCallback)((field, fieldValue) => {
@@ -389,10 +444,16 @@ const HadronElement = ({ value: element, editable, editingEnabled, onEditStart,
                         },
                     }
                     : undefined,
+                {
+                    label: 'Copy value',
+                    onAction: () => {
+                        void navigator.clipboard.writeText(element.toShellSyntax());
+                    },
+                },
                 {
                     label: 'Copy field & value',
                     onAction: () => {
-                        void navigator.clipboard.writeText(`${key.value}: ${element.toEJSON()}`);
+                        void navigator.clipboard.writeText(`${key.value}: ${element.toShellSyntax()}`);
                     },
                 },
                 type.value === 'String' && isValidUrl(value.value)
@@ -449,11 +510,13 @@ const HadronElement = ({ value: element, editable, editingEnabled, onEditStart,
         : elementInvalidLightMode;
     const elementProps = {
         ref: fieldContextMenuRef,
-        className: (0, emotion_1.cx)(hadronElement, darkMode ? hadronElementDarkMode : hadronElementLightMode, removed ? elementRemoved : editingEnabled && !isValid && elementInvalid),
+        className: (0, emotion_1.cx)(hadronElement, darkMode ? hadronElementDarkMode : hadronElementLightMode, modified &&
+            !expanded &&
+            (darkMode ? elementModifiedDarkMode : elementModifiedLightMode), removed ? elementRemoved : editingEnabled && !isValid && elementInvalid),
         onClick: toggleExpanded,
     };
     const keyProps = {
-        className: (0, emotion_1.cx)(elementKey, internal && elementKeyInternal, darkMode && elementKeyDarkMode),
+        className: (0, emotion_1.cx)(elementKey, !editingEnabled && elementKeyInline, internal && elementKeyInternal, darkMode && elementKeyDarkMode),
     };
     const lineNumberRemoved = darkMode
         ? lineNumberRemovedDarkMode
@@ -491,38 +554,39 @@ const HadronElement = ({ value: element, editable, editingEnabled, onEditStart,
                     toggleExpanded();
                 } },
                 react_1.default.createElement(leafygreen_1.Icon, { size: "xsmall", glyph: expanded ? 'CaretDown' : 'CaretRight' })))),
-            react_1.default.createElement("div", { ...keyProps, "data-testid": "hadron-document-element-key" }, key.editable ? (react_1.default.createElement(element_editors_1.KeyEditor, { value: key.value, valid: key.valid, validationMessage: key.validationMessage, onChange: (newVal) => {
-                    key.change(newVal);
-                }, 
-                // This autofocus will only trigger after user deliberately
-                // double-clicked on a field and so auto focusing the input is
-                // expected in this case
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus?.id === id && autoFocus?.type === 'key', editing: editingEnabled, onEditStart: () => {
-                    onEditStart?.(element.uuid, 'key');
-                } })) : (react_1.default.createElement("span", null, key.value))),
-            react_1.default.createElement("div", { className: elementDivider, role: "presentation" }, ":\u00A0"),
-            react_1.default.createElement("div", { className: elementDivider, role: "presentation" }, value.decrypted && (react_1.default.createElement("span", { "data-testid": "hadron-document-element-decrypted-icon", title: "Encrypted Field" },
-                react_1.default.createElement(leafygreen_1.Icon, { glyph: "Key", size: "small" })))),
-            react_1.default.createElement("div", { className: elementValue, "data-testid": "hadron-document-element-value" }, value.editable ? (react_1.default.createElement(element_editors_1.ValueEditor, { type: type.value, originalValue: value.originalValue, value: value.value, valid: value.valid, validationMessage: value.validationMessage, onChange: (newVal) => {
-                    value.change(newVal);
-                }, 
-                // See above
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus?.id === id && autoFocus?.type === 'value', editing: editingEnabled, onEditStart: () => {
-                    onEditStart?.(element.uuid, 'value');
-                }, onFocus: () => {
-                    value.startEdit();
-                }, onBlur: () => {
-                    value.completeEdit();
-                } })) : (react_1.default.createElement("div", { "data-testid": editable && !editingEnabled
-                    ? 'hadron-document-clickable-value'
-                    : undefined, onDoubleClick: () => {
-                    if (editable && !editingEnabled) {
-                        onEditStart?.(element.uuid, 'type');
-                    }
-                } },
-                react_1.default.createElement(bson_value_1.default, { type: type.value, value: value.originalValue })))),
+            react_1.default.createElement("div", { className: editingEnabled ? elementContent : elementContentInline },
+                react_1.default.createElement("div", { ...keyProps, "data-testid": "hadron-document-element-key" }, key.editable ? (react_1.default.createElement(element_editors_1.KeyEditor, { value: key.value, valid: key.valid, validationMessage: key.validationMessage, onChange: (newVal) => {
+                        key.change(newVal);
+                    }, 
+                    // This autofocus will only trigger after user deliberately
+                    // double-clicked on a field and so auto focusing the input is
+                    // expected in this case
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus?.id === id && autoFocus?.type === 'key', editing: editingEnabled, onEditStart: () => {
+                        onEditStart?.(element.uuid, 'key');
+                    } })) : (react_1.default.createElement("span", null, key.value))),
+                react_1.default.createElement("div", { className: elementDivider, role: "presentation" }, ":\u00A0"),
+                value.decrypted && (react_1.default.createElement("span", { className: elementDecryptedIcon, "data-testid": "hadron-document-element-decrypted-icon", title: "Encrypted Field" },
+                    react_1.default.createElement(leafygreen_1.Icon, { glyph: "Key", size: "small" }))),
+                react_1.default.createElement("div", { className: elementValue, "data-testid": "hadron-document-element-value" }, value.editable ? (react_1.default.createElement(element_editors_1.ValueEditor, { type: type.value, originalValue: value.originalValue, value: value.value, valid: value.valid, validationMessage: value.validationMessage, onChange: (newVal) => {
+                        value.change(newVal);
+                    }, 
+                    // See above
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: autoFocus?.id === id && autoFocus?.type === 'value', editing: editingEnabled, onEditStart: () => {
+                        onEditStart?.(element.uuid, 'value');
+                    }, onFocus: () => {
+                        value.startEdit();
+                    }, onBlur: () => {
+                        value.completeEdit();
+                    } })) : (react_1.default.createElement("span", { "data-testid": editable && !editingEnabled
+                        ? 'hadron-document-clickable-value'
+                        : undefined, onDoubleClick: () => {
+                        if (editable && !editingEnabled) {
+                            onEditStart?.(element.uuid, 'type');
+                        }
+                    } },
+                    react_1.default.createElement(bson_value_1.default, { type: type.value, value: value.originalValue }))))),
             editable && (react_1.default.createElement("div", { className: elementType, "data-testid": "hadron-document-element-type" },
                 react_1.default.createElement(element_editors_1.TypeEditor, { editing: editingEnabled, type: type.value, 
                     // See above
@@ -551,4 +615,3 @@ const HadronElement = ({ value: element, editable, editingEnabled, onEditStart,
                 step: editingEnabled ? hadron_document_1.DEFAULT_VISIBLE_ELEMENTS : 1000, onSizeChange: handleVisibleElementsChanged, style: nestedElementsVisibilityToggleOffsetStyle })))));
 };
 exports.HadronElement = HadronElement;
-//# sourceMappingURL=element.js.map

package/dist/components/document-list/index.d.ts

@@ -2,5 +2,5 @@ export { default as DocumentActionsGroup } from './document-actions-group';
 export { default as VisibleFieldsToggle } from './visible-field-toggle';
 export { default as Document } from './document';
 export { default as DocumentEditActionsFooter } from './document-edit-actions-footer';
-export { LegacyUUIDDisplayContext, type LegacyUUIDDisplay, } from './legacy-uuid-format-context';
+export { BSONDisplayOptionsProvider, useBSONDisplayOptions, type BSONDisplayOptions, type LegacyUUIDDisplay, } from './bson-display-options-context';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/document-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,EACL,wBAAwB,EACxB,KAAK,iBAAiB,GACvB,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AACtF,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,EACrB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,gCAAgC,CAAC"}

package/dist/components/document-list/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LegacyUUIDDisplayContext = exports.DocumentEditActionsFooter = exports.Document = exports.VisibleFieldsToggle = exports.DocumentActionsGroup = void 0;
+exports.useBSONDisplayOptions = exports.BSONDisplayOptionsProvider = exports.DocumentEditActionsFooter = exports.Document = exports.VisibleFieldsToggle = exports.DocumentActionsGroup = void 0;
 var document_actions_group_1 = require("./document-actions-group");
 Object.defineProperty(exports, "DocumentActionsGroup", { enumerable: true, get: function () { return __importDefault(document_actions_group_1).default; } });
 var visible_field_toggle_1 = require("./visible-field-toggle");
@@ -12,6 +12,6 @@ var document_1 = require("./document");
 Object.defineProperty(exports, "Document", { enumerable: true, get: function () { return __importDefault(document_1).default; } });
 var document_edit_actions_footer_1 = require("./document-edit-actions-footer");
 Object.defineProperty(exports, "DocumentEditActionsFooter", { enumerable: true, get: function () { return __importDefault(document_edit_actions_footer_1).default; } });
-var legacy_uuid_format_context_1 = require("./legacy-uuid-format-context");
-Object.defineProperty(exports, "LegacyUUIDDisplayContext", { enumerable: true, get: function () { return legacy_uuid_format_context_1.LegacyUUIDDisplayContext; } });
-//# sourceMappingURL=index.js.map
+var bson_display_options_context_1 = require("./bson-display-options-context");
+Object.defineProperty(exports, "BSONDisplayOptionsProvider", { enumerable: true, get: function () { return bson_display_options_context_1.BSONDisplayOptionsProvider; } });
+Object.defineProperty(exports, "useBSONDisplayOptions", { enumerable: true, get: function () { return bson_display_options_context_1.useBSONDisplayOptions; } });

package/dist/components/document-list/typography.js

@@ -7,4 +7,3 @@ exports.documentTypography = {
     fontSize: 12,
     lineHeight: 16,
 };
-//# sourceMappingURL=typography.js.map

package/dist/components/document-list/use-force-update.js

@@ -9,4 +9,3 @@ function useForceUpdate() {
     }, []);
     return forceUpdate;
 }
-//# sourceMappingURL=use-force-update.js.map

package/dist/components/document-list/visible-field-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visible-field-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/visible-field-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AA0BpD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC,CA4EA,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"visible-field-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/visible-field-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AA4BpD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC,CA4EA,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/document-list/visible-field-toggle.js

@@ -42,6 +42,8 @@ const container = (0, emotion_1.css)({
     display: 'flex',
     gap: tokens_1.spacing[200],
     paddingTop: tokens_1.spacing[200],
+    // Not a part of the document, keep it out of selectable/copied text.
+    userSelect: 'none',
 });
 const linkButtonStyles = (0, emotion_1.css)({
     border: 'none',
@@ -89,4 +91,3 @@ const VisibleFieldsToggle = ({ showHideButton = true, buttonClassName, parentFie
             hideButtonText))));
 };
 exports.default = VisibleFieldsToggle;
-//# sourceMappingURL=visible-field-toggle.js.map