@box/metadata-editor 0.78.9 → 0.79.1

package/chunks/utils.js

@@ -1,43 +1,42 @@
-import "../styles/utils.css";
-import { BoxAiLogo as s } from "@box/blueprint-web-assets/icons/Logo";
-import g from "../esm/lib/components/interactive-text/interactive-text.js";
-import { convertISOStringToUTCDate as i } from "../esm/lib/utils/convertDate.js";
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-const _ = "_noAttributesText_1ggnw_1", p = "_fieldWrapper_1ggnw_5", b = "_hasSuggestion_1ggnw_10", x = "_error_1ggnw_18", d = "_dateField_1ggnw_30", m = "_suggestionApplied_1ggnw_34", u = "_comboboxContainer_1ggnw_34", T = "_labelWrapper_1ggnw_48", w = "_labelText_1ggnw_54", S = "_labelIcon_1ggnw_57", t = {
-  noAttributesText: _,
-  fieldWrapper: p,
-  hasSuggestion: b,
-  error: x,
-  dateField: d,
-  suggestionApplied: m,
-  comboboxContainer: u,
-  labelWrapper: T,
-  labelText: w,
-  labelIcon: S
-}, C = (e, n, l = !1, a = "label") => (r) => /* @__PURE__ */ c("div", {
-  className: t.labelWrapper,
-  children: [n ? /* @__PURE__ */ o(g, {
-    as: a,
-    className: t.labelText,
-    tooltipText: n,
-    ...r,
-    children: e
-  }) : /* @__PURE__ */ o("label", {
-    className: t.labelText,
-    ...r,
-    children: e
-  }), l && /* @__PURE__ */ o(s, {
-    className: t.labelIcon
-  })]
-}), F = (e) => {
-  try {
-    return i(e).toISOString();
-  } catch {
-    return null;
-  }
-};
+import h from "lodash/isEmpty";
+import O from "lodash/isArray";
+import { TEMPLATE_CUSTOM_PROPERTIES as f } from "../esm/lib/constants.js";
+const n = {
+  ADD: "add",
+  REMOVE: "remove",
+  REPLACE: "replace",
+  TEST: "test"
+}, p = (e) => e.value === void 0 || e.value === null || e.value === "" || O(e.value) && h(e.value), S = (e, a) => {
+  const o = [], c = e.metadata.fields, r = a.templateKey === f, E = new Map(a.fields.map((t) => [t.key, t])), m = new Map(c.map((t) => [t.key, t]));
+  return c.forEach((t) => {
+    const s = E.get(t.key);
+    s ? JSON.stringify(t) === JSON.stringify(s) || (!r && p(s) && !p(t) ? o.push(v(t.key, u(t))) : (
+      // template instance
+      (!r && t.value !== s.value && s.value !== null && !p(t) || // custom instance
+      r && t.value !== s.value) && (o.push(y(s.key, u(s))), o.push(M(t.key, u(t))))
+    )) : o.push(v(t.key, t.value));
+  }), a.fields.forEach((t) => {
+    const s = m.get(t.key);
+    (!s || !r && p(s) && !p(t)) && (o.push(y(t.key, u(t))), o.push(k(t.key)));
+  }), o;
+}, u = (e) => e.type === "float" ? Number(e.value) : e.type === "taxonomy" ? e.value.map((a) => a.value) : e.value, y = (e, a) => ({
+  op: n.TEST,
+  path: `/${e}`,
+  value: a
+}), v = (e, a) => ({
+  op: n.ADD,
+  path: `/${e}`,
+  value: a
+}), k = (e) => ({
+  op: n.REMOVE,
+  path: `/${e}`
+}), M = (e, a) => ({
+  op: n.REPLACE,
+  path: `/${e}`,
+  value: a
+});
 export {
-  C as g,
-  t as s,
-  F as t
+  n as J,
+  S as c,
+  u as g
 };

package/chunks/utils2.js

@@ -0,0 +1,43 @@
+import "../styles/utils.css";
+import { BoxAiLogo as s } from "@box/blueprint-web-assets/icons/Logo";
+import g from "../esm/lib/components/interactive-text/interactive-text.js";
+import { convertISOStringToUTCDate as i } from "../esm/lib/utils/convertDate.js";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+const _ = "_noAttributesText_1ggnw_1", p = "_fieldWrapper_1ggnw_5", b = "_hasSuggestion_1ggnw_10", x = "_error_1ggnw_18", d = "_dateField_1ggnw_30", m = "_suggestionApplied_1ggnw_34", u = "_comboboxContainer_1ggnw_34", T = "_labelWrapper_1ggnw_48", w = "_labelText_1ggnw_54", S = "_labelIcon_1ggnw_57", t = {
+  noAttributesText: _,
+  fieldWrapper: p,
+  hasSuggestion: b,
+  error: x,
+  dateField: d,
+  suggestionApplied: m,
+  comboboxContainer: u,
+  labelWrapper: T,
+  labelText: w,
+  labelIcon: S
+}, C = (e, n, l = !1, a = "label") => (r) => /* @__PURE__ */ c("div", {
+  className: t.labelWrapper,
+  children: [n ? /* @__PURE__ */ o(g, {
+    as: a,
+    className: t.labelText,
+    tooltipText: n,
+    ...r,
+    children: e
+  }) : /* @__PURE__ */ o("label", {
+    className: t.labelText,
+    ...r,
+    children: e
+  }), l && /* @__PURE__ */ o(s, {
+    className: t.labelIcon
+  })]
+}), F = (e) => {
+  try {
+    return i(e).toISOString();
+  } catch {
+    return null;
+  }
+};
+export {
+  C as g,
+  t as s,
+  F as t
+};

package/esm/index.js

@@ -1,39 +1,43 @@
-import { AddMetadataTemplateDropdown as o } from "./lib/components/add-metadata-template-dropdown/add-metadata-template-dropdown.js";
+import { AddMetadataTemplateDropdown as e } from "./lib/components/add-metadata-template-dropdown/add-metadata-template-dropdown.js";
 import { ComboboxWithApiPagination as r } from "./lib/components/combobox-with-api-pagination/combobox-with-api-pagination.js";
-import { FilterDropdownMenu as d } from "./lib/components/filter-dropdown-menu/index.js";
-import { FilterInstancesDropdown as m } from "./lib/components/filter-instances-dropdown/filter-instances-dropdown.js";
+import { FilterDropdownMenu as n } from "./lib/components/filter-dropdown-menu/index.js";
+import { FilterInstancesDropdown as d } from "./lib/components/filter-instances-dropdown/filter-instances-dropdown.js";
 import { MetadataEmptyState as x } from "./lib/components/metadata-empty-state/metadata-empty-state.js";
-import { DeleteConfirmationModal as l } from "./lib/components/metadata-instance-editor/subcomponents/delete-confirmation-modal/delete-confirmation-modal.js";
-import { MetadataInstanceFormHeader as M } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
-import { CustomInstanceNewField as I } from "./lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/custom-instance-new-field.js";
-import { MetadataInstanceForm as A } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js";
-import { MetadataInstanceList as w } from "./lib/components/metadata-instance-list/metadata-instance-list.js";
-import { MetadataInstanceHeader as D } from "./lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js";
-import { UnsavedChangesModal as U } from "./lib/components/unsaved-changes-modal/unsaved-changes-modal.js";
-import { defaultInitialValues as g, defaultMetadataValueMap as v } from "./lib/defaults.js";
-import { MetadataEditor as H } from "./lib/metadata-editor.js";
+import { CustomInstanceNewField as l } from "./lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/custom-instance-new-field.js";
+import { DeleteConfirmationModal as M } from "./lib/components/metadata-instance-editor/subcomponents/delete-confirmation-modal/delete-confirmation-modal.js";
+import { MetadataInstanceFormAutofillButton as c } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-autofill-button/metadata-instance-form-autofill-button.js";
+import { MetadataInstanceFormHeader as A } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
+import { MetadataInstanceForm as F } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js";
+import { J as h } from "../chunks/utils.js";
+import { MetadataInstanceList as P } from "./lib/components/metadata-instance-list/metadata-instance-list.js";
+import { MetadataInstanceHeader as b } from "./lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js";
+import { UnsavedChangesModal as v } from "./lib/components/unsaved-changes-modal/unsaved-changes-modal.js";
+import { defaultInitialValues as H, defaultMetadataValueMap as J } from "./lib/defaults.js";
+import { MetadataEditor as O } from "./lib/metadata-editor.js";
 import { U as V } from "../chunks/types.js";
-import { AutofillContext as y, AutofillContextProvider as L, useAutofill as N } from "./lib/utils/autofill-context.js";
-import { withApiWrapper as T } from "./lib/utils/api-wrapper.js";
+import { AutofillContext as y, AutofillContextProvider as B, useAutofill as L } from "./lib/utils/autofill-context.js";
+import { withApiWrapper as j } from "./lib/utils/api-wrapper.js";
 export {
-  o as AddMetadataTemplateDropdown,
+  e as AddMetadataTemplateDropdown,
   y as AutofillContext,
-  L as AutofillContextProvider,
+  B as AutofillContextProvider,
   r as ComboboxWithApiPagination,
-  I as CustomInstanceNewField,
-  l as DeleteConfirmationModal,
-  d as FilterDropdownMenu,
-  m as FilterInstancesDropdown,
-  H as MetadataEditor,
+  l as CustomInstanceNewField,
+  M as DeleteConfirmationModal,
+  n as FilterDropdownMenu,
+  d as FilterInstancesDropdown,
+  h as JSONPatchOp,
+  O as MetadataEditor,
   x as MetadataEmptyState,
-  A as MetadataInstanceForm,
-  M as MetadataInstanceFormHeader,
-  D as MetadataInstanceHeader,
-  w as MetadataInstanceList,
-  U as UnsavedChangesModal,
+  F as MetadataInstanceForm,
+  c as MetadataInstanceFormAutofillButton,
+  A as MetadataInstanceFormHeader,
+  b as MetadataInstanceHeader,
+  P as MetadataInstanceList,
+  v as UnsavedChangesModal,
   V as UpdateMode,
-  g as defaultInitialValues,
-  v as defaultMetadataValueMap,
-  N as useAutofill,
-  T as withApiWrapper
+  H as defaultInitialValues,
+  J as defaultMetadataValueMap,
+  L as useAutofill,
+  j as withApiWrapper
 };

package/esm/lib/components/metadata-editor-fields/components/metadata-date-field/metadata-date-field.js

@@ -4,7 +4,7 @@ import { forwardRef as w, useMemo as S } from "react";
 import { useIntl as V } from "react-intl";
 import { convertIsoStringToCalendarDate as N, convertCalendarDateToISOString as O } from "../../../../utils/convertDate.js";
 import a from "../../../../messages.js";
-import { g as B } from "../../../../../../chunks/utils.js";
+import { g as B } from "../../../../../../chunks/utils2.js";
 import { jsx as t } from "react/jsx-runtime";
 const H = /* @__PURE__ */ w(({
   className: i,

package/esm/lib/components/metadata-editor-fields/components/metadata-enum-field/metadata-enum-field.js

@@ -3,7 +3,7 @@ import { useFormikContext as C, getIn as L, Field as P } from "formik";
 import { forwardRef as $ } from "react";
 import { useIntl as b, FormattedMessage as j } from "react-intl";
 import d from "../../../../messages.js";
-import { g as w } from "../../../../../../chunks/utils.js";
+import { g as w } from "../../../../../../chunks/utils2.js";
 import { jsx as t, jsxs as I } from "react/jsx-runtime";
 const U = /* @__PURE__ */ $(({
   className: i,

package/esm/lib/components/metadata-editor-fields/components/metadata-float-field/metadata-float-field.js

@@ -1,7 +1,7 @@
 import { TextInput as T } from "@box/blueprint-web";
 import { useFormikContext as V, getIn as $, Field as b } from "formik";
 import { forwardRef as B, useRef as I } from "react";
-import { g as M } from "../../../../../../chunks/utils.js";
+import { g as M } from "../../../../../../chunks/utils2.js";
 import { fieldDefaultProps as O } from "../constants.js";
 import { useFloatValidation as j } from "./use-float-validation.js";
 import { jsx as r } from "react/jsx-runtime";

package/esm/lib/components/metadata-editor-fields/components/metadata-multi-select-field/metadata-multi-select-field.js

@@ -3,7 +3,7 @@ import { useFormikContext as x, getIn as M, Field as $ } from "formik";
 import { forwardRef as I } from "react";
 import { useIntl as j } from "react-intl";
 import k from "../../../../messages.js";
-import { g as D } from "../../../../../../chunks/utils.js";
+import { g as D } from "../../../../../../chunks/utils2.js";
 import { fieldDefaultProps as O } from "../constants.js";
 import { jsx as t } from "react/jsx-runtime";
 const E = /* @__PURE__ */ I(({

package/esm/lib/components/metadata-editor-fields/components/metadata-string-field/metadata-string-field.js

@@ -3,7 +3,7 @@ import { Field as g } from "formik";
 import { forwardRef as h } from "react";
 import { useIntl as F } from "react-intl";
 import x from "../../../../messages.js";
-import { g as M } from "../../../../../../chunks/utils.js";
+import { g as M } from "../../../../../../chunks/utils2.js";
 import { fieldDefaultProps as b } from "../constants.js";
 import { jsx as e } from "react/jsx-runtime";
 const v = /* @__PURE__ */ h(({

package/esm/lib/components/metadata-editor-fields/components/metadata-taxonomy-field/metadata-taxonomy-field.js

@@ -3,7 +3,7 @@ import { forwardRef as $ } from "react";
 import { useIntl as j } from "react-intl";
 import w from "../../../../messages.js";
 import { ComboboxWithApiPagination as A } from "../../../combobox-with-api-pagination/combobox-with-api-pagination.js";
-import { g as K } from "../../../../../../chunks/utils.js";
+import { g as K } from "../../../../../../chunks/utils2.js";
 import { jsx as e } from "react/jsx-runtime";
 const E = /* @__PURE__ */ $(({
   description: l,

package/esm/lib/components/metadata-editor-fields/metadata-editor-field-wrapper.js

@@ -5,7 +5,7 @@ import { forwardRef as P, useState as N, useCallback as R, useEffect as T, useMe
 import { AiSuggestionField as b } from "./components/ai-suggestion-field/ai-suggestion-field.js";
 import { UpdateModeFieldWrapper as j } from "./components/update-mode-field-wrapper/update-mode-field-wrapper.js";
 import { editorFieldTypes as $ } from "./editor-field-types.js";
-import { s as n } from "../../../../chunks/utils.js";
+import { s as n } from "../../../../chunks/utils2.js";
 import { jsx as a, jsxs as B } from "react/jsx-runtime";
 const X = /* @__PURE__ */ P(({
   disableForm: g,

package/esm/lib/components/metadata-editor-fields/metadata-editor-fields.js

@@ -4,7 +4,7 @@ import { useFormikContext as d, getIn as p, FieldArray as u } from "formik";
 import { FormattedMessage as x } from "react-intl";
 import g from "../../messages.js";
 import { MetadataEditorFieldWrapper as h } from "./metadata-editor-field-wrapper.js";
-import { s as F } from "../../../../chunks/utils.js";
+import { s as F } from "../../../../chunks/utils2.js";
 import { jsx as t } from "react/jsx-runtime";
 const C = (m) => {
   const {

package/esm/lib/components/metadata-editor-fields/utils.js

@@ -1,6 +1,6 @@
 import "@box/blueprint-web-assets/icons/Logo";
 import "../interactive-text/interactive-text.js";
-import { g as m, t as p } from "../../../../chunks/utils.js";
+import { g as m, t as p } from "../../../../chunks/utils2.js";
 import "../../utils/convertDate.js";
 import "react/jsx-runtime";
 export {

package/esm/lib/components/metadata-instance-editor/index.js

@@ -1,10 +1,14 @@
-import { DeleteConfirmationModal as t } from "./subcomponents/delete-confirmation-modal/delete-confirmation-modal.js";
-import { MetadataInstanceFormHeader as r } from "./subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
-import { CustomInstanceNewField as n } from "./subcomponents/custom-instance-new-field/custom-instance-new-field.js";
-import { MetadataInstanceForm as f } from "./subcomponents/metadata-instance-form/metadata-instance-form.js";
+import { CustomInstanceNewField as e } from "./subcomponents/custom-instance-new-field/custom-instance-new-field.js";
+import { DeleteConfirmationModal as r } from "./subcomponents/delete-confirmation-modal/delete-confirmation-modal.js";
+import { MetadataInstanceFormAutofillButton as n } from "./subcomponents/metadata-instance-form-autofill-button/metadata-instance-form-autofill-button.js";
+import { MetadataInstanceFormHeader as p } from "./subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
+import { MetadataInstanceForm as s } from "./subcomponents/metadata-instance-form/metadata-instance-form.js";
+import { J as c } from "../../../../chunks/utils.js";
 export {
-  n as CustomInstanceNewField,
-  t as DeleteConfirmationModal,
-  f as MetadataInstanceForm,
-  r as MetadataInstanceFormHeader
+  e as CustomInstanceNewField,
+  r as DeleteConfirmationModal,
+  c as JSONPatchOp,
+  s as MetadataInstanceForm,
+  n as MetadataInstanceFormAutofillButton,
+  p as MetadataInstanceFormHeader
 };

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

@@ -0,0 +1,40 @@
+import { Card as F } from "@box/blueprint-web";
+import { TEMPLATE_CUSTOM_PROPERTIES as A } from "../../../../constants.js";
+import { MetadataInstanceFormFooter as S } from "../metadata-instance-form-footer/metadata-instance-form-footer.js";
+import { MetadataInstanceFormHeader as c } from "../metadata-instance-form-header/metadata-instance-form-header.js";
+import { jsxs as C, jsx as o } from "react/jsx-runtime";
+const x = (t) => {
+  const {
+    areAiSuggestionsAvailable: i,
+    children: r,
+    className: s,
+    formRef: n,
+    isAiSuggestionsFeatureEnabled: m,
+    isDeleteButtonDisabled: l,
+    isFetchingSuggestions: a,
+    isFormDirty: d = !1,
+    selectedTemplateInstance: e,
+    getAiSuggestions: g,
+    handleCancel: u,
+    handleDelete: f
+  } = t, p = (e == null ? void 0 : e.templateKey) === A;
+  return /* @__PURE__ */ C(F, {
+    ref: n,
+    className: s,
+    children: [/* @__PURE__ */ o(c, {
+      areAiSuggestionsAvailable: i,
+      isAiSuggestionsFeatureEnabled: m && !p,
+      isLoading: a,
+      onAutofill: g,
+      templateName: e == null ? void 0 : e.displayName
+    }), e && r, /* @__PURE__ */ o(S, {
+      isDeleteButtonDisabled: l,
+      isLoading: a,
+      onCancel: () => u(d),
+      onDelete: f
+    })]
+  });
+};
+export {
+  x as MetadataInstanceFormCardWrapper
+};

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

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

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

@@ -1,41 +1,8 @@
-import h from "lodash/isEmpty";
-import O from "lodash/isArray";
-import { TEMPLATE_CUSTOM_PROPERTIES as f } from "../../../../constants.js";
-const n = {
-  ADD: "add",
-  REMOVE: "remove",
-  REPLACE: "replace",
-  TEST: "test"
-}, p = (e) => e.value === void 0 || e.value === null || e.value === "" || O(e.value) && h(e.value), S = (e, a) => {
-  const o = [], c = e.metadata.fields, r = a.templateKey === f, E = new Map(a.fields.map((t) => [t.key, t])), m = new Map(c.map((t) => [t.key, t]));
-  return c.forEach((t) => {
-    const s = E.get(t.key);
-    s ? JSON.stringify(t) === JSON.stringify(s) || (!r && p(s) && !p(t) ? o.push(v(t.key, u(t))) : (
-      // template instance
-      (!r && t.value !== s.value && s.value !== null && !p(t) || // custom instance
-      r && t.value !== s.value) && (o.push(y(s.key, u(s))), o.push(M(t.key, u(t))))
-    )) : o.push(v(t.key, t.value));
-  }), a.fields.forEach((t) => {
-    const s = m.get(t.key);
-    (!s || !r && p(s) && !p(t)) && (o.push(y(t.key, u(t))), o.push(k(t.key)));
-  }), o;
-}, u = (e) => e.type === "float" ? Number(e.value) : e.type === "taxonomy" ? e.value.map((a) => a.value) : e.value, y = (e, a) => ({
-  op: n.TEST,
-  path: `/${e}`,
-  value: a
-}), v = (e, a) => ({
-  op: n.ADD,
-  path: `/${e}`,
-  value: a
-}), k = (e) => ({
-  op: n.REMOVE,
-  path: `/${e}`
-}), M = (e, a) => ({
-  op: n.REPLACE,
-  path: `/${e}`,
-  value: a
-});
+import "lodash/isEmpty";
+import "lodash/isArray";
+import { c as m, g as i } from "../../../../../../chunks/utils.js";
+import "../../../../constants.js";
 export {
-  S as createJSONPatch,
-  u as getFormatedFieldValue
+  m as createJSONPatch,
+  i as getFormatedFieldValue
 };

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

@@ -0,0 +1,18 @@
+import { defineMessages as t } from "react-intl";
+const e = t({
+  autofillButton: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButton",
+    defaultMessage: "Autofill"
+  },
+  autofillButtonTooltip: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButtonTooltip",
+    defaultMessage: "Autofill with Box AI"
+  },
+  loadingButtonAriaLabel: {
+    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.loadingButtonAriaLabel",
+    defaultMessage: "Loading..."
+  }
+});
+export {
+  e as default
+};

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

@@ -0,0 +1,68 @@
+import "../../../../../../styles/metadata-instance-form-autofill-button.css";
+import { LoadingIndicator as M, IconButton as v, Tooltip as L, Button as k } from "@box/blueprint-web";
+import { BoxAiLogo as p } from "@box/blueprint-web-assets/icons/Logo";
+import { useFormikContext as x, getIn as i } from "formik";
+import { useEffect as K } from "react";
+import { useIntl as h } from "react-intl";
+import { useAutofill as C } from "../../../../utils/autofill-context.js";
+import n from "./messages.js";
+import { jsx as r } from "react/jsx-runtime";
+const F = "_loadingIndicator_1vv9u_1", _ = {
+  loadingIndicator: F
+}, z = ({
+  areAiSuggestionsAvailable: B,
+  isLoading: l,
+  variant: b = "secondary-button",
+  onAutofill: I
+}) => {
+  const {
+    isSubmitting: y,
+    values: e,
+    setFieldValue: m
+  } = x(), t = h(), {
+    suggestions: o
+  } = C();
+  K(() => {
+    if (o) {
+      const a = i(e, "metadata.fields"), s = i(e, "metadata.templateKey");
+      m("metadata.fields", a == null ? void 0 : a.map((c) => {
+        var f;
+        const g = (f = o == null ? void 0 : o[s]) == null ? void 0 : f[c.key];
+        return g ? {
+          ...c,
+          aiSuggestion: g
+        } : c;
+      }));
+    }
+  }, [o, m]);
+  const d = () => {
+    const a = i(e, "metadata.templateKey"), s = i(e, "metadata.scope");
+    I(a, s);
+  }, u = !B || y || l, A = l ? /* @__PURE__ */ r(M, {
+    "aria-label": t.formatMessage(n.loadingButtonAriaLabel),
+    className: _.loadingIndicator
+  }) : /* @__PURE__ */ r(v, {
+    "aria-label": t.formatMessage(n.loadingButtonAriaLabel),
+    disabled: u,
+    icon: p,
+    onClick: d,
+    variant: "icon-logo",
+    "data-target-id": "IconButton-loadingButtonAriaLabel"
+  });
+  return /* @__PURE__ */ r(L, {
+    content: t.formatMessage(n.autofillButtonTooltip),
+    children: b === "secondary-button" ? /* @__PURE__ */ r(k, {
+      disabled: u,
+      icon: p,
+      loading: l,
+      loadingAriaLabel: t.formatMessage(n.loadingButtonAriaLabel),
+      onClick: d,
+      variant: "secondary",
+      "data-target-id": "Button-autofillButton",
+      children: t.formatMessage(n.autofillButton)
+    }) : A
+  });
+};
+export {
+  z as MetadataInstanceFormAutofillButton
+};

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

@@ -1,20 +1,8 @@
 import { defineMessages as t } from "react-intl";
 const e = t({
-  autofillButton: {
-    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButton",
-    defaultMessage: "Autofill"
-  },
-  autofillButtonTooltip: {
-    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButtonTooltip",
-    defaultMessage: "Autofill with Box AI"
-  },
   customInstanceTitle: {
     id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.customInstanceTitle",
     defaultMessage: "Custom Metadata"
-  },
-  loadingButtonAriaLabel: {
-    id: "metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.loadingButtonAriaLabel",
-    defaultMessage: "Loading..."
   }
 });
 export {

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

@@ -1,67 +1,32 @@
 import "../../../../../../styles/metadata-instance-form-header.css";
-import { Tooltip as _, Button as b } from "@box/blueprint-web";
-import { BoxAiLogo as A } from "@box/blueprint-web-assets/icons/Logo";
-import { useFormikContext as M, getIn as o } from "formik";
-import { useEffect as h } from "react";
-import { useIntl as v } from "react-intl";
-import { useAutofill as K } from "../../../../utils/autofill-context.js";
-import T from "../../../interactive-header-text/interactive-header-text.js";
-import s from "./messages.js";
-import { jsxs as k, jsx as m } from "react/jsx-runtime";
-const j = "_metadataInstanceFormHeader_13lxr_1", C = "_title_13lxr_9", f = {
-  metadataInstanceFormHeader: j,
-  title: C
-}, J = ({
-  areAiSuggestionsAvailable: p,
-  isAiSuggestionsFeatureEnabled: g,
-  isLoading: l,
-  templateName: I,
-  onAutofill: x
+import { useIntl as l } from "react-intl";
+import i from "../../../interactive-header-text/interactive-header-text.js";
+import { MetadataInstanceFormAutofillButton as d } from "../metadata-instance-form-autofill-button/metadata-instance-form-autofill-button.js";
+import I from "./messages.js";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+const p = "_metadataInstanceFormHeader_13lxr_1", u = "_title_13lxr_9", e = {
+  metadataInstanceFormHeader: p,
+  title: u
+}, j = ({
+  areAiSuggestionsAvailable: a,
+  isAiSuggestionsFeatureEnabled: r,
+  isLoading: s,
+  templateName: o,
+  onAutofill: n
 }) => {
-  const {
-    isSubmitting: B,
-    values: e,
-    setFieldValue: c
-  } = M(), a = v(), {
-    suggestions: t
-  } = K();
-  h(() => {
-    if (t) {
-      const n = o(e, "metadata.fields"), r = o(e, "metadata.templateKey");
-      c("metadata.fields", n.map((i) => {
-        var u;
-        const d = (u = t == null ? void 0 : t[r]) == null ? void 0 : u[i.key];
-        return d ? {
-          ...i,
-          aiSuggestion: d
-        } : i;
-      }));
-    }
-  }, [t, c]);
-  const y = () => {
-    const n = o(e, "metadata.templateKey"), r = o(e, "metadata.scope");
-    x(n, r);
-  }, F = I ?? a.formatMessage(s.customInstanceTitle), H = !p || B || l;
-  return /* @__PURE__ */ k("div", {
-    className: f.metadataInstanceFormHeader,
-    children: [/* @__PURE__ */ m(T, {
-      className: f.title,
-      title: F
-    }), g && /* @__PURE__ */ m(_, {
-      content: a.formatMessage(s.autofillButtonTooltip),
-      children: /* @__PURE__ */ m(b, {
-        disabled: H,
-        icon: A,
-        loading: l,
-        loadingAriaLabel: a.formatMessage(s.loadingButtonAriaLabel),
-        onClick: y,
-        variant: "secondary",
-        "data-target-id": "Button-autofillButton",
-        children: a.formatMessage(s.autofillButton)
-      })
-    })]
+  const m = l(), c = o ?? m.formatMessage(I.customInstanceTitle);
+  return /* @__PURE__ */ f("div", {
+    className: e.metadataInstanceFormHeader,
+    children: [/* @__PURE__ */ t(i, {
+      className: e.title,
+      title: c
+    }), r ? /* @__PURE__ */ t(d, {
+      areAiSuggestionsAvailable: a,
+      isLoading: s,
+      onAutofill: n
+    }) : null]
   });
 };
 export {
-  J as MetadataInstanceFormHeader
+  j as MetadataInstanceFormHeader
 };

package/i18n/json/src/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-autofill-button/messages.json

@@ -0,0 +1 @@
+[{"id":"metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButton","description":"Button with \"Autofill\" text. Call to action to automatically fill in form fields based on AI information","defaultMessage":"Autofill"},{"id":"metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButtonTooltip","description":"Tooltip text explaining that by clicking button user can autofill template using Box AI","defaultMessage":"Autofill with Box AI"},{"id":"metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.loadingButtonAriaLabel","description":"Aria label used to indicate that the button is currently loading.","defaultMessage":"Loading..."}]

package/i18n/json/src/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/messages.json

@@ -1 +1 @@
-[{"id":"metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButton","description":"Button with \"Autofill\" text. Call to action to automatically fill in form fields based on AI information","defaultMessage":"Autofill"},{"id":"metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.autofillButtonTooltip","description":"Tooltip text explaining that by clicking button user can autofill template using Box AI","defaultMessage":"Autofill with Box AI"},{"id":"metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.customInstanceTitle","description":"Header with Custom Metadata template name","defaultMessage":"Custom Metadata"},{"id":"metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.loadingButtonAriaLabel","description":"Aria label used to indicate that the button is currently loading.","defaultMessage":"Loading..."}]
+[{"id":"metadataEditor.metadataInstanceEditor.metadataInstanceFormHeader.customInstanceTitle","description":"Header with Custom Metadata template name","defaultMessage":"Custom Metadata"}]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.78.9",
+  "version": "0.79.1",
   "peerDependencies": {
     "@ariakit/react": "0.4.14",
     "@box/blueprint-web": "^7.30.3",
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@ariakit/react": "0.4.14",
     "@box/babel-plugin-target-attributes": "1.3.0",
-    "@box/blueprint-web": "^9.2.0",
+    "@box/blueprint-web": "^9.2.1",
     "@box/blueprint-web-assets": "^4.30.0",
     "@box/storybook-utils": "^0.7.0",
     "@testing-library/react": "^15.0.6",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "aea7aacd8bd8226934231748787d65edac379e02"
+  "gitHead": "94a36651838769cd08fd62a9ab1b41e0b4cb5280"
 }

package/styles/metadata-instance-form-autofill-button.css

@@ -0,0 +1 @@
+._loadingIndicator_1vv9u_1{position:relative;width:var(--size-8);height:var(--size-8);display:flex;align-items:center;justify-content:center;margin:unset}

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

@@ -1,4 +1,6 @@
+export * from './subcomponents/custom-instance-new-field/custom-instance-new-field';
 export * from './subcomponents/delete-confirmation-modal/delete-confirmation-modal';
+export * from './subcomponents/metadata-instance-form-autofill-button/metadata-instance-form-autofill-button';
 export * from './subcomponents/metadata-instance-form-header/metadata-instance-form-header';
-export * from './subcomponents/custom-instance-new-field/custom-instance-new-field';
 export * from './subcomponents/metadata-instance-form/metadata-instance-form';
+export * from './subcomponents/metadata-instance-form/types';

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

@@ -0,0 +1,2 @@
+import { type MetadataInstanceFormWrapperProps } from './types';
+export declare const MetadataInstanceFormCardWrapper: (props: MetadataInstanceFormWrapperProps<null>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,12 @@
-import { type MetadataFormFieldValue, type MetadataTemplateInstance } from '../../../../types';
-import { type FormValues } from '../../types';
+import { type MetadataFormFieldValue, type MetadataTemplateField, type MetadataTemplateInstance } from '../../../../types';
 import { type TaxonomyOptionsFetcher } from '../../../metadata-editor-fields/components/metadata-taxonomy-field/types';
+import { type FormValues } from '../../types';
 export type MetadataInstanceFormProps = {
     areAiSuggestionsAvailable: boolean;
     isAiSuggestionsFeatureEnabled: boolean;
     isDeleteButtonDisabled: boolean;
     isUnsavedChangesModalOpen: boolean;
-    selectedTemplateInstance: MetadataTemplateInstance;
+    selectedTemplateInstance: MetadataTemplateInstance | null;
     onCancel: () => void;
     onDelete: (templateInstance: MetadataTemplateInstance) => void;
     /** Callback invoked when clicking Discard Changes button on the UnsavedChangesModal - can be used to reset form values */
@@ -14,7 +14,24 @@ export type MetadataInstanceFormProps = {
     onSubmit: (values: FormValues, operations: JSONPatchOperations) => Promise<void>;
     setIsUnsavedChangesModalOpen: (isUnsavedChangesModalOpen: boolean) => void;
     taxonomyOptionsFetcher: TaxonomyOptionsFetcher;
+    customRef?: HTMLDivElement | null;
+    MetadataInstanceFormCustomWrapper?: React.ComponentType<MetadataInstanceFormWrapperProps<null>>;
 };
+export type MetadataInstanceFormWrapperProps<T> = {
+    areAiSuggestionsAvailable: boolean;
+    children: React.ReactNode;
+    formValues: FormValues;
+    isAiSuggestionsFeatureEnabled: boolean;
+    isDeleteButtonDisabled: boolean;
+    isFetchingSuggestions: boolean;
+    isFormDirty: boolean;
+    selectedTemplateInstance: MetadataTemplateInstance | null;
+    handleDelete: () => void;
+    handleCancel: (isDirty: boolean) => void;
+    getAiSuggestions: (templateKey: MetadataTemplateInstance['templateKey'], scope: MetadataTemplateInstance['scope']) => Promise<MetadataTemplateField[]>;
+    extraProps?: T;
+    formRef?: React.LegacyRef<HTMLDivElement | null>;
+} & React.HTMLAttributes<HTMLDivElement>;
 export declare const JSONPatchOp: {
     readonly ADD: "add";
     readonly REMOVE: "remove";

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

@@ -0,0 +1,18 @@
+declare const messages: {
+    autofillButton: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    autofillButtonTooltip: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    loadingButtonAriaLabel: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+};
+export default messages;

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

@@ -0,0 +1,2 @@
+import { type MetadataInstanceFormAutofillButtonProps } from './types';
+export declare const MetadataInstanceFormAutofillButton: ({ areAiSuggestionsAvailable, isLoading, variant, onAutofill, }: MetadataInstanceFormAutofillButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { type MetadataTemplateField, type MetadataTemplateInstance } from '../../../../types';
+export type MetadataInstanceFormAutofillButtonProps = {
+    areAiSuggestionsAvailable: boolean;
+    isLoading: boolean;
+    onAutofill?: (templateKey: MetadataTemplateInstance['templateKey'], scope: MetadataTemplateInstance['scope']) => Promise<MetadataTemplateField[]>;
+    variant?: 'secondary-button' | 'icon-button';
+};

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

@@ -1,23 +1,8 @@
 declare const messages: {
-    autofillButton: {
-        defaultMessage: string;
-        description: string;
-        id: string;
-    };
-    autofillButtonTooltip: {
-        defaultMessage: string;
-        description: string;
-        id: string;
-    };
     customInstanceTitle: {
         defaultMessage: string;
         description: string;
         id: string;
     };
-    loadingButtonAriaLabel: {
-        defaultMessage: string;
-        description: string;
-        id: string;
-    };
 };
 export default messages;

package/types/lib/types.d.ts

@@ -1,5 +1,4 @@
 import { type BaseOptionType } from './components/combobox-with-api-pagination/types';
-export type { JSONPatchOperations } from './components/metadata-instance-editor/subcomponents/metadata-instance-form/types';
 export type { FormValues } from './components/metadata-instance-editor/types';
 export type MetadataEmptyStateProps = {
     isBoxAiSuggestionsFeatureEnabled?: boolean;

package/types/lib/utils/autofill-context.d.ts

@@ -10,7 +10,7 @@ export interface AutofillContextType {
 export interface AutofillContextProviderProps {
     children: React.ReactNode;
     isAiSuggestionsFeatureEnabled: boolean;
-    fetchSuggestions: (templateKey: string, scope: string) => Promise<MetadataTemplateField[]>;
+    fetchSuggestions: (templateKey: MetadataTemplateInstance['templateKey'], scope: MetadataTemplateInstance['scope']) => Promise<MetadataTemplateField[]>;
 }
 export declare const AutofillContext: React.Context<AutofillContextType>;
 export declare const AutofillContextProvider: ({ children, isAiSuggestionsFeatureEnabled, fetchSuggestions, }: AutofillContextProviderProps) => React.ReactElement;