@box/metadata-editor 0.45.0

package/esm/lib/components/metadata-taxonomy-field/utils/use-intersection-observer.js

@@ -0,0 +1,87 @@
+import { useState as C, useRef as y, useCallback as a } from "react";
+const k = "0px", p = [0];
+function w() {
+  const o = /* @__PURE__ */ new Map();
+  function b({
+    root: c,
+    rootMargin: s,
+    threshold: u
+  }) {
+    let r = o.get(c);
+    r || (r = /* @__PURE__ */ new Map(), o.set(c, r));
+    const i = JSON.stringify({
+      rootMargin: s,
+      threshold: u
+    });
+    let e = r.get(i);
+    if (!e) {
+      const n = /* @__PURE__ */ new Map();
+      e = {
+        observer: new IntersectionObserver((R) => {
+          R.forEach((v) => {
+            const t = n.get(v.target);
+            t == null || t(v);
+          });
+        }, {
+          root: c,
+          rootMargin: s,
+          threshold: u
+        }),
+        entryCallbacks: n
+      }, r.set(i, e);
+    }
+    return {
+      observe: (n, l) => {
+        e == null || e.entryCallbacks.set(n, l), e == null || e.observer.observe(n);
+      },
+      unobserve: (n) => {
+        e == null || e.entryCallbacks.delete(n), e == null || e.observer.unobserve(n);
+      }
+    };
+  }
+  return {
+    getObserver: b
+  };
+}
+const M = w();
+function T(o) {
+  const b = (o == null ? void 0 : o.rootMargin) ?? k, c = (o == null ? void 0 : o.threshold) ?? p, s = y(null), u = y(null), r = y(null), [i, e] = C(), n = a(() => {
+    const t = s.current;
+    if (!t) {
+      e(void 0);
+      return;
+    }
+    const f = M.getObserver({
+      root: u.current,
+      rootMargin: b,
+      threshold: c
+    });
+    f.observe(t, (E) => {
+      e(E);
+    }), r.current = f;
+  }, [b, c]), l = a(() => {
+    const t = r.current, f = s.current;
+    f && (t == null || t.unobserve(f)), r.current = null;
+  }, []), R = a((t) => {
+    l(), s.current = t, n();
+  }, [n, l]), v = a((t) => {
+    l(), u.current = t, n();
+  }, [n, l]);
+  return [R, {
+    entry: i,
+    rootRef: v
+  }];
+}
+function V(o) {
+  var i;
+  const [b, c] = T(o), s = !!((i = c.entry) != null && i.isIntersecting), [u, r] = C(s);
+  return s && !u && r(!0), [b, {
+    ...c,
+    isVisible: s,
+    wasEverVisible: u
+  }];
+}
+export {
+  w as createObserverCache,
+  V as useTrackVisibility
+};

package/esm/lib/components/unsaved-changes-modal/index.js

@@ -0,0 +1,4 @@
+import { UnsavedChangesModal as o } from "./unsaved-changes-modal.js";
+export {
+  o as UnsavedChangesModal
+};

package/esm/lib/components/unsaved-changes-modal/messages.js

@@ -0,0 +1,26 @@
+import { defineMessages as a } from "react-intl";
+const d = a({
+  unsavedChangesModalHeader: {
+    id: "metadataEditor.unsavedChangesModal.header",
+    defaultMessage: "Unsaved Changes"
+  },
+  unsavedChangesModalBody: {
+    id: "metadataEditor.unsavedChangesModal.body",
+    defaultMessage: "Metadata template(s) have unsaved changes. How would you like to proceed?"
+  },
+  unsavedChangesModalDismissCTA: {
+    id: "metadataEditor.unsavedChangesModal.dismissCTA",
+    defaultMessage: "Cancel"
+  },
+  unsavedChangesModalSaveAndContinueCTA: {
+    id: "metadataEditor.unsavedChangesModal.saveAndContinueCTA",
+    defaultMessage: "Save and Continue"
+  },
+  unsavedChangesModalCloseLabel: {
+    id: "metadataEditor.unsavedChangesModal.closeLabel",
+    defaultMessage: "Close"
+  }
+});
+export {
+  d as default
+};

package/esm/lib/components/unsaved-changes-modal/unsaved-changes-modal.js

@@ -0,0 +1,55 @@
+import { Modal as e } from "@box/blueprint-web";
+import { useState as y, useEffect as b, useCallback as c } from "react";
+import { useIntl as p, FormattedMessage as g } from "react-intl";
+import r from "./messages.js";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+function x({
+  onSaveAndContinue: t,
+  onDismiss: l,
+  defaultOpen: f = !0,
+  open: d = f
+}) {
+  const n = p(), [C, o] = y(d);
+  b(() => o(d), [d]);
+  const u = c((h) => {
+    o(h), h || l == null || l();
+  }, [l]), M = c(async () => {
+    await (t == null ? void 0 : t()), o(!1);
+  }, [t]), m = c(() => {
+    l == null || l(), o(!1);
+  }, [l]);
+  return /* @__PURE__ */ a(e, {
+    modal: !0,
+    onOpenChange: u,
+    open: C,
+    children: /* @__PURE__ */ s(e.Content, {
+      size: "small",
+      children: [/* @__PURE__ */ a(e.Header, {
+        children: /* @__PURE__ */ a(g, {
+          ...r.unsavedChangesModalHeader
+        })
+      }), /* @__PURE__ */ a(e.ScrollableContainer, {
+        children: /* @__PURE__ */ a(e.Body, {
+          children: /* @__PURE__ */ a(g, {
+            ...r.unsavedChangesModalBody
+          })
+        })
+      }), /* @__PURE__ */ s(e.Footer, {
+        children: [/* @__PURE__ */ a(e.Footer.SecondaryButton, {
+          onClick: m,
+          size: "large",
+          children: n.formatMessage(r.unsavedChangesModalDismissCTA)
+        }), /* @__PURE__ */ a(e.Footer.PrimaryButton, {
+          onClick: M,
+          size: "large",
+          children: n.formatMessage(r.unsavedChangesModalSaveAndContinueCTA)
+        })]
+      }), /* @__PURE__ */ a(e.Close, {
+        "aria-label": n.formatMessage(r.unsavedChangesModalCloseLabel)
+      })]
+    })
+  });
+}
+export {
+  x as UnsavedChangesModal
+};

package/esm/lib/components/unsaved-changes-modal/utils.js

@@ -0,0 +1,6 @@
+async function a(e) {
+  await new Promise((t) => setTimeout(t, e));
+}
+export {
+  a as delay
+};

package/esm/lib/constants.js

@@ -0,0 +1,4 @@
+const E = "properties";
+export {
+  E as TEMPLATE_CUSTOM_PROPERTIES
+};

package/esm/lib/defaults.js

@@ -0,0 +1,18 @@
+const e = {
+  scope: "",
+  templateKey: "",
+  type: "",
+  id: "",
+  hidden: !1,
+  fields: []
+}, t = {
+  string: "",
+  enum: "",
+  multiSelect: [],
+  float: "",
+  date: ""
+};
+export {
+  e as defaultInitialValues,
+  t as defaultMetadataValueMap
+};

package/esm/lib/mappers.js

@@ -0,0 +1,28 @@
+import { defaultMetadataValueMap as p } from "./defaults.js";
+import { U as i } from "../../chunks/types.js";
+const m = (e, a = !1) => ({
+  scope: e.scope,
+  templateKey: e.templateKey,
+  type: e.type,
+  id: e.id,
+  hidden: e.hidden,
+  fields: e.fields.map((d) => {
+    const {
+      type: o,
+      value: s = p[o]
+    } = d;
+    return d.value = s, a && (d.updateMode = {
+      mode: i.ClearAndReplace,
+      value: p[o]
+    }), d;
+  })
+}), t = (e) => e.map((a) => ({
+  displayName: a.displayName,
+  id: a.id,
+  scope: a.scope,
+  hidden: a.hidden
+}));
+export {
+  m as mapDataFromTemplate,
+  t as mapTemplateOptionsFromTemplates
+};

package/esm/lib/messages.js

@@ -0,0 +1,94 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  afterDateValidationError: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.afterDateValidationError",
+    defaultMessage: "Enter a date after {date}"
+  },
+  beforeDateValidationError: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.beforeDateValidationError",
+    defaultMessage: "Enter a date before {date}"
+  },
+  clearSelectedDate: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.clearSelectedDate",
+    defaultMessage: "Clear selected date"
+  },
+  floatFieldInvalidValue: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.floatFieldInvalidValue",
+    defaultMessage: "Invalid field value"
+  },
+  loading: {
+    id: "groupSharedFeatures.metadataEditor.loading",
+    defaultMessage: "loading"
+  },
+  multiselectPlaceholder: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.multiselectPlaceholder",
+    defaultMessage: "Select value(s)"
+  },
+  noTemplateAtributesError: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.noTemplateAtributesError",
+    defaultMessage: "There are no attributes in this template."
+  },
+  openCalendar: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.openCalendarLabel",
+    defaultMessage: "Open calendar to pick a date"
+  },
+  selectDate: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.selectDate",
+    defaultMessage: "Select the date"
+  },
+  selectTemplate: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.selectTemplate",
+    defaultMessage: "Select a Template"
+  },
+  selectTemplateError: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.selectTemplateError",
+    defaultMessage: "Could not load templates. Try again later"
+  },
+  selectValuePlaceholder: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.selectValuePlaceholder",
+    defaultMessage: "Select a value"
+  },
+  setValuePlaceholder: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.setValuePlaceholder",
+    defaultMessage: "Set Value"
+  },
+  switchToNextMonth: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.switchToNextMonth",
+    defaultMessage: "Switch to next month"
+  },
+  switchToPreviousMonth: {
+    id: "groupSharedFeatures.metadataEditor.metadataEditorFields.switchToPreviousMonth",
+    defaultMessage: "Switch to previous month"
+  },
+  templateSelectorModalHeader: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.header",
+    defaultMessage: "Select Metadata Template"
+  },
+  templateSelectorSearchInputPlaceholder: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.searchInputPlaceholder",
+    defaultMessage: "Search all templates"
+  },
+  templateSelectorSearchInputIconAriaLabel: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.searchInputIconAriaLabel",
+    defaultMessage: "Search all templates"
+  },
+  templateSelectorSearchInpuClearAriaLabel: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.searchInputClearAriaLabel",
+    defaultMessage: "Clear"
+  },
+  templateSelectorCancel: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.cancel",
+    defaultMessage: "Cancel"
+  },
+  templateSelectorAdd: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.add",
+    defaultMessage: "Add"
+  },
+  templateSelectorClose: {
+    id: "groupSharedFeatures.metadataEditor.metadataTemplateSelector.close",
+    defaultMessage: "Close"
+  }
+});
+export {
+  t as default
+};

package/esm/lib/metadata-editor.js

@@ -0,0 +1,15 @@
+import "../../styles/metadata-editor.css";
+import { jsx as t } from "react/jsx-runtime";
+const e = {};
+function i(o) {
+  return /* @__PURE__ */ t("div", {
+    className: e.container,
+    children: /* @__PURE__ */ t("h1", {
+      children: "Welcome to MetadataEditor!"
+    })
+  });
+}
+export {
+  i as MetadataEditor,
+  i as default
+};

package/esm/lib/test-utils/formik-wrapper.js

@@ -0,0 +1,26 @@
+import { Formik as l, Form as d } from "formik";
+import { defaultInitialValues as n } from "../defaults.js";
+import { mapDataFromTemplate as p } from "../mappers.js";
+import { jsx as a } from "react/jsx-runtime";
+const F = (e) => {
+  const {
+    children: i,
+    selectedMetadataTemplate: t = null,
+    onSubmit: o = () => {
+    },
+    withUpdateMode: r = !1
+  } = e, m = t ? p(t, r) : n;
+  return /* @__PURE__ */ a(l, {
+    initialValues: {
+      metadata: m
+    },
+    onSubmit: o,
+    children: /* @__PURE__ */ a(d, {
+      "data-testid": "formik-form",
+      children: i
+    })
+  });
+};
+export {
+  F as FormikWrapper
+};

package/esm/lib/test-utils/index.js

@@ -0,0 +1,31 @@
+import { FormikWrapper as l } from "./formik-wrapper.js";
+import { allFieldsTemplate as m, allFieldsTemplateInstance as p, customTemplate as s, customTemplateInstance as n, customTemplateInstanceWithAllFieldsEmpty as i, customTemplateInstanceWithoutEmptyValues as d, dateField as o, emptyCustomTemplateInstance as u, emptyTemplateInstance as c, enumField as F, fields as r, floatField as T, multiSelectField as I, noFieldsTemplate as y, noValueField as f, nonHiddenFieldsTemplate as x, stringField as W, templateInstanceWithAllFieldsEmpty as h, templateInstanceWithoutEmptyValues as E, templateInstancesList as A, templateOptions as V, templates as b } from "./sample-data.js";
+import { blur as k, updateText as B, updateTextAndBlur as C } from "./test-utils.js";
+export {
+  l as FormikWrapper,
+  m as allFieldsTemplate,
+  p as allFieldsTemplateInstance,
+  k as blur,
+  s as customTemplate,
+  n as customTemplateInstance,
+  i as customTemplateInstanceWithAllFieldsEmpty,
+  d as customTemplateInstanceWithoutEmptyValues,
+  o as dateField,
+  u as emptyCustomTemplateInstance,
+  c as emptyTemplateInstance,
+  F as enumField,
+  r as fields,
+  T as floatField,
+  I as multiSelectField,
+  y as noFieldsTemplate,
+  f as noValueField,
+  x as nonHiddenFieldsTemplate,
+  W as stringField,
+  h as templateInstanceWithAllFieldsEmpty,
+  E as templateInstanceWithoutEmptyValues,
+  A as templateInstancesList,
+  V as templateOptions,
+  b as templates,
+  B as updateText,
+  C as updateTextAndBlur
+};

package/esm/lib/test-utils/sample-data.js

@@ -0,0 +1,281 @@
+import { mapTemplateOptionsFromTemplates as f } from "../mappers.js";
+const a = {
+  id: "1",
+  type: "string",
+  key: "signature",
+  hidden: !1,
+  displayName: "Signature"
+}, i = {
+  id: "2",
+  type: "date",
+  key: "effectiveDate",
+  hidden: !1,
+  displayName: "Effective Date"
+}, d = {
+  id: "3",
+  type: "enum",
+  key: "country",
+  hidden: !1,
+  displayName: "Country",
+  options: [{
+    id: "1",
+    key: "US"
+  }, {
+    id: "2",
+    key: "UK"
+  }]
+}, s = {
+  id: "4",
+  type: "float",
+  key: "caseNumber",
+  hidden: !1,
+  displayName: "Number of Cases"
+}, n = {
+  id: "5",
+  type: "multiSelect",
+  key: "orgs",
+  hidden: !1,
+  displayName: "Organizations",
+  options: [{
+    id: "Sales",
+    key: "Sales"
+  }, {
+    id: "Marketing",
+    key: "Marketing"
+  }, {
+    id: "Engineering",
+    key: "Engineering"
+  }]
+}, h = {
+  id: "6",
+  type: "string",
+  key: "hidden",
+  displayName: "Hidden",
+  hidden: !0
+}, k = {
+  id: "7",
+  type: "string",
+  key: "noValue",
+  hidden: !1,
+  displayName: "No value"
+}, F = {
+  id: "1",
+  displayName: "All metadata fields",
+  scope: "enterprise_1",
+  templateKey: "allFields",
+  type: "metadata_template",
+  hidden: !1,
+  fields: [a, d, s, i, n, h, k]
+}, U = {
+  hidden: !1,
+  id: "2",
+  displayName: "Non hidden metadata fields",
+  scope: "enterprise_1",
+  templateKey: "nonHiddenFields",
+  type: "metadata_template",
+  fields: [a, d, s, i, n]
+}, g = {
+  id: "3",
+  displayName: "No metadata fields",
+  scope: "enterprise_3",
+  templateKey: "noFields",
+  type: "metadata_template",
+  fields: [],
+  hidden: !1
+}, N = {
+  id: "4",
+  displayName: "Hidden template",
+  scope: "enterprise_3",
+  templateKey: "hiddenTemplate",
+  type: "metadata_template",
+  fields: [],
+  hidden: !0
+}, _ = [F, g, N], W = {
+  id: "5",
+  scope: "enterprise_3",
+  templateKey: "properties",
+  type: "metadata_template",
+  fields: [],
+  hidden: !1
+}, D = f(_), M = [a, d, s, i, n], l = {
+  id: "1",
+  type: "string",
+  key: "signature",
+  hidden: !1,
+  displayName: "Signature",
+  value: "Jan Kowalski"
+}, p = {
+  id: "2",
+  type: "enum",
+  key: "country",
+  hidden: !1,
+  displayName: "Country",
+  options: [{
+    id: "1",
+    key: "US"
+  }, {
+    id: "2",
+    key: "UK"
+  }],
+  value: "US"
+}, m = {
+  id: "3",
+  type: "float",
+  key: "caseNumber",
+  hidden: !1,
+  displayName: "Number of Cases",
+  value: "25"
+}, o = {
+  id: "4",
+  type: "date",
+  key: "effectiveDate",
+  hidden: !1,
+  displayName: "Effective Date",
+  value: "2024-02-08T00:00:00.000Z"
+}, y = {
+  id: "5",
+  type: "multiSelect",
+  key: "orgs",
+  hidden: !1,
+  displayName: "Organizations",
+  options: [{
+    id: "Sales",
+    key: "Sales"
+  }, {
+    id: "Marketing",
+    key: "Marketing"
+  }, {
+    id: "Engineering",
+    key: "Engineering"
+  }],
+  value: "Sales"
+}, c = {
+  id: "6",
+  type: "string",
+  key: "hidden",
+  displayName: "Hidden",
+  hidden: !0,
+  value: "should be hidden"
+}, t = {
+  id: "7",
+  type: "string",
+  key: "noValue",
+  hidden: !1,
+  displayName: "No value",
+  value: null
+}, E = {
+  ...t,
+  key: "noValue1"
+}, I = {
+  ...t,
+  key: "noValue2"
+}, K = {
+  canEdit: !0,
+  id: "1",
+  displayName: "All metadata fields",
+  scope: "enterprise_1",
+  templateKey: "allFields",
+  type: "metadata_template",
+  hidden: !1,
+  fields: [l, p, m, o, y, c, t]
+}, T = {
+  canEdit: !0,
+  id: "2",
+  displayName: "Without Empty Values",
+  scope: "enterprise_1",
+  templateKey: "withoutEmptyFields",
+  type: "metadata_template",
+  hidden: !1,
+  fields: [l, p, m, o, y, c]
+}, v = {
+  canEdit: !0,
+  id: "3",
+  displayName: "Empty Template",
+  scope: "enterprise_1",
+  templateKey: "emptyFields",
+  type: "metadata_template",
+  hidden: !1,
+  fields: []
+}, S = {
+  canEdit: !0,
+  id: "4",
+  displayName: "All Fields Empty Template",
+  scope: "enterprise_1",
+  templateKey: "emptyFields",
+  type: "metadata_template",
+  hidden: !1,
+  fields: [t, E, I]
+}, r = {
+  id: "1",
+  type: "string",
+  key: "signature",
+  hidden: !1,
+  value: "Jan Kowalski"
+}, u = {
+  id: "2",
+  type: "string",
+  key: "version number",
+  hidden: !1,
+  value: "2.1"
+}, e = {
+  id: "3",
+  type: "string",
+  key: "empty field",
+  hidden: !1
+}, V = {
+  canEdit: !0,
+  id: "5",
+  scope: "enterprise_1",
+  templateKey: "properties",
+  type: "metadata_template",
+  fields: [r, u, e],
+  hidden: !1
+}, C = {
+  canEdit: !0,
+  id: "6",
+  scope: "enterprise_1",
+  templateKey: "properties",
+  type: "metadata_template",
+  fields: [r, u],
+  hidden: !1
+}, b = {
+  canEdit: !0,
+  id: "7",
+  scope: "enterprise_1",
+  templateKey: "properties",
+  type: "metadata_template",
+  fields: [],
+  hidden: !1
+}, A = {
+  canEdit: !0,
+  id: "8",
+  scope: "enterprise_1",
+  templateKey: "properties",
+  type: "metadata_template",
+  fields: [e, e, e],
+  hidden: !1
+}, O = [K, T, S, v, V, C, b, A];
+export {
+  F as allFieldsTemplate,
+  K as allFieldsTemplateInstance,
+  W as customTemplate,
+  V as customTemplateInstance,
+  A as customTemplateInstanceWithAllFieldsEmpty,
+  C as customTemplateInstanceWithoutEmptyValues,
+  i as dateField,
+  b as emptyCustomTemplateInstance,
+  v as emptyTemplateInstance,
+  d as enumField,
+  M as fields,
+  s as floatField,
+  n as multiSelectField,
+  g as noFieldsTemplate,
+  k as noValueField,
+  U as nonHiddenFieldsTemplate,
+  a as stringField,
+  S as templateInstanceWithAllFieldsEmpty,
+  T as templateInstanceWithoutEmptyValues,
+  O as templateInstancesList,
+  D as templateOptions,
+  _ as templates
+};

package/esm/lib/test-utils/test-utils.js

@@ -0,0 +1,13 @@
+import { userEvent as t } from "@storybook/test";
+const i = async (a, c) => {
+  await t.click(a), await t.clear(a), await t.type(a, c);
+}, n = async () => {
+  await t.click(document.body);
+}, o = async (a, c) => {
+  await i(a, c), await n();
+};
+export {
+  n as blur,
+  i as updateText,
+  o as updateTextAndBlur
+};