@box/metadata-editor 0.92.1 → 0.92.2

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

@@ -1,14 +1,15 @@
-import S from "clsx";
-import { Card as A } from "@box/blueprint-web";
-import { TEMPLATE_CUSTOM_PROPERTIES as E } from "../esm/lib/constants.js";
-import { MetadataInstanceFormFooter as M } from "../esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/metadata-instance-form-footer.js";
-import { MetadataInstanceFormHeader as b } from "../esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
-import { jsx as e, jsxs as y } from "react/jsx-runtime";
-import '../styles/metadata-instance-form-card-wrapper.css';const D = "_metadataInstanceForm_6uz9p_1", I = "_wrapperGradient_6uz9p_7", L = "_suggestionsFetching_6uz9p_12", N = "_metadataInstanceFormContent_6uz9p_18", s = {
-  metadataInstanceForm: D,
-  wrapperGradient: I,
-  suggestionsFetching: L,
-  metadataInstanceFormContent: N
+import y from "clsx";
+import { Card as S } from "@box/blueprint-web";
+import { TEMPLATE_CUSTOM_PROPERTIES as w } from "../esm/lib/constants.js";
+import { MetadataInstanceFormFooter as A } from "../esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-footer/metadata-instance-form-footer.js";
+import { MetadataInstanceFormHeader as E } from "../esm/lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
+import { jsx as t, jsxs as M } from "react/jsx-runtime";
+import '../styles/metadata-instance-form-card-wrapper.css';const b = "_metadataInstanceForm_1ae95_1", v = "_wrapperGradient_1ae95_7", D = "_suggestionsFetching_1ae95_12", I = "_metadataInstanceFormContent_1ae95_18", L = "_showOverlay_1ae95_25", s = {
+  metadataInstanceForm: b,
+  wrapperGradient: v,
+  suggestionsFetching: D,
+  metadataInstanceFormContent: I,
+  showOverlay: L
 }, j = (n) => {
   const {
     areAiSuggestionsAvailable: o,
@@ -18,36 +19,36 @@ import '../styles/metadata-instance-form-card-wrapper.css';const D = "_metadataI
     isAiSuggestionsFeatureEnabled: m,
     isBetaLanguageEnabled: d,
     isLargeFile: c,
-    isDeleteButtonDisabled: u,
-    suggestions: p,
-    isFetchingSuggestions: a,
-    isFormDirty: l = !1,
-    selectedTemplateInstance: t,
-    getAiSuggestions: F,
-    handleCancel: _,
-    handleDelete: f
-  } = n, h = (t == null ? void 0 : t.templateKey) === E, C = !!p[t == null ? void 0 : t.templateKey];
-  return /* @__PURE__ */ e("div", {
-    className: a && s.wrapperGradient,
-    children: /* @__PURE__ */ y(A, {
+    isDeleteButtonDisabled: l,
+    suggestions: F,
+    isFetchingSuggestions: e,
+    isFormDirty: u = !1,
+    selectedTemplateInstance: a,
+    getAiSuggestions: _,
+    handleCancel: p,
+    handleDelete: h
+  } = n, f = (a == null ? void 0 : a.templateKey) === w, C = !!F[a == null ? void 0 : a.templateKey];
+  return /* @__PURE__ */ t("div", {
+    className: e && s.wrapperGradient,
+    children: /* @__PURE__ */ M(S, {
       ref: g,
-      className: S(i, {
-        [s.suggestionsFetching]: a
+      className: y(i, {
+        [s.suggestionsFetching]: e
       }),
-      children: [/* @__PURE__ */ e(b, {
+      children: [/* @__PURE__ */ t(E, {
         areAiSuggestionsAvailable: o,
         hasSuggestions: C,
-        isAiSuggestionsFeatureEnabled: m && !h,
+        isAiSuggestionsFeatureEnabled: m && !f,
         isBetaLanguageEnabled: d,
         isLargeFile: c,
-        isLoading: a,
-        onAutofill: F,
-        templateName: t == null ? void 0 : t.displayName
-      }), t && r, /* @__PURE__ */ e(M, {
-        isDeleteButtonDisabled: u,
-        isLoading: a,
-        onCancel: () => _(l),
-        onDelete: f
+        isLoading: e,
+        onAutofill: _,
+        templateName: a == null ? void 0 : a.displayName
+      }), a && r, /* @__PURE__ */ t(A, {
+        isDeleteButtonDisabled: l,
+        isLoading: e,
+        onCancel: () => p(u),
+        onDelete: h
       })]
     })
   });

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

@@ -1,50 +1,53 @@
 import { useState as d } from "react";
-import { LoadingIndicator as v, Text as n, TextButton as g } from "@box/blueprint-web";
-import { u as p } from "../../../../../../chunks/index.js";
-import { AlertTriangle as y } from "@box/blueprint-web-assets/icons/Line";
-import { SurfaceStatusSurfaceError as _, Size5 as m } from "@box/blueprint-web-assets/tokens/tokens";
+import { LoadingIndicator as y, Text as n, TextButton as g } from "@box/blueprint-web";
+import { u as v } from "../../../../../../chunks/index.js";
+import { AlertTriangle as _ } from "@box/blueprint-web-assets/icons/Line";
+import { SurfaceStatusSurfaceError as p, Size5 as m } from "@box/blueprint-web-assets/tokens/tokens";
+import h from "clsx";
 import e from "./messages.js";
-import { jsxs as O, jsx as i } from "react/jsx-runtime";
-import '../../../../../../styles/autofill-overlay.css';const T = "_autofillOverlay_vvkb0_1", b = "_autofillOverlayTitle_vvkb0_15", S = "_dismissButton_vvkb0_20", h = "_loadingIcon_vvkb0_24", B = "_testContainerStyle_vvkb0_29", s = {
-  autofillOverlay: T,
-  autofillOverlayTitle: b,
-  dismissButton: S,
-  loadingIcon: h,
-  testContainerStyle: B
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import '../../../../../../styles/autofill-overlay.css';const O = "_autofillOverlay_15bqk_1", T = "_withError_15bqk_15", S = "_autofillOverlayTitle_15bqk_19", x = "_dismissButton_15bqk_24", B = "_overlayIcon_15bqk_28", I = "_testContainerStyle_15bqk_34", a = {
+  autofillOverlay: O,
+  withError: T,
+  autofillOverlayTitle: S,
+  dismissButton: x,
+  overlayIcon: B,
+  testContainerStyle: I
 }, A = ({
-  errorCode: a,
+  errorCode: s,
   isFetchingSuggestions: c,
-  isLongLoading: o
+  isLongLoading: l
 }) => {
-  const t = p(), [f, u] = d(!1);
-  let l = t.formatMessage(e.defaultLoadingMessage);
-  a && (l = t.formatMessage(e.errorTitle)), o && (l = t.formatMessage(e.longLoadingTitle));
-  const r = o ? t.formatMessage(e.longLoadingDescription) : a && t.formatMessage(e.errorDescription);
-  return !c && !a || f ? null : /* @__PURE__ */ O("div", {
-    className: s.autofillOverlay,
-    children: [a ? /* @__PURE__ */ i(y, {
-      color: _,
+  const t = v(), [f, u] = d(!1);
+  let o = t.formatMessage(e.defaultLoadingMessage);
+  s && (o = t.formatMessage(e.errorTitle)), l && (o = t.formatMessage(e.longLoadingTitle));
+  const r = l ? t.formatMessage(e.longLoadingDescription) : s && t.formatMessage(e.errorDescription);
+  return !c && !s || f ? null : /* @__PURE__ */ b("div", {
+    className: h(a.autofillOverlay, s && a.withError),
+    children: [s ? /* @__PURE__ */ i(_, {
+      className: a.overlayIcon,
+      color: p,
       height: m,
       role: "presentation",
       width: m
-    }) : /* @__PURE__ */ i(v, {
+    }) : /* @__PURE__ */ i(y, {
       "aria-label": t.formatMessage(e.loadingAriaLabel),
       "aria-live": "polite",
-      className: s.loadingIcon,
+      className: a.overlayIcon,
       size: "large",
       variant: "default"
     }), /* @__PURE__ */ i(n, {
       as: "p",
-      className: s.autofillOverlayTitle,
+      className: a.autofillOverlayTitle,
       variant: "subtitle",
-      children: l
+      children: o
     }), r && /* @__PURE__ */ i(n, {
       as: "p",
       color: "textOnLightSecondary",
       variant: "bodyDefault",
       children: r
-    }), a && /* @__PURE__ */ i(g, {
-      className: s.dismissButton,
+    }), s && /* @__PURE__ */ i(g, {
+      className: a.dismissButton,
       onClick: () => u(!0),
       "data-target-id": "TextButton-dismissButton",
       children: t.formatMessage(e.dismissButton)

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

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

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

@@ -1,9 +1,9 @@
-import { TextButton as b, Button as r } from "@box/blueprint-web";
-import { useFormikContext as g } from "formik";
+import { TextButton as g, Button as r } from "@box/blueprint-web";
+import { useFormikContext as b } from "formik";
 import { u as B } from "../../../../../../chunks/index.js";
 import o from "./messages.js";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import '../../../../../../styles/metadata-instance-form-footer.css';const F = "_metadataInstanceFormFooter_17478_1", f = "_buttonsContainer_17478_8", _ = "_buttons_17478_8", n = {
+import '../../../../../../styles/metadata-instance-form-footer.css';const F = "_metadataInstanceFormFooter_15nrg_1", f = "_buttonsContainer_15nrg_7", _ = "_buttons_15nrg_7", a = {
   metadataInstanceFormFooter: F,
   buttonsContainer: f,
   buttons: _
@@ -16,27 +16,27 @@ import '../../../../../../styles/metadata-instance-form-footer.css';const F = "_
   const t = B(), {
     isSubmitting: s,
     submitForm: u
-  } = g(), a = m || s;
+  } = b(), n = m || s;
   return /* @__PURE__ */ e("div", {
-    className: n.metadataInstanceFormFooter,
+    className: a.metadataInstanceFormFooter,
     children: /* @__PURE__ */ i("div", {
-      className: n.buttonsContainer,
-      children: [/* @__PURE__ */ e(b, {
-        disabled: a || d,
+      className: a.buttonsContainer,
+      children: [/* @__PURE__ */ e(g, {
+        disabled: n || d,
         onClick: l,
         "data-target-id": "TextButton-deleteButton",
         children: t.formatMessage(o.deleteButton)
       }), /* @__PURE__ */ i("div", {
-        className: n.buttons,
+        className: a.buttons,
         children: [/* @__PURE__ */ e(r, {
-          disabled: a,
+          disabled: n,
           onClick: c,
           size: "large",
           variant: "secondary",
           "data-target-id": "Button-cancelButton",
           children: t.formatMessage(o.cancelButton)
         }), /* @__PURE__ */ e(r, {
-          disabled: a,
+          disabled: n,
           loading: s,
           loadingAriaLabel: t.formatMessage(o.loadingAriaLabel),
           onClick: u,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.92.1",
+  "version": "0.92.2",
   "peerDependencies": {
     "@ariakit/react": "0.4.15",
     "@box/blueprint-web": "^7.30.3",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "519f1d6731d1101f0481e617c0f315581a6ca537"
+  "gitHead": "7de956c67ea07a5b143cd1aea2425f31322ba1e5"
 }

package/styles/autofill-overlay.css

@@ -1 +1 @@
-._autofillOverlay_vvkb0_1{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ffffffe6;z-index:2;display:flex;align-items:center;flex-direction:column;padding:var(--space-15) var(--space-4) 0 var(--space-4)}._autofillOverlayTitle_vvkb0_15{margin-top:var(--space-4);text-align:center}._dismissButton_vvkb0_20{margin-top:var(--space-4)}._loadingIcon_vvkb0_24{display:block;position:relative}._testContainerStyle_vvkb0_29{padding:var(--space-4);position:relative;width:380px;height:600px;border:1px solid #000}
+._autofillOverlay_15bqk_1{position:absolute;top:0;left:0;right:0;bottom:0;background:#fafcfee6;z-index:2;display:flex;align-items:center;flex-direction:column;padding:var(--space-4) var(--space-4) 0 var(--space-4)}._withError_15bqk_15{background-color:#ffffffe6}._autofillOverlayTitle_15bqk_19{margin-top:var(--space-4);text-align:center}._dismissButton_15bqk_24{margin-top:var(--space-4)}._overlayIcon_15bqk_28{margin-top:var(--space-4);display:block;position:relative}._testContainerStyle_15bqk_34{padding:var(--space-4);position:relative;width:380px;height:600px;border:1px solid #000}

package/styles/metadata-instance-form-card-wrapper.css

@@ -1 +1 @@
-._metadataInstanceForm_6uz9p_1{display:flex;flex-direction:column;gap:var(--space-3)}._wrapperGradient_6uz9p_7{background:linear-gradient(135deg,#fe03dc,#2784fa);border-radius:var(--radius-4)}._suggestionsFetching_6uz9p_12{background:var(--box-blue-02);background-clip:padding-box;border:var(--border-1) solid transparent}._metadataInstanceFormContent_6uz9p_18{display:flex;flex-direction:column;position:relative;gap:var(--space-3)}
+._metadataInstanceForm_1ae95_1{display:flex;flex-direction:column;gap:var(--space-3)}._wrapperGradient_1ae95_7{background:linear-gradient(135deg,#fe03dc,#2784fa);border-radius:var(--radius-4)}._suggestionsFetching_1ae95_12{background:var(--box-blue-02);background-clip:padding-box;border:var(--border-1) solid transparent}._metadataInstanceFormContent_1ae95_18{display:flex;flex-direction:column;position:relative;gap:var(--space-3)}._showOverlay_1ae95_25{min-height:172px}

package/styles/metadata-instance-form-footer.css

@@ -1 +1 @@
-._metadataInstanceFormFooter_17478_1{padding-top:var(--space-4);border-top:solid var(--gray-10) var(--border-1);background-color:var(--background-background);margin:0 calc(-1 * var(--space-4));width:calc(100% + 2 * var(--space-4))}._metadataInstanceFormFooter_17478_1 ._buttonsContainer_17478_8{display:flex;justify-content:space-between;padding:0 var(--space-4)}._metadataInstanceFormFooter_17478_1 ._buttons_17478_8{display:flex;gap:var(--space-2)}
+._metadataInstanceFormFooter_15nrg_1{padding-top:var(--space-4);border-top:solid var(--gray-10) var(--border-1);margin:0 calc(-1 * var(--space-4));width:calc(100% + 2 * var(--space-4))}._metadataInstanceFormFooter_15nrg_1 ._buttonsContainer_15nrg_7{display:flex;justify-content:space-between;padding:0 var(--space-4)}._metadataInstanceFormFooter_15nrg_1 ._buttons_15nrg_7{display:flex;gap:var(--space-2)}