@box/metadata-editor 0.56.1 → 0.58.0

package/esm/lib/components/add-metadata-template-dropdown/add-metadata-template-dropdown.js

@@ -1,39 +1,40 @@
-import { IconButton as M } from "@box/blueprint-web";
+import { IconButton as S } from "@box/blueprint-web";
 import { Plus as T } from "@box/blueprint-web-assets/icons/Fill";
 import { Space2 as E } from "@box/blueprint-web-assets/tokens/px-tokens";
-import { useState as w, useMemo as y } from "react";
-import { useIntl as C } from "react-intl";
-import { TEMPLATE_CUSTOM_PROPERTIES as I } from "../../constants.js";
+import { useState as I, useMemo as L } from "react";
+import { useIntl as w } from "react-intl";
+import { TEMPLATE_CUSTOM_PROPERTIES as y } from "../../constants.js";
 import { FilterDropdownMenu as t } from "../filter-dropdown-menu/index.js";
 import s from "./messages.js";
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-const L = parseInt(E, 10);
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+const B = parseInt(E, 10);
 function j({
-  availableTemplates: m,
-  onSelect: d,
+  availableTemplates: n,
+  onSelect: l,
   selectedTemplates: c
 }) {
-  const o = C(), p = o.formatMessage(s.customMetadataName), n = (e) => e.templateKey === I ? p : e.displayName, [r, u] = w(""), i = y(() => m.filter((e) => n(e).toLowerCase().includes(r.toLowerCase())), [m, r]), f = r.length > 0 && i.length === 0, g = (e) => c.some((S) => S.id === e.id), h = (e) => {
-    d(e);
+  const o = w(), u = o.formatMessage(s.customMetadataName), m = (e) => e.templateKey === y ? u : e.displayName, [r, p] = I(""), i = L(() => n.filter((e) => m(e).toLowerCase().includes(r.toLowerCase())), [n, r]), g = r.length > 0 && i.length === 0, f = (e) => c.some((M) => M.id === e.id), h = (e) => {
+    l(e);
   };
-  return /* @__PURE__ */ l(t.Root, {
+  return /* @__PURE__ */ d(t.Root, {
     resetValueOnHide: !0,
-    setValue: u,
+    setValue: p,
     children: [/* @__PURE__ */ a(t.Trigger, {
-      triggerButton: /* @__PURE__ */ a(M, {
+      triggerButton: /* @__PURE__ */ a(S, {
         "aria-label": o.formatMessage(s.addMetadataTemplatesTriggerButtonLabel),
         icon: T,
-        size: "x-small"
+        size: "x-small",
+        "data-target-id": "IconButton-addMetadataTemplatesTriggerButtonLabel"
       })
-    }), /* @__PURE__ */ l(t.Content, {
-      gutter: L,
+    }), /* @__PURE__ */ d(t.Content, {
+      gutter: B,
       children: [/* @__PURE__ */ a(t.Search, {
         placeholder: o.formatMessage(s.addMetadataTemplatesSearchPlaceholder)
       }), /* @__PURE__ */ a(t.List, {
-        children: f ? /* @__PURE__ */ a(t.EmptyState, {}) : i.map((e) => /* @__PURE__ */ a(t.Item, {
-          disabled: g(e),
+        children: g ? /* @__PURE__ */ a(t.EmptyState, {}) : i.map((e) => /* @__PURE__ */ a(t.Item, {
+          disabled: f(e),
           onClick: () => h(e),
-          value: n(e)
+          value: m(e)
         }, e.id))
       })]
     })]

package/esm/lib/components/filter-dropdown-menu/filter-dropdown-menu-search.js

@@ -1,36 +1,37 @@
-import { Combobox as c, ComboboxCancel as n } from "@ariakit/react";
+import { Combobox as n, ComboboxCancel as s } from "@ariakit/react";
 import { IconButton as l, Divider as i } from "@box/blueprint-web";
 import { Search as m, XMark as p } from "@box/blueprint-web-assets/icons/Fill";
-import { IconIconOnLightSecondary as h, IconCtaIcon as u } from "@box/blueprint-web-assets/tokens/tokens";
-import { useIntl as d } from "react-intl";
+import { IconIconOnLightSecondary as u, IconCtaIcon as d } from "@box/blueprint-web-assets/tokens/tokens";
+import { useIntl as h } from "react-intl";
 import { s as o } from "../../../../chunks/filter-dropdown-menu.module.js";
-import f from "./messages.js";
-import { jsxs as r, Fragment as I, jsx as e } from "react/jsx-runtime";
+import I from "./messages.js";
+import { jsxs as r, Fragment as f, jsx as e } from "react/jsx-runtime";
 const b = () => /* @__PURE__ */ e(p, {
   role: "presentation"
 }), x = (a) => {
   const {
-    ...s
-  } = a, t = d().formatMessage(f.cancelButtonAriaLabel);
-  return /* @__PURE__ */ r(I, {
+    ...t
+  } = a, c = h().formatMessage(I.cancelButtonAriaLabel);
+  return /* @__PURE__ */ r(f, {
     children: [/* @__PURE__ */ r("div", {
       className: o.search,
       children: [/* @__PURE__ */ e(m, {
         className: o.searchIcon,
-        color: h,
+        color: u,
         role: "presentation"
-      }), /* @__PURE__ */ e(c, {
+      }), /* @__PURE__ */ e(n, {
         "aria-haspopup": "false",
         autoSelect: !0,
         className: o.searchInput,
-        ...s
-      }), /* @__PURE__ */ e(n, {
+        ...t
+      }), /* @__PURE__ */ e(s, {
         render: /* @__PURE__ */ e(l, {
-          "aria-label": t,
+          "aria-label": c,
           className: o.clearSearchIcon,
-          color: u,
+          color: d,
           icon: b,
-          size: "x-small"
+          size: "x-small",
+          "data-target-id": "IconButton-cancelButtonAriaLabel"
         })
       })]
     }), /* @__PURE__ */ e(i, {

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

@@ -1,72 +1,77 @@
 import "../../../../../../styles/ai-suggestion-field.css";
-import { Text as l, IconButton as c, DropdownMenu as r } from "@box/blueprint-web";
-import { Checkmark as u, Ellipsis as h } from "@box/blueprint-web-assets/icons/Fill";
-import { useIntl as S, FormattedMessage as n } from "react-intl";
-import t from "./messages.js";
-import { formatSuggestionValue as _ } from "./utils.js";
+import { Text as g, IconButton as l, DropdownMenu as t } from "@box/blueprint-web";
+import { Checkmark as u, Ellipsis as S } from "@box/blueprint-web-assets/icons/Fill";
+import { useIntl as h, FormattedMessage as a } from "react-intl";
+import r from "./messages.js";
+import { formatSuggestionValue as w } from "./utils.js";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-const f = "_wrapperGradient_1izxt_1", x = "_wrapper_1izxt_1", w = "_buttons_1izxt_18", b = "_selectTrigger_1izxt_22", o = {
-  wrapperGradient: f,
-  wrapper: x,
-  buttons: w,
-  selectTrigger: b
+const I = "_wrapperGradient_1izxt_1", _ = "_wrapper_1izxt_1", f = "_buttons_1izxt_18", x = "_selectTrigger_1izxt_22", n = {
+  wrapperGradient: I,
+  wrapper: _,
+  buttons: f,
+  selectTrigger: x
 };
-function N({
-  aiSuggestion: p,
+function D({
+  aiSuggestion: c,
   onAiSuggestionAppend: s,
-  onAiSuggestionReplace: g,
-  onAiSuggestionIgnore: m,
-  type: d
+  onAiSuggestionReplace: p,
+  onAiSuggestionIgnore: d,
+  type: m
 }) {
-  const a = S();
+  const o = h();
   return /* @__PURE__ */ e("div", {
-    className: o.wrapperGradient,
+    className: n.wrapperGradient,
     children: /* @__PURE__ */ i("div", {
-      className: o.wrapper,
+      className: n.wrapper,
       children: [/* @__PURE__ */ i("div", {
-        children: [/* @__PURE__ */ e(l, {
+        children: [/* @__PURE__ */ e(g, {
           as: "p",
           color: "textOnLightSecondary",
           variant: "caption",
-          children: /* @__PURE__ */ e(n, {
-            ...t.aiSuggestionCaption
+          children: /* @__PURE__ */ e(a, {
+            ...r.aiSuggestionCaption
           })
-        }), /* @__PURE__ */ e(l, {
+        }), /* @__PURE__ */ e(g, {
           as: "p",
-          children: _(p, {
-            type: d,
-            locale: a.locale
+          children: w(c, {
+            type: m,
+            locale: o.locale
           })
         })]
       }), /* @__PURE__ */ i("div", {
-        className: o.buttons,
-        children: [/* @__PURE__ */ e(c, {
-          "aria-label": a.formatMessage(t.aiSuggestionAppend),
+        className: n.buttons,
+        children: [/* @__PURE__ */ e(l, {
+          "aria-label": o.formatMessage(r.aiSuggestionAppend),
           icon: u,
           onClick: s,
-          size: "x-small"
-        }), /* @__PURE__ */ i(r.Root, {
-          children: [/* @__PURE__ */ e(r.Trigger, {
-            className: o.selectTrigger,
-            children: /* @__PURE__ */ e(c, {
-              "aria-label": a.formatMessage(t.aiSuggestionOptions),
-              icon: h
+          size: "x-small",
+          "data-target-id": "IconButton-aiSuggestionAppend"
+        }), /* @__PURE__ */ i(t.Root, {
+          children: [/* @__PURE__ */ e(t.Trigger, {
+            className: n.selectTrigger,
+            children: /* @__PURE__ */ e(l, {
+              "aria-label": o.formatMessage(r.aiSuggestionOptions),
+              icon: S,
+              "data-target-id": "IconButton-aiSuggestionOptions"
             })
-          }), /* @__PURE__ */ i(r.Content, {
-            children: [/* @__PURE__ */ e(r.Item, {
+          }), /* @__PURE__ */ i(t.Content, {
+            children: [/* @__PURE__ */ e(t.Item, {
               onSelect: s,
-              children: /* @__PURE__ */ e(n, {
-                ...t.aiSuggestionAppend
+              "data-target-id": "DropdownMenu.Item-aiSuggestionAppend",
+              children: /* @__PURE__ */ e(a, {
+                ...r.aiSuggestionAppend
               })
-            }), /* @__PURE__ */ e(r.Item, {
-              onSelect: g,
-              children: /* @__PURE__ */ e(n, {
-                ...t.aiSuggestionClearAndReplace
+            }), /* @__PURE__ */ e(t.Item, {
+              onSelect: p,
+              "data-target-id": "DropdownMenu.Item-aiSuggestionClearAndReplace",
+              children: /* @__PURE__ */ e(a, {
+                ...r.aiSuggestionClearAndReplace
               })
-            }), /* @__PURE__ */ e(r.Separator, {}), /* @__PURE__ */ e(r.Item, {
-              onSelect: m,
-              children: /* @__PURE__ */ e(n, {
-                ...t.aiSuggestionIgnore
+            }), /* @__PURE__ */ e(t.Separator, {}), /* @__PURE__ */ e(t.Item, {
+              onSelect: d,
+              "data-target-id": "DropdownMenu.Item-aiSuggestionIgnore",
+              children: /* @__PURE__ */ e(a, {
+                ...r.aiSuggestionIgnore
               })
             })]
           })]
@@ -76,5 +81,5 @@ function N({
   });
 }
 export {
-  N as AiSuggestionField
+  D as AiSuggestionField
 };

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

@@ -1,90 +1,91 @@
 import "../../../../../../styles/update-mode-field-wrapper.css";
-import { IconButton as b, Radio as l } from "@box/blueprint-web";
+import { IconButton as F, Radio as l } from "@box/blueprint-web";
 import { Settings as I, XMark as R } from "@box/blueprint-web-assets/icons/Fill";
 import w from "clsx";
-import { useFormikContext as E, getIn as C, Field as A } from "formik";
-import _, { useState as N } from "react";
-import { useIntl as S } from "react-intl";
-import { U as i } from "../../../../../../chunks/types.js";
+import { useFormikContext as A, getIn as C, Field as E } from "formik";
+import _, { useState as S } from "react";
+import { useIntl as B } from "react-intl";
+import { U as d } from "../../../../../../chunks/types.js";
 import { messages as n } from "./messages.js";
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
-const $ = "_wrapperContianer_1n09p_1", B = "_fieldContainer_1n09p_6", U = "_field_1n09p_6", k = "_collapseButton_1n09p_13", x = "_radioContainer_1n09p_19", G = "_additionalFieldContainer_1n09p_22", V = "_hidden_1n09p_26", a = {
-  wrapperContianer: $,
-  fieldContainer: B,
-  field: U,
+const N = "_wrapperContianer_1n09p_1", U = "_fieldContainer_1n09p_6", $ = "_field_1n09p_6", k = "_collapseButton_1n09p_13", x = "_radioContainer_1n09p_19", G = "_additionalFieldContainer_1n09p_22", V = "_hidden_1n09p_26", t = {
+  wrapperContianer: N,
+  fieldContainer: U,
+  field: $,
   collapseButton: k,
   radioContainer: x,
   additionalFieldContainer: G,
   hidden: V
-}, j = (e) => e === i.ReplaceEntered, y = (e) => e === "string" || e === "multiSelect", O = ({
+}, j = (e) => e === d.ReplaceEntered, y = (e) => e === "string" || e === "multiSelect", L = ({
   children: e,
-  fieldNamePrefix: d,
+  fieldNamePrefix: i,
   fieldType: f
 }) => {
   const {
     setFieldValue: g,
     values: m
-  } = E(), [p, M] = N(!0), t = S(), u = `${d}.updateMode.mode`, h = C(m, u), r = e && _.Children.only(e), v = C(m, `${d}.options`, []).map(({
+  } = A(), [p, M] = S(!0), a = B(), u = `${i}.updateMode.mode`, h = C(m, u), r = e && _.Children.only(e), v = C(m, `${i}.options`, []).map(({
     key: c
   }) => c);
   return /* @__PURE__ */ s("div", {
-    className: a.wrapperContianer,
+    className: t.wrapperContianer,
     children: [/* @__PURE__ */ s("div", {
-      className: a.fieldContainer,
+      className: t.fieldContainer,
       children: [/* @__PURE__ */ o("span", {
-        className: a.field,
+        className: t.field,
         children: e
-      }), /* @__PURE__ */ o(b, {
-        "aria-label": t.formatMessage(n.toggleUpdateModeSelectiorAriaLabel),
-        className: a.collapseButton,
+      }), /* @__PURE__ */ o(F, {
+        "aria-label": a.formatMessage(n.toggleUpdateModeSelectiorAriaLabel),
+        className: t.collapseButton,
         "data-testid": `${r.props.label}-update-mode-toggle`,
         icon: p ? I : R,
         onClick: () => {
           M(!p);
         },
-        size: "small"
+        size: "small",
+        "data-target-id": "IconButton-toggleUpdateModeSelectiorAriaLabel"
       })]
     }), /* @__PURE__ */ s("div", {
-      className: w(a.radioContainer, {
-        [a.hidden]: p
+      className: w(t.radioContainer, {
+        [t.hidden]: p
       }),
-      children: [/* @__PURE__ */ o(A, {
-        name: `${d}.updateMode.mode`,
+      children: [/* @__PURE__ */ o(E, {
+        name: `${i}.updateMode.mode`,
         children: ({
           field: c
         }) => /* @__PURE__ */ s(l.Group, {
           "data-testid": `${r.props.label}-radio-group`,
           loop: !0,
-          onValueChange: (F) => g(u, F),
+          onValueChange: (b) => g(u, b),
           orientation: "vertical",
           value: c.value,
           children: [y(f) && /* @__PURE__ */ o(l.Item, {
-            label: t.formatMessage(n.append),
-            value: i.Append
+            label: a.formatMessage(n.append),
+            value: d.Append
           }), /* @__PURE__ */ o(l.Item, {
-            label: t.formatMessage(n.clearAndReplace),
-            value: i.ClearAndReplace
+            label: a.formatMessage(n.clearAndReplace),
+            value: d.ClearAndReplace
           }), /* @__PURE__ */ o(l.Item, {
-            label: t.formatMessage(n.removeEntered),
-            value: i.RemoveEntered
+            label: a.formatMessage(n.removeEntered),
+            value: d.RemoveEntered
           }), /* @__PURE__ */ o(l.Item, {
-            label: t.formatMessage(n.replaceEntered),
-            value: i.ReplaceEntered
+            label: a.formatMessage(n.replaceEntered),
+            value: d.ReplaceEntered
           })]
         })
       }), j(h) && r && /* @__PURE__ */ o("div", {
-        className: a.additionalFieldContainer,
+        className: t.additionalFieldContainer,
         children: /* @__PURE__ */ _.cloneElement(r, {
           // This field edits ${fieldNamePrefix}.updateMode.value, the '.value' is added by the field component
-          fieldNamePrefix: `${d}.updateMode`,
+          fieldNamePrefix: `${i}.updateMode`,
           options: v,
-          label: t.formatMessage(n.with)
+          label: a.formatMessage(n.with)
         })
       })]
     })]
   });
 };
-O.displayName = "UpdateModeFieldWrapper";
+L.displayName = "UpdateModeFieldWrapper";
 export {
-  O as UpdateModeFieldWrapper
+  L as UpdateModeFieldWrapper
 };

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

@@ -1,16 +1,16 @@
 import "../../../../../../styles/custom-instance.css";
 import { useFormikContext as A, FieldArray as N, Field as k } from "formik";
-import { useState as I, useRef as y, useEffect as v } from "react";
+import { useState as I, useRef as v, useEffect as y } from "react";
 import { useIntl as C } from "react-intl";
-import { TextInput as q, IconButton as w, TextButton as M } from "@box/blueprint-web";
-import { Trash as R } from "@box/blueprint-web-assets/icons/Line";
-import { CustomInstanceNewField as T } from "../custom-instance-new-field/custom-instance-new-field.js";
-import { fieldDefaultProps as V } from "../../../metadata-editor-fields/components/constants.js";
-import r from "./messages.js";
+import { TextInput as q, IconButton as B, TextButton as T } from "@box/blueprint-web";
+import { Trash as w } from "@box/blueprint-web-assets/icons/Line";
+import { CustomInstanceNewField as M } from "../custom-instance-new-field/custom-instance-new-field.js";
+import { fieldDefaultProps as R } from "../../../metadata-editor-fields/components/constants.js";
+import d from "./messages.js";
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
-const j = "_customInstance_xq8r7_1", B = "_customInstanceField_xq8r7_7", P = "_customInstanceFieldInput_xq8r7_12", z = "_customInstanceFieldIcon_xq8r7_16", c = {
-  customInstance: j,
-  customInstanceField: B,
+const V = "_customInstance_xq8r7_1", j = "_customInstanceField_xq8r7_7", P = "_customInstanceFieldInput_xq8r7_12", z = "_customInstanceFieldIcon_xq8r7_16", c = {
+  customInstance: V,
+  customInstanceField: j,
   customInstanceFieldInput: P,
   customInstanceFieldIcon: z
 }, Q = (F) => {
@@ -18,19 +18,19 @@ const j = "_customInstance_xq8r7_1", B = "_customInstanceField_xq8r7_7", P = "_c
     isLoading: l
   } = F, {
     values: e
-  } = A(), i = C(), [d, o] = I(!e.metadata.fields.length), [u, m] = I(0), h = () => {
-    m(e.metadata.fields.length);
-  }, _ = (a) => {
-    m(a === 0 ? 0 : a - 1);
-  }, f = y(null);
-  return v(() => {
+  } = A(), i = C(), [m, o] = I(!e.metadata.fields.length), [u, r] = I(0), h = () => {
+    r(e.metadata.fields.length);
+  }, b = (a) => {
+    r(a === 0 ? 0 : a - 1);
+  }, f = v(null);
+  return y(() => {
     e.metadata.fields.length > 0 ? f.current.focus() : o(!0);
   }, [u, e.metadata.fields.length]), /* @__PURE__ */ t("div", {
     children: /* @__PURE__ */ t(N, {
       name: "metadata.fields",
       children: ({
         remove: a,
-        push: b
+        push: _
       }) => /* @__PURE__ */ p("div", {
         className: c.customInstance,
         children: [e == null ? void 0 : e.metadata.fields.map((s, n) => /* @__PURE__ */ p("div", {
@@ -43,40 +43,42 @@ const j = "_customInstance_xq8r7_1", B = "_customInstanceField_xq8r7_7", P = "_c
                 field: g,
                 meta: x
               }) => /* @__PURE__ */ t(q, {
-                ...V,
+                ...R,
                 ...g,
                 ref: n === u ? f : null,
                 disabled: l,
                 error: x.error,
                 label: s.key,
-                placeholder: i.formatMessage(r.setValuePlaceholder)
+                placeholder: i.formatMessage(d.setValuePlaceholder)
               })
             })
-          }), /* @__PURE__ */ t(w, {
-            "aria-label": i.formatMessage(r.removeAttribute, {
+          }), /* @__PURE__ */ t(B, {
+            "aria-label": i.formatMessage(d.removeAttribute, {
               fieldName: s.key
             }),
             className: c.customInstanceFieldIcon,
             disabled: l,
-            icon: R,
+            icon: w,
             onClick: () => {
-              a(n), _(n);
+              a(n), b(n);
             },
-            size: "x-small"
+            size: "x-small",
+            "data-target-id": "IconButton-removeAttribute"
           })]
-        }, s.key)), d && /* @__PURE__ */ t(T, {
+        }, s.key)), m && /* @__PURE__ */ t(M, {
           formKeys: e.metadata.fields.map((s) => s.key),
           onAdd: (s, n) => {
-            b({
+            _({
               key: s,
               value: n
             }), h(), o(!1);
           },
           onCancel: () => o(!1)
-        }), !d && /* @__PURE__ */ t(M, {
+        }), !m && /* @__PURE__ */ t(T, {
           disabled: l,
           onClick: () => o(!0),
-          children: i.formatMessage(r.addAttribute)
+          "data-target-id": "TextButton-addAttribute",
+          children: i.formatMessage(d.addAttribute)
         })]
       })
     })

package/esm/lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/custom-instance-new-field.js

@@ -1,24 +1,24 @@
 import "../../../../../../styles/custom-instance-new-field.css";
-import { Card as v, TextInput as m, Button as u } from "@box/blueprint-web";
+import { Card as y, TextInput as m, Button as u } from "@box/blueprint-web";
 import { useState as l } from "react";
-import { useIntl as w } from "react-intl";
+import { useIntl as v } from "react-intl";
 import t from "./messages.js";
 import { jsxs as p, jsx as a } from "react/jsx-runtime";
 const M = "_customInstanceNewFieldCard_1m7z1_1", _ = "_customInstanceNewFieldFooter_1m7z1_6", b = "_inputWrapper_1m7z1_13", n = {
   customInstanceNewFieldCard: M,
   customInstanceNewFieldFooter: _,
   inputWrapper: b
-}, z = (f) => {
+}, E = (g) => {
   const {
-    onAdd: g,
-    onCancel: h,
+    onAdd: f,
+    onCancel: F,
     formKeys: c = []
-  } = f, e = w(), [r, F] = l(""), [i, C] = l(""), [d, o] = l(""), N = c.length !== 0, I = (s) => {
-    F(s), d && o("");
-  }, y = () => {
-    r ? r.startsWith("$") ? o(e.formatMessage(t.customErrorInternalKey)) : c.includes(r) ? o(e.formatMessage(t.customErrorDuplicateKey)) : g(r, i) : o(e.formatMessage(t.keyFieldRequiredError));
+  } = g, e = v(), [r, h] = l(""), [i, C] = l(""), [d, o] = l(""), N = c.length !== 0, I = (s) => {
+    h(s), d && o("");
+  }, w = () => {
+    r ? r.startsWith("$") ? o(e.formatMessage(t.customErrorInternalKey)) : c.includes(r) ? o(e.formatMessage(t.customErrorDuplicateKey)) : f(r, i) : o(e.formatMessage(t.keyFieldRequiredError));
   };
-  return /* @__PURE__ */ p(v, {
+  return /* @__PURE__ */ p(y, {
     "aria-label": e.formatMessage(t.addAttributeGroupAriaLabel),
     className: n.customInstanceNewFieldCard,
     "data-testid": "customInstanceNewField",
@@ -45,17 +45,19 @@ const M = "_customInstanceNewFieldCard_1m7z1_1", _ = "_customInstanceNewFieldFoo
     }), /* @__PURE__ */ p("div", {
       className: n.customInstanceNewFieldFooter,
       children: [N && /* @__PURE__ */ a(u, {
-        onClick: h,
+        onClick: F,
         variant: "secondary",
+        "data-target-id": "Button-cancelCTA",
         children: e.formatMessage(t.cancelCTA)
       }), /* @__PURE__ */ a(u, {
-        onClick: y,
+        onClick: w,
         variant: "primary",
+        "data-target-id": "Button-addNewFieldCTA",
         children: e.formatMessage(t.addNewFieldCTA)
       })]
     })]
   });
 };
 export {
-  z as CustomInstanceNewField
+  E as CustomInstanceNewField
 };

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

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

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

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

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

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

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

@@ -1,30 +1,32 @@
 import "../../../../../../styles/metadata-instance-footer.css";
-import { TextButton as e } from "@box/blueprint-web";
+import { TextButton as o } from "@box/blueprint-web";
 import { useIntl as c } from "react-intl";
 import s from "./messages.js";
 import { jsx as t } from "react/jsx-runtime";
-const i = "_metadataInstanceFooter_6auqo_1", l = "_button_6auqo_5", o = {
+const i = "_metadataInstanceFooter_6auqo_1", u = "_button_6auqo_5", a = {
   metadataInstanceFooter: i,
-  button: l
-}, _ = ({
+  button: u
+}, f = ({
   isAnyEmptyValueHidden: n,
   onHideEmptyValues: r,
   onShowEmptyValues: m
 }) => {
-  const a = c();
+  const e = c();
   return /* @__PURE__ */ t("div", {
-    className: o.metadataInstanceFooter,
-    children: n ? /* @__PURE__ */ t(e, {
-      className: o.button,
+    className: a.metadataInstanceFooter,
+    children: n ? /* @__PURE__ */ t(o, {
+      className: a.button,
       onClick: m,
-      children: a.formatMessage(s.showEmptyValuesCTA)
-    }) : /* @__PURE__ */ t(e, {
-      className: o.button,
+      "data-target-id": "TextButton-showEmptyValuesCTA",
+      children: e.formatMessage(s.showEmptyValuesCTA)
+    }) : /* @__PURE__ */ t(o, {
+      className: a.button,
       onClick: r,
-      children: a.formatMessage(s.hideEmptyValuesCTA)
+      "data-target-id": "TextButton-hideEmptyValuesCTA",
+      children: e.formatMessage(s.hideEmptyValuesCTA)
     })
   });
 };
 export {
-  _ as MetadataInstanceFooter
+  f as MetadataInstanceFooter
 };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.56.1",
+  "version": "0.58.0",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.20.0",
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@ariakit/react": "0.4.5",
+    "@box/babel-plugin-target-attributes": "1.3.0",
     "@box/blueprint-web": "^7.30.1",
     "@box/blueprint-web-assets": "^4.25.0",
     "@box/storybook-utils": "^0.6.1",
@@ -52,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "a0c0a5947c5f64b38582f24481ec3db29f9d8f4e"
+  "gitHead": "94397e9a7efb1301c59eac9df44fe32b263f4aa5"
 }

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

@@ -1,6 +1,7 @@
 import { type MetadataFormFieldValue, type MetadataTemplateInstance } from '../../../../types';
 import { type FormValues } from '../../types';
 export type MetadataInstanceFormProps = {
+    areAiSuggestionsAvailable: boolean;
     isAiSuggestionsFeatureEnabled: boolean;
     isDeleteButtonDisabled: boolean;
     isUnsavedChangesModalOpen: boolean;

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, templateName, onAutofill, }: MetadataInstanceFormHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataInstanceFormHeader: ({ areAiSuggestionsAvailable, isAiSuggestionsFeatureEnabled, isLoading, templateName, onAutofill, }: MetadataInstanceFormHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { type MetadataTemplateField, type MetadataTemplateInstance } from '../../../../types';
 export type MetadataInstanceFormHeaderProps = {
+    areAiSuggestionsAvailable: boolean;
     isAiSuggestionsFeatureEnabled: boolean;
     isLoading: boolean;
     onAutofill?: (templateKey: MetadataTemplateInstance['templateKey'], fields: MetadataTemplateField[]) => Promise<MetadataTemplateField[]>;