@mongodb-js/compass-components 1.68.0 → 1.70.0

package/dist/components/document-list/date-time-picker.js

@@ -0,0 +1,112 @@
+"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.DateTimePicker = DateTimePicker;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const leafygreen_1 = require("../leafygreen");
+const use_theme_1 = require("../../hooks/use-theme");
+const format_date_1 = require("../../utils/format-date");
+const containerStyles = (0, emotion_1.css)({
+    display: 'flex',
+    alignItems: 'center',
+});
+const buttonStyles = (0, emotion_1.css)({
+    display: 'flex',
+    alignItems: 'center',
+    padding: 0,
+    margin: 0,
+    border: 'none',
+    background: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+});
+// We are not showing the native input at all. This is mainly due to how its
+// rendered in Safari. For Chrome/Firefox, we can hide the input and only show
+// the picker icon, but that's not possible in Safari. So we hide everything
+// and use our custom button to open the picker.
+const dateTimePickerInput = (0, emotion_1.css)({
+    colorScheme: 'light',
+    width: 0,
+    padding: 0,
+    border: 'none',
+    boxShadow: 'none',
+    outline: 'none',
+    '&::-webkit-calendar-picker-indicator': {
+        display: 'none',
+    },
+});
+const dateTimePickerInputDarkMode = (0, emotion_1.css)({
+    // This is the only bit we can customize in the native picker popup.
+    colorScheme: 'dark',
+});
+function DateTimePicker({ value, onChange, }) {
+    const pickerInputRef = (0, react_1.useRef)(null);
+    const darkMode = (0, use_theme_1.useDarkMode)();
+    const pickerDateTime = (0, format_date_1.convertToPickerDateTime)(value);
+    // On Firefox, when we clear the input value using `Clear` option from the
+    // picker, the input value is set to empty string. And then on following
+    // change in value, input.onChange is not called. So just before opening
+    // the picker, if the (datetime) value is empty, we set the this value to
+    // current date time so that the picker change is picked up.
+    const [seededDateTime, setSeededDateTime] = (0, react_1.useState)(null);
+    const openPicker = (0, react_1.useCallback)(() => {
+        const input = pickerInputRef.current;
+        if (!input) {
+            return;
+        }
+        if (!pickerDateTime) {
+            setSeededDateTime((0, format_date_1.convertToPickerDateTime)(new Date().toString()));
+        }
+        input.focus();
+        input.showPicker();
+    }, [pickerDateTime]);
+    return (react_1.default.createElement("span", { className: containerStyles },
+        react_1.default.createElement("button", { type: "button", "aria-label": "Select date and time", "data-testid": "hadron-document-date-picker-button", 
+            // The picker is only reachable by clicking its button, so that tabbing
+            // keeps moving between the editors.
+            tabIndex: -1, className: buttonStyles, onClick: openPicker },
+            react_1.default.createElement(leafygreen_1.Icon, { glyph: "Calendar", size: "small" })),
+        react_1.default.createElement("input", { ref: pickerInputRef, type: "datetime-local", 
+            // Milliseconds precision, matching BSON dates. On chromium, this is the
+            // way to show milliseconds in the picker panel. On Firefox and Safari,
+            // time picker UI is not available at all.
+            step: "0.001", "data-testid": "hadron-document-date-picker", value: pickerDateTime || seededDateTime || '', tabIndex: -1, onBlur: () => {
+                setSeededDateTime(null);
+            }, onChange: (evt) => {
+                setSeededDateTime(null);
+                onChange((0, format_date_1.convertFromPickerDateTime)(evt.currentTarget.value));
+            }, className: (0, emotion_1.cx)(dateTimePickerInput, darkMode && dateTimePickerInputDarkMode) })));
+}

package/dist/components/document-list/date-with-timezone-hint.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Exported for tests only.
+ * @internal
+ */
+export declare function formatDateWithTimezone(value: Date | number | string, timezone?: string, locale?: string): string;
+export declare function DateWithTimezoneHint({ value, children, }: {
+    value: Date | number | string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=date-with-timezone-hint.d.ts.map

package/dist/components/document-list/date-with-timezone-hint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-with-timezone-hint.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/date-with-timezone-hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAgBvC;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC7B,QAAQ,SAAQ,EAChB,MAAM,CAAC,EAAE,MAAM,GACd,MAAM,CAiBR;AAkBD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAkBA"}

package/dist/components/document-list/date-with-timezone-hint.js

@@ -0,0 +1,95 @@
+"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.formatDateWithTimezone = formatDateWithTimezone;
+exports.DateWithTimezoneHint = DateWithTimezoneHint;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const inline_definition_1 = require("../inline-definition");
+const bson_display_options_context_1 = require("./bson-display-options-context");
+const bson_utils_1 = require("./bson-utils");
+function isValidTimezone(timezone) {
+    try {
+        new Intl.DateTimeFormat('en-US', { timeZone: timezone });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Exported for tests only.
+ * @internal
+ */
+function formatDateWithTimezone(value, timezone = 'UTC', locale) {
+    const date = value instanceof Date ? value : new Date(value);
+    if (isNaN(date.valueOf())) {
+        return 'Invalid Date';
+    }
+    const timeZone = isValidTimezone(timezone) ? timezone : 'UTC';
+    try {
+        return new Intl.DateTimeFormat(locale, {
+            timeZone,
+            dateStyle: 'long',
+            timeStyle: 'long',
+        }).format(date);
+    }
+    catch {
+        return 'Invalid Date';
+    }
+}
+// Inline styles to make things more easily copy-pasteable.
+const containerStyles = (0, emotion_1.css)({
+    display: 'inline',
+    whiteSpace: 'normal',
+    [bson_utils_1.bsonValueDisplayVar]: 'inline',
+});
+const valueStyles = (0, emotion_1.css)({
+    display: 'inline',
+    paddingRight: '8px',
+});
+const dateWithTimezoneHintStyles = (0, emotion_1.css)({
+    userSelect: 'none',
+});
+function DateWithTimezoneHint({ value, children, }) {
+    const { timezone } = (0, bson_display_options_context_1.useBSONDisplayOptions)();
+    const timezoneFormattedValue = (0, react_1.useMemo)(() => {
+        return formatDateWithTimezone(value, timezone);
+    }, [value, timezone]);
+    return (react_1.default.createElement("span", { className: containerStyles },
+        react_1.default.createElement("span", { className: valueStyles }, children),
+        react_1.default.createElement("wbr", null),
+        react_1.default.createElement(inline_definition_1.InlineDefinition, { className: dateWithTimezoneHintStyles, "data-testid": "date-with-timezone-hint", definition: "This personal timezone display preference may be configured in Compass Settings." }, timezoneFormattedValue)));
+}

package/dist/components/document-list/document-edit-actions-footer.d.ts

@@ -7,6 +7,7 @@ declare const EditActionsFooter: React.FunctionComponent<{
     modified?: boolean;
     validationError?: Error | null;
     alwaysForceUpdate?: boolean;
+    renderStatusMessage?(message: string): React.ReactNode;
     onUpdate(force: boolean): void;
     onDelete(): void;
     onCancel?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"document-edit-actions-footer.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/document-edit-actions-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,cAAc,MAAM,iBAAiB,CAAC;AAySlD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC/C,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,QAAQ,IAAI,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAkGA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"document-edit-actions-footer.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/document-edit-actions-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,cAAc,MAAM,iBAAiB,CAAC;AAqSlD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC/C,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvD,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,QAAQ,IAAI,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAmGA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/document-list/document-edit-actions-footer.js

@@ -217,9 +217,6 @@ const container = (0, emotion_1.css)({
     borderBottomLeftRadius: 'inherit',
     borderBottomRightRadius: 'inherit',
 });
-const message = (0, emotion_1.css)({
-    overflow: 'scroll',
-});
 const buttonGroup = (0, emotion_1.css)({
     display: 'flex',
     marginLeft: 'auto',
@@ -263,7 +260,7 @@ function getColorStyles(status, darkMode) {
             };
     }
 }
-const EditActionsFooter = ({ doc, editing, deleting, modified = false, validationError: initialError = null, alwaysForceUpdate = false, onUpdate, onDelete, onCancel, }) => {
+const EditActionsFooter = ({ doc, editing, deleting, modified = false, validationError: initialError = null, alwaysForceUpdate = false, renderStatusMessage = (message) => message, onUpdate, onDelete, onCancel, }) => {
     const { status: _status, updateStatus, error, } = useHadronDocumentStatus(doc, editing, deleting, initialError);
     const darkMode = (0, use_theme_1.useDarkMode)();
     // Allow props to override event based status of the document (helpful for
@@ -279,7 +276,7 @@ const EditActionsFooter = ({ doc, editing, deleting, modified = false, validatio
         return null;
     }
     return (react_1.default.createElement("div", { className: container, style: getColorStyles(status, darkMode), "data-testid": "document-footer", "data-status": status },
-        react_1.default.createElement("div", { className: message, "data-testid": "document-footer-message" }, error?.message ?? statusMessage),
+        react_1.default.createElement("div", { "data-testid": "document-footer-message" }, renderStatusMessage(error?.message ?? statusMessage)),
         !isSuccess(status) && (react_1.default.createElement("div", { className: buttonGroup },
             error?.details && (react_1.default.createElement(leafygreen_1.Button, { className: button, size: "xsmall", onClick: () => (0, use_error_details_1.showErrorDetails)({
                     details: error.details,

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

@@ -1 +1 @@
-{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/document.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EACV,OAAO,IAAI,kBAAkB,EAE9B,MAAM,iBAAiB,CAAC;AA0EzB,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC5C,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,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;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CA6FA,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/document.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EACV,OAAO,IAAI,kBAAkB,EAE9B,MAAM,iBAAiB,CAAC;AA0EzB,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAC5C,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,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;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAgHA,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -103,8 +103,16 @@ const HadronDocument = ({ value: document, editable = false, editing = false, on
         alignWithNestedExpandIcon: false,
         extraGutterWidth,
     }), [editable, extraGutterWidth]);
+    const emptyDocumentOffset = (0, react_1.useMemo)(() => (0, element_1.calculateShowMoreToggleOffset)({
+        editable,
+        level: 0,
+        alignWithNestedExpandIcon: true,
+        extraGutterWidth,
+    }), [editable, extraGutterWidth]);
     return (react_1.default.createElement("div", { className: className },
         react_1.default.createElement("div", { className: hadronDocument, "data-testid": "hadron-document", "data-id": document.uuid },
+            !editable && elements.length === 0 && (react_1.default.createElement("div", { "data-testid": "readonly-document-empty", style: { paddingLeft: emptyDocumentOffset } },
+                react_1.default.createElement("em", null, "(empty document)"))),
             react_1.default.createElement(auto_focus_context_1.AutoFocusContext.Provider, { value: editing ? autoFocus : null }, visibleElements.map((el, idx) => {
                 return (react_1.default.createElement(element_1.HadronElement, { key: idx, value: el, editable: editable, editingEnabled: editing, onEditStart: editable
                         ? (id, type) => {

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/document-list/editors/date-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AA+H5C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,WAAW,qBA4Bb"}

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

@@ -0,0 +1,135 @@
+"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.DateEditor = DateEditor;
+const react_1 = __importStar(require("react"));
+const emotion_1 = require("@leafygreen-ui/emotion");
+const leafygreen_1 = require("../../leafygreen");
+const input_editor_1 = require("./input-editor");
+const use_theme_1 = require("../../../hooks/use-theme");
+const format_date_1 = require("../../../utils/format-date");
+const editor_with_label_1 = require("./editor-with-label");
+const date_with_timezone_hint_1 = require("../date-with-timezone-hint");
+// Inline so the timezone info is on the same line unless it overflows.
+const dateContainerStyles = (0, emotion_1.css)({
+    display: 'inline-flex',
+    verticalAlign: 'bottom',
+});
+const dateTimePickerContainerStyles = (0, emotion_1.css)({
+    display: 'flex',
+    alignItems: 'center',
+});
+const dateTimePickerButtonStyles = (0, emotion_1.css)({
+    display: 'flex',
+    alignItems: 'center',
+    padding: 0,
+    margin: 0,
+    border: 'none',
+    background: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+});
+// We are not showing the native input at all. This is mainly due to how its
+// rendered in Safari. For Chrome/Firefox, we can hide the input and only show
+// the picker icon, but that's not possible in Safari. So we hide everything
+// and use our custom button to open the picker.
+const dateTimePickerInputStyles = (0, emotion_1.css)({
+    colorScheme: 'light',
+    width: 0,
+    height: 0,
+    padding: 0,
+    border: 'none',
+    boxShadow: 'none',
+    outline: 'none',
+    '&::-webkit-calendar-picker-indicator': {
+        display: 'none',
+    },
+});
+const dateTimePickerInputDarkModeStyles = (0, emotion_1.css)({
+    // This is the only bit we can customize in the native picker popup.
+    colorScheme: 'dark',
+});
+function DateTimePicker({ value, onChange, }) {
+    const pickerInputRef = (0, react_1.useRef)(null);
+    const darkMode = (0, use_theme_1.useDarkMode)();
+    const pickerDateTime = (0, format_date_1.convertToPickerDateTime)(value);
+    // On Firefox, when we clear the input value using `Clear` option from the
+    // picker, the input value is set to empty string. And then on following
+    // change in value, input.onChange is not called. So just before opening
+    // the picker, if the (datetime) value is empty, we set the this value to
+    // current date time so that the picker change is picked up.
+    const [seededDateTime, setSeededDateTime] = (0, react_1.useState)(null);
+    const openPicker = (0, react_1.useCallback)(() => {
+        const input = pickerInputRef.current;
+        if (!input) {
+            return;
+        }
+        if (!pickerDateTime) {
+            setSeededDateTime((0, format_date_1.convertToPickerDateTime)(new Date().toString()));
+        }
+        input.focus();
+        input.showPicker();
+    }, [pickerDateTime]);
+    return (react_1.default.createElement("span", { className: dateTimePickerContainerStyles },
+        react_1.default.createElement("button", { type: "button", "aria-label": "Select date and time", "data-testid": "hadron-document-date-picker-button", 
+            // The picker is only reachable by clicking its button, so that tabbing
+            // keeps moving between the editors.
+            tabIndex: -1, className: dateTimePickerButtonStyles, onClick: openPicker },
+            react_1.default.createElement(leafygreen_1.Icon, { glyph: "Calendar", size: "small" })),
+        react_1.default.createElement("input", { ref: pickerInputRef, type: "datetime-local", 
+            // Milliseconds precision, matching BSON dates. On chromium, this is the
+            // way to show milliseconds in the picker panel. On Firefox and Safari,
+            // time picker UI is not available at all.
+            step: "0.001", "data-testid": "hadron-document-date-picker", value: pickerDateTime || seededDateTime || '', tabIndex: -1, onBlur: () => {
+                setSeededDateTime(null);
+            }, onChange: (evt) => {
+                setSeededDateTime(null);
+                onChange((0, format_date_1.convertFromPickerDateTime)(evt.currentTarget.value));
+            }, className: (0, emotion_1.cx)(dateTimePickerInputStyles, darkMode && dateTimePickerInputDarkModeStyles) })));
+}
+function DateEditor({ value, onChange, onBlur, type, ...props }) {
+    const inputStyle = (0, react_1.useMemo)(() => {
+        // 29 because the ISODate format is 29 characters long
+        return { width: `${Math.max(value.length, 29)}ch` };
+    }, [value]);
+    return (react_1.default.createElement(date_with_timezone_hint_1.DateWithTimezoneHint, { value: value },
+        react_1.default.createElement("span", { className: dateContainerStyles },
+            react_1.default.createElement(editor_with_label_1.EditorWithLabel, { type: type },
+                react_1.default.createElement(input_editor_1.InputEditor, { value: value, onChange: onChange, onBlur: onBlur, ...props, style: inputStyle })),
+            react_1.default.createElement(DateTimePicker, { value: value, onChange: (newValue) => {
+                    onChange(newValue);
+                    onBlur();
+                } }))));
+}

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

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

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

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

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