@box/metadata-editor 0.51.1 → 0.52.0

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

@@ -13,48 +13,50 @@ const W = "_noAttributesText_vykxc_1", M = "_fieldWrapper_vykxc_5", N = "_hasSug
   hasSuggestion: N,
   error: T
 }, E = ({
-  disableForm: a,
-  portalElement: n,
+  disableForm: n,
+  portalElement: a,
   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)
+  } = x(), [l, i] = h(!0), r = k[e.type], g = r && !e.hidden, m = !_(e.updateMode), s = `metadata.fields[${p}]`;
+  if (!g)
     return null;
   if (m)
     return /* @__PURE__ */ o(v, {
       fieldNamePrefix: s,
       fieldType: e.type,
-      children: /* @__PURE__ */ o(i, {
-        disableForm: a,
+      children: /* @__PURE__ */ o(r, {
+        description: e.description,
+        disableForm: n,
         fieldNamePrefix: s,
         label: e.displayName,
-        portalElement: n
+        portalElement: a
       })
     }, e.key);
   const {
     aiSuggestion: t,
     value: f
-  } = e, l = t && g;
+  } = e, c = t && l;
   return /* @__PURE__ */ F("div", {
     className: u.fieldWrapper,
-    children: [/* @__PURE__ */ o(i, {
-      className: S(l && u.hasSuggestion),
-      disableForm: a,
+    children: [/* @__PURE__ */ o(r, {
+      className: S(c && u.hasSuggestion),
+      description: e.description,
+      disableForm: n,
       fieldNamePrefix: `metadata.fields[${p}]`,
       label: e.displayName,
-      portalElement: n
-    }), l && /* @__PURE__ */ o(A, {
+      portalElement: a
+    }), c && /* @__PURE__ */ o(A, {
       aiSuggestion: t,
       onAiSuggestionAppend: () => {
         const y = e.type === "multiSelect" ? [f, t].flat() : t;
-        d(`${s}.value`, y), r(!1);
+        d(`${s}.value`, y), i(!1);
       },
-      onAiSuggestionIgnore: () => r(!1),
+      onAiSuggestionIgnore: () => i(!1),
       onAiSuggestionReplace: () => {
-        d(`${s}.value`, t), r(!1);
+        d(`${s}.value`, t), i(!1);
       }
     })]
   }, e.key);

package/esm/index.js

@@ -1,13 +1,13 @@
 import { AddMetadataTemplateDropdown as o } from "./lib/components/add-metadata-template-dropdown/add-metadata-template-dropdown.js";
 import { FilterDropdownMenu as r } from "./lib/components/filter-dropdown-menu/index.js";
-import { MetadataEmptyState as m } from "./lib/components/metadata-empty-state/metadata-empty-state.js";
-import { DeleteConfirmationModal as f } from "./lib/components/metadata-instance-editor/subcomponents/delete-confirmation-modal/delete-confirmation-modal.js";
-import { MetadataInstanceFormHeader as l } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
-import { CustomInstanceNewField as i } from "./lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/custom-instance-new-field.js";
-import { MetadataInstanceForm as s } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js";
-import { MetadataInstanceList as I } from "./lib/components/metadata-instance-list/metadata-instance-list.js";
-import { MetadataInstanceHeader as C } from "./lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js";
-import { SingleLevelTaxonomyField as A } from "./lib/components/metadata-taxonomy-field/single-level-taxonomy-field.js";
+import { SingleLevelTaxonomyField as m } from "./lib/components/metadata-editor-fields/components/metadata-taxonomy-field/single-level-taxonomy-field.js";
+import { MetadataEmptyState as f } from "./lib/components/metadata-empty-state/metadata-empty-state.js";
+import { DeleteConfirmationModal as l } from "./lib/components/metadata-instance-editor/subcomponents/delete-confirmation-modal/delete-confirmation-modal.js";
+import { MetadataInstanceFormHeader as i } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form-header/metadata-instance-form-header.js";
+import { CustomInstanceNewField as s } from "./lib/components/metadata-instance-editor/subcomponents/custom-instance-new-field/custom-instance-new-field.js";
+import { MetadataInstanceForm as I } from "./lib/components/metadata-instance-editor/subcomponents/metadata-instance-form/metadata-instance-form.js";
+import { MetadataInstanceList as C } from "./lib/components/metadata-instance-list/metadata-instance-list.js";
+import { MetadataInstanceHeader as A } from "./lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js";
 import { UnsavedChangesModal as w } from "./lib/components/unsaved-changes-modal/unsaved-changes-modal.js";
 import { defaultInitialValues as U, defaultMetadataValueMap as g } from "./lib/defaults.js";
 import { MetadataEditor as E } from "./lib/metadata-editor.js";
@@ -17,16 +17,16 @@ export {
   o as AddMetadataTemplateDropdown,
   T as AutofillContext,
   V as AutofillContextProvider,
-  i as CustomInstanceNewField,
-  f as DeleteConfirmationModal,
+  s as CustomInstanceNewField,
+  l as DeleteConfirmationModal,
   r as FilterDropdownMenu,
   E as MetadataEditor,
-  m as MetadataEmptyState,
-  s as MetadataInstanceForm,
-  l as MetadataInstanceFormHeader,
-  C as MetadataInstanceHeader,
-  I as MetadataInstanceList,
-  A as SingleLevelTaxonomyField,
+  f as MetadataEmptyState,
+  I as MetadataInstanceForm,
+  i as MetadataInstanceFormHeader,
+  A as MetadataInstanceHeader,
+  C as MetadataInstanceList,
+  m as SingleLevelTaxonomyField,
   w as UnsavedChangesModal,
   L as UpdateMode,
   U as defaultInitialValues,

package/esm/lib/components/combobox-with-api-pagination/combobox-with-api-pagination.js

@@ -0,0 +1,191 @@
+import "../../../../styles/combobox-with-api-pagination.css";
+import { ComboboxItemValue as U } from "@ariakit/react";
+import { Combobox as p, LoadingIndicator as q, InlineNotice as H, Text as J } from "@box/blueprint-web";
+import { Search as K, Loader as Q } from "@box/blueprint-web-assets/icons/Fill";
+import { IconIconOnLightSecondary as X, Size6 as C, Size1 as Y } from "@box/blueprint-web-assets/tokens/tokens";
+import { useRef as E, useCallback as Z, useMemo as v, useEffect as $, forwardRef as oo } from "react";
+import { useIntl as T, FormattedMessage as y } from "react-intl";
+import i from "./messages.js";
+import { useAsyncList as eo } from "./use-async-list.js";
+import { useControllableState as ro } from "./utils/use-controllable-state.js";
+import { useTrackVisibility as to } from "./utils/use-intersection-observer.js";
+import { jsx as t, jsxs as I, Fragment as no } from "react/jsx-runtime";
+const io = "_container_16dlc_1", ao = "_highlightOptionText_16dlc_7", so = "_option_16dlc_20", lo = "_errorComboboxOption_16dlc_24", co = "_errorComboboxOptionText_16dlc_29", d = {
+  container: io,
+  highlightOptionText: ao,
+  option: so,
+  errorComboboxOption: lo,
+  errorComboboxOptionText: co
+}, M = /* @__PURE__ */ oo(({
+  onTryAgain: f
+}, h) => {
+  const {
+    formatMessage: s
+  } = T();
+  return /* @__PURE__ */ I(no, {
+    children: [/* @__PURE__ */ t(H, {
+      variant: "error",
+      variantIconAriaLabel: s(i.loadingResultsErrorIconLabel),
+      children: /* @__PURE__ */ t(y, {
+        ...i.loadingResultsErrorMessage
+      })
+    }), /* @__PURE__ */ t(p.Option, {
+      ref: h,
+      className: d.errorComboboxOption,
+      onClick: f,
+      children: /* @__PURE__ */ I(J, {
+        as: "span",
+        className: d.errorComboboxOptionText,
+        color: "textOnLightLink",
+        variant: "bodyDefaultBold",
+        children: [/* @__PURE__ */ t(y, {
+          ...i.loadingResultsErrorAction
+        }), /* @__PURE__ */ t(Q, {
+          color: "currentColor",
+          height: "12px",
+          width: "12px"
+        })]
+      })
+    })]
+  });
+}), x = "__LOADING__", O = "__LOADING_ERROR__", uo = "0px 0px 20px 0px", mo = /* @__PURE__ */ t(K, {
+  color: X,
+  height: C,
+  role: "presentation",
+  style: {
+    padding: Y,
+    boxSizing: "border-box"
+  },
+  width: C
+}), Eo = (f) => {
+  const {
+    defaultFetcher: h,
+    onInputValueChange: s,
+    value: N,
+    onValueChange: S,
+    noResultMessage: V,
+    defaultValue: D,
+    loadingAriaLabel: P,
+    multiselect: _ = !1,
+    ...k
+  } = f, {
+    formatMessage: l
+  } = T(), g = E(null), o = eo({
+    async load({
+      marker: e,
+      searchInput: r,
+      signal: u
+    }) {
+      const m = await h({
+        signal: u,
+        marker: e,
+        searchInput: r
+      });
+      return {
+        items: m.options,
+        marker: m.marker
+      };
+    }
+  }), R = E(!1), F = Z(() => {
+    R.current || (o.reload(), R.current = !0);
+  }, []), [n, A] = ro({
+    prop: N,
+    defaultProp: D,
+    onChange: S
+  }), b = v(() => Array.isArray(n) ? n.filter((e) => !o.items.some((r) => r.value === e.value)) : [], [n, o.items]), w = (e) => {
+    const {
+      value: r,
+      ...u
+    } = e;
+    if (r === x)
+      return o.hasNextPage ? /* @__PURE__ */ t(p.Option, {
+        ...u,
+        ref: G,
+        disabled: !0,
+        value: r,
+        children: /* @__PURE__ */ t(q, {
+          "aria-label": l(i.loadingMoreAriaLabel),
+          style: {
+            position: "unset"
+          }
+        })
+      }) : null;
+    if (r === O && o.hasError && !o.isEmpty)
+      return /* @__PURE__ */ t(M, {
+        onTryAgain: () => {
+          var a;
+          o.loadMore(), (a = g.current) == null || a.focus();
+        }
+      });
+    if (b.some((a) => a.value === r))
+      return null;
+    const m = () => n ? Array.isArray(n) ? n.some((a) => a.value === r) : n.value === r : !1;
+    return /* @__PURE__ */ t(p.Option, {
+      ...u,
+      className: d.option,
+      disabled: m(),
+      value: r,
+      children: /* @__PURE__ */ t(U, {
+        className: d.highlightOptionText,
+        value: r
+      })
+    });
+  }, B = (e) => {
+    s == null || s(e), o.search(e), e.trim() === "" && !_ && A(null);
+  }, z = () => {
+    var e;
+    o.reload(), (e = g.current) == null || e.focus();
+  };
+  let c;
+  o.hasError && !o.isLoading ? c = /* @__PURE__ */ t(M, {
+    onTryAgain: z
+  }) : o.isEmpty && !o.isLoading ? c = V || l(i.noResults) : c = void 0;
+  const [G, {
+    rootRef: W,
+    isVisible: L
+  }] = to({
+    rootMargin: uo
+  });
+  $(() => {
+    if (!(L && o.hasNextPage))
+      return;
+    const r = setTimeout(() => {
+      o.loadMore();
+    }, 100);
+    return () => {
+      clearTimeout(r);
+    };
+  }, [L]);
+  const j = v(() => {
+    const e = o.hasNextPage ? {
+      id: x,
+      value: x
+    } : null, r = !e && o.hasError && !o.isEmpty ? {
+      id: O,
+      value: O
+    } : null;
+    return [...o.items, ...b, e, r].filter(Boolean);
+  }, [o.hasNextPage, o.hasError, o.isEmpty, o.items, b]);
+  return /* @__PURE__ */ t(p, {
+    as: "input",
+    ...k,
+    ref: g,
+    clearButtonAriaLabel: l(i.clearButtonAriaLabel),
+    endComboboxIcon: mo,
+    focusLoop: !1,
+    getPopoverRef: W,
+    loading: o.isReloading,
+    loadingAriaLabel: P || l(i.loadingAriaLabel),
+    multiselect: _,
+    noResultMessage: c,
+    onFocus: F,
+    onInputValueChange: B,
+    onValueChange: A,
+    options: j,
+    renderOption: w,
+    value: n
+  });
+};
+export {
+  Eo as ComboboxWithApiPagination
+};

package/esm/lib/components/combobox-with-api-pagination/index.js

@@ -0,0 +1,4 @@
+import { ComboboxWithApiPagination as t } from "./combobox-with-api-pagination.js";
+export {
+  t as ComboboxWithApiPagination
+};

package/esm/lib/components/combobox-with-api-pagination/utils/use-controllable-state.js

@@ -0,0 +1,40 @@
+import * as s from "react";
+function a(e) {
+  const n = s.useRef(e);
+  return s.useEffect(() => {
+    n.current = e;
+  }), s.useMemo(() => (...o) => {
+    var t;
+    return (t = n.current) == null ? void 0 : t.call(n, ...o);
+  }, []);
+}
+function R({
+  prop: e,
+  defaultProp: n,
+  onChange: o = () => {
+  }
+}) {
+  const [t, c] = C({
+    defaultProp: n,
+    onChange: o
+  }), r = e !== void 0, i = r ? e : t, l = a(o), d = s.useCallback((u) => {
+    if (r) {
+      const f = typeof u == "function" ? u(e) : u;
+      f !== e && l(f);
+    } else
+      c(u);
+  }, [r, e, c, l]);
+  return [i, d];
+}
+function C({
+  defaultProp: e,
+  onChange: n
+}) {
+  const o = s.useState(e), [t] = o, c = s.useRef(t), r = a(n);
+  return s.useEffect(() => {
+    c.current !== t && (r(t), c.current = t);
+  }, [t, c, r]), o;
+}
+export {
+  R as useControllableState
+};

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

@@ -1,26 +1,32 @@
-import { Focusable as c } from "@ariakit/react";
-import { Tooltip as a, Text as i } from "@box/blueprint-web";
+import "../../../../styles/interactive-text.css";
+import { Focusable as n } from "@ariakit/react";
+import { Tooltip as a, Text as s } from "@box/blueprint-web";
+import m from "clsx";
 import { jsx as t } from "react/jsx-runtime";
-const l = ({
+const x = "_interactiveText_2jv0p_1", l = {
+  interactiveText: x
+}, d = ({
   tooltipText: r,
-  children: o,
+  className: i,
+  children: c,
   ...e
 }) => {
   const {
-    as: n = "span"
+    as: o = "span"
   } = e;
   return /* @__PURE__ */ t(a, {
     __checkInteractivity: !1,
     content: r,
-    children: /* @__PURE__ */ t(c, {
-      render: /* @__PURE__ */ t(i, {
-        as: n,
+    children: /* @__PURE__ */ t(n, {
+      render: /* @__PURE__ */ t(s, {
+        as: o,
+        className: m(l.interactiveText, i),
         ...e,
-        children: o
+        children: c
       })
     })
   });
 };
 export {
-  l as default
+  d as default
 };

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

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

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

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