@box/metadata-editor 0.53.1 → 0.54.0

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

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

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

@@ -1,35 +1,36 @@
 import "../../../../../../styles/metadata-instance-form-footer.css";
-import { TextButton as u, Button as r } from "@box/blueprint-web";
-import { useFormikContext as b } from "formik";
-import { useIntl as F } from "react-intl";
+import { TextButton as b, Button as r } from "@box/blueprint-web";
+import { useFormikContext as F } from "formik";
+import { useIntl as g } from "react-intl";
 import o from "./messages.js";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8", _ = "_buttons_17478_8", a = {
-  metadataInstanceFormFooter: g,
-  buttonsContainer: f,
-  buttons: _
-}, x = ({
-  isLoading: m,
-  onCancel: c,
-  onDelete: l
+const f = "_metadataInstanceFormFooter_17478_1", _ = "_buttonsContainer_17478_8", C = "_buttons_17478_8", a = {
+  metadataInstanceFormFooter: f,
+  buttonsContainer: _,
+  buttons: C
+}, M = ({
+  isDeleteButtonDisabled: m,
+  isLoading: c,
+  onCancel: l,
+  onDelete: d
 }) => {
-  const t = F(), {
+  const t = g(), {
     isSubmitting: s,
-    submitForm: d
-  } = b(), n = m || s;
+    submitForm: u
+  } = F(), n = c || s;
   return /* @__PURE__ */ e("div", {
     className: a.metadataInstanceFormFooter,
     children: /* @__PURE__ */ i("div", {
       className: a.buttonsContainer,
-      children: [/* @__PURE__ */ e(u, {
-        disabled: n,
-        onClick: l,
+      children: [/* @__PURE__ */ e(b, {
+        disabled: n || m,
+        onClick: d,
         children: t.formatMessage(o.deleteButton)
       }), /* @__PURE__ */ i("div", {
         className: a.buttons,
         children: [/* @__PURE__ */ e(r, {
           disabled: n,
-          onClick: c,
+          onClick: l,
           size: "large",
           variant: "secondary",
           children: t.formatMessage(o.cancelButton)
@@ -37,7 +38,7 @@ const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8"
           disabled: n,
           loading: s,
           loadingAriaLabel: t.formatMessage(o.loadingAriaLabel),
-          onClick: d,
+          onClick: u,
           size: "large",
           children: t.formatMessage(o.saveButton)
         })]
@@ -46,5 +47,5 @@ const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8"
   });
 };
 export {
-  x as MetadataInstanceFormFooter
+  M as MetadataInstanceFormFooter
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.53.1",
+  "version": "0.54.0",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.20.0",
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@ariakit/react": "0.4.5",
-    "@box/blueprint-web": "^7.30.0",
+    "@box/blueprint-web": "^7.30.1",
     "@box/blueprint-web-assets": "^4.25.0",
     "@box/storybook-utils": "^0.6.1",
     "@testing-library/react": "^15.0.6",
@@ -52,5 +52,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "7e6b9d100238888a4c82c0479c6a534df1f7d9b5"
+  "gitHead": "c4e8483378415e000dd6bb2a9ca046d5176f98f0"
 }

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

@@ -2,8 +2,8 @@ import { type MetadataFormFieldValue, type MetadataTemplateInstance } from '../.
 import { type FormValues } from '../../types';
 export type MetadataInstanceFormProps = {
     isAiSuggestionsFeatureEnabled: boolean;
+    isDeleteButtonDisabled: boolean;
     isUnsavedChangesModalOpen: boolean;
-    /** The MetadataTemplate is used when creating a new instance, while MetadataTemplateInstance is applied when editing an existing one. */
     selectedTemplateInstance: MetadataTemplateInstance;
     onCancel: () => void;
     onDelete: (templateInstance: MetadataTemplateInstance) => void;

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

@@ -1,2 +1,2 @@
 import { type MetadataInstanceFormFooterProps } from './types';
-export declare const MetadataInstanceFormFooter: ({ isLoading, onCancel, onDelete }: MetadataInstanceFormFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataInstanceFormFooter: ({ isDeleteButtonDisabled, isLoading, onCancel, onDelete, }: MetadataInstanceFormFooterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,5 @@
 export type MetadataInstanceFormFooterProps = {
+    isDeleteButtonDisabled: boolean;
     isLoading: boolean;
     onCancel: () => void;
     onDelete: () => void;