@box/metadata-editor 0.45.0 → 0.46.1

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

@@ -0,0 +1,65 @@
+import "../styles/metadata-editor-field-wrapper.css";
+import S from "clsx";
+import { useFormikContext as x } from "formik";
+import _ 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 v } from "../esm/lib/components/metadata-editor-fields/components/update-mode-field-wrapper/update-mode-field-wrapper.js";
+import { editorFieldTypes as k } from "../esm/lib/components/metadata-editor-fields/editor-field-types.js";
+import { jsx as o, jsxs as F } from "react/jsx-runtime";
+const W = "_noAttributesText_vykxc_1", M = "_fieldWrapper_vykxc_5", N = "_hasSuggestion_vykxc_5", T = "_error_vykxc_13", u = {
+  noAttributesText: W,
+  fieldWrapper: M,
+  hasSuggestion: N,
+  error: T
+}, E = ({
+  disableForm: a,
+  portalElement: n,
+  field: e,
+  index: p
+}) => {
+  const {
+    setFieldValue: d
+  } = x(), [g, r] = h(!0), i = k[e.type], c = i && !e.hidden, m = !_(e.updateMode), s = `metadata.fields[${p}]`;
+  if (!c)
+    return null;
+  if (m)
+    return /* @__PURE__ */ o(v, {
+      fieldNamePrefix: s,
+      fieldType: e.type,
+      children: /* @__PURE__ */ o(i, {
+        disableForm: a,
+        fieldNamePrefix: s,
+        label: e.displayName,
+        portalElement: n
+      })
+    }, e.key);
+  const {
+    aiSuggestion: t,
+    value: f
+  } = e, l = t && g;
+  return /* @__PURE__ */ F("div", {
+    className: u.fieldWrapper,
+    children: [/* @__PURE__ */ o(i, {
+      className: S(l && u.hasSuggestion),
+      disableForm: a,
+      fieldNamePrefix: `metadata.fields[${p}]`,
+      label: e.displayName,
+      portalElement: n
+    }), l && /* @__PURE__ */ o(A, {
+      aiSuggestion: t,
+      onAiSuggestionAppend: () => {
+        const y = e.type === "multiSelect" ? [f, t].flat() : t;
+        d(`${s}.value`, y), r(!1);
+      },
+      onAiSuggestionIgnore: () => r(!1),
+      onAiSuggestionReplace: () => {
+        d(`${s}.value`, t), r(!1);
+      }
+    })]
+  }, e.key);
+};
+export {
+  E as M,
+  u as s
+};

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

@@ -0,0 +1,76 @@
+import "../../../../../../styles/ai-suggestion-field.css";
+import { Text as l, IconButton as c, DropdownMenu as r } from "@box/blueprint-web";
+import { Checkmark as d, Ellipsis as u } from "@box/blueprint-web-assets/icons/Fill";
+import { useIntl as h, FormattedMessage as n } from "react-intl";
+import t from "./messages.js";
+import { formatSuggestionValue as S } from "./utils.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+const _ = "_wrapperGradient_1izxt_1", f = "_wrapper_1izxt_1", x = "_buttons_1izxt_18", w = "_selectTrigger_1izxt_22", o = {
+  wrapperGradient: _,
+  wrapper: f,
+  buttons: x,
+  selectTrigger: w
+};
+function M({
+  aiSuggestion: p,
+  onAiSuggestionAppend: a,
+  onAiSuggestionReplace: g,
+  onAiSuggestionIgnore: m
+}) {
+  const s = h();
+  return /* @__PURE__ */ e("div", {
+    className: o.wrapperGradient,
+    children: /* @__PURE__ */ i("div", {
+      className: o.wrapper,
+      children: [/* @__PURE__ */ i("div", {
+        children: [/* @__PURE__ */ e(l, {
+          as: "p",
+          color: "textOnLightSecondary",
+          variant: "caption",
+          children: /* @__PURE__ */ e(n, {
+            ...t.aiSuggestionCaption
+          })
+        }), /* @__PURE__ */ e(l, {
+          as: "p",
+          children: S(p)
+        })]
+      }), /* @__PURE__ */ i("div", {
+        className: o.buttons,
+        children: [/* @__PURE__ */ e(c, {
+          "aria-label": s.formatMessage(t.aiSuggestionAppend),
+          icon: d,
+          onClick: a,
+          size: "x-small"
+        }), /* @__PURE__ */ i(r.Root, {
+          children: [/* @__PURE__ */ e(r.Trigger, {
+            className: o.selectTrigger,
+            children: /* @__PURE__ */ e(c, {
+              "aria-label": s.formatMessage(t.aiSuggestionOptions),
+              icon: u
+            })
+          }), /* @__PURE__ */ i(r.Content, {
+            children: [/* @__PURE__ */ e(r.Item, {
+              onSelect: a,
+              children: /* @__PURE__ */ e(n, {
+                ...t.aiSuggestionAppend
+              })
+            }), /* @__PURE__ */ e(r.Item, {
+              onSelect: g,
+              children: /* @__PURE__ */ e(n, {
+                ...t.aiSuggestionClearAndReplace
+              })
+            }), /* @__PURE__ */ e(r.Separator, {}), /* @__PURE__ */ e(r.Item, {
+              onSelect: m,
+              children: /* @__PURE__ */ e(n, {
+                ...t.aiSuggestionIgnore
+              })
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+}
+export {
+  M as AiSuggestionField
+};

package/esm/lib/components/metadata-editor-fields/components/ai-suggestion-field/index.js

@@ -0,0 +1,4 @@
+import { AiSuggestionField as o } from "./ai-suggestion-field.js";
+export {
+  o as AiSuggestionField
+};

package/esm/lib/components/metadata-editor-fields/components/ai-suggestion-field/messages.js

@@ -0,0 +1,26 @@
+import { defineMessages as e } from "react-intl";
+const i = e({
+  aiSuggestionCaption: {
+    id: "metadataEditor.aiSuggestionField.aiSuggestionCaption",
+    defaultMessage: "Box AI suggestion:"
+  },
+  aiSuggestionOptions: {
+    id: "metadataEditor.aiSuggestionField.aiSuggestionOptions",
+    defaultMessage: "Options"
+  },
+  aiSuggestionAppend: {
+    id: "metadataEditor.aiSuggestionField.appendLabel",
+    defaultMessage: "Append"
+  },
+  aiSuggestionClearAndReplace: {
+    id: "metadataEditor.aiSuggestionField.clearAndReplaceLabel",
+    defaultMessage: "Clear and Replace"
+  },
+  aiSuggestionIgnore: {
+    id: "metadataEditor.aiSuggestionField.ignoreLabel",
+    defaultMessage: "Ignore"
+  }
+});
+export {
+  i as default
+};

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

@@ -0,0 +1,13 @@
+function n(t) {
+  if (t == null)
+    return null;
+  if (typeof t == "number")
+    return t.toString();
+  if (Array.isArray(t))
+    return t.join(", ");
+  const r = new Date(t);
+  return !isNaN(r.getTime()) && r.toISOString() === t ? r.toLocaleDateString() : t;
+}
+export {
+  n as formatSuggestionValue
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import "clsx";
+import "formik";
+import "lodash/isUndefined";
+import "react";
+import "./components/ai-suggestion-field/ai-suggestion-field.js";
+import "./components/update-mode-field-wrapper/update-mode-field-wrapper.js";
+import "./editor-field-types.js";
+import { M as f } from "../../../../chunks/metadata-editor-field-wrapper.js";
+import "react/jsx-runtime";
+export {
+  f as MetadataEditorFieldWrapper
+};