@box/metadata-editor 0.45.0

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance/metadata-instance.js

@@ -0,0 +1,51 @@
+import "../../../../../../styles/metadata-instance.css";
+import { useState as f } from "react";
+import { Card as h, Divider as m } from "@box/blueprint-web";
+import { MetadataInstanceHeader as E } from "../metadata-instance-header/metadata-instance-header.js";
+import { MetadataInstanceContent as D } from "../metadata-instance-content/metadata-instance-content.js";
+import { MetadataInstanceFooter as V } from "../metadata-instance-footer/metadata-instance-footer.js";
+import { MetadataEmptyState as b } from "../../../metadata-empty-state/metadata-empty-state.js";
+import { jsxs as s, jsx as t, Fragment as l } from "react/jsx-runtime";
+const H = "_topDivider_tzhlb_1", S = "_bottomDivider_tzhlb_5", n = {
+  topDivider: H,
+  bottomDivider: S
+}, w = ({
+  isAiSuggestionsFeatureEnabled: d,
+  onEdit: p,
+  onEditWithAutofill: u,
+  templateInstance: e
+}) => {
+  const o = e.fields, y = o.every((r) => !r.value), c = o.some((r) => !r.value), v = o.length > 0, [i, a] = f(!0);
+  return /* @__PURE__ */ s(h, {
+    children: [/* @__PURE__ */ t(E, {
+      canEdit: !0,
+      isAiSuggestionsFeatureEnabled: d,
+      onAutofill: u,
+      onEdit: p,
+      templateName: e == null ? void 0 : e.displayName
+    }), /* @__PURE__ */ t(m, {
+      className: n.topDivider
+    }), i && y ? /* @__PURE__ */ t(b, {
+      isAnyEmptyValueHidden: v,
+      isBoxAiSuggestionsFeatureEnabled: d,
+      level: "instance",
+      onShowEmptyValues: () => a(!1)
+    }) : /* @__PURE__ */ s(l, {
+      children: [/* @__PURE__ */ t(D, {
+        shouldHideEmptyValues: i,
+        templateInstance: e
+      }), c && /* @__PURE__ */ s(l, {
+        children: [/* @__PURE__ */ t(m, {
+          className: n.bottomDivider
+        }), /* @__PURE__ */ t(V, {
+          isAnyEmptyValueHidden: i,
+          onHideEmptyValues: () => a(!0),
+          onShowEmptyValues: () => a(!1)
+        })]
+      })]
+    })]
+  });
+};
+export {
+  w as MetadataInstance
+};

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-content/metadata-instance-content.js

@@ -0,0 +1,26 @@
+import "../../../../../../styles/metadata-instance-content.css";
+import { MetadataInstanceEntry as o } from "../metadata-instance-entry/metadata-instance-entry.js";
+import { jsx as a } from "react/jsx-runtime";
+const c = "_metadataInstanceContent_1a9zf_1", m = {
+  metadataInstanceContent: c
+}, i = ({
+  shouldHideEmptyValues: n,
+  templateInstance: e
+}) => {
+  const {
+    fields: s = []
+  } = e;
+  return /* @__PURE__ */ a("div", {
+    className: m.metadataInstanceContent,
+    children: s.filter((t) => !t.hidden).map((t) => /* @__PURE__ */ a(o, {
+      description: t.description,
+      name: t.displayName || t.key,
+      shouldHideEmptyValues: n,
+      type: t.type,
+      value: t.value
+    }, t.id))
+  });
+};
+export {
+  i as MetadataInstanceContent
+};

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-entry/convertDate.js

@@ -0,0 +1,25 @@
+const O = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,3})?/, E = /(Z$)/, T = /(?:[+-](?:([0-2]\d$)|([0-2]\d(?:00|30)$)|([0-2]\d:(?:00|30)$)))/, I = new RegExp(`^(${O.source})?(${E.source}|${T.source})$`), _ = 1, M = 2, S = 3, i = 4, r = 5, f = 6, D = 7;
+function u(n) {
+  if (I.test(n)) {
+    const t = n.split(I);
+    let e = t[_];
+    const o = t[M], s = t[S];
+    if (o || (e += ".000"), t[i])
+      return n;
+    if (t[r])
+      return `${e + s}:00`;
+    if (t[f])
+      return `${e + s.substring(0, 3)}:${s.substring(3)}`;
+    if (t[D])
+      return n;
+  }
+  return n;
+}
+function N(n) {
+  const t = new Date(u(n)), e = t.getTime(), s = t.getTimezoneOffset() * 6e4, c = e + s;
+  return new Date(c);
+}
+export {
+  N as convertISOStringToUTCDate,
+  u as convertISOStringtoRFC3339String
+};

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-entry/metadata-instance-entry.js

@@ -0,0 +1,56 @@
+import "../../../../../../styles/metadata-instance-entry.css";
+import { Text as o } from "@box/blueprint-web";
+import { FormattedDate as d } from "react-intl";
+import { convertISOStringToUTCDate as l } from "./convertDate.js";
+import y from "../../../interactive-text/interactive-text.js";
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+const I = "_metadataInstanceEntry_1qhk8_1", u = "_metadataInstanceEntryInteractiveLabel_1qhk8_7", c = {
+  metadataInstanceEntry: I,
+  metadataInstanceEntryInteractiveLabel: u
+}, _ = ({
+  description: r,
+  name: e,
+  shouldHideEmptyValues: i,
+  type: m,
+  value: t
+}) => {
+  const n = (() => {
+    if (typeof t == "number")
+      return t.toString();
+    if (!t)
+      return null;
+    if (Array.isArray(t))
+      return t.join(", ");
+    if (m === "date" && typeof t == "string") {
+      const s = l(t);
+      return /* @__PURE__ */ a(d, {
+        day: "numeric",
+        month: "long",
+        value: s,
+        year: "numeric"
+      });
+    }
+    return t;
+  })();
+  return i && !n ? null : /* @__PURE__ */ f("div", {
+    className: c.metadataInstanceEntry,
+    children: [/* @__PURE__ */ a(o, {
+      as: "p",
+      color: "textOnLightSecondary",
+      variant: "bodyDefaultBold",
+      children: r ? /* @__PURE__ */ a(y, {
+        className: c.metadataInstanceEntryInteractiveLabel,
+        color: "textOnLightSecondary",
+        tooltipText: r,
+        variant: "bodyDefaultBold",
+        children: e
+      }) : e
+    }), n && /* @__PURE__ */ a(o, {
+      as: "p",
+      children: n
+    })]
+  });
+};
+export {
+  _ as MetadataInstanceEntry
+};

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-footer/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  showEmptyValuesCTA: {
+    id: "metadataEditor.viewInstance.metadataInstanceFooter.showEmptyValuesCTA",
+    defaultMessage: "Show empty values"
+  },
+  hideEmptyValuesCTA: {
+    id: "metadataEditor.viewInstance.metadataInstanceFooter.hideEmptyValuesCTA",
+    defaultMessage: "Hide empty values"
+  }
+});
+export {
+  t as default
+};

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-footer/metadata-instance-footer.js

@@ -0,0 +1,30 @@
+import "../../../../../../styles/metadata-instance-footer.css";
+import { TextButton as e } from "@box/blueprint-web";
+import { useIntl as c } from "react-intl";
+import s from "./messages.js";
+import { jsx as t } from "react/jsx-runtime";
+const i = "_metadataInstanceFooter_6auqo_1", l = "_button_6auqo_5", o = {
+  metadataInstanceFooter: i,
+  button: l
+}, _ = ({
+  isAnyEmptyValueHidden: n,
+  onHideEmptyValues: r,
+  onShowEmptyValues: m
+}) => {
+  const a = c();
+  return /* @__PURE__ */ t("div", {
+    className: o.metadataInstanceFooter,
+    children: n ? /* @__PURE__ */ t(e, {
+      className: o.button,
+      onClick: m,
+      children: a.formatMessage(s.showEmptyValuesCTA)
+    }) : /* @__PURE__ */ t(e, {
+      className: o.button,
+      onClick: r,
+      children: a.formatMessage(s.hideEmptyValuesCTA)
+    })
+  });
+};
+export {
+  _ as MetadataInstanceFooter
+};

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-header/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  customInstanceTitle: {
+    id: "metadataEditor.viewInstance.metadataInstanceHeader.customMetadataTitle",
+    defaultMessage: "Custom Metadata"
+  }
+});
+export {
+  t as default
+};

package/esm/lib/components/metadata-instance-list/subcomponents/metadata-instance-header/metadata-instance-header.js

@@ -0,0 +1,46 @@
+import "../../../../../../styles/metadata-instance-header.css";
+import { Text as u, IconButton as a } from "@box/blueprint-web";
+import { Pencil as b } from "@box/blueprint-web-assets/icons/Line";
+import { BoxAiLogo as B } from "@box/blueprint-web-assets/icons/Logo";
+import { useIntl as f } from "react-intl";
+import I from "./messages.js";
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+const _ = "_metadataInstanceHeader_1vbbg_1", g = "_iconButtonsContainer_1vbbg_7", p = "_title_1vbbg_15", n = {
+  metadataInstanceHeader: _,
+  iconButtonsContainer: g,
+  title: p
+}, v = "Autofill with Box AI", h = "Edit", k = ({
+  canEdit: i,
+  isAiSuggestionsFeatureEnabled: s,
+  onEdit: r,
+  onAutofill: c,
+  templateName: o
+}) => {
+  const l = f(), m = o || l.formatMessage(I.customInstanceTitle), d = s && o;
+  return /* @__PURE__ */ e("div", {
+    className: n.metadataInstanceHeader,
+    children: [/* @__PURE__ */ t(u, {
+      as: "h1",
+      className: n.title,
+      variant: "titleMedium",
+      children: m
+    }), i && /* @__PURE__ */ e("div", {
+      className: n.iconButtonsContainer,
+      children: [d && /* @__PURE__ */ t(a, {
+        "aria-label": v,
+        icon: B,
+        onClick: c,
+        variant: "icon-logo"
+      }), /* @__PURE__ */ t(a, {
+        "aria-label": h,
+        icon: b,
+        onClick: r
+      })]
+    })]
+  });
+};
+export {
+  k as MetadataInstanceHeader,
+  v as autofillButtonAriaLabel,
+  h as editButtonAriaLabel
+};

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

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

package/esm/lib/components/metadata-taxonomy-field/index.js

@@ -0,0 +1,4 @@
+import { SingleLevelTaxonomyField as l } from "./single-level-taxonomy-field.js";
+export {
+  l as SingleLevelTaxonomyField
+};

package/esm/lib/components/metadata-taxonomy-field/messages.js

@@ -0,0 +1,34 @@
+import { defineMessages as o } from "react-intl";
+const e = o({
+  loadingResultsErrorAction: {
+    id: "comboboxWithApiPagination.errorAction",
+    defaultMessage: "Reload"
+  },
+  loadingResultsErrorMessage: {
+    id: "comboboxWithApiPagination.errorMessage",
+    defaultMessage: "Failed to load options"
+  },
+  loadingResultsErrorIconLabel: {
+    id: "comboboxWithApiPagination.errorIconLabel",
+    defaultMessage: "Error"
+  },
+  loadingAriaLabel: {
+    id: "comboboxWithApiPagination.loadingAriaLabel",
+    defaultMessage: "Loading..."
+  },
+  loadingMoreAriaLabel: {
+    id: "comboboxWithApiPagination.loadingMoreAriaLabel",
+    defaultMessage: "Loading more..."
+  },
+  noResults: {
+    id: "comboboxWithApiPagination.noResults",
+    defaultMessage: "No results found"
+  },
+  clearButtonAriaLabel: {
+    id: "comboboxWithApiPagination.clearButtonAriaLabel",
+    defaultMessage: "Clear input and selection"
+  }
+});
+export {
+  e as default
+};

package/esm/lib/components/metadata-taxonomy-field/request.js

@@ -0,0 +1,6 @@
+let C = /* @__PURE__ */ function(E) {
+  return E.NOT_STARTED = "NOT_STARTED", E.IN_PROGRESS = "IN_PROGRESS", E.ERROR = "ERROR", E.SUCCESS = "SUCCESS", E.CANCELLED = "CANCELLED", E;
+}({});
+export {
+  C as RequestStates
+};

package/esm/lib/components/metadata-taxonomy-field/single-level-taxonomy-field.js

@@ -0,0 +1,19 @@
+import { ComboboxWithApiPagination as n } from "./combobox-with-api-pagination.js";
+import { jsx as a } from "react/jsx-runtime";
+const c = (e) => {
+  const {
+    label: o,
+    defaultFetcher: t,
+    searchFetcher: r,
+    ...i
+  } = e;
+  return /* @__PURE__ */ a(n, {
+    ...i,
+    defaultFetcher: t,
+    label: o,
+    searchFetcher: r
+  });
+};
+export {
+  c as SingleLevelTaxonomyField
+};

package/esm/lib/components/metadata-taxonomy-field/use-async-list.js

@@ -0,0 +1,124 @@
+import { useReducer as I } from "react";
+import { RequestStates as u } from "./request.js";
+var s = /* @__PURE__ */ function(r) {
+  return r.LOAD_MORE = "LOAD_MORE", r.RELOAD = "RELOAD", r.SEARCH = "SEARCH", r.SET_ERROR = "SET_ERROR", r.SET_LOADING = "SET_LOADING", r;
+}(s || {});
+function i(r, e) {
+  switch (e.type) {
+    case s.LOAD_MORE:
+      return {
+        ...r,
+        abortController: e.abortController,
+        error: null,
+        items: [...r.items, ...e.items],
+        marker: e.marker,
+        requestState: u.SUCCESS
+      };
+    case s.RELOAD:
+      return e.abortController !== r.abortController ? r : {
+        ...r,
+        abortController: null,
+        error: null,
+        items: [...e.items],
+        marker: e.marker,
+        requestState: u.SUCCESS,
+        searchInput: ""
+      };
+    case s.SEARCH:
+      return {
+        ...r,
+        abortController: e.abortController,
+        error: null,
+        items: [...e.items],
+        marker: e.marker,
+        requestState: u.SUCCESS,
+        searchInput: e.searchInput ?? r.searchInput
+      };
+    case s.SET_ERROR:
+      return {
+        ...r,
+        items: s.LOAD_MORE ? r.items : [],
+        error: e.error,
+        requestState: u.ERROR
+      };
+    case s.SET_LOADING:
+      return {
+        ...r,
+        requestInitiator: e.requestInitiator,
+        requestState: u.IN_PROGRESS,
+        abortController: e.abortController
+      };
+    default:
+      throw new Error(`Invalid action type "${e.type}"`);
+  }
+}
+function C(r) {
+  const {
+    load: e
+  } = r, [t, l] = I(i, {
+    error: null,
+    items: [],
+    requestInitiator: null,
+    requestState: u.NOT_STARTED,
+    searchInput: ""
+  }), a = async (o, S) => {
+    var E;
+    const R = new AbortController();
+    try {
+      if (o.type === s.SEARCH && t.requestState === u.IN_PROGRESS && t.abortController.abort(), t.requestInitiator === s.LOAD_MORE && t.requestState === u.IN_PROGRESS && o.type === s.LOAD_MORE) {
+        (E = o.abortController) == null || E.abort();
+        return;
+      }
+      l({
+        type: s.SET_LOADING,
+        requestInitiator: o.type,
+        abortController: R
+      });
+      const n = await S({
+        items: t.items.slice(),
+        signal: R.signal,
+        marker: o.type === s.LOAD_MORE ? t.marker : null,
+        searchInput: o.searchInput ?? t.searchInput
+      }), O = n.searchInput ?? o.searchInput ?? t.searchInput;
+      l({
+        type: o.type,
+        ...n,
+        searchInput: O,
+        abortController: R
+      });
+    } catch (n) {
+      if ((n == null ? void 0 : n.name) === "AbortError")
+        return;
+      l({
+        type: s.SET_ERROR,
+        error: n,
+        abortController: R
+      });
+    }
+  };
+  return {
+    hasError: t.requestState === u.ERROR,
+    hasNextPage: t.requestState === u.ERROR ? !1 : t.marker != null,
+    isEmpty: t.items.length === 0,
+    isLoading: t.requestState === u.IN_PROGRESS,
+    isReloading: t.requestState === u.IN_PROGRESS && (t.requestInitiator === s.RELOAD || t.requestInitiator === s.SEARCH),
+    items: t.items,
+    loadMore: () => a({
+      type: s.LOAD_MORE
+    }, e),
+    reload: () => {
+      a({
+        type: s.RELOAD
+      }, e);
+    },
+    requestInitiator: t.requestInitiator,
+    searchInput: t.searchInput,
+    search: (o) => a({
+      type: s.SEARCH,
+      searchInput: o
+    }, e)
+  };
+}
+export {
+  C as useAsyncList
+};