@box/metadata-editor 0.48.0 → 0.49.0

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

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

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

@@ -1,32 +1,35 @@
 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 { TextButton as b, Button as r } from "@box/blueprint-web";
+import { useFormikContext as g } from "formik";
 import { useIntl as F } from "react-intl";
+import { useAutofill as f } from "../../../../utils/autofill-context.js";
 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 = ({
+const _ = "_metadataInstanceFormFooter_17478_1", p = "_buttonsContainer_17478_8", C = "_buttons_17478_8", s = {
+  metadataInstanceFormFooter: _,
+  buttonsContainer: p,
+  buttons: C
+}, A = ({
   isLoading: m,
   onCancel: c,
   onDelete: l
 }) => {
   const t = F(), {
-    isSubmitting: s,
+    isSubmitting: a,
     submitForm: d
-  } = b(), n = m || s;
+  } = g(), {
+    isFetchingSuggestions: u
+  } = f(), n = m || a || u;
   return /* @__PURE__ */ e("div", {
-    className: a.metadataInstanceFormFooter,
+    className: s.metadataInstanceFormFooter,
     children: /* @__PURE__ */ i("div", {
-      className: a.buttonsContainer,
-      children: [/* @__PURE__ */ e(u, {
+      className: s.buttonsContainer,
+      children: [/* @__PURE__ */ e(b, {
         disabled: n,
         onClick: l,
         children: t.formatMessage(o.deleteButton)
       }), /* @__PURE__ */ i("div", {
-        className: a.buttons,
+        className: s.buttons,
         children: [/* @__PURE__ */ e(r, {
           disabled: n,
           onClick: c,
@@ -35,7 +38,7 @@ const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8"
           children: t.formatMessage(o.cancelButton)
         }), /* @__PURE__ */ e(r, {
           disabled: n,
-          loading: s,
+          loading: a,
           loadingAriaLabel: t.formatMessage(o.loadingAriaLabel),
           onClick: d,
           size: "large",
@@ -46,5 +49,5 @@ const g = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8"
   });
 };
 export {
-  x as MetadataInstanceFormFooter
+  A as MetadataInstanceFormFooter
 };

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

@@ -1,40 +1,48 @@
 import "../../../../../../styles/metadata-instance-form-header.css";
-import { Text as l, Button as d } from "@box/blueprint-web";
-import { BoxAiLogo as f } from "@box/blueprint-web-assets/icons/Logo";
-import { useFormikContext as u } from "formik";
-import { useIntl as g } from "react-intl";
+import { Text as h, Button as x } from "@box/blueprint-web";
+import { BoxAiLogo as A } from "@box/blueprint-web-assets/icons/Logo";
+import { useFormikContext as _, getIn as s } from "formik";
+import { useIntl as y } from "react-intl";
+import { useAutofill as B } from "../../../../utils/autofill-context.js";
 import e from "./messages.js";
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-const I = "_metadataInstanceFormHeader_1b2cc_1", b = "_title_1b2cc_8", o = {
-  metadataInstanceFormHeader: I,
-  title: b
-}, v = ({
+import { jsxs as H, jsx as o } from "react/jsx-runtime";
+const M = "_metadataInstanceFormHeader_1b2cc_1", v = "_title_1b2cc_8", i = {
+  metadataInstanceFormHeader: M,
+  title: v
+}, w = ({
   isAiSuggestionsFeatureEnabled: n,
   isLoading: r,
-  onAutofill: s,
-  templateName: i
+  templateName: m
 }) => {
   const {
-    isSubmitting: m
-  } = u(), t = g(), c = i ?? t.formatMessage(e.customInstanceTitle);
-  return /* @__PURE__ */ p("div", {
-    className: o.metadataInstanceFormHeader,
-    children: [/* @__PURE__ */ a(l, {
+    isSubmitting: l,
+    values: a,
+    setFieldValue: c
+  } = _(), {
+    getAiSuggestions: d,
+    isFetchingSuggestions: u
+  } = B(), t = y(), g = async () => {
+    const F = s(a, "metadata.fields"), I = s(a, "metadata.templateKey"), b = await d(I, F);
+    c("metadata.fields", b);
+  }, f = m ?? t.formatMessage(e.customInstanceTitle), p = l || u;
+  return /* @__PURE__ */ H("div", {
+    className: i.metadataInstanceFormHeader,
+    children: [/* @__PURE__ */ o(h, {
       as: "h1",
-      className: o.title,
+      className: i.title,
       variant: "titleMedium",
-      children: c
-    }), n && /* @__PURE__ */ a(d, {
-      disabled: m,
-      icon: f,
+      children: f
+    }), n && /* @__PURE__ */ o(x, {
+      disabled: p,
+      icon: A,
       loading: r,
       loadingAriaLabel: t.formatMessage(e.loadingButtonAriaLabel),
-      onClick: s,
+      onClick: g,
       variant: "secondary",
       children: t.formatMessage(e.autofillButton)
     })]
   });
 };
 export {
-  v as MetadataInstanceFormHeader
+  w as MetadataInstanceFormHeader
 };

package/esm/lib/test-utils/index.js

@@ -1,31 +1,41 @@
 import { FormikWrapper as l } from "./formik-wrapper.js";
-import { allFieldsTemplate as m, allFieldsTemplateInstance as p, customTemplate as s, customTemplateInstance as n, customTemplateInstanceWithAllFieldsEmpty as i, customTemplateInstanceWithoutEmptyValues as d, dateField as o, emptyCustomTemplateInstance as u, emptyTemplateInstance as c, enumField as F, fields as r, floatField as T, multiSelectField as I, noFieldsTemplate as y, noValueField as f, nonHiddenFieldsTemplate as x, stringField as W, templateInstanceWithAllFieldsEmpty as h, templateInstanceWithoutEmptyValues as E, templateInstancesList as A, templateOptions as V, templates as b } from "./sample-data.js";
-import { blur as k, updateText as B, updateTextAndBlur as C } from "./test-utils.js";
+import { allFieldsSuggestions as a, allFieldsTemplate as n, allFieldsTemplateInstance as i, allFieldsWithAiSuggestions as m, customTemplate as p, customTemplateInstance as o, customTemplateInstanceWithAllFieldsEmpty as d, customTemplateInstanceWithoutEmptyValues as c, dateField as u, emptyCustomTemplateInstance as F, emptyTemplateInstance as T, enumField as r, fields as g, firstTemplateInstance as I, firstTemplateInstanceFieldsWithSuggestions as f, firstTemplateSuggestions as h, floatField as S, multiSelectField as W, noFieldsTemplate as y, noValueField as x, nonHiddenFieldsTemplate as A, secondTemplateInstance as E, secondTemplateInstanceFieldsWithSuggestions as V, secondTemplateSuggestions as b, stringField as k, templateInstanceWithAllFieldsEmpty as B, templateInstanceWithoutEmptyValues as C, templateInstancesList as D, templateOptions as H, templates as L } from "./sample-data.js";
+import { blur as j, checkIfFormFieldsAreDisabled as q, fetchSuggestions as v, updateText as w, updateTextAndBlur as z } from "./test-utils.js";
 export {
   l as FormikWrapper,
-  m as allFieldsTemplate,
-  p as allFieldsTemplateInstance,
-  k as blur,
-  s as customTemplate,
-  n as customTemplateInstance,
-  i as customTemplateInstanceWithAllFieldsEmpty,
-  d as customTemplateInstanceWithoutEmptyValues,
-  o as dateField,
-  u as emptyCustomTemplateInstance,
-  c as emptyTemplateInstance,
-  F as enumField,
-  r as fields,
-  T as floatField,
-  I as multiSelectField,
+  a as allFieldsSuggestions,
+  n as allFieldsTemplate,
+  i as allFieldsTemplateInstance,
+  m as allFieldsWithAiSuggestions,
+  j as blur,
+  q as checkIfFormFieldsAreDisabled,
+  p as customTemplate,
+  o as customTemplateInstance,
+  d as customTemplateInstanceWithAllFieldsEmpty,
+  c as customTemplateInstanceWithoutEmptyValues,
+  u as dateField,
+  F as emptyCustomTemplateInstance,
+  T as emptyTemplateInstance,
+  r as enumField,
+  v as fetchSuggestions,
+  g as fields,
+  I as firstTemplateInstance,
+  f as firstTemplateInstanceFieldsWithSuggestions,
+  h as firstTemplateSuggestions,
+  S as floatField,
+  W as multiSelectField,
   y as noFieldsTemplate,
-  f as noValueField,
-  x as nonHiddenFieldsTemplate,
-  W as stringField,
-  h as templateInstanceWithAllFieldsEmpty,
-  E as templateInstanceWithoutEmptyValues,
-  A as templateInstancesList,
-  V as templateOptions,
-  b as templates,
-  B as updateText,
-  C as updateTextAndBlur
+  x as noValueField,
+  A as nonHiddenFieldsTemplate,
+  E as secondTemplateInstance,
+  V as secondTemplateInstanceFieldsWithSuggestions,
+  b as secondTemplateSuggestions,
+  k as stringField,
+  B as templateInstanceWithAllFieldsEmpty,
+  C as templateInstanceWithoutEmptyValues,
+  D as templateInstancesList,
+  H as templateOptions,
+  L as templates,
+  w as updateText,
+  z as updateTextAndBlur
 };

package/esm/lib/test-utils/sample-data.js

@@ -1,17 +1,17 @@
-import { mapTemplateOptionsFromTemplates as f } from "../mappers.js";
-const a = {
+import { mapTemplateOptionsFromTemplates as h } from "../mappers.js";
+const n = {
   id: "1",
   type: "string",
   key: "signature",
   hidden: !1,
   displayName: "Signature"
-}, i = {
+}, d = {
   id: "2",
   type: "date",
   key: "effectiveDate",
   hidden: !1,
   displayName: "Effective Date"
-}, d = {
+}, l = {
   id: "3",
   type: "enum",
   key: "country",
@@ -24,13 +24,13 @@ const a = {
     id: "2",
     key: "UK"
   }]
-}, s = {
+}, p = {
   id: "4",
   type: "float",
   key: "caseNumber",
   hidden: !1,
   displayName: "Number of Cases"
-}, n = {
+}, m = {
   id: "5",
   type: "multiSelect",
   key: "orgs",
@@ -46,35 +46,35 @@ const a = {
     id: "Engineering",
     key: "Engineering"
   }]
-}, h = {
+}, k = {
   id: "6",
   type: "string",
   key: "hidden",
   displayName: "Hidden",
   hidden: !0
-}, k = {
+}, F = {
   id: "7",
   type: "string",
   key: "noValue",
   hidden: !1,
   displayName: "No value"
-}, F = {
+}, o = {
   id: "1",
   displayName: "All metadata fields",
   scope: "enterprise_1",
   templateKey: "allFields",
   type: "metadata_template",
   hidden: !1,
-  fields: [a, d, s, i, n, h, k]
-}, M = {
+  fields: [n, l, p, d, m, k, F]
+}, H = {
   hidden: !1,
   id: "2",
   displayName: "Non hidden metadata fields",
   scope: "enterprise_1",
   templateKey: "nonHiddenFields",
   type: "metadata_template",
-  fields: [a, d, s, i, n]
-}, g = {
+  fields: [n, l, p, d, m]
+}, N = {
   id: "3",
   displayName: "No metadata fields",
   scope: "enterprise_3",
@@ -82,7 +82,7 @@ const a = {
   type: "metadata_template",
   fields: [],
   hidden: !1
-}, N = {
+}, _ = {
   id: "4",
   displayName: "Hidden template",
   scope: "enterprise_3",
@@ -90,21 +90,21 @@ const a = {
   type: "metadata_template",
   fields: [],
   hidden: !0
-}, _ = [F, g, N], U = {
+}, I = [o, N, _], O = {
   id: "5",
   scope: "enterprise_3",
   templateKey: "properties",
   type: "metadata_template",
   fields: [],
   hidden: !1
-}, W = f(_), D = [a, d, s, i, n], l = {
+}, U = h(I), J = [n, l, p, d, m], y = {
   id: "1",
   type: "string",
   key: "signature",
   hidden: !1,
   displayName: "Signature",
   value: "Jan Kowalski"
-}, p = {
+}, c = {
   id: "2",
   type: "enum",
   key: "country",
@@ -118,21 +118,21 @@ const a = {
     key: "UK"
   }],
   value: "US"
-}, m = {
+}, r = {
   id: "3",
   type: "float",
   key: "caseNumber",
   hidden: !1,
   displayName: "Number of Cases",
   value: "25"
-}, o = {
+}, u = {
   id: "4",
   type: "date",
   key: "effectiveDate",
   hidden: !1,
   displayName: "Effective Date",
   value: "2024-02-08T00:00:00.000Z"
-}, y = {
+}, f = {
   id: "5",
   type: "multiSelect",
   key: "orgs",
@@ -149,27 +149,27 @@ const a = {
     key: "Engineering"
   }],
   value: ["Sales", "Marketing"]
-}, c = {
+}, g = {
   id: "6",
   type: "string",
   key: "hidden",
   displayName: "Hidden",
   hidden: !0,
   value: "should be hidden"
-}, t = {
+}, a = {
   id: "7",
   type: "string",
   key: "noValue",
   hidden: !1,
   displayName: "No value",
   value: null
-}, E = {
-  ...t,
+}, T = {
+  ...a,
   key: "noValue1"
-}, I = {
-  ...t,
+}, E = {
+  ...a,
   key: "noValue2"
-}, K = {
+}, S = {
   canEdit: !0,
   id: "1",
   displayName: "All metadata fields",
@@ -177,8 +177,8 @@ const a = {
   templateKey: "allFields",
   type: "metadata_template",
   hidden: !1,
-  fields: [l, p, m, o, y, c, t]
-}, T = {
+  fields: [y, c, r, u, f, g, a]
+}, K = {
   canEdit: !0,
   id: "2",
   displayName: "Without Empty Values",
@@ -186,7 +186,7 @@ const a = {
   templateKey: "withoutEmptyFields",
   type: "metadata_template",
   hidden: !1,
-  fields: [l, p, m, o, y, c]
+  fields: [y, c, r, u, f, g]
 }, v = {
   canEdit: !0,
   id: "3",
@@ -196,7 +196,7 @@ const a = {
   type: "metadata_template",
   hidden: !1,
   fields: []
-}, S = {
+}, V = {
   canEdit: !0,
   id: "4",
   displayName: "All Fields Empty Template",
@@ -204,41 +204,41 @@ const a = {
   templateKey: "emptyFields",
   type: "metadata_template",
   hidden: !1,
-  fields: [t, E, I]
-}, r = {
+  fields: [a, T, E]
+}, i = {
   id: "1",
   type: "string",
   key: "signature",
   hidden: !1,
   value: "Jan Kowalski"
-}, u = {
+}, s = {
   id: "2",
   type: "string",
   key: "version number",
   hidden: !1,
   value: "2.1"
-}, e = {
+}, t = {
   id: "3",
   type: "string",
   key: "empty field",
   hidden: !1
-}, V = {
+}, A = {
   canEdit: !0,
   id: "5",
   scope: "enterprise_1",
   templateKey: "properties",
   type: "metadata_template",
-  fields: [r, u, e],
+  fields: [i, s, t],
   hidden: !1
-}, C = {
+}, b = {
   canEdit: !0,
   id: "6",
   scope: "enterprise_1",
   templateKey: "properties",
   type: "metadata_template",
-  fields: [r, u],
+  fields: [i, s],
   hidden: !1
-}, b = {
+}, C = {
   canEdit: !0,
   id: "7",
   scope: "enterprise_1",
@@ -246,36 +246,82 @@ const a = {
   type: "metadata_template",
   fields: [],
   hidden: !1
-}, A = {
+}, W = {
   canEdit: !0,
   id: "8",
   scope: "enterprise_1",
   templateKey: "properties",
   type: "metadata_template",
-  fields: [e, e, e],
+  fields: [t, t, t],
   hidden: !1
-}, O = [K, T, S, v, V, C, b, A];
+}, w = [S, K, V, v, A, b, C, W], M = o.fields.map((e) => ({
+  ...e,
+  aiSuggestion: "mock suggestion"
+})), B = {
+  [o.templateKey]: {
+    ...Object.fromEntries(M.map((e) => [e.key, e.aiSuggestion]))
+  }
+}, z = {
+  id: "1",
+  canEdit: !0,
+  displayName: "Metadata Template A",
+  scope: "enterprise_1",
+  templateKey: "templateA",
+  type: "metadata_template",
+  hidden: !1,
+  fields: [i]
+}, j = {
+  templateA: {
+    signature: "John Doe"
+  }
+}, x = [{
+  ...i,
+  aiSuggestion: "John Doe"
+}], L = {
+  id: "1",
+  displayName: "Metadata Template B",
+  scope: "enterprise_1",
+  templateKey: "templateB",
+  type: "metadata_template",
+  hidden: !1,
+  fields: [s]
+}, Z = {
+  templateB: {
+    "version number": "3.0"
+  }
+}, q = [{
+  ...s,
+  aiSuggestion: "3.0"
+}];
 export {
-  F as allFieldsTemplate,
-  K as allFieldsTemplateInstance,
-  U as customTemplate,
-  V as customTemplateInstance,
-  A as customTemplateInstanceWithAllFieldsEmpty,
-  C as customTemplateInstanceWithoutEmptyValues,
-  i as dateField,
-  b as emptyCustomTemplateInstance,
+  B as allFieldsSuggestions,
+  o as allFieldsTemplate,
+  S as allFieldsTemplateInstance,
+  M as allFieldsWithAiSuggestions,
+  O as customTemplate,
+  A as customTemplateInstance,
+  W as customTemplateInstanceWithAllFieldsEmpty,
+  b as customTemplateInstanceWithoutEmptyValues,
+  d as dateField,
+  C as emptyCustomTemplateInstance,
   v as emptyTemplateInstance,
-  d as enumField,
-  D as fields,
-  s as floatField,
-  n as multiSelectField,
-  g as noFieldsTemplate,
-  k as noValueField,
-  M as nonHiddenFieldsTemplate,
-  a as stringField,
-  S as templateInstanceWithAllFieldsEmpty,
-  T as templateInstanceWithoutEmptyValues,
-  O as templateInstancesList,
-  W as templateOptions,
-  _ as templates
+  l as enumField,
+  J as fields,
+  z as firstTemplateInstance,
+  x as firstTemplateInstanceFieldsWithSuggestions,
+  j as firstTemplateSuggestions,
+  p as floatField,
+  m as multiSelectField,
+  N as noFieldsTemplate,
+  F as noValueField,
+  H as nonHiddenFieldsTemplate,
+  L as secondTemplateInstance,
+  q as secondTemplateInstanceFieldsWithSuggestions,
+  Z as secondTemplateSuggestions,
+  n as stringField,
+  V as templateInstanceWithAllFieldsEmpty,
+  K as templateInstanceWithoutEmptyValues,
+  w as templateInstancesList,
+  U as templateOptions,
+  I as templates
 };

package/esm/lib/test-utils/test-utils.js

@@ -1,13 +1,30 @@
-import { userEvent as t } from "@storybook/test";
-const i = async (a, c) => {
-  await t.click(a), await t.clear(a), await t.type(a, c);
-}, n = async () => {
-  await t.click(document.body);
-}, o = async (a, c) => {
-  await i(a, c), await n();
-};
+import { userEvent as s, within as d, expect as l } from "@storybook/test";
+const r = async (e, t) => {
+  await s.click(e), await s.clear(e), await s.type(e, t);
+}, y = async () => {
+  await s.click(document.body);
+}, u = async (e, t) => {
+  await r(e, t), await y();
+}, g = async (e, t) => {
+  const a = d(e);
+  t.filter((i) => !i.hidden).forEach((i) => {
+    const c = a.queryByTestId(`${i.displayName}-field`);
+    if (i.type === "date") {
+      const o = d(c).getByRole("group");
+      l(o).toHaveAttribute("aria-disabled");
+    } else
+      [...c.getElementsByTagName("input")].filter((n) => n.type !== "hidden").forEach((n) => {
+        l(n).toBeDisabled();
+      });
+  });
+}, m = async (e, t) => t.map((a) => ({
+  ...a,
+  aiSuggestion: `${a.key} suggestion`
+}));
 export {
-  n as blur,
-  i as updateText,
-  o as updateTextAndBlur
+  y as blur,
+  g as checkIfFormFieldsAreDisabled,
+  m as fetchSuggestions,
+  r as updateText,
+  u as updateTextAndBlur
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.20.0",
@@ -16,6 +16,7 @@
     "@box/blueprint-web": "^7.24.1",
     "@box/blueprint-web-assets": "^4.21.5",
     "@box/storybook-utils": "^0.6.1",
+    "@testing-library/react": "^15.0.6",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-intl": "6.4.2"
@@ -51,5 +52,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "52a076c5917fab86763a0f6339caed8d0ba4e332"
+  "gitHead": "0382194d1e9c1a1c900b1e95d631fad1461993fc"
 }

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

@@ -1,2 +1,2 @@
 import { type MetadataInstanceFormHeaderProps } from './types';
-export declare const MetadataInstanceFormHeader: ({ isAiSuggestionsFeatureEnabled, isLoading, onAutofill, templateName, }: MetadataInstanceFormHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataInstanceFormHeader: ({ isAiSuggestionsFeatureEnabled, isLoading, templateName, }: MetadataInstanceFormHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/types/lib/test-utils/sample-data.d.ts

@@ -1,4 +1,4 @@
-import { type MetadataTemplate, type MetadataTemplateField, type MetadataTemplateInstance, type MetadataTemplateOption } from '../types';
+import { type MetadataTemplate, type MetadataTemplateField, type MetadataTemplateInstance, type MetadataTemplateOption, type AutofillSuggestions } from '../types';
 declare const stringField: MetadataTemplateField;
 declare const dateField: MetadataTemplateField;
 declare const enumField: MetadataTemplateField;
@@ -21,4 +21,12 @@ declare const customTemplateInstanceWithoutEmptyValues: MetadataTemplateInstance
 declare const emptyCustomTemplateInstance: MetadataTemplateInstance;
 declare const customTemplateInstanceWithAllFieldsEmpty: MetadataTemplateInstance;
 declare const templateInstancesList: MetadataTemplateInstance[];
-export { allFieldsTemplate, allFieldsTemplateInstance, customTemplate, customTemplateInstance, customTemplateInstanceWithAllFieldsEmpty, customTemplateInstanceWithoutEmptyValues, dateField, emptyCustomTemplateInstance, emptyTemplateInstance, enumField, fields, floatField, multiSelectField, noFieldsTemplate, nonHiddenFieldsTemplate, noValueField, stringField, templateInstancesList, templateInstanceWithAllFieldsEmpty, templateInstanceWithoutEmptyValues, templateOptions, templates, };
+declare const allFieldsWithAiSuggestions: MetadataTemplateField[];
+declare const allFieldsSuggestions: AutofillSuggestions;
+declare const firstTemplateInstance: MetadataTemplateInstance;
+declare const firstTemplateSuggestions: AutofillSuggestions;
+declare const firstTemplateInstanceFieldsWithSuggestions: MetadataTemplateField[];
+declare const secondTemplateInstance: MetadataTemplate;
+declare const secondTemplateSuggestions: AutofillSuggestions;
+declare const secondTemplateInstanceFieldsWithSuggestions: MetadataTemplateField[];
+export { allFieldsTemplate, allFieldsTemplateInstance, customTemplate, customTemplateInstance, customTemplateInstanceWithAllFieldsEmpty, customTemplateInstanceWithoutEmptyValues, dateField, emptyCustomTemplateInstance, emptyTemplateInstance, enumField, fields, floatField, multiSelectField, noFieldsTemplate, nonHiddenFieldsTemplate, noValueField, stringField, templateInstancesList, templateInstanceWithAllFieldsEmpty, templateInstanceWithoutEmptyValues, templateOptions, templates, allFieldsWithAiSuggestions, allFieldsSuggestions, firstTemplateInstance, firstTemplateInstanceFieldsWithSuggestions, secondTemplateInstance, firstTemplateSuggestions, secondTemplateSuggestions, secondTemplateInstanceFieldsWithSuggestions, };

package/types/lib/test-utils/test-utils.d.ts

@@ -1,3 +1,6 @@
+import { type MetadataTemplateField } from '../types';
 export declare const updateText: (el: any, text: any) => Promise<void>;
 export declare const blur: () => Promise<void>;
 export declare const updateTextAndBlur: (el: any, text: any) => Promise<void>;
+export declare const checkIfFormFieldsAreDisabled: (canvasElement: HTMLElement, fields: MetadataTemplateField[]) => Promise<void>;
+export declare const fetchSuggestions: (templateKey: string, fields: MetadataTemplateField[]) => Promise<MetadataTemplateField[]>;

package/types/lib/types.d.ts

@@ -62,3 +62,5 @@ export type MetadataTemplateInstance = {
     templateKey: string;
     type: string;
 };
+export type TemplateSuggestion = Record<MetadataTemplateField['key'], MetadataTemplateField['aiSuggestion']>;
+export type AutofillSuggestions = Record<MetadataTemplateInstance['templateKey'], TemplateSuggestion>;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type AutofillSuggestions, type MetadataTemplateField, type MetadataTemplateInstance } from '../types';
+export interface AutofillContextType {
+    getAiSuggestions: (templateKey: MetadataTemplateInstance['templateKey'], fields: MetadataTemplateField[]) => Promise<MetadataTemplateField[]>;
+    isFetchingSuggestions: boolean;
+    isAiSuggestionsFeatureEnabled: boolean;
+    suggestions: AutofillSuggestions;
+}
+export declare const AutofillContext: React.Context<AutofillContextType>;
+export declare const AutofillContextProvider: ({ children, isAiSuggestionsFeatureEnabled, }: {
+    children: React.ReactNode;
+    isAiSuggestionsFeatureEnabled: boolean;
+}) => React.ReactElement;
+export declare const useAutofill: () => AutofillContextType;