@box/metadata-editor 0.63.0 → 0.64.1

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

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

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

@@ -1,53 +1,47 @@
-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 N = /* @__PURE__ */ R(({
-  className: i,
-  description: l,
-  label: r,
-  fieldNamePrefix: d,
-  disableForm: s
+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 { jsx as r } from "react/jsx-runtime";
+const N = /* @__PURE__ */ V(({
+  className: l,
+  description: n,
+  label: o,
+  fieldNamePrefix: i,
+  disableForm: d,
+  updateModePrefix: s
 }, u) => {
   const {
     values: f,
     setFieldValue: m,
     setFieldTouched: c
-  } = g(), t = `${d}.value`, p = C(f, t), n = V(p), {
-    validateFloats: h
-  } = B(), F = (e) => {
-    n.current = e, m(t, e);
+  } = 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);
   };
-  return /* @__PURE__ */ a("div", {
-    "data-testid": `${r}-field`,
-    children: /* @__PURE__ */ a(I, {
+  return /* @__PURE__ */ r("div", {
+    "data-testid": `${o}-field`,
+    children: /* @__PURE__ */ r(T, {
       name: `${t}`,
-      validate: () => h(n.current),
+      validate: () => F(a.current),
       children: ({
         field: e,
-        meta: x
-      }) => /* @__PURE__ */ a(T, {
-        ...b,
+        meta: g
+      }) => /* @__PURE__ */ r(b, {
+        ...B,
         ...e,
         ref: u,
-        className: i,
-        disabled: s,
-        error: x.error,
-        label: l ? ({
-          ...o
-        }) => $({
-          as: "label",
-          tooltipText: l,
-          children: r,
-          ...o
-        }) : r,
+        className: l,
+        disabled: d,
+        error: g.error,
+        label: O(o, n),
         onBlur: () => v(t),
-        onChange: (o) => F(o.currentTarget.value),
+        onChange: (x) => h(x.currentTarget.value),
         placeholder: "0",
         type: "number"
       })

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

@@ -1,64 +1,56 @@
-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 { 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 { 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 $ from "../../../../messages.js";
+import { fieldDefaultProps as I } from "../constants.js";
+import { getFieldLabel as V } from "../../utils.js";
 import { jsx as o } from "react/jsx-runtime";
-const q = /* @__PURE__ */ M(({
-  className: s,
-  description: a,
-  disableForm: m,
-  fieldNamePrefix: i,
-  label: r,
-  portalElement: d,
-  options: u
+const y = /* @__PURE__ */ M(({
+  className: i,
+  description: s,
+  disableForm: n,
+  fieldNamePrefix: r,
+  label: l,
+  portalElement: m,
+  options: u,
+  updateModePrefix: d
 }, p) => {
   const {
-    setFieldValue: c,
-    values: f
-  } = C(), h = I(), n = `${i}.value`, v = u || b(f, `${i}.options`, []).map(({
+    setFieldValue: f,
+    values: c
+  } = b(), F = L(), a = `${d ?? r}.value`, g = u || w(c, `${r}.options`, []).map(({
     key: e
-  }) => e), F = (e, t) => t.toLowerCase().includes(e.toLowerCase());
+  }) => e), h = (e, t) => t.toLowerCase().includes(e.toLowerCase());
   return /* @__PURE__ */ o("div", {
-    "data-testid": `${r}-field`,
-    children: /* @__PURE__ */ o(w, {
-      name: n,
+    "data-testid": `${l}-field`,
+    children: /* @__PURE__ */ o(x, {
+      name: a,
       children: ({
         field: e
       }) => {
         var t;
-        return /* @__PURE__ */ o(g, {
-          children: /* @__PURE__ */ o(x, {
-            ...L,
-            ref: p,
-            as: "input",
-            className: s,
-            disabled: m,
-            filterFn: F,
-            label: a ? ({
-              ...l
-            }) => $({
-              as: "label",
-              tooltipText: a,
-              children: r,
-              ...l
-            }) : r,
-            multiselect: !0,
-            name: e.name,
-            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
-          })
+        return /* @__PURE__ */ o(C, {
+          ...I,
+          ref: p,
+          as: "input",
+          className: i,
+          disabled: n,
+          filterFn: h,
+          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,
+          value: e.value
         });
       }
     })
   });
 });
 export {
-  q as MetadataMultiSelectField,
-  q as default
+  y as MetadataMultiSelectField,
+  y as default
 };

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

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

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

@@ -0,0 +1,54 @@
+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 $ from "../../../../messages.js";
+import { getFieldLabel as j } from "../../utils.js";
+import { jsx as o } from "react/jsx-runtime";
+const q = /* @__PURE__ */ k(({
+  description: m,
+  disableForm: n,
+  fieldNamePrefix: r,
+  label: a,
+  portalElement: s,
+  taxonomyOptionsFetcher: d,
+  updateModePrefix: c
+}, u) => {
+  const f = R(), i = `${c ?? r}.value`, {
+    setFieldValue: p,
+    values: l
+  } = C(), {
+    metadata: {
+      templateKey: h,
+      scope: F
+    }
+  } = l, g = I(l, r), {
+    key: x,
+    optionsRules: {
+      multiSelect: v,
+      selectableLevels: e
+    }
+  } = g, y = (t) => d(F, h, x, 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,
+        disabled: n,
+        label: j(a, m),
+        multiselect: v,
+        onValueChange: (b) => p(i, b),
+        placeholder: f.formatMessage($.taxonomyPlaceholder),
+        portalElement: s,
+        value: t.value
+      })
+    })
+  });
+});
+export {
+  q as MetadataTaxonomyField
+};

package/esm/lib/components/metadata-editor-fields/components/update-mode-field-wrapper/update-mode-field-wrapper.js

@@ -1,30 +1,31 @@
 import "../../../../../../styles/update-mode-field-wrapper.css";
-import { IconButton as F, Radio as l } from "@box/blueprint-web";
-import { Settings as I, XMark as R } from "@box/blueprint-web-assets/icons/Fill";
-import w from "clsx";
-import { useFormikContext as A, getIn as C, Field as E } from "formik";
-import _, { useState as S } from "react";
-import { useIntl as B } from "react-intl";
-import { U as d } from "../../../../../../chunks/types.js";
-import { messages as n } from "./messages.js";
+import { IconButton as I, Radio as d } from "@box/blueprint-web";
+import { Settings as R, XMark as w } from "@box/blueprint-web-assets/icons/Fill";
+import A from "clsx";
+import { useFormikContext as E, getIn as C, Field as S } from "formik";
+import _, { useState as B } from "react";
+import { useIntl as U } from "react-intl";
+import { U as i } from "../../../../../../chunks/types.js";
+import { messages as l } from "./messages.js";
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
-const N = "_wrapperContianer_1n09p_1", U = "_fieldContainer_1n09p_6", $ = "_field_1n09p_6", k = "_collapseButton_1n09p_13", x = "_radioContainer_1n09p_19", G = "_additionalFieldContainer_1n09p_22", V = "_hidden_1n09p_26", t = {
-  wrapperContianer: N,
-  fieldContainer: U,
-  field: $,
-  collapseButton: k,
-  radioContainer: x,
-  additionalFieldContainer: G,
-  hidden: V
-}, j = (e) => e === d.ReplaceEntered, y = (e) => e === "string" || e === "multiSelect", L = ({
+const $ = "_wrapperContianer_1n09p_1", N = "_fieldContainer_1n09p_6", k = "_field_1n09p_6", x = "_collapseButton_1n09p_13", G = "_radioContainer_1n09p_19", V = "_additionalFieldContainer_1n09p_22", j = "_hidden_1n09p_26", t = {
+  wrapperContianer: $,
+  fieldContainer: N,
+  field: k,
+  collapseButton: x,
+  radioContainer: G,
+  additionalFieldContainer: V,
+  hidden: j
+}, y = (e) => e === i.ReplaceEntered, L = (e, a) => e === "string" || e === "multiSelect" || a, O = ({
   children: e,
-  fieldNamePrefix: i,
-  fieldType: f
+  fieldNamePrefix: a,
+  fieldType: f,
+  isTaxonomyMultiSelect: g
 }) => {
   const {
-    setFieldValue: g,
+    setFieldValue: M,
     values: m
-  } = A(), [p, M] = S(!0), a = B(), u = `${i}.updateMode.mode`, h = C(m, u), r = e && _.Children.only(e), v = C(m, `${i}.options`, []).map(({
+  } = E(), [p, h] = B(!0), n = U(), u = `${a}.updateMode.mode`, v = C(m, u), r = e && _.Children.only(e), b = C(m, `${a}.options`, []).map(({
     key: c
   }) => c);
   return /* @__PURE__ */ s("div", {
@@ -34,58 +35,58 @@ const N = "_wrapperContianer_1n09p_1", U = "_fieldContainer_1n09p_6", $ = "_fiel
       children: [/* @__PURE__ */ o("span", {
         className: t.field,
         children: e
-      }), /* @__PURE__ */ o(F, {
-        "aria-label": a.formatMessage(n.toggleUpdateModeSelectiorAriaLabel),
+      }), /* @__PURE__ */ o(I, {
+        "aria-label": n.formatMessage(l.toggleUpdateModeSelectiorAriaLabel),
         className: t.collapseButton,
         "data-testid": `${r.props.label}-update-mode-toggle`,
-        icon: p ? I : R,
+        icon: p ? R : w,
         onClick: () => {
-          M(!p);
+          h(!p);
         },
         size: "small",
         "data-target-id": "IconButton-toggleUpdateModeSelectiorAriaLabel"
       })]
     }), /* @__PURE__ */ s("div", {
-      className: w(t.radioContainer, {
+      className: A(t.radioContainer, {
         [t.hidden]: p
       }),
-      children: [/* @__PURE__ */ o(E, {
-        name: `${i}.updateMode.mode`,
+      children: [/* @__PURE__ */ o(S, {
+        name: `${a}.updateMode.mode`,
         children: ({
           field: c
-        }) => /* @__PURE__ */ s(l.Group, {
+        }) => /* @__PURE__ */ s(d.Group, {
           "data-testid": `${r.props.label}-radio-group`,
           loop: !0,
-          onValueChange: (b) => g(u, b),
+          onValueChange: (F) => M(u, F),
           orientation: "vertical",
           value: c.value,
-          children: [y(f) && /* @__PURE__ */ o(l.Item, {
-            label: a.formatMessage(n.append),
-            value: d.Append
-          }), /* @__PURE__ */ o(l.Item, {
-            label: a.formatMessage(n.clearAndReplace),
-            value: d.ClearAndReplace
-          }), /* @__PURE__ */ o(l.Item, {
-            label: a.formatMessage(n.removeEntered),
-            value: d.RemoveEntered
-          }), /* @__PURE__ */ o(l.Item, {
-            label: a.formatMessage(n.replaceEntered),
-            value: d.ReplaceEntered
+          children: [L(f, g) && /* @__PURE__ */ o(d.Item, {
+            label: n.formatMessage(l.append),
+            value: i.Append
+          }), /* @__PURE__ */ o(d.Item, {
+            label: n.formatMessage(l.clearAndReplace),
+            value: i.ClearAndReplace
+          }), /* @__PURE__ */ o(d.Item, {
+            label: n.formatMessage(l.removeEntered),
+            value: i.RemoveEntered
+          }), /* @__PURE__ */ o(d.Item, {
+            label: n.formatMessage(l.replaceEntered),
+            value: i.ReplaceEntered
           })]
         })
-      }), j(h) && r && /* @__PURE__ */ o("div", {
+      }), y(v) && r && /* @__PURE__ */ o("div", {
         className: t.additionalFieldContainer,
         children: /* @__PURE__ */ _.cloneElement(r, {
           // This field edits ${fieldNamePrefix}.updateMode.value, the '.value' is added by the field component
-          fieldNamePrefix: `${i}.updateMode`,
-          options: v,
-          label: a.formatMessage(n.with)
+          updateModePrefix: `${a}.updateMode`,
+          options: b,
+          label: n.formatMessage(l.with)
         })
       })]
     })]
   });
 };
-L.displayName = "UpdateModeFieldWrapper";
+O.displayName = "UpdateModeFieldWrapper";
 export {
-  L as UpdateModeFieldWrapper
+  O as UpdateModeFieldWrapper
 };

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

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

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

@@ -0,0 +1,13 @@
+import o from "../interactive-text/interactive-text.js";
+import { jsx as i } from "react/jsx-runtime";
+const n = (t, e) => e ? ({
+  ...r
+}) => /* @__PURE__ */ i(o, {
+  ...r,
+  as: "label",
+  tooltipText: e,
+  children: t
+}) : t;
+export {
+  n as getFieldLabel
+};