@box/metadata-editor 0.60.4 → 0.61.0

package/esm/index.js

@@ -1,35 +1,37 @@
 import { AddMetadataTemplateDropdown as o } from "./lib/components/add-metadata-template-dropdown/add-metadata-template-dropdown.js";
 import { FilterDropdownMenu as r } from "./lib/components/filter-dropdown-menu/index.js";
-import { SingleLevelTaxonomyField as m } from "./lib/components/metadata-editor-fields/components/metadata-taxonomy-field/single-level-taxonomy-field.js";
+import { SingleLevelTaxonomyField as p } from "./lib/components/metadata-editor-fields/components/metadata-taxonomy-field/single-level-taxonomy-field.js";
 import { MetadataEmptyState as f } 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 i } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
 import { CustomInstanceNewField as s } from "./lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/custom-instance-new-field.js";
 import { MetadataInstanceForm as I } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js";
-import { MetadataInstanceList as C } from "./lib/components/metadata-instance-list/metadata-instance-list.js";
-import { MetadataInstanceHeader as A } from "./lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js";
-import { UnsavedChangesModal as w } from "./lib/components/unsaved-changes-modal/unsaved-changes-modal.js";
+import { MetadataInstanceList as A } from "./lib/components/metadata-instance-list/metadata-instance-list.js";
+import { MetadataInstanceHeader as F } 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 U, defaultMetadataValueMap as g } from "./lib/defaults.js";
-import { MetadataEditor as E } from "./lib/metadata-editor.js";
-import { U as L } from "../chunks/types.js";
-import { AutofillContext as T, AutofillContextProvider as V, useAutofill as h } from "./lib/utils/autofill-context.js";
+import { MetadataEditor as y } from "./lib/metadata-editor.js";
+import { U as H } from "../chunks/types.js";
+import { AutofillContext as S, AutofillContextProvider as T, useAutofill as V } from "./lib/utils/autofill-context.js";
+import { withApiWrapper as P } from "./lib/utils/api-wrapper.js";
 export {
   o as AddMetadataTemplateDropdown,
-  T as AutofillContext,
-  V as AutofillContextProvider,
+  S as AutofillContext,
+  T as AutofillContextProvider,
   s as CustomInstanceNewField,
   l as DeleteConfirmationModal,
   r as FilterDropdownMenu,
-  E as MetadataEditor,
+  y as MetadataEditor,
   f as MetadataEmptyState,
   I as MetadataInstanceForm,
   i as MetadataInstanceFormHeader,
-  A as MetadataInstanceHeader,
-  C as MetadataInstanceList,
-  m as SingleLevelTaxonomyField,
-  w as UnsavedChangesModal,
-  L as UpdateMode,
+  F as MetadataInstanceHeader,
+  A as MetadataInstanceList,
+  p as SingleLevelTaxonomyField,
+  v as UnsavedChangesModal,
+  H as UpdateMode,
   U as defaultInitialValues,
   g as defaultMetadataValueMap,
-  h as useAutofill
+  V as useAutofill,
+  P as withApiWrapper
 };

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

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

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

@@ -1,43 +1,49 @@
 import "../../../../../../styles/metadata-instance-form-header.css";
-import { Text as h, Tooltip as F, Button as x } from "@box/blueprint-web";
-import { BoxAiLogo as M } from "@box/blueprint-web-assets/icons/Logo";
-import { useFormikContext as _, getIn as n } from "formik";
-import { useIntl as y } from "react-intl";
+import { Text as x, Tooltip as M, Button as _ } from "@box/blueprint-web";
+import { BoxAiLogo as H } from "@box/blueprint-web-assets/icons/Logo";
+import { useFormikContext as k, getIn as m } from "formik";
+import { useIntl as v } from "react-intl";
 import e from "./messages.js";
-import { jsxs as H, jsx as a } from "react/jsx-runtime";
-const v = "_metadataInstanceFormHeader_1b2cc_1", A = "_title_1b2cc_8", i = {
-  metadataInstanceFormHeader: v,
-  title: A
-}, S = ({
-  areAiSuggestionsAvailable: l,
-  isAiSuggestionsFeatureEnabled: r,
-  isLoading: o,
-  templateName: m,
-  onAutofill: c
+import { jsxs as A, jsx as n } from "react/jsx-runtime";
+const T = "_metadataInstanceFormHeader_1b2cc_1", S = "_title_1b2cc_8", c = {
+  metadataInstanceFormHeader: T,
+  title: S
+}, V = ({
+  areAiSuggestionsAvailable: d,
+  isAiSuggestionsFeatureEnabled: u,
+  isLoading: s,
+  templateName: f,
+  onAutofill: g
 }) => {
   const {
-    isSubmitting: d,
-    values: s,
-    setFieldValue: u
-  } = _(), t = y(), f = async () => {
-    const B = n(s, "metadata.fields"), I = n(s, "metadata.templateKey"), b = await c(I, B);
-    u("metadata.fields", b);
-  }, g = m ?? t.formatMessage(e.customInstanceTitle), p = !l || d || o;
-  return /* @__PURE__ */ H("div", {
-    className: i.metadataInstanceFormHeader,
-    children: [/* @__PURE__ */ a(h, {
+    isSubmitting: p,
+    values: i,
+    setFieldValue: B
+  } = k(), t = v(), I = async () => {
+    const r = m(i, "metadata.fields"), F = m(i, "metadata.templateKey"), a = await g(F, r);
+    B("metadata.fields", r.map((o) => {
+      const l = a == null ? void 0 : a.find((h) => h.key === o.key);
+      return l ? {
+        ...o,
+        aiSuggestion: l.aiSuggestion
+      } : o;
+    }));
+  }, b = f ?? t.formatMessage(e.customInstanceTitle), y = !d || p || s;
+  return /* @__PURE__ */ A("div", {
+    className: c.metadataInstanceFormHeader,
+    children: [/* @__PURE__ */ n(x, {
       as: "h1",
-      className: i.title,
+      className: c.title,
       variant: "titleMedium",
-      children: g
-    }), r && /* @__PURE__ */ a(F, {
+      children: b
+    }), u && /* @__PURE__ */ n(M, {
       content: t.formatMessage(e.autofillButtonTooltip),
-      children: /* @__PURE__ */ a(x, {
-        disabled: p,
-        icon: M,
-        loading: o,
+      children: /* @__PURE__ */ n(_, {
+        disabled: y,
+        icon: H,
+        loading: s,
         loadingAriaLabel: t.formatMessage(e.loadingButtonAriaLabel),
-        onClick: f,
+        onClick: I,
         variant: "secondary",
         "data-target-id": "Button-autofillButton",
         children: t.formatMessage(e.autofillButton)
@@ -46,5 +52,5 @@ const v = "_metadataInstanceFormHeader_1b2cc_1", A = "_title_1b2cc_8", i = {
   });
 };
 export {
-  S as MetadataInstanceFormHeader
+  V as MetadataInstanceFormHeader
 };

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance/metadata-instance.js

@@ -5,39 +5,39 @@ import { MetadataInstanceHeader as h } from "../metadata-instance-header/metadat
 import { MetadataInstanceContent as D } from "../metadata-instance-content/metadata-instance-content.js";
 import { MetadataInstanceFooter as V } from "../metadata-instance-footer/metadata-instance-footer.js";
 import { MetadataEmptyState as b } from "../../../metadata-empty-state/metadata-empty-state.js";
-import { jsxs as s, jsx as e, Fragment as l } from "react/jsx-runtime";
+import { jsxs as d, jsx as o, Fragment as l } from "react/jsx-runtime";
 const H = "_topDivider_tzhlb_1", S = "_bottomDivider_tzhlb_5", n = {
   topDivider: H,
   bottomDivider: S
 }, w = ({
-  isAiSuggestionsFeatureEnabled: d,
+  isAiSuggestionsFeatureEnabled: s,
   onEdit: u,
   onEditWithAutofill: p,
   templateInstance: t
 }) => {
-  const o = t.fields, y = o.every((a) => !a.value), c = o.some((a) => !a.value), v = o.length > 0, [i, r] = E(!0);
-  return /* @__PURE__ */ s(f, {
-    children: [/* @__PURE__ */ e(h, {
+  const e = t.fields, y = e.every((a) => !a.value), v = e.some((a) => !a.value), c = e.length > 0, [i, r] = E(!0);
+  return /* @__PURE__ */ d(f, {
+    children: [/* @__PURE__ */ o(h, {
       canEdit: !0,
-      isAiSuggestionsFeatureEnabled: d,
-      onAutofill: p,
+      isAiSuggestionsFeatureEnabled: s,
+      onAutofill: () => p(t),
       onEdit: () => u(t),
       templateName: t == null ? void 0 : t.displayName
-    }), /* @__PURE__ */ e(m, {
+    }), /* @__PURE__ */ o(m, {
       className: n.topDivider
-    }), i && y ? /* @__PURE__ */ e(b, {
-      isAnyEmptyValueHidden: v,
-      isBoxAiSuggestionsFeatureEnabled: d,
+    }), i && y ? /* @__PURE__ */ o(b, {
+      isAnyEmptyValueHidden: c,
+      isBoxAiSuggestionsFeatureEnabled: s,
       level: "instance",
       onShowEmptyValues: () => r(!1)
-    }) : /* @__PURE__ */ s(l, {
-      children: [/* @__PURE__ */ e(D, {
+    }) : /* @__PURE__ */ d(l, {
+      children: [/* @__PURE__ */ o(D, {
         shouldHideEmptyValues: i,
         templateInstance: t
-      }), c && /* @__PURE__ */ s(l, {
-        children: [/* @__PURE__ */ e(m, {
+      }), v && /* @__PURE__ */ d(l, {
+        children: [/* @__PURE__ */ o(m, {
           className: n.bottomDivider
-        }), /* @__PURE__ */ e(V, {
+        }), /* @__PURE__ */ o(V, {
           isAnyEmptyValueHidden: i,
           onHideEmptyValues: () => r(!0),
           onShowEmptyValues: () => r(!1)

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

@@ -6,11 +6,11 @@ const e = t({
   },
   autofillButtonTooltip: {
     id: "metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonTooltip",
-    defaultMessage: "Autofill with Box AI"
+    defaultMessage: "Autofill {templateName} with Box AI"
   },
   autofillButtonAriaLabel: {
     id: "metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonAriaLabel",
-    defaultMessage: "Autofill with Box AI"
+    defaultMessage: "Autofill {templateName} with Box AI"
   },
   editButtonTooltip: {
     id: "metadataEditor.viewInstance.metadataInstanceHeader.editButtonTooltip",

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

@@ -3,43 +3,47 @@ import { Text as f, Tooltip as i, IconButton as s } from "@box/blueprint-web";
 import { Pencil as g } from "@box/blueprint-web-assets/icons/Line";
 import { BoxAiLogo as b } from "@box/blueprint-web-assets/icons/Logo";
 import { useIntl as I } from "react-intl";
-import o from "./messages.js";
+import n from "./messages.js";
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-const p = "_metadataInstanceHeader_1vbbg_1", _ = "_iconButtonsContainer_1vbbg_7", h = "_title_1vbbg_15", e = {
-  metadataInstanceHeader: p,
-  iconButtonsContainer: _,
-  title: h
+const _ = "_metadataInstanceHeader_1vbbg_1", h = "_iconButtonsContainer_1vbbg_7", p = "_title_1vbbg_15", e = {
+  metadataInstanceHeader: _,
+  iconButtonsContainer: h,
+  title: p
 }, T = ({
   canEdit: c,
   isAiSuggestionsFeatureEnabled: l,
   onEdit: d,
-  onAutofill: m,
-  templateName: n
+  onAutofill: u,
+  templateName: t
 }) => {
-  const t = I(), u = n || t.formatMessage(o.customInstanceTitle), B = l && n;
+  const o = I(), m = t || o.formatMessage(n.customInstanceTitle), B = l && t;
   return /* @__PURE__ */ r("div", {
     className: e.metadataInstanceHeader,
     children: [/* @__PURE__ */ a(f, {
       as: "h1",
       className: e.title,
       variant: "titleMedium",
-      children: u
+      children: m
     }), c && /* @__PURE__ */ r("div", {
       className: e.iconButtonsContainer,
       children: [B && /* @__PURE__ */ a(i, {
-        content: t.formatMessage(o.autofillButtonTooltip),
+        content: o.formatMessage(n.autofillButtonTooltip, {
+          templateName: t
+        }),
         children: /* @__PURE__ */ a(s, {
-          "aria-label": t.formatMessage(o.autofillButtonAriaLabel),
+          "aria-label": o.formatMessage(n.autofillButtonAriaLabel, {
+            templateName: t
+          }),
           icon: b,
-          onClick: m,
+          onClick: u,
           variant: "icon-logo",
           "data-target-id": "IconButton-autofillButtonAriaLabel"
         })
       }), /* @__PURE__ */ a(i, {
-        content: t.formatMessage(o.editButtonTooltip),
+        content: o.formatMessage(n.editButtonTooltip),
         children: /* @__PURE__ */ a(s, {
-          "aria-label": t.formatMessage(o.editButtonAriaLabel, {
-            templateName: n
+          "aria-label": o.formatMessage(n.editButtonAriaLabel, {
+            templateName: t
           }),
           icon: g,
           onClick: d,

package/esm/lib/utils/api-wrapper.js

@@ -0,0 +1,19 @@
+import { AutofillContextProvider as f } from "./autofill-context.js";
+import { jsx as o } from "react/jsx-runtime";
+function e(t) {
+  return ({
+    isAiSuggestionsFeatureEnabled: r,
+    fetchSuggestions: p,
+    ...i
+  }) => /* @__PURE__ */ o(f, {
+    fetchSuggestions: p,
+    isAiSuggestionsFeatureEnabled: r,
+    children: /* @__PURE__ */ o(t, {
+      isAiSuggestionsFeatureEnabled: r,
+      ...i
+    })
+  });
+}
+export {
+  e as withApiWrapper
+};

package/esm/lib/utils/autofill-context.js

@@ -1,60 +1,61 @@
-import { createContext as C, useState as g, useCallback as p, useMemo as A, useContext as v } from "react";
-import { TEMPLATE_CUSTOM_PROPERTIES as x } from "../constants.js";
+import { createContext as p, useState as m, useCallback as v, useMemo as x, useContext as A } from "react";
+import { TEMPLATE_CUSTOM_PROPERTIES as P } from "../constants.js";
 import { fetchSuggestions as E } from "./utils.js";
-import { jsx as P } from "react/jsx-runtime";
-const m = /* @__PURE__ */ C(null), y = ({
+import { jsx as M } from "react/jsx-runtime";
+const h = /* @__PURE__ */ p(null), O = ({
   children: e,
-  isAiSuggestionsFeatureEnabled: n
+  isAiSuggestionsFeatureEnabled: r,
+  fetchSuggestions: i = E
 }) => {
-  const [t, h] = g({}), [i, u] = g(!1), a = p(async (r, l, w = !1) => {
-    let s = [];
-    if (!n)
+  const [t, S] = m({}), [u, l] = m(!1), a = v(async (s, c, C = !1) => {
+    let n = [];
+    if (!r)
       throw new Error("AI Suggestions feature not available.");
-    if (r === x)
+    if (s === P)
       throw new Error("Can't fetch suggestions for Custom Metadata instance");
-    if (!t[r] || w) {
-      u(!0);
+    if (!t[s] || C) {
+      l(!0);
       try {
-        s = await E(r, l), h({
+        n = await i(s, c), S({
           ...t,
-          [r]: {
-            ...Object.fromEntries(s.map((o) => [o.key, o.aiSuggestion]))
+          [s]: {
+            ...Object.fromEntries(n.map((o) => [o.key, o.aiSuggestion]))
           }
         });
       } catch {
       } finally {
-        u(!1);
+        l(!1);
       }
     } else
-      s = l.map((o) => {
-        var f;
-        const c = (f = t == null ? void 0 : t.templateKey) == null ? void 0 : f[o.key];
+      n = c.map((o) => {
+        var g;
+        const f = (g = t == null ? void 0 : t.templateKey) == null ? void 0 : g[o.key];
         return {
           ...o,
-          ...c ? {
-            aiSuggestion: c
+          ...f ? {
+            aiSuggestion: f
           } : null
         };
       });
-    return s;
-  }, [t]), S = A(() => ({
+    return n;
+  }, [r, t, i]), w = x(() => ({
     getAiSuggestions: a,
-    isAiSuggestionsFeatureEnabled: n,
-    isFetchingSuggestions: i,
+    isAiSuggestionsFeatureEnabled: r,
+    isFetchingSuggestions: u,
     suggestions: t
-  }), [a, n, i, t]);
-  return /* @__PURE__ */ P(m.Provider, {
-    value: S,
+  }), [a, r, u, t]);
+  return /* @__PURE__ */ M(h.Provider, {
+    value: w,
     children: e
   });
-}, I = () => {
-  const e = v(m);
+}, d = () => {
+  const e = A(h);
   if (!e)
     throw new Error("useAutofill should be wrapped inside AutofillProvider");
   return e;
 };
 export {
-  m as AutofillContext,
-  y as AutofillContextProvider,
-  I as useAutofill
+  h as AutofillContext,
+  O as AutofillContextProvider,
+  d as useAutofill
 };

package/i18n/en-US.js

@@ -91,8 +91,8 @@ export default {
   "metadataEditor.unsavedChangesModal.header": "Unsaved Changes",
   "metadataEditor.viewInstance.metadataInstanceFooter.hideEmptyValuesCTA": "Hide empty values",
   "metadataEditor.viewInstance.metadataInstanceFooter.showEmptyValuesCTA": "Show empty values",
-  "metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonAriaLabel": "Autofill with Box AI",
-  "metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonTooltip": "Autofill with Box AI",
+  "metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonAriaLabel": "Autofill {templateName} with Box AI",
+  "metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonTooltip": "Autofill {templateName} with Box AI",
   "metadataEditor.viewInstance.metadataInstanceHeader.customMetadataTitle": "Custom Metadata",
   "metadataEditor.viewInstance.metadataInstanceHeader.editButtonAriaLabel": "Edit {templateName}",
   "metadataEditor.viewInstance.metadataInstanceHeader.editButtonTooltip": "Edit"

package/i18n/en-US.properties

@@ -183,9 +183,9 @@ metadataEditor.viewInstance.metadataInstanceFooter.hideEmptyValuesCTA = Hide emp
 # Call to action to show hidden empty values
 metadataEditor.viewInstance.metadataInstanceFooter.showEmptyValuesCTA = Show empty values
 # Aria label for the autofill button
-metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonAriaLabel = Autofill with Box AI
+metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonAriaLabel = Autofill {templateName} with Box AI
 # Tooltip text explaining that by clicking button user can autofill template using Box AI
-metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonTooltip = Autofill with Box AI
+metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonTooltip = Autofill {templateName} with Box AI
 # Header with Custom Metadata template name
 metadataEditor.viewInstance.metadataInstanceHeader.customMetadataTitle = Custom Metadata
 # Aria label for the edit button

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

@@ -1 +1 @@
-[{"id":"metadataEditor.viewInstance.metadataInstanceHeader.customMetadataTitle","description":"Header with Custom Metadata template name","defaultMessage":"Custom Metadata"},{"id":"metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonTooltip","description":"Tooltip text explaining that by clicking button user can autofill template using Box AI","defaultMessage":"Autofill with Box AI"},{"id":"metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonAriaLabel","description":"Aria label for the autofill button","defaultMessage":"Autofill with Box AI"},{"id":"metadataEditor.viewInstance.metadataInstanceHeader.editButtonTooltip","description":"Tooltip text explaining that by clicking button user can edit template","defaultMessage":"Edit"},{"id":"metadataEditor.viewInstance.metadataInstanceHeader.editButtonAriaLabel","description":"Aria label for the edit button","defaultMessage":"Edit {templateName}"}]
+[{"id":"metadataEditor.viewInstance.metadataInstanceHeader.customMetadataTitle","description":"Header with Custom Metadata template name","defaultMessage":"Custom Metadata"},{"id":"metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonTooltip","description":"Tooltip text explaining that by clicking button user can autofill template using Box AI","defaultMessage":"Autofill {templateName} with Box AI"},{"id":"metadataEditor.viewInstance.metadataInstanceHeader.autofillButtonAriaLabel","description":"Aria label for the autofill button","defaultMessage":"Autofill {templateName} with Box AI"},{"id":"metadataEditor.viewInstance.metadataInstanceHeader.editButtonTooltip","description":"Tooltip text explaining that by clicking button user can edit template","defaultMessage":"Edit"},{"id":"metadataEditor.viewInstance.metadataInstanceHeader.editButtonAriaLabel","description":"Aria label for the edit button","defaultMessage":"Edit {templateName}"}]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.60.4",
+  "version": "0.61.0",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.30.3",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "cc88fe6001296a03f1dfce7edec7b6cd1b0ed9f0"
+  "gitHead": "93e3d2d7d217f2c872083186f18113abeabcf30e"
 }

package/types/index.d.ts

@@ -9,3 +9,4 @@ export * from './lib/defaults';
 export * from './lib/metadata-editor';
 export * from './lib/types';
 export * from './lib/utils/autofill-context';
+export * from './lib/utils/api-wrapper';

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

@@ -2,6 +2,6 @@ import { type MetadataTemplateInstance } from '../../../../types';
 export type MetadataInstanceProps = {
     isAiSuggestionsFeatureEnabled: boolean;
     onEdit: (templateInstance: MetadataTemplateInstance) => void;
-    onEditWithAutofill: () => void;
+    onEditWithAutofill: (templateInstance: MetadataTemplateInstance) => void;
     templateInstance: MetadataTemplateInstance;
 };

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

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

package/types/lib/utils/api-wrapper.d.ts

@@ -0,0 +1,2 @@
+import { type AutofillContextProviderProps } from './autofill-context';
+export declare function withApiWrapper<P extends object>(WrappedComponent: React.ComponentType<P>): ({ isAiSuggestionsFeatureEnabled, fetchSuggestions, ...props }: P & Omit<AutofillContextProviderProps, 'children'>) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,9 +6,11 @@ export interface AutofillContextType {
     isAiSuggestionsFeatureEnabled: boolean;
     suggestions: AutofillSuggestions;
 }
-export declare const AutofillContext: React.Context<AutofillContextType>;
-export declare const AutofillContextProvider: ({ children, isAiSuggestionsFeatureEnabled, }: {
+export interface AutofillContextProviderProps {
     children: React.ReactNode;
     isAiSuggestionsFeatureEnabled: boolean;
-}) => React.ReactElement;
+    fetchSuggestions: (templateKey: string, fields: MetadataTemplateField[]) => Promise<MetadataTemplateField[]>;
+}
+export declare const AutofillContext: React.Context<AutofillContextType>;
+export declare const AutofillContextProvider: ({ children, isAiSuggestionsFeatureEnabled, fetchSuggestions, }: AutofillContextProviderProps) => React.ReactElement;
 export declare const useAutofill: () => AutofillContextType;