@box/metadata-template-browser 1.16.3

package/dist/esm/lib/components/template-row/template-row.js

@@ -0,0 +1,70 @@
+import { IconButton as m, Text as c } from "@box/blueprint-web";
+import { Pencil as p } from "@box/blueprint-web-assets/icons/Fill";
+import { Metadata as f } from "@box/blueprint-web-assets/icons/Medium";
+import { useCallback as h, Fragment as u } from "react";
+import { useIntl as g } from "react-intl";
+import { T as v } from "../../../../chunks/types.js";
+import { messages as b } from "./messages.js";
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import { useConsumerState as y } from "../../contexts/hooks.js";
+import { BrowserRow as S } from "../browser-row/browser-row.js";
+const w = (o) => {
+  if (!o.ancestors || o.ancestors.length === 0)
+    return;
+  const n = o.ancestors.length - 1;
+  return o.ancestors.map((r, a) => /* @__PURE__ */ x(u, {
+    children: [a > 0 && /* @__PURE__ */ i(c, {
+      "aria-hidden": "true",
+      as: "span",
+      color: "textOnLightSecondary",
+      variant: "caption",
+      children: " / "
+    }), /* @__PURE__ */ i(c, {
+      as: "span",
+      color: "textOnLightSecondary",
+      variant: a === n ? "captionBold" : "caption",
+      children: r.displayName
+    })]
+  }, r.fqn));
+};
+function j({
+  template: o,
+  variant: n,
+  onEdit: r
+}) {
+  const {
+    formatMessage: a
+  } = g(), {
+    isDisabled: d
+  } = y(), l = h((t) => {
+    t.stopPropagation(), r(o.id);
+  }, [r, o.id]), s = n === v.Search, e = !!o.canEdit;
+  return /* @__PURE__ */ i(S, {
+    id: o.id,
+    isTrailingSlotHoverOnly: e,
+    leadingIcon: s ? void 0 : /* @__PURE__ */ i(f, {}),
+    subtitle: s ? w(o) : void 0,
+    title: o.displayName,
+    trailingSlot: e ? (
+      // onPointerDown stops React Aria from registering a press on the
+      // GridListItem — without it, the onSelectionChange bridge in
+      // VirtualizedGridList routes the click through onAction even though
+      // onClick.stopPropagation() is called (pointer events fire first).
+      /* @__PURE__ */ i("div", {
+        onPointerDown: (t) => t.stopPropagation(),
+        children: /* @__PURE__ */ i(m, {
+          "aria-label": a(b.editAriaLabel, {
+            displayName: o.displayName
+          }),
+          disabled: d,
+          icon: p,
+          onClick: l,
+          size: "x-small"
+        })
+      })
+    ) : void 0
+  });
+}
+export {
+  j as TemplateRow
+};

package/dist/esm/lib/components/virtualized-grid-list/grid-list-load-more-sentinel.js

@@ -0,0 +1,49 @@
+import { useRef as f, useEffect as p } from "react";
+import { GridListItem as L } from "react-aria-components";
+import { useIntl as A } from "react-intl";
+import { LOAD_MORE_SENTINEL_ID as h } from "../../constants.js";
+import { messages as E } from "./messages.js";
+import { jsx as _ } from "react/jsx-runtime";
+import '../../../../styles/grid-list-load-more-sentinel.css';const I = "_sentinel_im31a_1", b = {
+  sentinel: I
+};
+function D({
+  onLoadMore: r,
+  scrollContainerRef: n
+}) {
+  const s = f(r);
+  s.current = r;
+  const {
+    formatMessage: c
+  } = A(), m = c(E.loadMoreSentinelAriaLabel);
+  return p(() => {
+    const e = n.current;
+    let t, i = !1;
+    const o = () => {
+      if (!e || i)
+        return;
+      const {
+        scrollTop: u,
+        scrollHeight: d,
+        clientHeight: a
+      } = e;
+      d - u - a <= a && (i = !0, s.current());
+    }, l = () => {
+      cancelAnimationFrame(t), t = requestAnimationFrame(o);
+    };
+    return e?.addEventListener("scroll", l, {
+      passive: !0
+    }), t = requestAnimationFrame(o), () => {
+      e?.removeEventListener("scroll", l), cancelAnimationFrame(t);
+    };
+  }, [n]), /* @__PURE__ */ _(L, {
+    "aria-hidden": "true",
+    className: b.sentinel,
+    id: h,
+    isDisabled: !0,
+    textValue: m
+  });
+}
+export {
+  D as GridListLoadMoreSentinel
+};

package/dist/esm/lib/components/virtualized-grid-list/index.js

@@ -0,0 +1,4 @@
+import { VirtualizedGridList as t } from "./virtualized-grid-list.js";
+export {
+  t as VirtualizedGridList
+};

package/dist/esm/lib/components/virtualized-grid-list/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages as e } from "react-intl";
+const r = e({
+  loadMoreSentinelAriaLabel: {
+    id: "groupSharedFeatures.metadataTemplateBrowser.virtualizedGridList.loadMoreSentinelAriaLabel",
+    defaultMessage: "Load more items"
+  }
+});
+export {
+  r as messages
+};

package/dist/esm/lib/components/virtualized-grid-list/virtualized-grid-list.js

@@ -0,0 +1,66 @@
+import { useMemo as h, useRef as O, useCallback as f } from "react";
+import { ListLayout as T, Virtualizer as w, GridList as C, Collection as M } from "react-aria-components";
+import { LOAD_MORE_ERROR_ROW_ID as G } from "../../constants.js";
+import { T as H } from "../../../../chunks/types.js";
+import { GridListLoadMoreSentinel as A } from "./grid-list-load-more-sentinel.js";
+import { jsx as t, jsxs as D } from "react/jsx-runtime";
+import { useConsumerState as I } from "../../contexts/hooks.js";
+import { LoadMoreLoadingRow as W } from "../load-more-feedback/load-more-loading-row.js";
+import { LoadMoreErrorRow as b } from "../load-more-feedback/load-more-error-row.js";
+import '../../../../styles/virtualized-grid-list.css';const x = "_list_dukvn_1", V = {
+  list: x
+}, j = 40, k = 58, v = 2;
+function Y({
+  ariaLabel: d,
+  items: R,
+  onAction: e,
+  children: _,
+  onLoadMore: L,
+  hasMoreItems: p,
+  isFetchingMore: l,
+  loadMoreError: a,
+  onRetry: i,
+  selectedKeys: r,
+  listType: m
+}) {
+  const {
+    isDisabled: n
+  } = I(), E = h(() => new T({
+    estimatedRowHeight: m === H.Browse ? j : k,
+    gap: v
+  }), [m]), c = O(null), u = f((o) => {
+    if (o === G) {
+      n || i();
+      return;
+    }
+    e(o);
+  }, [n, e, i]), S = f((o) => {
+    if (o === "all")
+      return;
+    const [s] = o;
+    s !== void 0 && !r.has(String(s)) && u(s);
+  }, [u, r]), g = p && !l && a === null && !n;
+  return /* @__PURE__ */ t(w, {
+    layout: E,
+    children: /* @__PURE__ */ D(C, {
+      ref: c,
+      "aria-label": d,
+      className: V.list,
+      onSelectionChange: S,
+      selectedKeys: r,
+      selectionMode: "single",
+      children: [/* @__PURE__ */ t(M, {
+        items: R,
+        children: _
+      }), l && /* @__PURE__ */ t(W, {}), a !== null && /* @__PURE__ */ t(b, {
+        onRetry: i
+      }), g && /* @__PURE__ */ t(A, {
+        onLoadMore: L,
+        scrollContainerRef: c
+      })]
+    })
+  });
+}
+export {
+  Y as VirtualizedGridList
+};

package/dist/esm/lib/constants.js

@@ -0,0 +1,14 @@
+const _ = "LOAD_MORE_ERROR_ROW_ID", O = "LOAD_MORE_LOADING_ROW_ID", R = "LOAD_MORE_SENTINEL_ID", E = 200, s = 500, e = {
+  entries: []
+}, D = {
+  entries: []
+};
+export {
+  _ as LOAD_MORE_ERROR_ROW_ID,
+  O as LOAD_MORE_LOADING_ROW_ID,
+  R as LOAD_MORE_SENTINEL_ID,
+  E as PAGE_SIZE,
+  s as SEARCH_DEBOUNCE_MS,
+  e as emptyNamespacesResponse,
+  D as emptyTemplatesResponse
+};

package/dist/esm/lib/contexts/contexts.js

@@ -0,0 +1,129 @@
+import { createContext as i, useMemo as l } from "react";
+import { useTemplateBrowserActions as d } from "./use-template-browser-actions.js";
+import { jsx as C } from "react/jsx-runtime";
+const B = /* @__PURE__ */ i(null);
+function H({
+  children: n,
+  namespaceFQN: t,
+  path: o
+}) {
+  const e = l(() => ({
+    namespaceFQN: t,
+    path: o
+  }), [t, o]);
+  return /* @__PURE__ */ C(B.Provider, {
+    value: e,
+    children: n
+  });
+}
+const s = /* @__PURE__ */ i(null);
+function J({
+  children: n,
+  namespaces: t,
+  templates: o,
+  isNamespacesExhausted: e,
+  namespaceNextMarker: r,
+  templateNextMarker: u,
+  isFetching: v,
+  isFetchingMore: c,
+  initialLoadError: S,
+  browseError: P,
+  loadMoreError: f
+}) {
+  const x = l(() => ({
+    namespaces: t,
+    templates: o,
+    isNamespacesExhausted: e,
+    namespaceNextMarker: r,
+    templateNextMarker: u,
+    isFetching: v,
+    isFetchingMore: c,
+    initialLoadError: S,
+    browseError: P,
+    loadMoreError: f
+  }), [t, o, e, r, u, v, c, S, P, f]);
+  return /* @__PURE__ */ C(s.Provider, {
+    value: x,
+    children: n
+  });
+}
+const w = /* @__PURE__ */ i(null);
+function K({
+  children: n,
+  searchValue: t,
+  searchQuery: o,
+  searchResults: e,
+  searchNextMarker: r,
+  isFetchingSearch: u,
+  searchError: v
+}) {
+  const c = l(() => ({
+    searchValue: t,
+    searchQuery: o,
+    searchResults: e,
+    searchNextMarker: r,
+    isFetchingSearch: u,
+    searchError: v
+  }), [t, o, e, r, u, v]);
+  return /* @__PURE__ */ C(w.Provider, {
+    value: c,
+    children: n
+  });
+}
+const m = /* @__PURE__ */ i(null);
+function O({
+  children: n,
+  selectedTemplateId: t
+}) {
+  const o = l(() => ({
+    selectedTemplateId: t
+  }), [t]);
+  return /* @__PURE__ */ C(m.Provider, {
+    value: o,
+    children: n
+  });
+}
+const A = /* @__PURE__ */ i(null);
+function T({
+  children: n,
+  isLoading: t = !1,
+  isDisabled: o = !1
+}) {
+  const e = l(() => ({
+    isLoading: t,
+    isDisabled: o
+  }), [t, o]);
+  return /* @__PURE__ */ C(A.Provider, {
+    value: e,
+    children: n
+  });
+}
+const j = /* @__PURE__ */ i(null);
+function U({
+  children: n,
+  itemsServiceRef: t,
+  eventServiceRef: o,
+  stateRef: e,
+  dispatch: r,
+  levelCache: u
+}) {
+  const v = d(t, o, e, r, u);
+  return /* @__PURE__ */ C(j.Provider, {
+    value: v,
+    children: n
+  });
+}
+export {
+  s as BrowseStateContext,
+  J as BrowseStateContextProvider,
+  j as BrowserActionsContext,
+  U as BrowserActionsContextProvider,
+  A as ConsumerStateContext,
+  T as ConsumerStateContextProvider,
+  B as NavigationStateContext,
+  H as NavigationStateContextProvider,
+  w as SearchStateContext,
+  K as SearchStateContextProvider,
+  m as SelectionStateContext,
+  O as SelectionStateContextProvider
+};

package/dist/esm/lib/contexts/hooks.js

@@ -0,0 +1,46 @@
+import { useContext as e } from "react";
+import { NavigationStateContext as r, BrowseStateContext as o, SearchStateContext as n, SelectionStateContext as a, ConsumerStateContext as s, BrowserActionsContext as u } from "./contexts.js";
+function c() {
+  const t = e(r);
+  if (t === null)
+    throw new Error("useNavigationState must be used within a MetadataTemplateBrowserProvider");
+  return t;
+}
+function S() {
+  const t = e(o);
+  if (t === null)
+    throw new Error("useBrowseState must be used within a MetadataTemplateBrowserProvider");
+  return t;
+}
+function l() {
+  const t = e(n);
+  if (t === null)
+    throw new Error("useSearchState must be used within a MetadataTemplateBrowserProvider");
+  return t;
+}
+function m() {
+  const t = e(a);
+  if (t === null)
+    throw new Error("useSelectionState must be used within a MetadataTemplateBrowserProvider");
+  return t;
+}
+function d() {
+  const t = e(s);
+  if (t === null)
+    throw new Error("useConsumerState must be used within a ConsumerStateContextProvider");
+  return t;
+}
+function h() {
+  const t = e(u);
+  if (t === null)
+    throw new Error("useBrowserActions must be used within a MetadataTemplateBrowserProvider");
+  return t;
+}
+export {
+  S as useBrowseState,
+  h as useBrowserActions,
+  d as useConsumerState,
+  c as useNavigationState,
+  l as useSearchState,
+  m as useSelectionState
+};

package/dist/esm/lib/contexts/index.js

@@ -0,0 +1,17 @@
+import { browserReducer as r, initialState as o } from "./reducer.js";
+import { ConsumerStateContext as s, ConsumerStateContextProvider as u } from "./contexts.js";
+import { MetadataTemplateBrowserProvider as i } from "./provider.js";
+import { useBrowseState as m, useBrowserActions as x, useConsumerState as p, useNavigationState as C, useSearchState as c, useSelectionState as d } from "./hooks.js";
+export {
+  s as ConsumerStateContext,
+  u as ConsumerStateContextProvider,
+  i as MetadataTemplateBrowserProvider,
+  r as browserReducer,
+  o as initialState,
+  m as useBrowseState,
+  x as useBrowserActions,
+  p as useConsumerState,
+  C as useNavigationState,
+  c as useSearchState,
+  d as useSelectionState
+};

package/dist/esm/lib/contexts/provider.js

@@ -0,0 +1,59 @@
+import { useReducer as m, useRef as t } from "react";
+import { NavigationStateContextProvider as u, BrowseStateContextProvider as x, SearchStateContextProvider as M, SelectionStateContextProvider as N, BrowserActionsContextProvider as E } from "./contexts.js";
+import { browserReducer as f, initialState as S } from "./reducer.js";
+import { jsx as r } from "react/jsx-runtime";
+function w({
+  children: n,
+  namespaceFQN: h,
+  itemsService: a,
+  eventService: s,
+  initialSelectedTemplateId: l
+}) {
+  const [e, d] = m(f, {
+    ...S,
+    namespaceFQN: h,
+    selectedTemplateId: l ?? null
+  }), o = t(e);
+  o.current = e;
+  const p = t(/* @__PURE__ */ new Map()), c = t(a);
+  c.current = a;
+  const i = t(s);
+  return i.current = s, /* @__PURE__ */ r(u, {
+    namespaceFQN: e.namespaceFQN,
+    path: e.path,
+    children: /* @__PURE__ */ r(x, {
+      namespaces: e.namespaces,
+      templates: e.templates,
+      isNamespacesExhausted: e.isNamespacesExhausted,
+      namespaceNextMarker: e.namespaceNextMarker,
+      templateNextMarker: e.templateNextMarker,
+      isFetching: e.isFetching,
+      isFetchingMore: e.isFetchingMore,
+      initialLoadError: e.initialLoadError,
+      browseError: e.browseError,
+      loadMoreError: e.loadMoreError,
+      children: /* @__PURE__ */ r(M, {
+        searchValue: e.searchValue,
+        searchQuery: e.searchQuery,
+        searchResults: e.searchResults,
+        searchNextMarker: e.searchNextMarker,
+        isFetchingSearch: e.isFetchingSearch,
+        searchError: e.searchError,
+        children: /* @__PURE__ */ r(N, {
+          selectedTemplateId: e.selectedTemplateId,
+          children: /* @__PURE__ */ r(E, {
+            itemsServiceRef: c,
+            eventServiceRef: i,
+            stateRef: o,
+            dispatch: d,
+            levelCache: p,
+            children: n
+          })
+        })
+      })
+    })
+  });
+}
+export {
+  w as MetadataTemplateBrowserProvider
+};

package/dist/esm/lib/contexts/reducer.js

@@ -0,0 +1,180 @@
+let a = /* @__PURE__ */ (function(e) {
+  return e.NavigateTo = "NAVIGATE_TO", e.NavigateBack = "NAVIGATE_BACK", e.BrowseFetchStart = "BROWSE_FETCH_START", e.BrowseLoaded = "BROWSE_LOADED", e.InitialLoadError = "INITIAL_LOAD_ERROR", e.BrowseError = "BROWSE_ERROR", e.LoadMoreStart = "LOAD_MORE_START", e.LoadMoreNamespacesLoaded = "LOAD_MORE_NAMESPACES_LOADED", e.LoadMoreTemplatesLoaded = "LOAD_MORE_TEMPLATES_LOADED", e.LoadMoreError = "LOAD_MORE_ERROR", e.SearchValueChange = "SEARCH_VALUE_CHANGE", e.SearchFetchStart = "SEARCH_FETCH_START", e.SearchLoaded = "SEARCH_LOADED", e.SearchError = "SEARCH_ERROR", e.SearchClear = "SEARCH_CLEAR", e.LoadMoreSearchLoaded = "LOAD_MORE_SEARCH_LOADED", e.TemplateSelect = "TEMPLATE_SELECT", e;
+})({});
+const l = {
+  namespaceFQN: "",
+  path: [],
+  namespaces: [],
+  templates: [],
+  isNamespacesExhausted: !1,
+  namespaceNextMarker: void 0,
+  templateNextMarker: void 0,
+  isFetching: !1,
+  isFetchingMore: !1,
+  initialLoadError: null,
+  browseError: null,
+  loadMoreError: null,
+  searchValue: "",
+  searchQuery: "",
+  searchResults: [],
+  searchNextMarker: void 0,
+  isFetchingSearch: !1,
+  searchError: null,
+  selectedTemplateId: null
+};
+function t(e, r) {
+  switch (r.type) {
+    case a.NavigateTo:
+      return {
+        ...e,
+        namespaceFQN: r.namespace.id,
+        path: [...e.path, {
+          fqn: r.namespace.id,
+          displayName: r.namespace.displayName
+        }],
+        namespaces: [],
+        templates: [],
+        namespaceNextMarker: void 0,
+        templateNextMarker: void 0,
+        isNamespacesExhausted: !1,
+        initialLoadError: null,
+        browseError: null,
+        loadMoreError: null
+      };
+    case a.NavigateBack:
+      return {
+        ...e,
+        namespaceFQN: r.fqn,
+        path: e.path.filter((s) => r.fqn === s.fqn || r.fqn.startsWith(`${s.fqn}.`)),
+        namespaces: r.cached.namespaces,
+        templates: r.cached.templates,
+        namespaceNextMarker: r.cached.namespaceNextMarker,
+        templateNextMarker: r.cached.templateNextMarker,
+        isNamespacesExhausted: r.cached.isNamespacesExhausted,
+        isFetching: !1,
+        initialLoadError: null,
+        browseError: null,
+        loadMoreError: null
+      };
+    case a.BrowseFetchStart:
+      return {
+        ...e,
+        isFetching: !0,
+        initialLoadError: null,
+        browseError: null
+      };
+    case a.BrowseLoaded:
+      return {
+        ...e,
+        isFetching: !1,
+        namespaces: r.namespaces,
+        namespaceNextMarker: r.namespaceNextMarker,
+        // Namespaces are exhausted when the response carries no next_marker,
+        // which includes the case where the response is empty (no namespaces at all).
+        isNamespacesExhausted: !r.namespaceNextMarker,
+        templates: r.templates,
+        templateNextMarker: r.templateNextMarker
+      };
+    case a.InitialLoadError:
+      return {
+        ...e,
+        isFetching: !1,
+        initialLoadError: r.error
+      };
+    case a.BrowseError:
+      return {
+        ...e,
+        isFetching: !1,
+        browseError: r.error
+      };
+    case a.LoadMoreStart:
+      return {
+        ...e,
+        isFetchingMore: !0,
+        loadMoreError: null
+      };
+    case a.LoadMoreNamespacesLoaded:
+      return {
+        ...e,
+        isFetchingMore: !1,
+        namespaces: [...e.namespaces, ...r.entries],
+        namespaceNextMarker: r.nextMarker,
+        isNamespacesExhausted: !r.nextMarker,
+        // When namespaces become exhausted on this page, the first template page
+        // is fetched in the same request and stored here.
+        ...r.templates !== void 0 && {
+          templates: r.templates,
+          templateNextMarker: r.templateNextMarker
+        }
+      };
+    case a.LoadMoreTemplatesLoaded:
+      return {
+        ...e,
+        isFetchingMore: !1,
+        templates: [...e.templates, ...r.entries],
+        templateNextMarker: r.nextMarker
+      };
+    case a.LoadMoreError:
+      return {
+        ...e,
+        isFetchingMore: !1,
+        loadMoreError: r.error
+      };
+    case a.SearchValueChange:
+      return {
+        ...e,
+        searchValue: r.value
+      };
+    case a.SearchFetchStart:
+      return {
+        ...e,
+        isFetchingSearch: !0,
+        searchQuery: r.query,
+        searchResults: [],
+        searchNextMarker: void 0,
+        searchError: null
+      };
+    case a.SearchLoaded:
+      return {
+        ...e,
+        isFetchingSearch: !1,
+        searchResults: r.results,
+        searchNextMarker: r.nextMarker
+      };
+    case a.SearchError:
+      return {
+        ...e,
+        isFetchingSearch: !1,
+        searchError: r.error
+      };
+    case a.SearchClear:
+      return {
+        ...e,
+        searchValue: "",
+        searchQuery: "",
+        searchResults: [],
+        searchNextMarker: void 0,
+        isFetchingSearch: !1,
+        searchError: null
+      };
+    case a.LoadMoreSearchLoaded:
+      return {
+        ...e,
+        isFetchingMore: !1,
+        searchResults: [...e.searchResults, ...r.entries],
+        searchNextMarker: r.nextMarker
+      };
+    case a.TemplateSelect:
+      return {
+        ...e,
+        selectedTemplateId: r.template.id
+      };
+    default:
+      return e;
+  }
+}
+export {
+  a as BrowserActionType,
+  t as browserReducer,
+  l as initialState
+};