@mongodb-js/compass-components 1.67.1 → 1.69.0

package/dist/components/document-list/bson-display-options-context.js

@@ -0,0 +1,56 @@
+"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.BSONDisplayOptionsProvider = exports.BSONDisplayOptionsContext = exports.DEFAULT_BSON_DISPLAY_OPTIONS = void 0;
+exports.useBSONDisplayOptions = useBSONDisplayOptions;
+const react_1 = __importStar(require("react"));
+exports.DEFAULT_BSON_DISPLAY_OPTIONS = {
+    legacyUUIDDisplayEncoding: '',
+    timezone: 'UTC',
+};
+exports.BSONDisplayOptionsContext = (0, react_1.createContext)(exports.DEFAULT_BSON_DISPLAY_OPTIONS);
+function useBSONDisplayOptions() {
+    return (0, react_1.useContext)(exports.BSONDisplayOptionsContext);
+}
+const BSONDisplayOptionsProvider = ({ legacyUUIDDisplayEncoding = exports.DEFAULT_BSON_DISPLAY_OPTIONS.legacyUUIDDisplayEncoding, timezone = exports.DEFAULT_BSON_DISPLAY_OPTIONS.timezone, children, }) => {
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            legacyUUIDDisplayEncoding,
+            timezone,
+        };
+    }, [legacyUUIDDisplayEncoding, timezone]);
+    return (react_1.default.createElement(exports.BSONDisplayOptionsContext.Provider, { value: value }, children));
+};
+exports.BSONDisplayOptionsProvider = BSONDisplayOptionsProvider;

package/dist/components/document-list/bson-utils.d.ts

@@ -0,0 +1,10 @@
+import type { TypeCastMap } from 'hadron-type-checker';
+type BSONValueType = keyof TypeCastMap | 'DBRef';
+export declare const bsonValueDisplayVar = "--bson-value-display";
+export declare const BSON_TYPE_LABEL: Partial<Record<keyof TypeCastMap, string>>;
+export declare function wrapValueWithBsonLabel(type: keyof TypeCastMap, value: string): string;
+export declare function useBsonThemeStyles(type?: BSONValueType): {
+    color: string | undefined;
+} | undefined;
+export {};
+//# sourceMappingURL=bson-utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bson-utils.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/bson-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOvD,KAAK,aAAa,GAAG,MAAM,WAAW,GAAG,OAAO,CAAC;AAGjD,eAAO,MAAM,mBAAmB,yBAAyB,CAAC;AA+B1D,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,WAAW,EAAE,MAAM,CAAC,CAS7D,CAAC;AAEX,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,MAAM,WAAW,EACvB,KAAK,EAAE,MAAM,GACZ,MAAM,CAMR;AAED,wBAAgB,kBAAkB,CAAC,IAAI,CAAC,EAAE,aAAa;;cAatD"}

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BSON_TYPE_LABEL = exports.bsonValueDisplayVar = void 0;
+exports.wrapValueWithBsonLabel = wrapValueWithBsonLabel;
+exports.useBsonThemeStyles = useBsonThemeStyles;
+const react_1 = require("react");
+const code_1 = require("@leafygreen-ui/code");
+const use_theme_1 = require("../../hooks/use-theme");
+// Set by containers laying values out inline, see `elementContentInline`.
+exports.bsonValueDisplayVar = '--bson-value-display';
+// Colors used to render bson values both in the read-only and the editing
+// state of a document.
+const VALUE_COLOR_BY_THEME_AND_TYPE = {
+    [use_theme_1.Themes.Dark]: {
+        Int32: code_1.variantColors.dark[9],
+        Int64: code_1.variantColors.dark[9],
+        Double: code_1.variantColors.dark[9],
+        Decimal128: code_1.variantColors.dark[9],
+        Date: code_1.variantColors.dark[9],
+        Boolean: code_1.variantColors.dark[10],
+        String: code_1.variantColors.dark[7],
+        ObjectId: code_1.variantColors.dark[5],
+    },
+    [use_theme_1.Themes.Light]: {
+        Int32: code_1.variantColors.light[9],
+        Int64: code_1.variantColors.light[9],
+        Double: code_1.variantColors.light[9],
+        Decimal128: code_1.variantColors.light[9],
+        Date: code_1.variantColors.light[9],
+        Boolean: code_1.variantColors.light[10],
+        String: code_1.variantColors.light[7],
+        ObjectId: code_1.variantColors.light[5],
+    },
+};
+// This is the list of bson types to map to their corresponding label on the UI.
+exports.BSON_TYPE_LABEL = {
+    Int64: 'Long',
+    Decimal128: 'Decimal128',
+    ObjectId: 'ObjectId',
+    Date: 'ISODate',
+    UUID: 'UUID',
+    LegacyJavaUUID: 'LegacyJavaUUID',
+    LegacyCSharpUUID: 'LegacyCSharpUUID',
+    LegacyPythonUUID: 'LegacyPythonUUID',
+};
+function wrapValueWithBsonLabel(type, value) {
+    const label = exports.BSON_TYPE_LABEL[type];
+    if (!label) {
+        return value;
+    }
+    return `${label}('${value}')`;
+}
+function useBsonThemeStyles(type) {
+    const darkMode = (0, use_theme_1.useDarkMode)();
+    return (0, react_1.useMemo)(() => {
+        if (!type) {
+            return;
+        }
+        return {
+            color: VALUE_COLOR_BY_THEME_AND_TYPE[darkMode ? use_theme_1.Themes.Dark : use_theme_1.Themes.Light][type],
+        };
+    }, [type, darkMode]);
+}

package/dist/components/document-list/date-time-picker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function DateTimePicker({ value, onChange, }: {
+    value: string;
+    onChange(newValue: string): void;
+}): React.JSX.Element;
+//# sourceMappingURL=date-time-picker.d.ts.map

package/dist/components/document-list/date-time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/document-list/date-time-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AA8C7D,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,qBAiEA"}

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-actions-group.js

@@ -139,4 +139,3 @@ const DocumentActionsGroup = ({ onEdit, onCopy, onClone, onRemove, onExpand, exp
         onRemove && (react_1.default.createElement(ActionButton, { size: "xsmall", tooltipEnabled: isActive, rightGlyph: react_1.default.createElement(leafygreen_1.Icon, { role: "presentation", glyph: "Trash" }), "aria-label": "Remove document", "data-testid": "remove-document-button", onClick: onRemove, className: actionsGroupItem, tooltipText: "Remove document" }))));
 };
 exports.default = DocumentActionsGroup;
-//# sourceMappingURL=document-actions-group.js.map

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,
@@ -304,4 +301,3 @@ const EditActionsFooter = ({ doc, editing, deleting, modified = false, validatio
                     : 'Update')))));
 };
 exports.default = EditActionsFooter;
-//# sourceMappingURL=document-edit-actions-footer.js.map

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) => {
@@ -136,4 +144,3 @@ const HadronDocument = ({ value: document, editable = false, editing = false, on
             } })));
 };
 exports.default = HadronDocument;
-//# sourceMappingURL=document.js.map

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