@box/metadata-editor 0.49.0 → 0.50.1

package/esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js

@@ -1,21 +1,21 @@
 import "../../../../../../styles/metadata-instance-form.css";
-import { Card as E } from "@box/blueprint-web";
-import { Formik as b } from "formik";
-import { useState as O, useMemo as y } from "react";
+import { Card as b } from "@box/blueprint-web";
+import { Formik as O } from "formik";
+import { useState as v, useMemo as y } from "react";
 import { TEMPLATE_CUSTOM_PROPERTIES as A } from "../../../../constants.js";
 import { useAutofill as N } from "../../../../utils/autofill-context.js";
 import { TemplateInstance as T } from "../../../metadata-editor-fields/metadata-editor-fields.js";
-import { MetadataEmptyState as v } from "../../../metadata-empty-state/metadata-empty-state.js";
-import { UnsavedChangesModal as L } from "../../../unsaved-changes-modal/unsaved-changes-modal.js";
+import { MetadataEmptyState as L } from "../../../metadata-empty-state/metadata-empty-state.js";
+import { UnsavedChangesModal as U } from "../../../unsaved-changes-modal/unsaved-changes-modal.js";
 import { CustomInstance as _ } from "../custom-instance/custom-instance.js";
 import { DeleteConfirmationModal as x } from "../delete-confirmation-modal/delete-confirmation-modal.js";
 import { MetadataInstanceFormFooter as P } from "../metadata-instance-form-footer/metadata-instance-form-footer.js";
-import { MetadataInstanceFormHeader as U } from "../metadata-instance-form-header/metadata-instance-form-header.js";
-import { createJSONPatch as j } from "./utils.js";
-import { jsx as t, jsxs as l, Fragment as R } from "react/jsx-runtime";
-const k = "_metadataInstanceForm_1hu4u_1", B = {
-  metadataInstanceForm: k
-}, te = (d) => {
+import { MetadataInstanceFormHeader as j } from "../metadata-instance-form-header/metadata-instance-form-header.js";
+import { createJSONPatch as R } from "./utils.js";
+import { jsx as t, jsxs as l, Fragment as k } from "react/jsx-runtime";
+const B = "_metadataInstanceForm_1hu4u_1", H = {
+  metadataInstanceForm: B
+}, ae = (d) => {
   const {
     isAiSuggestionsFeatureEnabled: o,
     isLoading: c,
@@ -24,61 +24,63 @@ const k = "_metadataInstanceForm_1hu4u_1", B = {
     onDelete: u,
     onSubmit: g,
     selectedTemplateInstance: e,
-    setIsUnsavedChangesModalOpen: s
-  } = d, [C, m] = O(!1), {
+    setIsUnsavedChangesModalOpen: s,
+    onUnsavedChangesModalCancel: C
+  } = d, [h, m] = v(!1), {
     isFetchingSuggestions: F
   } = N(), n = c || F, i = e.templateKey === A, r = (a) => {
-    g(e.id, j(a, e)), s(!1);
-  }, h = (a) => {
+    g(e.id, R(a, e)), s(!1);
+  }, M = (a) => {
     a ? s(!0) : f();
-  }, M = () => {
+  }, I = () => {
     m(!0);
-  }, I = {
+  }, S = {
     metadata: {
       ...e
     }
-  }, S = y(() => {
+  }, D = y(() => {
     const a = e.fields.length === 0;
     return i ? /* @__PURE__ */ t(_, {
       isLoading: n
-    }) : a ? /* @__PURE__ */ t(v, {
+    }) : a ? /* @__PURE__ */ t(L, {
       isBoxAiSuggestionsFeatureEnabled: o,
       level: "instance"
     }) : /* @__PURE__ */ t(T, {
       disableForm: n
     });
   }, [i, e.fields.length, n, o]);
-  return /* @__PURE__ */ t(b, {
-    initialValues: I,
+  return /* @__PURE__ */ t(O, {
+    initialValues: S,
     onSubmit: r,
     children: ({
       values: a,
-      dirty: D
-    }) => /* @__PURE__ */ l(R, {
-      children: [/* @__PURE__ */ l(E, {
-        className: B.metadataInstanceForm,
-        children: [/* @__PURE__ */ t(U, {
+      dirty: E
+    }) => /* @__PURE__ */ l(k, {
+      children: [/* @__PURE__ */ l(b, {
+        className: H.metadataInstanceForm,
+        children: [/* @__PURE__ */ t(j, {
           isAiSuggestionsFeatureEnabled: o && !i,
           isLoading: n,
           templateName: e.displayName
-        }), S, /* @__PURE__ */ t(P, {
+        }), D, /* @__PURE__ */ t(P, {
           isLoading: n,
-          onCancel: () => h(D),
-          onDelete: M
+          onCancel: () => M(E),
+          onDelete: I
         })]
-      }), /* @__PURE__ */ t(L, {
+      }), /* @__PURE__ */ t(U, {
+        onCancel: C,
         onDismiss: () => s(!1),
         onSaveAndContinue: () => r(a),
         open: p
       }), /* @__PURE__ */ t(x, {
         onConfirm: () => u(e.id),
         onDismiss: () => m(!1),
-        open: C,
+        open: h,
         templateName: e.displayName
       })]
     })
   });
 };
 export {
-  te as MetadataInstanceForm
+  ae as MetadataInstanceForm
 };

package/esm/lib/components/unsaved-changes-modal/unsaved-changes-modal.js

@@ -1,55 +1,56 @@
 import { Modal as e } from "@box/blueprint-web";
-import { useState as y, useEffect as b, useCallback as c } from "react";
-import { useIntl as p, FormattedMessage as g } from "react-intl";
-import r from "./messages.js";
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-function x({
+import { useState as b, useEffect as p, useCallback as g } from "react";
+import { useIntl as B, FormattedMessage as f } from "react-intl";
+import l from "./messages.js";
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+function z({
   onSaveAndContinue: t,
-  onDismiss: l,
-  defaultOpen: f = !0,
-  open: d = f
+  onDismiss: r,
+  onCancel: d,
+  defaultOpen: u = !0,
+  open: h = u
 }) {
-  const n = p(), [C, o] = y(d);
-  b(() => o(d), [d]);
-  const u = c((h) => {
-    o(h), h || l == null || l();
-  }, [l]), M = c(async () => {
+  const c = B(), [M, o] = b(h);
+  p(() => o(h), [h]);
+  const m = g((s) => {
+    o(s), s || r == null || r();
+  }, [r]), C = g(async () => {
     await (t == null ? void 0 : t()), o(!1);
-  }, [t]), m = c(() => {
-    l == null || l(), o(!1);
-  }, [l]);
+  }, [t]), y = g(() => {
+    r == null || r(), d == null || d(), o(!1);
+  }, [r, d]);
   return /* @__PURE__ */ a(e, {
     modal: !0,
-    onOpenChange: u,
-    open: C,
-    children: /* @__PURE__ */ s(e.Content, {
+    onOpenChange: m,
+    open: M,
+    children: /* @__PURE__ */ n(e.Content, {
       size: "small",
       children: [/* @__PURE__ */ a(e.Header, {
-        children: /* @__PURE__ */ a(g, {
-          ...r.unsavedChangesModalHeader
+        children: /* @__PURE__ */ a(f, {
+          ...l.unsavedChangesModalHeader
         })
       }), /* @__PURE__ */ a(e.ScrollableContainer, {
         children: /* @__PURE__ */ a(e.Body, {
-          children: /* @__PURE__ */ a(g, {
-            ...r.unsavedChangesModalBody
+          children: /* @__PURE__ */ a(f, {
+            ...l.unsavedChangesModalBody
           })
         })
-      }), /* @__PURE__ */ s(e.Footer, {
+      }), /* @__PURE__ */ n(e.Footer, {
         children: [/* @__PURE__ */ a(e.Footer.SecondaryButton, {
-          onClick: m,
+          onClick: y,
           size: "large",
-          children: n.formatMessage(r.unsavedChangesModalDismissCTA)
+          children: c.formatMessage(l.unsavedChangesModalDismissCTA)
         }), /* @__PURE__ */ a(e.Footer.PrimaryButton, {
-          onClick: M,
+          onClick: C,
           size: "large",
-          children: n.formatMessage(r.unsavedChangesModalSaveAndContinueCTA)
+          children: c.formatMessage(l.unsavedChangesModalSaveAndContinueCTA)
         })]
       }), /* @__PURE__ */ a(e.Close, {
-        "aria-label": n.formatMessage(r.unsavedChangesModalCloseLabel)
+        "aria-label": c.formatMessage(l.unsavedChangesModalCloseLabel)
       })]
     })
   });
 }
 export {
-  x as UnsavedChangesModal
+  z as UnsavedChangesModal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.49.0",
+  "version": "0.50.1",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.20.0",
@@ -52,5 +52,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "0382194d1e9c1a1c900b1e95d631fad1461993fc"
+  "gitHead": "8463bedb52cb3c061d48d6608e22d9aa0a7d2bfb"
 }

package/types/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/types.d.ts

@@ -9,6 +9,8 @@ export type MetadataInstanceFormProps = {
     onDelete: (id: string) => void;
     onSubmit: (id: string, operations: JSONPatchOperations) => void;
     setIsUnsavedChangesModalOpen: (isUnsavedChangesModalOpen: boolean) => void;
+    /** Callback invoked when clicking Cancel button on the UnsavedChangesModal - can be used to reset form values */
+    onUnsavedChangesModalCancel?: () => void;
 };
 export declare const JSONPatchOp: {
     readonly ADD: "add";

package/types/lib/components/metadata-instance-list/types.d.ts

@@ -1,7 +1,7 @@
 import { type MetadataTemplateInstance } from '../../types';
 export type MetadataInstanceListProps = {
     isAiSuggestionsFeatureEnabled: boolean;
-    onEdit: () => void;
+    onEdit: (templateInstacne: MetadataTemplateInstance) => void;
     onEditWithAutofill: () => void;
     templateInstances: MetadataTemplateInstance[];
 };

package/types/lib/components/unsaved-changes-modal/types.d.ts

@@ -16,4 +16,11 @@ export interface UnsavedChangesModalProps extends Pick<ModalProps, 'open' | 'def
      * closing the modal, as the modal will handle it.
      */
     onDismiss?: () => void;
+    /**
+     * Callback to be invoked when the user clicks the "Dismiss" button.
+     *
+     * This callback is expected to perform the dismissal action and does not need to handle
+     * closing the modal, as the modal will handle it.
+     */
+    onCancel?: () => void;
 }

package/types/lib/components/unsaved-changes-modal/unsaved-changes-modal.d.ts

@@ -1,2 +1,2 @@
 import { type UnsavedChangesModalProps } from './types';
-export declare function UnsavedChangesModal({ onSaveAndContinue, onDismiss, defaultOpen, open: propsOpen, }: UnsavedChangesModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function UnsavedChangesModal({ onSaveAndContinue, onDismiss, onCancel, defaultOpen, open: propsOpen, }: UnsavedChangesModalProps): import("react/jsx-runtime").JSX.Element;