@mongodb-js/compass-components 1.68.0 → 1.69.0

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-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"}

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,119 +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)) : (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)) : (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);
@@ -252,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));

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;AAqXzB,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"}