@box/metadata-editor 1.58.4 → 1.59.0

package/dist/chunks/metadata-instance-form-card-wrapper.js

@@ -1,24 +1,25 @@
-import { useBlueprintModernization as v, Card as A } from "@box/blueprint-web";
+import { useBlueprintModernization as y, Card as A } from "@box/blueprint-web";
 import M from "clsx";
-import { TEMPLATE_CUSTOM_PROPERTIES as b } from "../esm/lib/constants.js";
-import { MetadataInstanceFormFooter as O } from "../esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/metadata-instance-form-footer.js";
-import { MetadataInstanceFormHeader as R } from "../esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
-import { jsx as a, jsxs as T } from "react/jsx-runtime";
-import '../styles/metadata-instance-form-card-wrapper.css';const x = "_metadataInstanceForm_moyil_1", D = "_wrapperGradient_moyil_7", L = "_suggestionsFetching_moyil_17", N = "_metadataInstanceFormContent_moyil_23", G = "_showOverlay_moyil_30", s = {
-  metadataInstanceForm: x,
-  wrapperGradient: D,
-  suggestionsFetching: L,
-  metadataInstanceFormContent: N,
-  showOverlay: G
-}, U = (n) => {
+import { TEMPLATE_CUSTOM_PROPERTIES as R } from "../esm/lib/constants.js";
+import { MetadataInstanceFormFooter as b } from "../esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/metadata-instance-form-footer.js";
+import { MetadataInstanceFormHeader as z } from "../esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
+import { jsx as a, jsxs as G } from "react/jsx-runtime";
+import '../styles/metadata-instance-form-card-wrapper.css';const O = "_metadataInstanceForm_ztv76_1", T = "_wrapperGradient_ztv76_7", x = "_suggestionsFetching_ztv76_17", D = "_metadataInstanceFormContent_ztv76_23", L = "_metadataInstanceFormContentReducedGap_ztv76_30", N = "_showOverlay_ztv76_34", n = {
+  metadataInstanceForm: O,
+  wrapperGradient: T,
+  suggestionsFetching: x,
+  metadataInstanceFormContent: D,
+  metadataInstanceFormContentReducedGap: L,
+  showOverlay: N
+}, W = (s) => {
   const {
     areAiSuggestionsAvailable: o,
-    children: i,
-    className: r,
-    formRef: l,
-    isAdvancedExtractAgentEnabled: m = !1,
-    isAiSuggestionsFeatureEnabled: d,
-    isBetaLanguageEnabled: c,
+    children: r,
+    className: i,
+    formRef: d,
+    isAdvancedExtractAgentEnabled: c = !1,
+    isAiSuggestionsFeatureEnabled: l,
+    isBetaLanguageEnabled: m,
     isConfidenceScoreReviewEnabled: g = !1,
     isLargeFile: p = !1,
     isDeleteButtonDisabled: u,
@@ -28,43 +29,43 @@ import '../styles/metadata-instance-form-card-wrapper.css';const x = "_metadataI
     isFetchingSuggestions: e,
     isFormDirty: h = !1,
     selectedTemplateInstance: t,
-    getAiSuggestions: y,
-    handleCancel: w,
-    handleDelete: C
-  } = n, {
-    enableModernizedComponents: I
-  } = v(), E = t?.templateKey === b, S = !!f[t?.templateKey];
+    getAiSuggestions: v,
+    handleCancel: C,
+    handleDelete: I
+  } = s, {
+    enableModernizedComponents: w
+  } = y(), E = t?.templateKey === R, S = !!f[t?.templateKey];
   return /* @__PURE__ */ a("div", {
-    className: e && s.wrapperGradient,
-    "data-modern": I,
-    children: /* @__PURE__ */ T(A, {
-      ref: l,
-      className: M(r, {
-        [s.suggestionsFetching]: e
+    className: e && n.wrapperGradient,
+    "data-modern": w,
+    children: /* @__PURE__ */ G(A, {
+      ref: d,
+      className: M(i, {
+        [n.suggestionsFetching]: e
       }),
-      children: [/* @__PURE__ */ a(R, {
+      children: [/* @__PURE__ */ a(z, {
         areAiSuggestionsAvailable: o,
         hasSuggestions: S,
-        isAdvancedExtractAgentEnabled: m,
-        isAiSuggestionsFeatureEnabled: d && !E,
-        isBetaLanguageEnabled: c,
+        isAdvancedExtractAgentEnabled: c,
+        isAiSuggestionsFeatureEnabled: l && !E,
+        isBetaLanguageEnabled: m,
         isConfidenceScoreReviewEnabled: g,
         isLargeFile: p,
         isLoading: e,
-        onAutofill: y,
+        onAutofill: v,
         onToggleReviewFilter: F,
         shouldShowOnlyReviewFields: _,
         templateName: t?.displayName
-      }), t && i, /* @__PURE__ */ a(O, {
+      }), t && r, /* @__PURE__ */ a(b, {
         isDeleteButtonDisabled: u,
         isLoading: e,
-        onCancel: () => w(h),
-        onDelete: C
+        onCancel: () => C(h),
+        onDelete: I
       })]
     })
   });
 };
 export {
-  U as M,
-  s
+  W as M,
+  n as s
 };

package/dist/chunks/shared-field-styles.module.js

@@ -0,0 +1,8 @@
+import '../styles/shared-field-styles.css';const e = "_spacious_1325e_1", l = "_clickableField_1325e_5", s = "_selectedField_1325e_14", c = {
+  spacious: e,
+  clickableField: l,
+  selectedField: s
+};
+export {
+  c as s
+};

package/dist/chunks/utils2.js

@@ -1,55 +1,55 @@
 import d from "clsx";
 import { convertISOStringtoRFC3339String as b } from "../esm/lib/utils/convertDate.js";
 import m from "../esm/lib/components/interactive-text/interactive-text.js";
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { isConfidenceScoreNeedingReview as T } from "../esm/lib/utils/confidence-score/is-confidence-score-needing-review.js";
-import { LowConfidenceBadge as f } from "../esm/lib/components/metadata-editor-fields/components/low-confidence-badge/low-confidence-badge.js";
-import { AiLogoBadge as x } from "../esm/lib/components/metadata-editor-fields/components/ai-logo-badge/ai-logo-badge.js";
-import '../styles/utils.css';const h = "_noAttributesText_1u4tq_2", q = "_fieldWrapper_1u4tq_6", v = "_hasSuggestion_1u4tq_11", C = "_hasConfidenceReview_1u4tq_16", N = "_dateField_1u4tq_44", w = "_aiApproved_1u4tq_48", A = "_labelWrapper_1u4tq_95", W = "_labelText_1u4tq_101", I = "_labelTruncated_1u4tq_104", F = "_labelIcon_1u4tq_111", l = {
-  noAttributesText: h,
-  fieldWrapper: q,
-  hasSuggestion: v,
-  hasConfidenceReview: C,
-  dateField: N,
-  aiApproved: w,
-  labelWrapper: A,
-  labelText: W,
-  labelTruncated: I,
-  labelIcon: F
-}, O = (a, t, s = !1, i = "label", e) => (c) => {
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import { isConfidenceScoreNeedingReview as g } from "../esm/lib/utils/confidence-score/is-confidence-score-needing-review.js";
+import { LowConfidenceBadge as T } from "../esm/lib/components/metadata-editor-fields/components/low-confidence-badge/low-confidence-badge.js";
+import { AiLogoBadge as f } from "../esm/lib/components/metadata-editor-fields/components/ai-logo-badge/ai-logo-badge.js";
+import '../styles/utils.css';const x = "_noAttributesText_1oruv_2", h = "_fieldWrapper_1oruv_6", C = "_hasSuggestion_1oruv_11", N = "_hasConfidenceReview_1oruv_16", w = "_dateField_1oruv_44", A = "_aiApproved_1oruv_49", W = "_labelWrapper_1oruv_96", I = "_labelText_1oruv_102", F = "_labelTruncated_1oruv_105", R = "_labelIcon_1oruv_112", l = {
+  noAttributesText: x,
+  fieldWrapper: h,
+  hasSuggestion: C,
+  hasConfidenceReview: N,
+  dateField: w,
+  aiApproved: A,
+  labelWrapper: W,
+  labelText: I,
+  labelTruncated: F,
+  labelIcon: R
+}, z = (r, t, o = !1, i = "label", e) => (c) => {
   const {
     className: u,
-    ...n
-  } = c, o = d(u || l.labelText, l.labelTruncated), _ = !!e && T(e), p = () => e && _ ? /* @__PURE__ */ r(f, {
+    ...s
+  } = c, n = d(u || l.labelText, l.labelTruncated), _ = !!e && g(e), p = () => e && _ ? /* @__PURE__ */ a(T, {
     confidenceScore: e
-  }) : s || e ? /* @__PURE__ */ r(x, {
+  }) : o || e ? /* @__PURE__ */ a(f, {
     className: l.labelIcon,
     confidenceScore: e
   }) : null;
-  return /* @__PURE__ */ g("div", {
+  return /* @__PURE__ */ v("div", {
     className: l.labelWrapper,
-    children: [t ? /* @__PURE__ */ r(m, {
+    children: [t ? /* @__PURE__ */ a(m, {
       as: i,
-      className: o,
+      className: n,
       tooltipText: t,
-      ...n,
-      children: a
-    }) : /* @__PURE__ */ r("label", {
-      className: o,
-      ...n,
-      children: a
+      ...s,
+      children: r
+    }) : /* @__PURE__ */ a("label", {
+      className: n,
+      ...s,
+      children: r
     }), p()]
   });
-}, z = (a) => {
+}, P = (r) => {
   try {
-    const t = b(a), s = new Date(t);
-    return isNaN(s.getTime()) ? null : t;
+    const t = b(r), o = new Date(t);
+    return isNaN(o.getTime()) ? null : t;
   } catch {
     return null;
   }
 };
 export {
-  O as g,
+  z as g,
   l as s,
-  z as t
+  P as t
 };

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

@@ -1,109 +1,141 @@
-import G from "clsx";
-import { useFormikContext as H } from "formik";
-import J from "lodash/isEqual";
-import K from "lodash/isUndefined";
-import { forwardRef as Q, useCallback as d, useEffect as k, useMemo as X } from "react";
-import { A as r } from "../../../../chunks/types.js";
-import { UpdateModeFieldWrapper as Y } from "./components/update-mode-field-wrapper/update-mode-field-wrapper.js";
-import { editorFieldTypes as Z } from "./editor-field-types.js";
-import { s as u } from "../../../../chunks/utils2.js";
-import { jsx as l, jsxs as _ } from "react/jsx-runtime";
-import { isConfidenceScoreNeedingReview as P } from "../../utils/confidence-score/is-confidence-score-needing-review.js";
-import { AiSuggestionField as O } from "./components/ai-suggestion-field/ai-suggestion-field.js";
-import { LowConfidenceSuggestionField as R } from "./components/low-confidence-suggestion-field/low-confidence-suggestion-field.js";
-const ge = /* @__PURE__ */ Q(({
-  disableForm: h,
-  portalElement: v,
+import v from "clsx";
+import { useFormikContext as R } from "formik";
+import M from "lodash/isEqual";
+import ee from "lodash/isUndefined";
+import { forwardRef as oe, useCallback as a, useEffect as K, useMemo as ie } from "react";
+import { A as p } from "../../../../chunks/types.js";
+import { checkIfHasBoundingBoxes as te } from "../../utils/check-if-has-bounding-boxes.js";
+import { isInteractiveFormElement as T } from "../../utils/is-interactive-form-element.js";
+import { s as d } from "../../../../chunks/shared-field-styles.module.js";
+import { UpdateModeFieldWrapper as ne } from "./components/update-mode-field-wrapper/update-mode-field-wrapper.js";
+import { editorFieldTypes as se } from "./editor-field-types.js";
+import { s as f } from "../../../../chunks/utils2.js";
+import { jsx as l, jsxs as re } from "react/jsx-runtime";
+import { isConfidenceScoreNeedingReview as q } from "../../utils/confidence-score/is-confidence-score-needing-review.js";
+import { AiSuggestionField as ce } from "./components/ai-suggestion-field/ai-suggestion-field.js";
+import { LowConfidenceSuggestionField as ae } from "./components/low-confidence-suggestion-field/low-confidence-suggestion-field.js";
+const Ne = /* @__PURE__ */ oe(({
+  disableForm: x,
+  portalElement: N,
   field: e,
-  index: L,
-  taxonomyOptionsFetcher: $,
-  isExternallyOwned: C,
-  isMultilevelTaxonomyFieldEnabled: N,
-  isConfidenceScoreReviewEnabled: n = !1
-}, V) => {
+  index: w,
+  taxonomyOptionsFetcher: I,
+  isExternallyOwned: V,
+  isMultilevelTaxonomyFieldEnabled: P,
+  isConfidenceScoreReviewEnabled: s = !1,
+  onSelectMetadataField: n,
+  selectedMetadataFieldId: H
+}, B) => {
   const {
     setFieldValue: t
-  } = H(), m = e.aiSuggestionState || r.Initial, s = m === r.Pending, F = m === r.Applied, x = m === r.Initial, f = Z[e.type], {
-    aiSuggestion: i,
-    aiSuggestionConfidenceScore: A,
-    type: g,
-    value: a
-  } = e, U = f && !e.hidden, j = !K(e.updateMode), o = `metadata.fields[${L}]`, T = e.type === "taxonomy" && e.optionsRules?.multiSelect, M = n && !!e.confidenceScore, I = M && P(e.confidenceScore), q = M && !s && !P(e.confidenceScore), B = G({
-    [u.aiApproved]: F || q,
-    [u.hasSuggestion]: s,
-    [u.hasConfidenceReview]: !s && I,
-    [u.dateField]: g === "date"
-  }), p = d((c) => {
-    t(`${o}.aiSuggestionState`, c);
-  }, [o, t]), S = d((c) => {
-    t(`${o}.value`, c), p(r.Applied), n && (t(`${o}.confidenceScore`, A), t(`${o}.aiSuggestionConfidenceScore`, void 0));
-  }, [o, t, p, A, n]), y = d(() => {
-    p(r.Initial), t(`${o}.aiSuggestion`, void 0), n && t(`${o}.aiSuggestionConfidenceScore`, void 0);
-  }, [p, t, o, n]), w = d(() => {
-    t(`${o}.confidenceScore.isAccepted`, !0);
-  }, [o, t]), z = d(() => {
-    const c = g === "multiSelect" || g === "taxonomy" ? [] : "";
-    t(`${o}.value`, c), t(`${o}.confidenceScore`, void 0);
-  }, [o, t, g]), W = d(() => {
-    y(), n && e.confidenceScore && t(`${o}.confidenceScore`, void 0);
-  }, [y, n, e.confidenceScore, t, o]);
-  k(() => {
-    s && (!a || Array.isArray(a) && a.length === 0) && S(i);
-  }, [i, s, S]), k(() => {
-    x && i && p(r.Pending);
-  }, [x, i, p]);
-  const D = X(() => i ? J(a, i) : !1, [i, a]);
-  return U ? j ? /* @__PURE__ */ l(Y, {
-    fieldNamePrefix: o,
-    fieldType: e.type,
-    isTaxonomyMultiSelect: T,
-    children: /* @__PURE__ */ l(f, {
-      ref: V,
-      description: e.description,
-      disableForm: h,
+  } = R(), h = e.aiSuggestionState || p.Initial, c = h === p.Pending, W = h === p.Applied, F = h === p.Initial, y = se[e.type], {
+    aiSuggestion: r,
+    aiSuggestionConfidenceScore: k,
+    type: m,
+    value: u
+  } = e, z = y && !e.hidden, G = !ee(e.updateMode), o = `metadata.fields[${w}]`, J = e.type === "taxonomy" && e.optionsRules?.multiSelect, C = s && !!e.confidenceScore, L = C && q(e.confidenceScore), Q = C && !c && !q(e.confidenceScore), D = H === e.id, X = te(e.targetLocation), S = C && X && !!n, Y = v({
+    [f.aiApproved]: W || Q,
+    [f.hasSuggestion]: c,
+    [f.hasConfidenceReview]: !c && L,
+    [f.dateField]: m === "date"
+  }), g = a((i) => {
+    t(`${o}.aiSuggestionState`, i);
+  }, [o, t]), A = a((i) => {
+    t(`${o}.value`, i), g(p.Applied), s && (t(`${o}.confidenceScore`, k), t(`${o}.aiSuggestionConfidenceScore`, void 0));
+  }, [o, t, g, k, s]), $ = a(() => {
+    g(p.Initial), t(`${o}.aiSuggestion`, void 0), s && t(`${o}.aiSuggestionConfidenceScore`, void 0);
+  }, [g, t, o, s]), Z = a(() => {
+    t(`${o}.confidenceScore.isAccepted`, !0), n?.(null);
+  }, [o, t, n]), _ = a(() => {
+    const i = m === "multiSelect" || m === "taxonomy" ? [] : "";
+    t(`${o}.value`, i), t(`${o}.confidenceScore`, void 0), n?.(null);
+  }, [o, t, m, n]), U = a(() => {
+    $(), s && e.confidenceScore && (t(`${o}.confidenceScore`, void 0), n?.(null));
+  }, [$, s, e.confidenceScore, t, o, n]), b = a((i) => {
+    n && (T(i.target) || n(e));
+  }, [e, n]), O = a((i) => {
+    if (i.key === "Enter") {
+      if (!n || T(i.target))
+        return;
+      i.preventDefault(), i.stopPropagation(), n(e);
+    }
+  }, [e, n]);
+  K(() => {
+    c && (!u || Array.isArray(u) && u.length === 0) && A(r);
+  }, [r, c, A]), K(() => {
+    F && r && g(p.Pending);
+  }, [F, r, g]);
+  const E = ie(() => r ? M(u, r) : !1, [r, u]);
+  if (!z)
+    return null;
+  const j = {
+    "data-metadata-field": !0,
+    "data-testid": "metadata-field",
+    onClick: b,
+    onKeyDown: O,
+    role: "button",
+    tabIndex: 0
+  };
+  if (G) {
+    const i = /* @__PURE__ */ l(ne, {
       fieldNamePrefix: o,
-      isAiSuggestionApplied: !1,
-      isExternallyOwned: C,
-      isMultilevelTaxonomyFieldEnabled: N,
-      label: e.displayName,
-      levels: e.levels,
-      onValueEdited: W,
-      portalElement: v,
-      taxonomyOptionsFetcher: $
-    })
-  }, e.key) : /* @__PURE__ */ _("div", {
-    className: u.fieldWrapper,
-    children: [/* @__PURE__ */ l(f, {
-      ref: V,
-      className: B,
+      fieldType: e.type,
+      isTaxonomyMultiSelect: J,
+      children: /* @__PURE__ */ l(y, {
+        ref: B,
+        description: e.description,
+        disableForm: x,
+        fieldNamePrefix: o,
+        isAiSuggestionApplied: !1,
+        isExternallyOwned: V,
+        isMultilevelTaxonomyFieldEnabled: P,
+        label: e.displayName,
+        levels: e.levels,
+        onValueEdited: U,
+        portalElement: N,
+        taxonomyOptionsFetcher: I
+      })
+    }, e.key);
+    return S ? /* @__PURE__ */ l("div", {
+      className: v(d.spacious, d.clickableField, D && d.selectedField),
+      ...j,
+      children: i
+    }) : i;
+  }
+  return /* @__PURE__ */ re("div", {
+    className: v(f.fieldWrapper, s && d.spacious, S && d.clickableField, S && D && d.selectedField),
+    ...S && j,
+    children: [/* @__PURE__ */ l(y, {
+      ref: B,
+      className: Y,
       description: e.description,
-      disableForm: h,
+      disableForm: x,
       fieldNamePrefix: o,
-      isAiSuggestionApplied: F,
-      isExternallyOwned: C,
-      confidenceScore: n && !s ? e.confidenceScore : void 0,
-      isMultilevelTaxonomyFieldEnabled: N,
+      isAiSuggestionApplied: W,
+      isExternallyOwned: V,
+      confidenceScore: s && !c ? e.confidenceScore : void 0,
+      isMultilevelTaxonomyFieldEnabled: P,
       label: e.displayName,
-      onValueEdited: W,
-      portalElement: v,
-      taxonomyOptionsFetcher: $
-    }), s && /* @__PURE__ */ l(O, {
-      aiSuggestion: i,
-      confidenceLevel: n ? A?.level : void 0,
-      isSameValue: D,
+      onValueEdited: U,
+      portalElement: N,
+      taxonomyOptionsFetcher: I
+    }), c && /* @__PURE__ */ l(ce, {
+      aiSuggestion: r,
+      confidenceLevel: s ? k?.level : void 0,
+      isSameValue: E,
       onAiSuggestionAppend: () => {
-        const c = [...new Set([a, i].flat().filter(Boolean))];
-        S(c);
+        const i = [...new Set([u, r].flat().filter(Boolean))];
+        A(i);
       },
-      onAiSuggestionIgnore: y,
-      onAiSuggestionReplace: () => S(i),
-      type: g
-    }), !s && I && /* @__PURE__ */ l(R, {
-      onAccept: w,
-      onClear: z
+      onAiSuggestionIgnore: $,
+      onAiSuggestionReplace: () => A(r),
+      type: m
+    }), !c && L && /* @__PURE__ */ l(ae, {
+      onAccept: Z,
+      onClear: _
     })]
-  }, e.key) : null;
+  }, e.key);
 });
 export {
-  ge as MetadataEditorFieldWrapper
+  Ne as MetadataEditorFieldWrapper
 };