@box/metadata-editor 0.61.0 → 0.61.2

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/lib/components/combobox-with-api-pagination/use-async-list.js

@@ -1,9 +1,9 @@
-import { useReducer as I } from "react";
+import { useReducer as i } from "react";
 import { RequestStates as u } from "./request.js";
 var s = /* @__PURE__ */ function(r) {
   return r.LOAD_MORE = "LOAD_MORE", r.RELOAD = "RELOAD", r.SEARCH = "SEARCH", r.SET_ERROR = "SET_ERROR", r.SET_LOADING = "SET_LOADING", r;
 }(s || {});
-function i(r, e) {
+function I(r, e) {
   switch (e.type) {
     case s.LOAD_MORE:
       return {
@@ -52,50 +52,64 @@ function i(r, e) {
       throw new Error(`Invalid action type "${e.type}"`);
   }
 }
-function C(r) {
-  const {
-    load: e
-  } = r, [t, l] = I(i, {
-    error: null,
-    items: [],
-    requestInitiator: null,
-    requestState: u.NOT_STARTED,
-    searchInput: ""
-  }), a = async (o, S) => {
-    var E;
-    const R = new AbortController();
+function E(r, e) {
+  return r.type === s.SEARCH && e.requestState === u.IN_PROGRESS;
+}
+function S(r, e) {
+  return e.requestInitiator === s.LOAD_MORE && e.requestState === u.IN_PROGRESS && r.type === s.LOAD_MORE;
+}
+function a(r, e) {
+  return E(r, e) || S(r, e);
+}
+function m(r, e) {
+  var t;
+  E(r, e) && e.abortController.abort(), S(r, e) && ((t = r.abortController) == null || t.abort());
+}
+function p(r, e) {
+  return S(r, e);
+}
+async function R(r, e, t, n) {
+  const l = new AbortController();
+  if (a(r, t) && m(r, t), !p(r, t)) {
+    n({
+      type: s.SET_LOADING,
+      requestInitiator: r.type,
+      abortController: l
+    });
     try {
-      if (o.type === s.SEARCH && t.requestState === u.IN_PROGRESS && t.abortController.abort(), t.requestInitiator === s.LOAD_MORE && t.requestState === u.IN_PROGRESS && o.type === s.LOAD_MORE) {
-        (E = o.abortController) == null || E.abort();
-        return;
-      }
-      l({
-        type: s.SET_LOADING,
-        requestInitiator: o.type,
-        abortController: R
-      });
-      const n = await S({
+      const o = await e({
         items: t.items.slice(),
-        signal: R.signal,
-        marker: o.type === s.LOAD_MORE ? t.marker : null,
-        searchInput: o.searchInput ?? t.searchInput
-      }), O = n.searchInput ?? o.searchInput ?? t.searchInput;
-      l({
-        type: o.type,
-        ...n,
+        signal: l.signal,
+        marker: r.type === s.LOAD_MORE ? t.marker : null,
+        searchInput: r.searchInput ?? t.searchInput
+      }), O = o.searchInput ?? r.searchInput ?? t.searchInput;
+      n({
+        type: r.type,
+        ...o,
         searchInput: O,
-        abortController: R
+        abortController: l
       });
-    } catch (n) {
-      if ((n == null ? void 0 : n.name) === "AbortError")
+    } catch (o) {
+      if ((o == null ? void 0 : o.name) === "AbortError")
         return;
-      l({
+      n({
         type: s.SET_ERROR,
-        error: n,
-        abortController: R
+        error: o,
+        abortController: l
       });
     }
-  };
+  }
+}
+function C(r) {
+  const {
+    load: e
+  } = r, [t, n] = i(I, {
+    error: null,
+    items: [],
+    requestInitiator: null,
+    requestState: u.NOT_STARTED,
+    searchInput: ""
+  });
   return {
     hasError: t.requestState === u.ERROR,
     hasNextPage: t.requestState === u.ERROR ? !1 : t.marker != null,
@@ -103,20 +117,18 @@ function C(r) {
     isLoading: t.requestState === u.IN_PROGRESS,
     isReloading: t.requestState === u.IN_PROGRESS && (t.requestInitiator === s.RELOAD || t.requestInitiator === s.SEARCH),
     items: t.items,
-    loadMore: () => a({
+    loadMore: () => R({
       type: s.LOAD_MORE
-    }, e),
-    reload: () => {
-      a({
-        type: s.RELOAD
-      }, e);
-    },
+    }, e, t, n),
+    reload: () => R({
+      type: s.RELOAD
+    }, e, t, n),
     requestInitiator: t.requestInitiator,
     searchInput: t.searchInput,
-    search: (o) => a({
+    search: (l) => R({
       type: s.SEARCH,
-      searchInput: o
-    }, e)
+      searchInput: l
+    }, e, t, n)
   };
 }
 export {

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
 };

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

@@ -1,26 +1,32 @@
-import { MetadataDateField as a } from "./components/metadata-date-field/metadata-date-field.js";
+import { forwardRef as r } from "react";
+import { MetadataDateField as o } from "./components/metadata-date-field/metadata-date-field.js";
 import { MetadataEnumField as i } from "./components/metadata-enum-field/metadata-enum-field.js";
-import { MetadataFloatField as o } from "./components/metadata-float-field/metadata-float-field.js";
-import { MetadataMultiSelectField as r } from "./components/metadata-multi-select-field/metadata-multi-select-field.js";
-import { MetadataStringField as m } from "./components/metadata-string-field/metadata-string-field.js";
-import { jsx as e } from "react/jsx-runtime";
-const n = {
-  date: (t) => /* @__PURE__ */ e(a, {
-    ...t
-  }),
-  enum: (t) => /* @__PURE__ */ e(i, {
-    ...t
-  }),
-  float: (t) => /* @__PURE__ */ e(o, {
-    ...t
-  }),
-  multiSelect: (t) => /* @__PURE__ */ e(r, {
-    ...t
-  }),
-  string: (t) => /* @__PURE__ */ e(m, {
-    ...t
-  })
+import { MetadataFloatField as m } from "./components/metadata-float-field/metadata-float-field.js";
+import { MetadataMultiSelectField as f } from "./components/metadata-multi-select-field/metadata-multi-select-field.js";
+import { MetadataStringField as d } from "./components/metadata-string-field/metadata-string-field.js";
+import { jsx as a } from "react/jsx-runtime";
+const c = {
+  date: /* @__PURE__ */ r((t, e) => /* @__PURE__ */ a(o, {
+    ...t,
+    ref: e
+  })),
+  enum: /* @__PURE__ */ r((t, e) => /* @__PURE__ */ a(i, {
+    ...t,
+    ref: e
+  })),
+  float: /* @__PURE__ */ r((t, e) => /* @__PURE__ */ a(m, {
+    ...t,
+    ref: e
+  })),
+  multiSelect: /* @__PURE__ */ r((t, e) => /* @__PURE__ */ a(f, {
+    ...t,
+    ref: e
+  })),
+  string: /* @__PURE__ */ r((t, e) => /* @__PURE__ */ a(d, {
+    ...t,
+    ref: e
+  }))
 };
 export {
-  n as editorFieldTypes
+  c as editorFieldTypes
 };

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

@@ -1,31 +1,36 @@
-import { Text as n } from "@box/blueprint-web";
-import { useFormikContext as i, getIn as l, FieldArray as d } from "formik";
-import { FormattedMessage as p } from "react-intl";
-import c from "../../messages.js";
-import { M as f, s as g } from "../../../../chunks/metadata-editor-field-wrapper.js";
-import { jsx as e } from "react/jsx-runtime";
-const A = (s) => {
+import { useRef as f, useEffect as l } from "react";
+import { Text as c } from "@box/blueprint-web";
+import { useFormikContext as d, getIn as u, FieldArray as p } from "formik";
+import { FormattedMessage as x } from "react-intl";
+import g from "../../messages.js";
+import { M as h, s as F } from "../../../../chunks/metadata-editor-field-wrapper.js";
+import { jsx as t } from "react/jsx-runtime";
+const k = (m) => {
   const {
-    values: o
-  } = i(), t = "metadata.fields", a = l(o, t);
-  return a.length ? /* @__PURE__ */ e(d, {
-    name: t,
+    values: i
+  } = d(), o = "metadata.fields", r = u(i, o), s = f(null), a = r.findIndex((e) => !e.hidden);
+  return l(() => {
+    var e;
+    a > -1 && ((e = s.current) == null || e.focus());
+  }, []), r.length ? /* @__PURE__ */ t(p, {
+    name: o,
     validateOnChange: !1,
-    children: () => a.map((r, m) => /* @__PURE__ */ e(f, {
-      ...s,
-      field: r,
-      index: m
-    }, r.key))
-  }) : /* @__PURE__ */ e(n, {
+    children: () => r.map((e, n) => /* @__PURE__ */ t(h, {
+      ...m,
+      ref: n === a ? s : null,
+      field: e,
+      index: n
+    }, e.key))
+  }) : /* @__PURE__ */ t(c, {
     as: "span",
-    className: g.noAttributesText,
+    className: F.noAttributesText,
     color: "textOnLightSecondary",
-    children: /* @__PURE__ */ e(p, {
-      ...c.noTemplateAtributesError
+    children: /* @__PURE__ */ t(x, {
+      ...g.noTemplateAtributesError
     })
   });
 };
 export {
-  A as TemplateInstance,
-  A as default
+  k as TemplateInstance,
+  k as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box/metadata-editor",
-  "version": "0.61.0",
+  "version": "0.61.2",
   "peerDependencies": {
     "@ariakit/react": "0.4.5",
     "@box/blueprint-web": "^7.30.3",
@@ -53,5 +53,5 @@
     "**/*.css"
   ],
   "license": "SEE LICENSE IN LICENSE",
-  "gitHead": "93e3d2d7d217f2c872083186f18113abeabcf30e"
+  "gitHead": "1a9265fe9212f894e9e9a8d86c1969ef1d602004"
 }

package/types/lib/components/metadata-editor-fields/components/metadata-date-field/metadata-date-field.d.ts

@@ -1,3 +1,3 @@
 import { type MetadataFieldProps } from '../../types';
-export declare const MetadataDateField: ({ description, disableForm, fieldNamePrefix, label, portalElement, className, }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataDateField: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export default MetadataDateField;

package/types/lib/components/metadata-editor-fields/components/metadata-enum-field/metadata-enum-field.d.ts

@@ -1,3 +1,3 @@
 import { type MetadataFieldProps } from '../../types';
-export declare const MetadataEnumField: ({ className, description, disableForm, fieldNamePrefix, label, options, portalElement, }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataEnumField: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export default MetadataEnumField;

package/types/lib/components/metadata-editor-fields/components/metadata-float-field/metadata-float-field.d.ts

@@ -1,3 +1,3 @@
 import { type MetadataFieldProps } from '../../types';
-export declare const MetadataFloatField: ({ className, description, label, fieldNamePrefix, disableForm, }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataFloatField: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export default MetadataFloatField;

package/types/lib/components/metadata-editor-fields/components/metadata-multi-select-field/metadata-multi-select-field.d.ts

@@ -1,3 +1,3 @@
 import { type MetadataFieldProps } from '../../types';
-export declare const MetadataMultiSelectField: ({ className, description, disableForm, fieldNamePrefix, label, portalElement, options, }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataMultiSelectField: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export default MetadataMultiSelectField;

package/types/lib/components/metadata-editor-fields/components/metadata-string-field/metadata-string-field.d.ts

@@ -1,6 +1,3 @@
 import { type MetadataFieldProps } from '../../types';
-export declare const MetadataStringField: {
-    ({ description, label, fieldNamePrefix, disableForm, className, }: MetadataFieldProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const MetadataStringField: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export default MetadataStringField;

package/types/lib/components/metadata-editor-fields/editor-field-types.d.ts

@@ -1,8 +1,8 @@
 import { type MetadataFieldProps } from './types';
 export declare const editorFieldTypes: {
-    date: (props: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
-    enum: (props: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
-    float: (props: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
-    multiSelect: (props: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
-    string: (props: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
+    date: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+    enum: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+    float: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+    multiSelect: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+    string: import("react").ForwardRefExoticComponent<MetadataFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 };

package/types/lib/components/metadata-editor-fields/metadata-editor-field-wrapper.d.ts

@@ -1,2 +1,4 @@
-import { type MetadataEditorFieldWrapperProps } from './types';
-export declare const MetadataEditorFieldWrapper: ({ disableForm, portalElement, field, index, }: MetadataEditorFieldWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataEditorFieldWrapper: import("react").ForwardRefExoticComponent<import("./types").TemplateInstanceProps & {
+    field: import("../../types").MetadataTemplateField;
+    index: number;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -4,6 +4,7 @@ declare const dateField: MetadataTemplateField;
 declare const enumField: MetadataTemplateField;
 declare const floatField: MetadataTemplateField;
 declare const multiSelectField: MetadataTemplateField;
+declare const hiddenField: MetadataTemplateField;
 declare const noValueField: MetadataTemplateField;
 declare const allFieldsTemplate: MetadataTemplate;
 declare const nonHiddenFieldsTemplate: MetadataTemplate;
@@ -29,4 +30,4 @@ declare const firstTemplateInstanceFieldsWithSuggestions: MetadataTemplateField[
 declare const secondTemplateInstance: MetadataTemplate;
 declare const secondTemplateSuggestions: AutofillSuggestions;
 declare const secondTemplateInstanceFieldsWithSuggestions: MetadataTemplateField[];
-export { allFieldsTemplate, allFieldsTemplateInstance, customTemplate, customTemplateInstance, customTemplateInstanceWithAllFieldsEmpty, customTemplateInstanceWithoutEmptyValues, dateField, emptyCustomTemplateInstance, emptyTemplateInstance, enumField, fields, floatField, multiSelectField, noFieldsTemplate, nonHiddenFieldsTemplate, noValueField, stringField, templateInstancesList, templateInstanceWithAllFieldsEmpty, templateInstanceWithoutEmptyValues, templateOptions, templates, allFieldsWithAiSuggestions, allFieldsSuggestions, firstTemplateInstance, firstTemplateInstanceFieldsWithSuggestions, secondTemplateInstance, firstTemplateSuggestions, secondTemplateSuggestions, secondTemplateInstanceFieldsWithSuggestions, };
+export { allFieldsTemplate, allFieldsTemplateInstance, customTemplate, customTemplateInstance, customTemplateInstanceWithAllFieldsEmpty, customTemplateInstanceWithoutEmptyValues, dateField, emptyCustomTemplateInstance, emptyTemplateInstance, enumField, fields, floatField, hiddenField, multiSelectField, noFieldsTemplate, nonHiddenFieldsTemplate, noValueField, stringField, templateInstancesList, templateInstanceWithAllFieldsEmpty, templateInstanceWithoutEmptyValues, templateOptions, templates, allFieldsWithAiSuggestions, allFieldsSuggestions, firstTemplateInstance, firstTemplateInstanceFieldsWithSuggestions, secondTemplateInstance, firstTemplateSuggestions, secondTemplateSuggestions, secondTemplateInstanceFieldsWithSuggestions, };