@box/metadata-editor 0.60.4 → 0.61.1

package/chunks/metadata-editor-field-wrapper.js

@@ -1,34 +1,35 @@
 import "../styles/metadata-editor-field-wrapper.css";
-import S from "clsx";
-import { useFormikContext as y } from "formik";
-import F from "lodash/isUndefined";
-import { useState as h } from "react";
-import { AiSuggestionField as A } from "../esm/lib/components/metadata-editor-fields/components/ai-suggestion-field/ai-suggestion-field.js";
-import { UpdateModeFieldWrapper as W } from "../esm/lib/components/metadata-editor-fields/components/update-mode-field-wrapper/update-mode-field-wrapper.js";
-import { editorFieldTypes as M } from "../esm/lib/components/metadata-editor-fields/editor-field-types.js";
-import { jsx as o, jsxs as N } from "react/jsx-runtime";
-const q = "_noAttributesText_1xlmq_1", T = "_fieldWrapper_1xlmq_5", b = "_hasSuggestion_1xlmq_5", v = "_error_1xlmq_13", P = "_dateField_1xlmq_25", a = {
-  noAttributesText: q,
-  fieldWrapper: T,
-  hasSuggestion: b,
-  error: v,
-  dateField: P
-}, R = ({
+import y from "clsx";
+import { useFormikContext as F } from "formik";
+import h from "lodash/isUndefined";
+import { forwardRef as A, useState as W } from "react";
+import { AiSuggestionField as M } from "../esm/lib/components/metadata-editor-fields/components/ai-suggestion-field/ai-suggestion-field.js";
+import { UpdateModeFieldWrapper as N } from "../esm/lib/components/metadata-editor-fields/components/update-mode-field-wrapper/update-mode-field-wrapper.js";
+import { editorFieldTypes as q } from "../esm/lib/components/metadata-editor-fields/editor-field-types.js";
+import { jsx as o, jsxs as T } from "react/jsx-runtime";
+const b = "_noAttributesText_1xlmq_1", v = "_fieldWrapper_1xlmq_5", P = "_hasSuggestion_1xlmq_5", $ = "_error_1xlmq_13", k = "_dateField_1xlmq_25", a = {
+  noAttributesText: b,
+  fieldWrapper: v,
+  hasSuggestion: P,
+  error: $,
+  dateField: k
+}, B = /* @__PURE__ */ A(({
   disableForm: n,
   portalElement: p,
   field: e,
   index: d
-}) => {
+}, l) => {
   const {
-    setFieldValue: l
-  } = y(), [u, i] = h(!0), r = M[e.type], c = r && !e.hidden, g = !F(e.updateMode), s = `metadata.fields[${d}]`;
-  if (!c)
+    setFieldValue: m
+  } = F(), [c, i] = W(!0), r = q[e.type], g = r && !e.hidden, f = !h(e.updateMode), s = `metadata.fields[${d}]`;
+  if (!g)
     return null;
-  if (g)
-    return /* @__PURE__ */ o(W, {
+  if (f)
+    return /* @__PURE__ */ o(N, {
       fieldNamePrefix: s,
       fieldType: e.type,
       children: /* @__PURE__ */ o(r, {
+        ref: l,
         description: e.description,
         disableForm: n,
         fieldNamePrefix: s,
@@ -39,13 +40,14 @@ const q = "_noAttributesText_1xlmq_1", T = "_fieldWrapper_1xlmq_5", b = "_hasSug
   const {
     aiSuggestion: t,
     type: _,
-    value: f
-  } = e, m = t && u;
-  return /* @__PURE__ */ N("div", {
+    value: x
+  } = e, u = t && c;
+  return /* @__PURE__ */ T("div", {
     className: a.fieldWrapper,
     children: [/* @__PURE__ */ o(r, {
-      className: S({
-        [a.hasSuggestions]: m,
+      ref: l,
+      className: y({
+        [a.hasSuggestions]: u,
         [a.dateField]: e.type === "date"
       }),
       description: e.description,
@@ -53,21 +55,21 @@ const q = "_noAttributesText_1xlmq_1", T = "_fieldWrapper_1xlmq_5", b = "_hasSug
       fieldNamePrefix: `metadata.fields[${d}]`,
       label: e.displayName,
       portalElement: p
-    }), m && /* @__PURE__ */ o(A, {
+    }), u && /* @__PURE__ */ o(M, {
       aiSuggestion: t,
       onAiSuggestionAppend: () => {
-        const x = e.type === "multiSelect" ? [f, t].flat() : t;
-        l(`${s}.value`, x), i(!1);
+        const S = e.type === "multiSelect" ? [x, t].flat() : t;
+        m(`${s}.value`, S), i(!1);
       },
       onAiSuggestionIgnore: () => i(!1),
       onAiSuggestionReplace: () => {
-        l(`${s}.value`, t), i(!1);
+        m(`${s}.value`, t), i(!1);
       },
       type: _
     })]
   }, e.key);
-};
+});
 export {
-  R as M,
+  B as M,
   a as s
 };

package/esm/index.js

@@ -1,35 +1,37 @@
 import { AddMetadataTemplateDropdown as o } from "./lib/components/add-metadata-template-dropdown/add-metadata-template-dropdown.js";
 import { FilterDropdownMenu as r } from "./lib/components/filter-dropdown-menu/index.js";
-import { SingleLevelTaxonomyField as m } from "./lib/components/metadata-editor-fields/components/metadata-taxonomy-field/single-level-taxonomy-field.js";
+import { SingleLevelTaxonomyField as p } from "./lib/components/metadata-editor-fields/components/metadata-taxonomy-field/single-level-taxonomy-field.js";
 import { MetadataEmptyState as f } from "./lib/components/metadata-empty-state/metadata-empty-state.js";
 import { DeleteConfirmationModal as l } from "./lib/components/metadata-instance-editor/subcomponents/delete-confirmation-modal/delete-confirmation-modal.js";
 import { MetadataInstanceFormHeader as i } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
 import { CustomInstanceNewField as s } from "./lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/custom-instance-new-field.js";
 import { MetadataInstanceForm as I } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js";
-import { MetadataInstanceList as C } from "./lib/components/metadata-instance-list/metadata-instance-list.js";
-import { MetadataInstanceHeader as A } from "./lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js";
-import { UnsavedChangesModal as w } from "./lib/components/unsaved-changes-modal/unsaved-changes-modal.js";
+import { MetadataInstanceList as A } from "./lib/components/metadata-instance-list/metadata-instance-list.js";
+import { MetadataInstanceHeader as F } from "./lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js";
+import { UnsavedChangesModal as v } from "./lib/components/unsaved-changes-modal/unsaved-changes-modal.js";
 import { defaultInitialValues as U, defaultMetadataValueMap as g } from "./lib/defaults.js";
-import { MetadataEditor as E } from "./lib/metadata-editor.js";
-import { U as L } from "../chunks/types.js";
-import { AutofillContext as T, AutofillContextProvider as V, useAutofill as h } from "./lib/utils/autofill-context.js";
+import { MetadataEditor as y } from "./lib/metadata-editor.js";
+import { U as H } from "../chunks/types.js";
+import { AutofillContext as S, AutofillContextProvider as T, useAutofill as V } from "./lib/utils/autofill-context.js";
+import { withApiWrapper as P } from "./lib/utils/api-wrapper.js";
 export {
   o as AddMetadataTemplateDropdown,
-  T as AutofillContext,
-  V as AutofillContextProvider,
+  S as AutofillContext,
+  T as AutofillContextProvider,
   s as CustomInstanceNewField,
   l as DeleteConfirmationModal,
   r as FilterDropdownMenu,
-  E as MetadataEditor,
+  y as MetadataEditor,
   f as MetadataEmptyState,
   I as MetadataInstanceForm,
   i as MetadataInstanceFormHeader,
-  A as MetadataInstanceHeader,
-  C as MetadataInstanceList,
-  m as SingleLevelTaxonomyField,
-  w as UnsavedChangesModal,
-  L as UpdateMode,
+  F as MetadataInstanceHeader,
+  A as MetadataInstanceList,
+  p as SingleLevelTaxonomyField,
+  v as UnsavedChangesModal,
+  H as UpdateMode,
   U as defaultInitialValues,
   g as defaultMetadataValueMap,
-  h as useAutofill
+  V as useAutofill,
+  P as withApiWrapper
 };

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

@@ -1,71 +1,72 @@
-import { DateI18nProvider as T, DatePicker as P } from "@box/blueprint-web";
-import { useFormikContext as F, getIn as V, Field as b } from "formik";
-import { useMemo as A } from "react";
-import { useIntl as C } from "react-intl";
-import { convertToDatePickerValue as I, convertToFormikValue as L } from "./date-conversion-utils.js";
-import { useDateInternationalization as w } from "./use-date-internationalization.js";
+import { DateI18nProvider as P, DatePicker as F } from "@box/blueprint-web";
+import { useFormikContext as V, getIn as b, Field as A } from "formik";
+import { forwardRef as C, useMemo as I } from "react";
+import { useIntl as L } from "react-intl";
+import { convertToDatePickerValue as w, convertToFormikValue as N } from "./date-conversion-utils.js";
+import { useDateInternationalization as z } from "./use-date-internationalization.js";
 import a from "../../../../messages.js";
-import N from "../../../interactive-text/interactive-text.js";
+import B from "../../../interactive-text/interactive-text.js";
 import { jsx as o } from "react/jsx-runtime";
-const G = ({
+const H = /* @__PURE__ */ C(({
   description: s,
   disableForm: m,
   fieldNamePrefix: d,
   label: r,
   portalElement: f,
   className: u
-}) => {
-  const t = `${d}.value`, e = C(), {
-    values: h,
-    setFieldTouched: p,
-    setFieldValue: D
-  } = F(), {
-    localTimezone: M
-  } = w(e.locale), c = V(h, t), g = A(() => I(c), [c]), k = {
+}, h) => {
+  const t = `${d}.value`, e = L(), {
+    values: p,
+    setFieldTouched: D,
+    setFieldValue: M
+  } = V(), {
+    localTimezone: g
+  } = z(e.locale), c = b(p, t), k = I(() => w(c), [c]), v = {
     clearDatePickerAriaLabel: e.formatMessage(a.clearSelectedDate),
     nextMonthAriaLabel: e.formatMessage(a.switchToNextMonth),
     openCalendarDropdownAriaLabel: e.formatMessage(a.openCalendar),
     previousMonthAriaLabel: e.formatMessage(a.switchToNextMonth)
-  }, v = (n) => {
-    const l = L(n, M);
-    D(t, l);
-  }, x = () => {
-    p(t, !0);
+  }, x = (n) => {
+    const l = N(n, g);
+    M(t, l);
+  }, T = () => {
+    D(t, !0);
   };
   return /* @__PURE__ */ o("div", {
     "data-testid": `${r}-field`,
-    children: /* @__PURE__ */ o(T, {
+    children: /* @__PURE__ */ o(P, {
       locale: e.locale,
-      children: /* @__PURE__ */ o(b, {
+      children: /* @__PURE__ */ o(A, {
         name: t,
         children: ({
           field: n,
           meta: l
-        }) => /* @__PURE__ */ o(P, {
+        }) => /* @__PURE__ */ o(F, {
           ...n,
-          ...k,
+          ...v,
+          ref: h,
           calendarAriaLabel: e.formatMessage(a.selectDate),
           className: u,
           error: l.error,
           isDisabled: m,
           label: s ? ({
             ...i
-          }) => N({
+          }) => B({
             as: "span",
             tooltipText: s,
             children: r,
             ...i
           }) : r,
-          onBlur: () => x(),
-          onChange: (i) => v(i),
+          onBlur: () => T(),
+          onChange: (i) => x(i),
           portalElement: f,
-          value: g
+          value: k
         })
       })
     })
   });
-};
+});
 export {
-  G as MetadataDateField,
-  G as default
+  H as MetadataDateField,
+  H as default
 };

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

@@ -1,54 +1,56 @@
 import { Select as l, SELECT_EMPTY_VALUE as s } from "@box/blueprint-web";
-import { useFormikContext as E, getIn as F, Field as M } from "formik";
-import { useIntl as V, FormattedMessage as C } from "react-intl";
-import d from "../../../../messages.js";
-import T from "../../../interactive-text/interactive-text.js";
-import { jsx as t, jsxs as I } from "react/jsx-runtime";
-const A = ({
+import { useFormikContext as F, getIn as M, Field as V } from "formik";
+import { useIntl as C, FormattedMessage as T } from "react-intl";
+import { forwardRef as I } from "react";
+import u from "../../../../messages.js";
+import $ from "../../../interactive-text/interactive-text.js";
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+const R = /* @__PURE__ */ I(({
   className: i,
   description: n,
   disableForm: h,
-  fieldNamePrefix: c,
+  fieldNamePrefix: m,
   label: r,
   options: v,
-  portalElement: p
-}) => {
+  portalElement: f
+}, p) => {
   const {
     setFieldValue: x,
-    values: f
-  } = E(), g = V(), m = `${c}.value`, o = v || F(f, `${c}.options`, []).map(({
+    values: g
+  } = F(), E = C(), c = `${m}.value`, o = v || M(g, `${m}.options`, []).map(({
     key: a
-  }) => a), u = g.formatMessage(d.selectValuePlaceholder);
+  }) => a), d = E.formatMessage(u.selectValuePlaceholder);
   return /* @__PURE__ */ t("div", {
     "data-testid": `${r}-field`,
-    children: /* @__PURE__ */ t(M, {
-      name: m,
+    children: /* @__PURE__ */ t(V, {
+      name: c,
       children: ({
         field: a
       }) => /* @__PURE__ */ t(l, {
+        ref: p,
         className: i,
         disabled: h,
         label: n ? ({
           ...e
-        }) => T({
+        }) => $({
           as: "label",
           tooltipText: n,
           children: r,
           ...e
         }) : r,
         onValueChange: (e) => {
-          x(m, e === s ? "" : e);
+          x(c, e === s ? "" : e);
         },
-        placeholder: u,
+        placeholder: d,
         ...a,
         value: a.value === s ? "" : a.value,
-        children: /* @__PURE__ */ I(l.Content, {
-          container: p,
+        children: /* @__PURE__ */ j(l.Content, {
+          container: f,
           children: [/* @__PURE__ */ t(l.Option, {
-            text: u,
+            text: d,
             value: s,
-            children: /* @__PURE__ */ t(C, {
-              ...d.selectValuePlaceholder
+            children: /* @__PURE__ */ t(T, {
+              ...u.selectValuePlaceholder
             })
           }), o == null ? void 0 : o.map((e) => /* @__PURE__ */ t(l.Option, {
             text: e,
@@ -59,8 +61,8 @@ const A = ({
       })
     })
   });
-};
+});
 export {
-  A as MetadataEnumField,
-  A as default
+  R as MetadataEnumField,
+  R as default
 };

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

@@ -1,59 +1,60 @@
-import { TextInput as x } from "@box/blueprint-web";
-import { useFormikContext as T, getIn as g, Field as C } from "formik";
-import { useRef as I } from "react";
-import V from "../../../interactive-text/interactive-text.js";
-import { fieldDefaultProps as $ } from "../constants.js";
-import { useFloatValidation as b } from "./use-float-validation.js";
+import { TextInput as T } from "@box/blueprint-web";
+import { useFormikContext as g, getIn as C, Field as I } from "formik";
+import { forwardRef as R, useRef as V } from "react";
+import $ from "../../../interactive-text/interactive-text.js";
+import { fieldDefaultProps as b } from "../constants.js";
+import { useFloatValidation as B } from "./use-float-validation.js";
 import { jsx as a } from "react/jsx-runtime";
-const M = ({
+const N = /* @__PURE__ */ R(({
   className: i,
   description: l,
   label: r,
   fieldNamePrefix: d,
   disableForm: s
-}) => {
+}, u) => {
   const {
-    values: u,
+    values: f,
     setFieldValue: m,
     setFieldTouched: c
-  } = T(), t = `${d}.value`, f = g(u, t), n = I(f), {
-    validateFloats: p
-  } = b(), h = (e) => {
+  } = g(), t = `${d}.value`, p = C(f, t), n = V(p), {
+    validateFloats: h
+  } = B(), F = (e) => {
     n.current = e, m(t, e);
-  }, F = (e) => {
+  }, v = (e) => {
     c(e, !0);
   };
   return /* @__PURE__ */ a("div", {
     "data-testid": `${r}-field`,
-    children: /* @__PURE__ */ a(C, {
+    children: /* @__PURE__ */ a(I, {
       name: `${t}`,
-      validate: () => p(n.current),
+      validate: () => h(n.current),
       children: ({
         field: e,
-        meta: v
-      }) => /* @__PURE__ */ a(x, {
-        ...$,
+        meta: x
+      }) => /* @__PURE__ */ a(T, {
+        ...b,
         ...e,
+        ref: u,
         className: i,
         disabled: s,
-        error: v.error,
+        error: x.error,
         label: l ? ({
           ...o
-        }) => V({
+        }) => $({
           as: "label",
           tooltipText: l,
           children: r,
           ...o
         }) : r,
-        onBlur: () => F(t),
-        onChange: (o) => h(o.currentTarget.value),
+        onBlur: () => v(t),
+        onChange: (o) => F(o.currentTarget.value),
         placeholder: "0",
         type: "number"
       })
     })
   });
-};
+});
 export {
-  M as MetadataFloatField,
-  M as default
+  N as MetadataFloatField,
+  N as default
 };

package/esm/lib/components/metadata-editor-fields/components/metadata-multi-select-field/metadata-multi-select-field.js

@@ -1,62 +1,64 @@
-import { TooltipProvider as F, Combobox as g } from "@box/blueprint-web";
-import { useFormikContext as x, getIn as C, Field as b } from "formik";
+import { TooltipProvider as g, Combobox as x } from "@box/blueprint-web";
+import { useFormikContext as C, getIn as b, Field as w } from "formik";
 import { useIntl as I } from "react-intl";
-import M from "../../../../messages.js";
-import T from "../../../interactive-text/interactive-text.js";
-import { fieldDefaultProps as $ } from "../constants.js";
+import { forwardRef as M } from "react";
+import T from "../../../../messages.js";
+import $ from "../../../interactive-text/interactive-text.js";
+import { fieldDefaultProps as L } from "../constants.js";
 import { jsx as o } from "react/jsx-runtime";
-const O = ({
+const q = /* @__PURE__ */ M(({
   className: s,
   description: a,
   disableForm: m,
   fieldNamePrefix: i,
-  label: l,
-  portalElement: u,
-  options: d
-}) => {
+  label: r,
+  portalElement: d,
+  options: u
+}, p) => {
   const {
     setFieldValue: c,
-    values: p
-  } = x(), f = I(), n = `${i}.value`, h = d || C(p, `${i}.options`, []).map(({
+    values: f
+  } = C(), h = I(), n = `${i}.value`, v = u || b(f, `${i}.options`, []).map(({
     key: e
-  }) => e), v = (e, t) => t.toLowerCase().includes(e.toLowerCase());
+  }) => e), F = (e, t) => t.toLowerCase().includes(e.toLowerCase());
   return /* @__PURE__ */ o("div", {
-    "data-testid": `${l}-field`,
-    children: /* @__PURE__ */ o(b, {
+    "data-testid": `${r}-field`,
+    children: /* @__PURE__ */ o(w, {
       name: n,
       children: ({
         field: e
       }) => {
         var t;
-        return /* @__PURE__ */ o(F, {
-          children: /* @__PURE__ */ o(g, {
-            ...$,
+        return /* @__PURE__ */ o(g, {
+          children: /* @__PURE__ */ o(x, {
+            ...L,
+            ref: p,
             as: "input",
             className: s,
             disabled: m,
-            filterFn: v,
+            filterFn: F,
             label: a ? ({
-              ...r
-            }) => T({
+              ...l
+            }) => $({
               as: "label",
               tooltipText: a,
-              children: l,
-              ...r
-            }) : l,
+              children: r,
+              ...l
+            }) : r,
             multiselect: !0,
             name: e.name,
-            onValueChange: (r) => c(n, r),
-            options: h,
-            placeholder: ((t = e.value) == null ? void 0 : t.length) === 0 ? f.formatMessage(M.multiselectPlaceholder) : "",
-            portalElement: u,
+            onValueChange: (l) => c(n, l),
+            options: v,
+            placeholder: ((t = e.value) == null ? void 0 : t.length) === 0 ? h.formatMessage(T.multiselectPlaceholder) : "",
+            portalElement: d,
             value: e.value
           })
         });
       }
     })
   });
-};
+});
 export {
-  O as MetadataMultiSelectField,
-  O as default
+  q as MetadataMultiSelectField,
+  q as default
 };

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

@@ -1,46 +1,48 @@
-import { TextInput as n } from "@box/blueprint-web";
-import { Field as p } from "formik";
-import { useIntl as c } from "react-intl";
-import u from "../../../../messages.js";
-import h from "../../../interactive-text/interactive-text.js";
-import { fieldDefaultProps as x } from "../constants.js";
-import { jsx as t } from "react/jsx-runtime";
-const g = ({
-  description: r,
+import { TextInput as p } from "@box/blueprint-web";
+import { Field as c } from "formik";
+import { useIntl as u } from "react-intl";
+import { forwardRef as h } from "react";
+import x from "../../../../messages.js";
+import g from "../../../interactive-text/interactive-text.js";
+import { fieldDefaultProps as v } from "../constants.js";
+import { jsx as r } from "react/jsx-runtime";
+const F = /* @__PURE__ */ h(({
+  description: t,
   label: e,
-  fieldNamePrefix: a,
-  disableForm: o,
+  fieldNamePrefix: o,
+  disableForm: a,
   className: i
-}) => {
-  const l = c(), d = `${a}.value`;
-  return /* @__PURE__ */ t("div", {
+}, l) => {
+  const m = u(), d = `${o}.value`;
+  return /* @__PURE__ */ r("div", {
     "data-testid": `${e}-field`,
-    children: /* @__PURE__ */ t(p, {
+    children: /* @__PURE__ */ r(c, {
       name: d,
       children: ({
-        field: m,
+        field: f,
         meta: s
-      }) => /* @__PURE__ */ t(n, {
-        ...x,
-        ...m,
+      }) => /* @__PURE__ */ r(p, {
+        ...v,
+        ...f,
+        ref: l,
         className: i,
-        disabled: o,
+        disabled: a,
         error: s.error,
-        label: r ? ({
-          ...f
-        }) => h({
+        label: t ? ({
+          ...n
+        }) => g({
           as: "label",
-          tooltipText: r,
+          tooltipText: t,
           children: e,
-          ...f
+          ...n
         }) : e,
-        placeholder: l.formatMessage(u.setValuePlaceholder)
+        placeholder: m.formatMessage(x.setValuePlaceholder)
       })
     })
   });
-};
-g.displayName = "MetadataStringField";
+});
+F.displayName = "MetadataStringField";
 export {
-  g as MetadataStringField,
-  g as default
+  F as MetadataStringField,
+  F as default
 };