@box/metadata-editor 0.66.2 → 0.67.0

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

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

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

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

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

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

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

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

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

@@ -1,48 +1,50 @@
-import { forwardRef as k } from "react";
 import { useFormikContext as C, getIn as I, Field as M } from "formik";
-import { useIntl as R } from "react-intl";
-import { ComboboxWithApiPagination as V } from "../../../combobox-with-api-pagination/combobox-with-api-pagination.js";
+import { forwardRef as R } from "react";
+import { useIntl as V } from "react-intl";
 import $ from "../../../../messages.js";
-import { getFieldLabel as j } from "../../utils.js";
+import { ComboboxWithApiPagination as j } from "../../../combobox-with-api-pagination/combobox-with-api-pagination.js";
+import { getFieldLabel as w } from "../../utils.js";
 import { jsx as o } from "react/jsx-runtime";
-const q = /* @__PURE__ */ k(({
+const z = /* @__PURE__ */ R(({
   description: m,
   disableForm: n,
   fieldNamePrefix: r,
   label: a,
   portalElement: s,
   taxonomyOptionsFetcher: d,
-  updateModePrefix: c
-}, u) => {
-  const f = R(), i = `${c ?? r}.value`, {
-    setFieldValue: p,
+  updateModePrefix: c,
+  className: u
+}, f) => {
+  const p = V(), i = `${c ?? r}.value`, {
+    setFieldValue: h,
     values: l
   } = C(), {
     metadata: {
-      templateKey: h,
-      scope: F
+      templateKey: F,
+      scope: g
     }
-  } = l, g = I(l, r), {
-    key: x,
+  } = l, x = I(l, r), {
+    key: v,
     optionsRules: {
-      multiSelect: v,
+      multiSelect: y,
       selectableLevels: e
     }
-  } = g, y = (t) => d(F, h, x, e == null ? void 0 : e[0], t);
+  } = x, b = (t) => d(g, F, v, e == null ? void 0 : e[0], t);
   return /* @__PURE__ */ o("div", {
     "data-testid": `${a}-field`,
     children: /* @__PURE__ */ o(M, {
       name: i,
       children: ({
         field: t
-      }) => /* @__PURE__ */ o(V, {
-        ref: u,
-        defaultFetcher: y,
+      }) => /* @__PURE__ */ o(j, {
+        ref: f,
+        className: u,
+        defaultFetcher: b,
         disabled: n,
-        label: j(a, m),
-        multiselect: v,
-        onValueChange: (b) => p(i, b),
-        placeholder: f.formatMessage($.taxonomyPlaceholder),
+        label: w(a, m),
+        multiselect: y,
+        onValueChange: (k) => h(i, k),
+        placeholder: p.formatMessage($.taxonomyPlaceholder),
         portalElement: s,
         value: t.value
       })
@@ -50,5 +52,5 @@ const q = /* @__PURE__ */ k(({
   });
 });
 export {
-  q as MetadataTaxonomyField
+  z as MetadataTaxonomyField
 };

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

@@ -1,55 +1,74 @@
 import "../../../../../../styles/metadata-instance-form-header.css";
-import { Tooltip as _, Button as b } from "@box/blueprint-web";
-import { BoxAiLogo as M } from "@box/blueprint-web-assets/icons/Logo";
-import { useFormikContext as T, getIn as m } from "formik";
-import { useIntl as h } from "react-intl";
-import k from "../../../truncated-header-text/truncated-header-text.js";
-import e from "./messages.js";
-import { jsxs as A, jsx as n } from "react/jsx-runtime";
-const v = "_metadataInstanceFormHeader_13lxr_1", S = "_title_13lxr_9", c = {
-  metadataInstanceFormHeader: v,
-  title: S
-}, q = ({
-  areAiSuggestionsAvailable: d,
-  isAiSuggestionsFeatureEnabled: u,
-  isLoading: s,
-  templateName: f,
-  onAutofill: g
+import { Focusable as k } from "@ariakit/react";
+import { Text as v, Tooltip as f, Button as A } from "@box/blueprint-web";
+import { BoxAiLogo as S } from "@box/blueprint-web-assets/icons/Logo";
+import { useFormikContext as j, getIn as g } from "formik";
+import { useState as C, useRef as E, useEffect as K } from "react";
+import { useIntl as L } from "react-intl";
+import o from "./messages.js";
+import { jsx as t, jsxs as N } from "react/jsx-runtime";
+const R = "_metadataInstanceFormHeader_rdx5o_1", W = "_title_rdx5o_9", p = {
+  metadataInstanceFormHeader: R,
+  title: W
+}, Q = ({
+  areAiSuggestionsAvailable: h,
+  isAiSuggestionsFeatureEnabled: I,
+  isLoading: c,
+  templateName: x,
+  onAutofill: B
 }) => {
   const {
-    isSubmitting: p,
-    values: i,
-    setFieldValue: x
-  } = T(), t = h(), B = async () => {
-    const r = m(i, "metadata.fields"), F = m(i, "metadata.templateKey"), a = await g(F, r);
-    x("metadata.fields", r.map((o) => {
-      const l = a == null ? void 0 : a.find((H) => H.key === o.key);
-      return l ? {
-        ...o,
-        aiSuggestion: l.aiSuggestion
-      } : o;
+    isSubmitting: F,
+    values: m,
+    setFieldValue: T
+  } = j(), e = L(), [y, b] = C(!1), n = E(null), M = async () => {
+    const a = g(m, "metadata.fields"), i = g(m, "metadata.templateKey"), r = await B(i, a);
+    T("metadata.fields", a.map((l) => {
+      const u = r == null ? void 0 : r.find((H) => H.key === l.key);
+      return u ? {
+        ...l,
+        aiSuggestion: u.aiSuggestion
+      } : l;
     }));
-  }, I = f ?? t.formatMessage(e.customInstanceTitle), y = !d || p || s;
-  return /* @__PURE__ */ A("div", {
-    className: c.metadataInstanceFormHeader,
-    children: [/* @__PURE__ */ n(k, {
-      className: c.title,
-      title: I
-    }), u && /* @__PURE__ */ n(_, {
-      content: t.formatMessage(e.autofillButtonTooltip),
-      children: /* @__PURE__ */ n(b, {
-        disabled: y,
-        icon: M,
-        loading: s,
-        loadingAriaLabel: t.formatMessage(e.loadingButtonAriaLabel),
-        onClick: B,
+  }, s = x ?? e.formatMessage(o.customInstanceTitle);
+  K(() => {
+    if (n.current) {
+      const {
+        scrollWidth: a,
+        clientWidth: i
+      } = n.current;
+      b(a > i);
+    }
+  }, [s]);
+  const d = /* @__PURE__ */ t(v, {
+    ref: n,
+    as: "h1",
+    className: p.title,
+    variant: "titleMedium",
+    children: s
+  }), _ = !h || F || c;
+  return /* @__PURE__ */ N("div", {
+    className: p.metadataInstanceFormHeader,
+    children: [y ? /* @__PURE__ */ t(f, {
+      content: s,
+      children: /* @__PURE__ */ t(k, {
+        render: d
+      })
+    }) : d, I && /* @__PURE__ */ t(f, {
+      content: e.formatMessage(o.autofillButtonTooltip),
+      children: /* @__PURE__ */ t(A, {
+        disabled: _,
+        icon: S,
+        loading: c,
+        loadingAriaLabel: e.formatMessage(o.loadingButtonAriaLabel),
+        onClick: M,
         variant: "secondary",
         "data-target-id": "Button-autofillButton",
-        children: t.formatMessage(e.autofillButton)
+        children: e.formatMessage(o.autofillButton)
       })
     })]
   });
 };
 export {
-  q as MetadataInstanceFormHeader
+  Q as MetadataInstanceFormHeader
 };

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js

@@ -1,53 +1,72 @@
 import "../../../../../../styles/metadata-instance-header.css";
-import { Tooltip as i, IconButton as r } from "@box/blueprint-web";
-import { Pencil as p } from "@box/blueprint-web-assets/icons/Line";
-import { BoxAiLogo as g } from "@box/blueprint-web-assets/icons/Logo";
-import { useIntl as I } from "react-intl";
-import _ from "../../../truncated-header-text/truncated-header-text.js";
+import { Focusable as b } from "@ariakit/react";
+import { Text as x, Tooltip as r, IconButton as l } from "@box/blueprint-web";
+import { Pencil as M } from "@box/blueprint-web-assets/icons/Line";
+import { BoxAiLogo as A } from "@box/blueprint-web-assets/icons/Logo";
+import { useState as C, useRef as j, useEffect as H } from "react";
+import { useIntl as L } from "react-intl";
 import n from "./messages.js";
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-const x = "_metadataInstanceHeader_54pdx_1", b = "_iconButtonsContainer_54pdx_6", A = "_title_54pdx_14", e = {
-  metadataInstanceHeader: x,
-  iconButtonsContainer: b,
-  title: A
-}, k = ({
-  areAiSuggestionsAvailable: c,
-  canEdit: l,
-  isAiSuggestionsFeatureEnabled: d,
-  onEdit: m,
-  onAutofill: u,
-  templateName: t
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+const v = "_metadataInstanceHeader_jo0x0_1", k = "_iconButtonsContainer_jo0x0_6", E = "_title_jo0x0_14", s = {
+  metadataInstanceHeader: v,
+  iconButtonsContainer: k,
+  title: E
+}, D = ({
+  areAiSuggestionsAvailable: u,
+  canEdit: m,
+  isAiSuggestionsFeatureEnabled: f,
+  onEdit: B,
+  onAutofill: I,
+  templateName: o
 }) => {
-  const o = I(), f = t || o.formatMessage(n.customInstanceTitle), B = d && t;
-  return /* @__PURE__ */ s("div", {
-    className: e.metadataInstanceHeader,
-    children: [/* @__PURE__ */ a(_, {
-      className: e.title,
-      title: f
-    }), l && /* @__PURE__ */ s("div", {
-      className: e.iconButtonsContainer,
-      children: [B && /* @__PURE__ */ a(i, {
-        content: o.formatMessage(n.autofillButtonTooltip, {
-          templateName: t
+  const e = L(), [g, h] = C(!1), a = j(null), i = o || e.formatMessage(n.customInstanceTitle), p = f && o;
+  H(() => {
+    if (a.current) {
+      const {
+        scrollWidth: T,
+        clientWidth: _
+      } = a.current;
+      h(T > _);
+    }
+  }, [i]);
+  const c = /* @__PURE__ */ t(x, {
+    ref: a,
+    as: "h1",
+    className: s.title,
+    variant: "titleMedium",
+    children: i
+  });
+  return /* @__PURE__ */ d("div", {
+    className: s.metadataInstanceHeader,
+    children: [g ? /* @__PURE__ */ t(r, {
+      content: i,
+      children: /* @__PURE__ */ t(b, {
+        render: c
+      })
+    }) : c, m && /* @__PURE__ */ d("div", {
+      className: s.iconButtonsContainer,
+      children: [p && /* @__PURE__ */ t(r, {
+        content: e.formatMessage(n.autofillButtonTooltip, {
+          templateName: o
         }),
-        children: /* @__PURE__ */ a(r, {
-          "aria-label": o.formatMessage(n.autofillButtonAriaLabel, {
-            templateName: t
+        children: /* @__PURE__ */ t(l, {
+          "aria-label": e.formatMessage(n.autofillButtonAriaLabel, {
+            templateName: o
           }),
-          disabled: !c,
-          icon: g,
-          onClick: u,
+          disabled: !u,
+          icon: A,
+          onClick: I,
           variant: "icon-logo",
           "data-target-id": "IconButton-autofillButtonAriaLabel"
         })
-      }), /* @__PURE__ */ a(i, {
-        content: o.formatMessage(n.editButtonTooltip),
-        children: /* @__PURE__ */ a(r, {
-          "aria-label": o.formatMessage(n.editButtonAriaLabel, {
-            templateName: t
+      }), /* @__PURE__ */ t(r, {
+        content: e.formatMessage(n.editButtonTooltip),
+        children: /* @__PURE__ */ t(l, {
+          "aria-label": e.formatMessage(n.editButtonAriaLabel, {
+            templateName: o
           }),
-          icon: p,
-          onClick: m,
+          icon: M,
+          onClick: B,
           "data-target-id": "IconButton-editButtonAriaLabel"
         })
       })]
@@ -55,5 +74,5 @@ const x = "_metadataInstanceHeader_54pdx_1", b = "_iconButtonsContainer_54pdx_6"
   });
 };
 export {
-  k as MetadataInstanceHeader
+  D as MetadataInstanceHeader
 };