@box/metadata-editor 0.45.0

package/esm/lib/components/filter-dropdown-menu/filter-dropdown-menu-trigger.js

@@ -0,0 +1,13 @@
+import { MenuButton as o } from "@ariakit/react";
+import { jsx as n } from "react/jsx-runtime";
+const t = ({
+  triggerButton: r,
+  ...e
+}) => /* @__PURE__ */ n(o, {
+  ...e,
+  render: r
+});
+t.displayName = "FilterDropdownMenuTrigger";
+export {
+  t as FilterDropdownMenuTrigger
+};

package/esm/lib/components/filter-dropdown-menu/index.js

@@ -0,0 +1,19 @@
+import { FilterDropdownMenuContent as o } from "./filter-dropdown-menu-content.js";
+import { FilterDropdownMenuItem as r } from "./filter-dropdown-menu-item.js";
+import { FilterDropdownMenuList as t } from "./filter-dropdown-menu-list.js";
+import { FilterDropdownMenuRoot as e } from "./filter-dropdown-menu-root.js";
+import { FilterDropdownMenuSearch as n } from "./filter-dropdown-menu-search.js";
+import { FilterDropdownMenuTrigger as i } from "./filter-dropdown-menu-trigger.js";
+import { FilterDropdownMenuEmptyState as m } from "./filter-dropdown-menu-empty-state.js";
+const M = {
+  Root: e,
+  Trigger: i,
+  Content: o,
+  Item: r,
+  List: t,
+  Search: n,
+  EmptyState: m
+};
+export {
+  M as FilterDropdownMenu
+};

package/esm/lib/components/filter-dropdown-menu/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  cancelButtonAriaLabel: {
+    id: "metadataEditor.filterDropdownMenuSearch.iconButtonAriaLabel",
+    defaultMessage: "Clear search"
+  },
+  noResultsFound: {
+    id: "metadataEditor.filterDropdownMenuSearch.noResultsFound",
+    defaultMessage: "No results found"
+  }
+});
+export {
+  t as default
+};

package/esm/lib/components/interactive-text/interactive-text.js

@@ -0,0 +1,22 @@
+import { Focusable as c } from "@ariakit/react";
+import { Tooltip as i, Text as a } from "@box/blueprint-web";
+import { jsx as t } from "react/jsx-runtime";
+const f = ({
+  tooltipText: e,
+  children: r,
+  as: o = "span",
+  ...n
+}) => /* @__PURE__ */ t(i, {
+  __checkInteractivity: !1,
+  content: e,
+  children: /* @__PURE__ */ t(c, {
+    render: /* @__PURE__ */ t(a, {
+      as: o,
+      ...n,
+      children: r
+    })
+  })
+});
+export {
+  f as default
+};

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

@@ -0,0 +1,6 @@
+const e = {
+  maxLength: 255
+};
+export {
+  e as fieldDefaultProps
+};

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

@@ -0,0 +1,16 @@
+import { parseAbsoluteToLocal as r, toCalendarDate as n, toZoned as a } from "@box/blueprint-web";
+const i = (e) => {
+  try {
+    const o = r(e);
+    return n(o);
+  } catch {
+    return null;
+  }
+}, u = (e, o) => {
+  let t = "";
+  return e && (t = a(e, o).toAbsoluteString()), t;
+};
+export {
+  i as convertToDatePickerValue,
+  u as convertToFormikValue
+};

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

@@ -0,0 +1,60 @@
+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 { jsx as t } from "react/jsx-runtime";
+const S = ({
+  disableForm: s,
+  fieldNamePrefix: c,
+  label: l,
+  portalElement: m
+}) => {
+  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);
+  };
+  return /* @__PURE__ */ t("div", {
+    "data-testid": `${l}-field`,
+    children: /* @__PURE__ */ t(v, {
+      locale: e.locale,
+      children: /* @__PURE__ */ t(T, {
+        name: o,
+        children: ({
+          field: r,
+          meta: n
+        }) => /* @__PURE__ */ t(P, {
+          ...r,
+          ...D,
+          calendarAriaLabel: e.formatMessage(a.selectDate),
+          error: n.error,
+          isDisabled: s,
+          label: l,
+          onBlur: () => g(),
+          onChange: (k) => M(k),
+          portalElement: m,
+          value: p
+        })
+      })
+    })
+  });
+};
+export {
+  S as MetadataDateField,
+  S as default
+};

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

@@ -0,0 +1,13 @@
+import { DateFormatter as a, getLocalTimeZone as n } from "@box/blueprint-web";
+import { useMemo as m } from "react";
+const D = (t) => {
+  const o = m(() => new a(t), [t]), e = n();
+  return {
+    locale: t,
+    localTimezone: e,
+    formatCalendarDate: (r) => o.format(r.toDate(e))
+  };
+};
+export {
+  D as useDateInternationalization
+};

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

@@ -0,0 +1,55 @@
+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 d from "../../../../messages.js";
+import { jsx as t, jsxs as V } from "react/jsx-runtime";
+const S = ({
+  disableForm: m,
+  fieldNamePrefix: n,
+  label: o,
+  options: i,
+  portalElement: h
+}) => {
+  const {
+    setFieldValue: v,
+    values: p
+  } = f(), g = F(), c = `${n}.value`, s = i || x(p, `${n}.options`, []).map(({
+    key: a
+  }) => a), u = g.formatMessage(d.selectValuePlaceholder);
+  return /* @__PURE__ */ t("div", {
+    "data-testid": `${o}-field`,
+    children: /* @__PURE__ */ t(E, {
+      name: c,
+      children: ({
+        field: a
+      }) => /* @__PURE__ */ t(l, {
+        disabled: m,
+        label: o,
+        onValueChange: (e) => {
+          v(c, e === r ? "" : e);
+        },
+        placeholder: u,
+        ...a,
+        value: a.value === r ? "" : a.value,
+        children: /* @__PURE__ */ V(l.Content, {
+          container: h,
+          children: [/* @__PURE__ */ t(l.Option, {
+            text: u,
+            value: r,
+            children: /* @__PURE__ */ t(M, {
+              ...d.selectValuePlaceholder
+            })
+          }), s == null ? void 0 : s.map((e) => /* @__PURE__ */ t(l.Option, {
+            text: e,
+            value: e,
+            children: e
+          }, e))]
+        })
+      })
+    })
+  });
+};
+export {
+  S as MetadataEnumField,
+  S as default
+};

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

@@ -0,0 +1,47 @@
+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 { jsx as r } from "react/jsx-runtime";
+const k = ({
+  label: o,
+  fieldNamePrefix: l,
+  disableForm: n
+}) => {
+  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);
+  };
+  return /* @__PURE__ */ r("div", {
+    "data-testid": `${o}-field`,
+    children: /* @__PURE__ */ r(x, {
+      name: `${t}`,
+      validate: () => c(a.current),
+      children: ({
+        field: e,
+        meta: p
+      }) => /* @__PURE__ */ r(F, {
+        ...T,
+        ...e,
+        disabled: n,
+        error: p.error,
+        label: o,
+        onBlur: () => f(t),
+        onChange: (h) => m(h.currentTarget.value),
+        placeholder: "0"
+      })
+    })
+  });
+};
+export {
+  k as MetadataFloatField,
+  k as default
+};

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

@@ -0,0 +1,15 @@
+import { useIntl as o } from "react-intl";
+import n from "../../../../messages.js";
+const s = (t) => t != null && t.length ? /^[-+]?\d+(\.\d+)?$/.test(t) : !0, l = () => {
+  const t = o();
+  return {
+    validateFloats: (r) => {
+      if (!s(r))
+        return t.formatMessage(n.floatFieldInvalidValue);
+    }
+  };
+};
+export {
+  s as isFloatOrBlank,
+  l as useFloatValidation
+};

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

@@ -0,0 +1,51 @@
+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 { jsx as o } from "react/jsx-runtime";
+const j = ({
+  disableForm: s,
+  fieldNamePrefix: l,
+  label: r,
+  portalElement: a,
+  options: n
+}) => {
+  const {
+    setFieldValue: m,
+    values: u
+  } = F(), d = x(), i = `${l}.value`, c = n || g(u, `${l}.options`, []).map(({
+    key: e
+  }) => e), p = (e, t) => t.toLowerCase().includes(e.toLowerCase());
+  return /* @__PURE__ */ o("div", {
+    "data-testid": `${r}-field`,
+    children: /* @__PURE__ */ o(C, {
+      name: i,
+      children: ({
+        field: e
+      }) => {
+        var t;
+        return /* @__PURE__ */ o(h, {
+          children: /* @__PURE__ */ o(v, {
+            ...$,
+            as: "input",
+            disabled: s,
+            filterFn: p,
+            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,
+            value: e.value
+          })
+        });
+      }
+    })
+  });
+};
+export {
+  j as MetadataMultiSelectField,
+  j as default
+};

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

@@ -0,0 +1,35 @@
+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 { jsx as e } from "react/jsx-runtime";
+const c = ({
+  label: r,
+  fieldNamePrefix: t,
+  disableForm: a
+}) => {
+  const o = f(), i = `${t}.value`;
+  return /* @__PURE__ */ e("div", {
+    "data-testid": `${r}-field`,
+    children: /* @__PURE__ */ e(s, {
+      name: i,
+      children: ({
+        field: d,
+        meta: l
+      }) => /* @__PURE__ */ e(m, {
+        ...p,
+        ...d,
+        disabled: a,
+        error: l.error,
+        label: r,
+        placeholder: o.formatMessage(n.setValuePlaceholder)
+      })
+    })
+  });
+};
+c.displayName = "MetadataStringField";
+export {
+  c as MetadataStringField,
+  c as default
+};

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

@@ -0,0 +1,30 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  toggleUpdateModeSelectiorAriaLabel: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.toggleUpdateModeSelectiorAriaLabel",
+    defaultMessage: "Toggle update mode selector"
+  },
+  append: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.append",
+    defaultMessage: "Append"
+  },
+  clearAndReplace: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.clearAndReplace",
+    defaultMessage: "Clear All & Replace"
+  },
+  removeEntered: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.removeEntered",
+    defaultMessage: "Remove Entered"
+  },
+  replaceEntered: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.replaceEntered",
+    defaultMessage: "Replace Entered"
+  },
+  with: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.with",
+    defaultMessage: "With"
+  }
+});
+export {
+  t as messages
+};

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

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

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

@@ -0,0 +1,26 @@
+import { MetadataDateField as a } 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
+  })
+};
+export {
+  n as editorFieldTypes
+};

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

@@ -0,0 +1,52 @@
+import "../../../../styles/metadata-editor-fields.css";
+import { Text as c } from "@box/blueprint-web";
+import { useFormikContext as f, getIn as u, FieldArray as y } from "formik";
+import x from "lodash/isUndefined";
+import { FormattedMessage as h } from "react-intl";
+import T from "../../messages.js";
+import { UpdateModeFieldWrapper as b } from "./components/update-mode-field-wrapper/update-mode-field-wrapper.js";
+import { editorFieldTypes as g } from "./editor-field-types.js";
+import { jsx as t } from "react/jsx-runtime";
+const A = "_noAttributesText_1d0oi_1", F = {
+  noAttributesText: A
+}, O = ({
+  disableForm: a,
+  portalElement: o
+}) => {
+  const {
+    values: d
+  } = f(), s = "metadata.fields", i = u(d, s);
+  return i.length ? /* @__PURE__ */ t(y, {
+    name: s,
+    validateOnChange: !1,
+    children: () => i.map((e, n) => {
+      const r = g[e.type], p = r && !e.hidden, l = !x(e.updateMode), m = `metadata.fields[${n}]`;
+      return p ? l ? /* @__PURE__ */ t(b, {
+        fieldNamePrefix: m,
+        fieldType: e.type,
+        children: /* @__PURE__ */ t(r, {
+          disableForm: a,
+          fieldNamePrefix: m,
+          label: e.displayName,
+          portalElement: o
+        })
+      }, e.key) : /* @__PURE__ */ t(r, {
+        disableForm: a,
+        fieldNamePrefix: `metadata.fields[${n}]`,
+        label: e.displayName,
+        portalElement: o
+      }, e.key) : null;
+    })
+  }) : /* @__PURE__ */ t(c, {
+    as: "span",
+    className: F.noAttributesText,
+    color: "textOnLightSecondary",
+    children: /* @__PURE__ */ t(h, {
+      ...T.noTemplateAtributesError
+    })
+  });
+};
+export {
+  O as TemplateInstance,
+  O as default
+};

package/esm/lib/components/metadata-empty-state/messages.js

@@ -0,0 +1,46 @@
+import { defineMessages as e } from "react-intl";
+const a = e({
+  managerLevelEmptyStateHeading: {
+    id: "metadataEditor.managerLevel.emptyState.heading",
+    defaultMessage: "Apply Metadata Templates"
+  },
+  managerLevelEmptyStateBody: {
+    id: "metadataEditor.managerLevel.emptyState.body",
+    defaultMessage: "Browse or search for your items to apply and edit metadata"
+  },
+  fileLevelEmptyStateBoxAiEnabledHeading: {
+    id: "metadataEditor.fileLevel.emptyState.boxAiEnabled.heading",
+    defaultMessage: "Autofill Metadata with Box AI"
+  },
+  fileLevelEmptyStateBoxAiEnabledBody: {
+    id: "metadataEditor.fileLevel.emptyState.boxAiEnabled.body",
+    defaultMessage: "Use the power of Box AI to quickly capture  document metadata, with ever-increasing accuracy."
+  },
+  fileLevelEmptyStateDefaultHeading: {
+    id: "metadataEditor.fileLevel.emptyState.default.heading",
+    defaultMessage: "Add Metadata Templates"
+  },
+  fileLevelEmptyStateDefaultBody: {
+    id: "metadataEditor.fileLevel.emptyState.default.body",
+    defaultMessage: "Add Metadata to your file to support business operations, workflows, and more!"
+  },
+  instanceLevelEmptyStateHeading: {
+    id: "metadataEditor.instanceLevel.emptyState.heading",
+    defaultMessage: "This template has no values"
+  },
+  instanceLevelEmptyStateHeadingNoAttributes: {
+    id: "metadataEditor.instanceLevel.emptyState.noAttributes.heading",
+    defaultMessage: "This template has no attributes"
+  },
+  instanceLevelEmptyStateNoEmptyValuesBody: {
+    id: "metadataEditor.instanceLevel.emptyState.noEmptyValues.body",
+    defaultMessage: "This template has no values"
+  },
+  instanceLevelSeeEmptyValuesCTA: {
+    id: "metadataEditor.instanceLevel.emptyState.emptyValues.Cta",
+    defaultMessage: "See empty values"
+  }
+});
+export {
+  a as default
+};