@box/metadata-editor 0.112.5 → 0.113.0

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

@@ -1,130 +1,143 @@
 import "../custom-instance-new-field/custom-instance-new-field.js";
-import { DeleteConfirmationModal as q } from "../delete-confirmation-modal/delete-confirmation-modal.js";
+import { DeleteConfirmationModal as G } from "../delete-confirmation-modal/delete-confirmation-modal.js";
 import "../metadata-instance-form-autofill-button/metadata-instance-form-autofill-button.js";
 import "../metadata-instance-form-header/metadata-instance-form-header.js";
-import z from "clsx";
-import { Formik as G, Form as H } from "formik";
-import { useState as c, useEffect as M, useRef as Q, useMemo as X } from "react";
-import { TEMPLATE_CUSTOM_PROPERTIES as Y } from "../../../../constants.js";
-import { useAutofill as Z } from "../../../../utils/autofill-context.js";
-import { TemplateInstance as I } from "../../../metadata-editor-fields/metadata-editor-fields.js";
-import { MetadataEmptyState as T } from "../../../metadata-empty-state/metadata-empty-state.js";
-import { AutofillOverlay as oo } from "../autofill-overlay/autofill-overlay.js";
-import { CustomInstance as ro } from "../custom-instance/custom-instance.js";
-import { c as to } from "../../../../../../chunks/utils.js";
-import { s as m, M as io } from "../../../../../../chunks/metadata-instance-form-card-wrapper.js";
-import { jsx as t, jsxs as F } from "react/jsx-runtime";
-import { UnsavedChangesModal as ao } from "../../../unsaved-changes-modal/unsaved-changes-modal.js";
-const So = (b) => {
+import H from "clsx";
+import { Formik as Q, Form as X } from "formik";
+import Y from "lodash/isEqual";
+import { useState as S, useEffect as y, useRef as O, useMemo as Z } from "react";
+import { TEMPLATE_CUSTOM_PROPERTIES as I } from "../../../../constants.js";
+import { useAutofill as T } from "../../../../utils/autofill-context.js";
+import { TemplateInstance as oo } from "../../../metadata-editor-fields/metadata-editor-fields.js";
+import { MetadataEmptyState as ro } from "../../../metadata-empty-state/metadata-empty-state.js";
+import { AutofillOverlay as to } from "../autofill-overlay/autofill-overlay.js";
+import { CustomInstance as io } from "../custom-instance/custom-instance.js";
+import { c as ao } from "../../../../../../chunks/utils.js";
+import { s as u, M as no } from "../../../../../../chunks/metadata-instance-form-card-wrapper.js";
+import { jsx as i, jsxs as D } from "react/jsx-runtime";
+import { UnsavedChangesModal as eo } from "../../../unsaved-changes-modal/unsaved-changes-modal.js";
+const so = ({
+  dirty: s,
+  onChange: m,
+  values: r
+}) => {
+  const n = O(r);
+  return s && !Y(n.current.metadata.fields, r.metadata.fields) && (n.current = r, m(r)), null;
+}, Ao = (s) => {
   const {
-    areAiSuggestionsAvailable: y,
-    customRef: a,
-    isLargeFile: S,
-    errorCode: n,
-    isAiSuggestionsFeatureEnabled: s,
-    isAdvancedExtractAgentEnabled: D = !1,
-    isBetaLanguageEnabled: v,
-    isDeleteButtonDisabled: O,
-    isDeleteConfirmationModalCheckboxEnabled: x,
-    isMultilevelTaxonomyFieldEnabled: l,
-    isUnsavedChangesModalOpen: A = !1,
-    MetadataInstanceFormCustomWrapper: L,
+    areAiSuggestionsAvailable: m,
+    customRef: r,
+    isLargeFile: n,
+    errorCode: l,
+    isAiSuggestionsFeatureEnabled: f,
+    isAdvancedExtractAgentEnabled: x = !1,
+    isBetaLanguageEnabled: A,
+    isDeleteButtonDisabled: v,
+    isDeleteConfirmationModalCheckboxEnabled: L,
+    isMultilevelTaxonomyFieldEnabled: d,
+    isUnsavedChangesModalOpen: R = !1,
+    MetadataInstanceFormCustomWrapper: k,
     selectedTemplateInstance: o,
     onCancel: N,
+    onChange: g,
     onDelete: P,
-    onDiscardUnsavedChanges: R,
-    onSubmit: U,
-    setIsUnsavedChangesModalOpen: f,
-    taxonomyOptionsFetcher: u
-  } = b, k = L ?? io, [B, d] = c(!1), {
-    isFetchingSuggestions: i,
-    isLongLoading: g,
-    getAiSuggestions: w,
-    clearState: p,
-    suggestions: K
-  } = Z();
-  M(() => () => {
-    p();
-  }, [p, o == null ? void 0 : o.id]);
-  const h = (o == null ? void 0 : o.templateKey) === Y, W = async (r) => {
-    await U(r, to(r, o));
-  }, j = (r) => {
-    r ? f(!0) : N();
-  }, V = () => {
-    d(!0);
-  }, _ = {
+    onDiscardUnsavedChanges: U,
+    onSubmit: B,
+    setIsUnsavedChangesModalOpen: p,
+    taxonomyOptionsFetcher: c
+  } = s, w = k ?? no, [K, h] = S(!1), {
+    isFetchingSuggestions: a,
+    isLongLoading: C,
+    getAiSuggestions: V,
+    clearState: E,
+    suggestions: W
+  } = T();
+  y(() => () => {
+    E();
+  }, [E, o == null ? void 0 : o.id]);
+  const F = (o == null ? void 0 : o.templateKey) === I, j = async (t) => {
+    await B(t, ao(t, o));
+  }, _ = (t) => {
+    t ? p(!0) : N();
+  }, $ = () => {
+    h(!0);
+  }, q = {
     metadata: {
       ...o
     }
-  }, C = Q(null), [E, $] = c(null);
-  M(() => {
-    $(a ?? C.current);
-  }, [a, o == null ? void 0 : o.templateKey, o == null ? void 0 : o.scope]);
-  const J = X(() => {
-    const r = (o == null ? void 0 : o.fields.length) === 0;
-    if (h)
-      return /* @__PURE__ */ t(ro, {
-        isLoading: i
+  }, M = O(null), [b, J] = S(null);
+  y(() => {
+    J(r ?? M.current);
+  }, [r, o == null ? void 0 : o.templateKey, o == null ? void 0 : o.scope]);
+  const z = Z(() => {
+    const t = (o == null ? void 0 : o.fields.length) === 0;
+    if (F)
+      return /* @__PURE__ */ i(io, {
+        isLoading: a
       });
-    if (r)
-      return /* @__PURE__ */ t(T, {
-        isBoxAiSuggestionsFeatureEnabled: s,
+    if (t)
+      return /* @__PURE__ */ i(ro, {
+        isBoxAiSuggestionsFeatureEnabled: f,
         level: "instance"
       });
-    const e = !!(i || n);
-    return /* @__PURE__ */ F("div", {
-      className: z(m.metadataInstanceFormContent, e && m.showOverlay),
-      children: [/* @__PURE__ */ t(oo, {
-        errorCode: n,
-        isFetchingSuggestions: i,
-        isLongLoading: g
-      }), /* @__PURE__ */ t(I, {
-        disableForm: i,
-        isMultilevelTaxonomyFieldEnabled: l,
-        portalElement: a ?? E,
-        taxonomyOptionsFetcher: u
+    const e = !!(a || l);
+    return /* @__PURE__ */ D("div", {
+      className: H(u.metadataInstanceFormContent, e && u.showOverlay),
+      children: [/* @__PURE__ */ i(to, {
+        errorCode: l,
+        isFetchingSuggestions: a,
+        isLongLoading: C
+      }), /* @__PURE__ */ i(oo, {
+        disableForm: a,
+        isMultilevelTaxonomyFieldEnabled: d,
+        portalElement: r ?? b,
+        taxonomyOptionsFetcher: c
       })]
     });
-  }, [o == null ? void 0 : o.fields.length, h, i, g, a, E, u, s, l, n]);
-  return /* @__PURE__ */ t(G, {
-    initialValues: _,
-    onSubmit: W,
+  }, [o == null ? void 0 : o.fields.length, F, a, C, r, b, c, f, d, l]);
+  return /* @__PURE__ */ i(Q, {
+    initialValues: q,
+    onSubmit: j,
     children: ({
-      values: r,
+      values: t,
       dirty: e
-    }) => /* @__PURE__ */ F(H, {
-      children: [/* @__PURE__ */ t(k, {
-        areAiSuggestionsAvailable: y,
-        className: m.metadataInstanceForm,
-        formRef: C,
-        formValues: r,
-        getAiSuggestions: w,
-        handleCancel: j,
-        handleDelete: V,
-        isAdvancedExtractAgentEnabled: D,
-        isAiSuggestionsFeatureEnabled: s,
-        isBetaLanguageEnabled: v,
-        isDeleteButtonDisabled: O,
-        isFetchingSuggestions: i,
+    }) => /* @__PURE__ */ D(X, {
+      children: [/* @__PURE__ */ i(w, {
+        areAiSuggestionsAvailable: m,
+        className: u.metadataInstanceForm,
+        formRef: M,
+        formValues: t,
+        getAiSuggestions: V,
+        handleCancel: _,
+        handleDelete: $,
+        isAdvancedExtractAgentEnabled: x,
+        isAiSuggestionsFeatureEnabled: f,
+        isBetaLanguageEnabled: A,
+        isDeleteButtonDisabled: v,
+        isFetchingSuggestions: a,
         isFormDirty: e,
-        isLargeFile: S,
+        isLargeFile: n,
         selectedTemplateInstance: o,
-        suggestions: K,
-        children: o && J
-      }), /* @__PURE__ */ t(ao, {
-        onBackToEdit: () => f(!1),
-        onDiscardChanges: R,
-        open: A
-      }), /* @__PURE__ */ t(q, {
-        isCheckboxEnabled: x,
+        suggestions: W,
+        children: o && z
+      }), g && /* @__PURE__ */ i(so, {
+        dirty: e,
+        onChange: g,
+        values: t
+      }), /* @__PURE__ */ i(eo, {
+        onBackToEdit: () => p(!1),
+        onDiscardChanges: U,
+        open: R
+      }), /* @__PURE__ */ i(G, {
+        isCheckboxEnabled: L,
         onConfirm: () => P(o),
-        onDismiss: () => d(!1),
-        open: B,
+        onDismiss: () => h(!1),
+        open: K,
         templateName: o == null ? void 0 : o.displayName
       })]
     })
   }, `${o == null ? void 0 : o.scope}.${o == null ? void 0 : o.templateKey}`);
 };
 export {
-  So as MetadataInstanceForm
+  Ao as MetadataInstanceForm
 };

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

@@ -16,6 +16,7 @@ export type MetadataInstanceFormProps = {
     isUnsavedChangesModalOpen: boolean;
     selectedTemplateInstance: MetadataTemplateInstance | null;
     onCancel: () => void;
+    onChange?: (values: FormValues) => void;
     onDelete: (templateInstance: MetadataTemplateInstance) => void;
     /** Callback invoked when clicking Discard Changes button on the UnsavedChangesModal - can be used to reset form values */
     onDiscardUnsavedChanges?: () => void;
@@ -45,6 +46,11 @@ export type MetadataInstanceFormWrapperProps<T> = {
     extraProps?: T;
     formRef?: React.LegacyRef<HTMLDivElement | null>;
 } & React.HTMLAttributes<HTMLDivElement>;
+export type MetadataInstanceFormikObserverProps = {
+    onChange: (values: FormValues) => void;
+    values: FormValues;
+    dirty: boolean;
+};
 export declare const JSONPatchOp: {
     readonly ADD: "add";
     readonly REMOVE: "remove";

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

@@ -43,6 +43,7 @@ declare const customTemplateInstanceWithAllFieldsEmpty: MetadataTemplateInstance
 declare const templateInstanceWithoutEditPermissions: MetadataTemplateInstance;
 declare const customTemplateInstanceWithoutEditPermissions: MetadataTemplateInstance;
 declare const hiddenTemplateInstance: MetadataTemplateInstance;
+declare const shortTemplateInstance: MetadataTemplateInstance;
 declare const templateInstancesList: MetadataTemplateInstance[];
 declare const allFieldsWithAiSuggestions: MetadataTemplateField[];
 declare const allFieldsSuggestions: AutofillSuggestions;
@@ -52,4 +53,4 @@ declare const firstTemplateInstanceFieldsWithSuggestions: MetadataTemplateField[
 declare const secondTemplateInstance: MetadataTemplate;
 declare const secondTemplateSuggestions: AutofillSuggestions;
 declare const secondTemplateInstanceFieldsWithSuggestions: MetadataTemplateField[];
-export { allFieldsSuggestions, allFieldsTemplate, allFieldsTemplateInstance, allFieldsWithAiSuggestions, allFieldsTemplateInstanceWithoutTaxonomies, allFieldsTemplateInstanceAiSuggestions, customTemplate, customTemplateInstance, customTemplateInstanceWithAllFieldsEmpty, customTemplateInstanceWithoutEditPermissions, customTemplateInstanceWithoutEmptyValues, dateField, dateSuggestionTemplateInstance, emptyCustomTemplateInstance, emptyTemplateInstance, enumField, fields, firstTemplateInstance, firstTemplateInstanceFieldsWithSuggestions, firstTemplateSuggestions, floatField, floatInstanceField, hiddenField, hiddenTemplate, hiddenTemplateInstance, multiSelectField, noFieldsTemplate, nonHiddenFieldsTemplate, nonHiddenFieldsWithValuesTemplate, noValueField, onlyRequiredPropsTemplateInstance, secondTemplateInstance, secondTemplateInstanceFieldsWithSuggestions, secondTemplateSuggestions, stringField, taxonomyLevels, taxonomyMultiSelectMultiLevelField, taxonomyMultiSelectSingleLevelField, taxonomyMultiSelectSingleLevelFieldWithValue, taxonomySingleSelectMultiLevelField, taxonomySingleSelectSingleLevelField, taxonomySingleSelectSingleLevelFieldWithValue, templateInstancesList, templateInstanceWithAllFieldsEmpty, templateInstanceWithoutEditPermissions, templateInstanceWithoutEmptyValues, templateInstanceWithSomeFieldsEmpty, templateOptions, templates, };
+export { allFieldsSuggestions, allFieldsTemplate, allFieldsTemplateInstance, allFieldsTemplateInstanceAiSuggestions, allFieldsTemplateInstanceWithoutTaxonomies, allFieldsWithAiSuggestions, customTemplate, customTemplateInstance, customTemplateInstanceWithAllFieldsEmpty, customTemplateInstanceWithoutEditPermissions, customTemplateInstanceWithoutEmptyValues, dateField, dateSuggestionTemplateInstance, emptyCustomTemplateInstance, emptyTemplateInstance, enumField, fields, firstTemplateInstance, firstTemplateInstanceFieldsWithSuggestions, firstTemplateSuggestions, floatField, floatInstanceField, hiddenField, hiddenTemplate, hiddenTemplateInstance, multiSelectField, noFieldsTemplate, nonHiddenFieldsTemplate, nonHiddenFieldsWithValuesTemplate, noValueField, onlyRequiredPropsTemplateInstance, secondTemplateInstance, secondTemplateInstanceFieldsWithSuggestions, secondTemplateSuggestions, shortTemplateInstance, stringField, taxonomyLevels, taxonomyMultiSelectMultiLevelField, taxonomyMultiSelectSingleLevelField, taxonomyMultiSelectSingleLevelFieldWithValue, taxonomySingleSelectMultiLevelField, taxonomySingleSelectSingleLevelField, taxonomySingleSelectSingleLevelFieldWithValue, templateInstancesList, templateInstanceWithAllFieldsEmpty, templateInstanceWithoutEditPermissions, templateInstanceWithoutEmptyValues, templateInstanceWithSomeFieldsEmpty, templateOptions, templates, };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-editor",
-    "version": "0.112.5",
+    "version": "0.113.0",
     "peerDependencies": {
         "@ariakit/react": "0.4.15",
         "@box/box-ai-agent-selector": "^0.41.7",