@boxcustodia/library 1.7.11 → 1.7.13

package/dist/index.es543.js

@@ -1,56 +1,47 @@
-import { __exports as o } from "./index.es722.js";
-import { __require as K } from "./index.es723.js";
-import { __require as L } from "./index.es724.js";
-import { __require as U } from "./index.es725.js";
-import { __require as V } from "./index.es726.js";
-import { __require as W } from "./index.es727.js";
-import { __require as X } from "./index.es728.js";
-import { __require as Y } from "./index.es729.js";
-import { __require as Z } from "./index.es730.js";
-import { __require as j } from "./index.es731.js";
-import { __require as ee } from "./index.es732.js";
-import { __require as oe } from "./index.es733.js";
-import { __require as re } from "./index.es734.js";
-import { __require as ie } from "./index.es735.js";
-import { __require as ae } from "./index.es736.js";
-import { __require as le } from "./index.es737.js";
-import { __require as te } from "./index.es738.js";
-import { __require as de } from "./index.es739.js";
-import { __require as ue } from "./index.es740.js";
-import { __require as ce } from "./index.es741.js";
-import { __require as _e } from "./index.es742.js";
-import { __require as fe } from "./index.es743.js";
-import { __require as me } from "./index.es744.js";
-import { __require as qe } from "./index.es745.js";
-import { __require as pe } from "./index.es746.js";
-import { __require as Re } from "./index.es747.js";
-import { __require as se } from "./index.es748.js";
-import { __require as ne } from "./index.es749.js";
-import { __require as ve } from "./index.es750.js";
-import { __require as De } from "./index.es751.js";
-import { __require as be } from "./index.es752.js";
-import { __require as ge } from "./index.es753.js";
-import { __require as he } from "./index.es754.js";
-import { __require as Pe } from "./index.es755.js";
-import { __require as ke } from "./index.es756.js";
-import { __require as Ce } from "./index.es757.js";
-import { __require as Ee } from "./index.es758.js";
-import { __require as xe } from "./index.es759.js";
-import { __require as ye } from "./index.es760.js";
-import { __require as Ae } from "./index.es761.js";
-var i;
-function no() {
-  if (i) return o;
-  i = 1, Object.defineProperty(o, "__esModule", {
-    value: !0
-  }), o.default = void 0;
-  var a = e(K()), l = e(L()), t = e(U()), d = e(V()), u = e(W()), c = e(X()), _ = e(Y()), f = e(Z()), m = e(j()), q = e(ee()), p = e(oe()), R = e(re()), s = e(ie()), n = e(ae()), v = e(le()), D = e(te()), b = e(de()), g = e(ue()), h = e(ce()), P = e(_e()), k = e(fe()), C = e(me()), E = e(qe()), x = e(pe()), y = e(Re()), A = e(se()), w = e(ne()), B = e(ve()), F = e(De()), G = e(be()), I = e(ge()), N = e(he()), T = e(Pe()), M = e(ke()), Q = e(Ce()), S = e(Ee()), O = e(xe()), $ = e(ye()), z = e(Ae());
-  function e(r) {
-    return r && r.__esModule ? r : { default: r };
+const s = Symbol.for("react-aria.i18n.locale"), d = Symbol.for("react-aria.i18n.strings");
+let o;
+class l {
+  /** Returns a localized string for the given key and locale. */
+  getStringForLocale(t, r) {
+    let i = this.getStringsForLocale(r)[t];
+    if (!i) throw new Error(`Could not find intl message ${t} in ${r} locale`);
+    return i;
   }
-  var H = [["doc-abstract", a.default], ["doc-acknowledgments", l.default], ["doc-afterword", t.default], ["doc-appendix", d.default], ["doc-backlink", u.default], ["doc-biblioentry", c.default], ["doc-bibliography", _.default], ["doc-biblioref", f.default], ["doc-chapter", m.default], ["doc-colophon", q.default], ["doc-conclusion", p.default], ["doc-cover", R.default], ["doc-credit", s.default], ["doc-credits", n.default], ["doc-dedication", v.default], ["doc-endnote", D.default], ["doc-endnotes", b.default], ["doc-epigraph", g.default], ["doc-epilogue", h.default], ["doc-errata", P.default], ["doc-example", k.default], ["doc-footnote", C.default], ["doc-foreword", E.default], ["doc-glossary", x.default], ["doc-glossref", y.default], ["doc-index", A.default], ["doc-introduction", w.default], ["doc-noteref", B.default], ["doc-notice", F.default], ["doc-pagebreak", G.default], ["doc-pagelist", I.default], ["doc-part", N.default], ["doc-preface", T.default], ["doc-prologue", M.default], ["doc-pullquote", Q.default], ["doc-qna", S.default], ["doc-subtitle", O.default], ["doc-tip", $.default], ["doc-toc", z.default]], J = H;
-  return o.default = J, o;
+  /** Returns all localized strings for the given locale. */
+  getStringsForLocale(t) {
+    let r = this.strings[t];
+    return r || (r = c(t, this.strings, this.defaultLocale), this.strings[t] = r), r;
+  }
+  static getGlobalDictionaryForPackage(t) {
+    if (typeof window > "u") return null;
+    let r = window[s];
+    if (o === void 0) {
+      let i = window[d];
+      if (!i) return null;
+      o = {};
+      for (let a in i) o[a] = new l({
+        [r]: i[a]
+      }, r);
+    }
+    let e = o == null ? void 0 : o[t];
+    if (!e) throw new Error(`Strings for package "${t}" were not included by LocalizedStringProvider. Please add it to the list passed to createLocalizedStringDictionary.`);
+    return e;
+  }
+  constructor(t, r = "en-US") {
+    this.strings = Object.fromEntries(Object.entries(t).filter(([, e]) => e)), this.defaultLocale = r;
+  }
+}
+function c(n, t, r = "en-US") {
+  if (t[n]) return t[n];
+  let e = g(n);
+  if (t[e]) return t[e];
+  for (let i in t)
+    if (i.startsWith(e + "-")) return t[i];
+  return t[r];
+}
+function g(n) {
+  return Intl.Locale ? new Intl.Locale(n).language : n.split("-")[0];
 }
 export {
-  no as __require
+  l as LocalizedStringDictionary
 };

package/dist/index.es544.js

@@ -1,20 +1,32 @@
-import { __exports as r } from "./index.es762.js";
-import { __require as c } from "./index.es763.js";
-import { __require as p } from "./index.es764.js";
-import { __require as _ } from "./index.es765.js";
-var i;
-function n() {
-  if (i) return r;
-  i = 1, Object.defineProperty(r, "__esModule", {
-    value: !0
-  }), r.default = void 0;
-  var o = a(c()), u = a(p()), t = a(_());
-  function a(e) {
-    return e && e.__esModule ? e : { default: e };
+const o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
+class u {
+  /** Formats a localized string for the given key with the provided variables. */
+  format(t, e) {
+    let l = this.strings.getStringForLocale(t, this.locale);
+    return typeof l == "function" ? l(e, this) : l;
+  }
+  plural(t, e, l = "cardinal") {
+    let r = e["=" + t];
+    if (r) return typeof r == "function" ? r() : r;
+    let c = this.locale + ":" + l, a = o.get(c);
+    a || (a = new Intl.PluralRules(this.locale, {
+      type: l
+    }), o.set(c, a));
+    let n = a.select(t);
+    return r = e[n] || e.other, typeof r == "function" ? r() : r;
+  }
+  number(t) {
+    let e = s.get(this.locale);
+    return e || (e = new Intl.NumberFormat(this.locale), s.set(this.locale, e)), e.format(t);
+  }
+  select(t, e) {
+    let l = t[e] || t.other;
+    return typeof l == "function" ? l() : l;
+  }
+  constructor(t, e) {
+    this.locale = t, this.strings = e;
   }
-  var s = [["graphics-document", o.default], ["graphics-object", u.default], ["graphics-symbol", t.default]], l = s;
-  return r.default = l, r;
 }
 export {
-  n as __require
+  u as LocalizedStringFormatter
 };

package/dist/index.es545.js

@@ -1,4 +1,11 @@
-var e = {};
+import { useLocale as o } from "./index.es540.js";
+let t = /* @__PURE__ */ new Map();
+function b(a) {
+  let { locale: r } = o(), e = r + (a ? Object.entries(a).sort((l, f) => l[0] < f[0] ? -1 : 1).join() : "");
+  if (t.has(e)) return t.get(e);
+  let c = new Intl.Collator(r, a);
+  return t.set(e, c), c;
+}
 export {
-  e as __exports
+  b as useCollator
 };

package/dist/index.es546.js

@@ -1,31 +1,59 @@
-import { __exports as u } from "./index.es766.js";
-var c;
-function g() {
-  if (c) return u;
-  c = 1;
-  var l = Object.prototype.hasOwnProperty;
-  function n(e, t) {
-    var r, i;
-    if (e === t) return !0;
-    if (e && t && (r = e.constructor) === t.constructor) {
-      if (r === Date) return e.getTime() === t.getTime();
-      if (r === RegExp) return e.toString() === t.toString();
-      if (r === Array) {
-        if ((i = e.length) === t.length)
-          for (; i-- && n(e[i], t[i]); ) ;
-        return i === -1;
-      }
-      if (!r || typeof e == "object") {
-        i = 0;
-        for (r in e)
-          if (l.call(e, r) && ++i && !l.call(t, r) || !(r in t) || !n(e[r], t[r])) return !1;
-        return Object.keys(t).length === i;
-      }
-    }
-    return e !== e && t !== t;
-  }
-  return u.dequal = n, u;
+import { listMap as m } from "./index.es547.js";
+import { useId as g } from "./index.es325.js";
+import { mergeProps as y } from "./index.es326.js";
+import { filterDOMProps as v } from "./index.es327.js";
+import { useHighlightSelectionDescription as x } from "./index.es548.js";
+import { useGridSelectionAnnouncement as B } from "./index.es549.js";
+import { useHasTabbableChild as k } from "./index.es534.js";
+import { useSelectableList as A } from "./index.es550.js";
+function S(a, e, o) {
+  let { isVirtualized: l, keyboardDelegate: d, layoutDelegate: s, onAction: r, disallowTypeAhead: n, linkBehavior: t = "action", keyboardNavigationBehavior: b = "arrow", escapeKeyBehavior: u = "clearSelection" } = a;
+  !a["aria-label"] && !a["aria-labelledby"] && console.warn("An aria-label or aria-labelledby prop is required for accessibility.");
+  let { listProps: p } = A({
+    selectionManager: e.selectionManager,
+    collection: e.collection,
+    disabledKeys: e.disabledKeys,
+    ref: o,
+    keyboardDelegate: d,
+    layoutDelegate: s,
+    isVirtualized: l,
+    selectOnFocus: e.selectionManager.selectionBehavior === "replace",
+    shouldFocusWrap: a.shouldFocusWrap,
+    linkBehavior: t,
+    disallowTypeAhead: n,
+    autoFocus: a.autoFocus,
+    escapeKeyBehavior: u
+  }), c = g(a.id);
+  m.set(e, {
+    id: c,
+    onAction: r,
+    linkBehavior: t,
+    keyboardNavigationBehavior: b
+  });
+  let f = x({
+    selectionManager: e.selectionManager,
+    hasItemActions: !!r
+  }), $ = k(o, {
+    isDisabled: e.collection.size !== 0
+  }), h = v(a, {
+    labelable: !0
+  }), i = y(
+    h,
+    {
+      role: "grid",
+      id: c,
+      "aria-multiselectable": e.selectionManager.selectionMode === "multiple" ? "true" : void 0
+    },
+    // If collection is empty, make sure the grid is tabbable unless there is a child tabbable element.
+    e.collection.size === 0 ? {
+      tabIndex: $ ? -1 : 0
+    } : p,
+    f
+  );
+  return l && (i["aria-rowcount"] = e.collection.size, i["aria-colcount"] = 1), B({}, e), {
+    gridProps: i
+  };
 }
 export {
-  g as __require
+  S as useGridList
 };

package/dist/index.es547.js

@@ -1,4 +1,15 @@
-var e = {};
+const b = /* @__PURE__ */ new WeakMap();
+function o(e, r) {
+  var t;
+  let { id: a } = (t = b.get(e)) !== null && t !== void 0 ? t : {};
+  if (!a) throw new Error("Unknown list");
+  return `${a}-${n(r)}`;
+}
+function n(e) {
+  return typeof e == "string" ? e.replace(/\s*/g, "") : "" + e;
+}
 export {
-  e as __exports
+  o as getRowId,
+  b as listMap,
+  n as normalizeKey
 };

package/dist/index.es548.js

@@ -1,4 +1,24 @@
-var e = { exports: {} };
+import s from "./index.es739.js";
+import { useDescription as l } from "./index.es507.js";
+import { useInteractionModality as f } from "./index.es517.js";
+import { useLocalizedStringFormatter as d } from "./index.es542.js";
+import { useMemo as u } from "react";
+function m(e) {
+  return e && e.__esModule ? e.default : e;
+}
+function x(e) {
+  let o = d(m(s), "@react-aria/grid"), t = f(), i = (t === "pointer" || t === "virtual" || t == null) && typeof window < "u" && "ontouchstart" in window, n = u(() => {
+    let a = e.selectionManager.selectionMode, c = e.selectionManager.selectionBehavior, r;
+    return i && (r = o.format("longPressToSelect")), c === "replace" && a !== "none" && e.hasItemActions ? r : void 0;
+  }, [
+    e.selectionManager.selectionMode,
+    e.selectionManager.selectionBehavior,
+    e.hasItemActions,
+    o,
+    i
+  ]);
+  return l(n);
+}
 export {
-  e as __module
+  x as useHighlightSelectionDescription
 };

package/dist/index.es549.js

@@ -1,4 +1,62 @@
-var o = {};
+import g from "./index.es739.js";
+import { announce as p } from "./index.es323.js";
+import { useUpdateEffect as $ } from "./index.es501.js";
+import { useEffectEvent as x } from "./index.es509.js";
+import { useLocalizedStringFormatter as v } from "./index.es542.js";
+import { useRef as _ } from "react";
+function y(o) {
+  return o && o.__esModule ? o.default : o;
+}
+function F(o, e) {
+  let { getRowText: c = (r) => {
+    var s, f, u, l;
+    return (l = (s = (f = e.collection).getTextValue) === null || s === void 0 ? void 0 : s.call(f, r)) !== null && l !== void 0 ? l : (u = e.collection.getItem(r)) === null || u === void 0 ? void 0 : u.textValue;
+  } } = o, n = v(y(g), "@react-aria/grid"), t = e.selectionManager.rawSelection, a = _(t), d = x(() => {
+    var r;
+    if (!e.selectionManager.isFocused || t === a.current) {
+      a.current = t;
+      return;
+    }
+    let s = m(t, a.current), f = m(a.current, t), u = e.selectionManager.selectionBehavior === "replace", l = [];
+    if (e.selectionManager.selectedKeys.size === 1 && u) {
+      if (e.collection.getItem(e.selectionManager.selectedKeys.keys().next().value)) {
+        let i = c(e.selectionManager.selectedKeys.keys().next().value);
+        i && l.push(n.format("selectedItem", {
+          item: i
+        }));
+      }
+    } else if (s.size === 1 && f.size === 0) {
+      let i = c(s.keys().next().value);
+      i && l.push(n.format("selectedItem", {
+        item: i
+      }));
+    } else if (f.size === 1 && s.size === 0 && e.collection.getItem(f.keys().next().value)) {
+      let i = c(f.keys().next().value);
+      i && l.push(n.format("deselectedItem", {
+        item: i
+      }));
+    }
+    e.selectionManager.selectionMode === "multiple" && (l.length === 0 || t === "all" || t.size > 1 || a.current === "all" || ((r = a.current) === null || r === void 0 ? void 0 : r.size) > 1) && l.push(t === "all" ? n.format("selectedAll") : n.format("selectedCount", {
+      count: t.size
+    })), l.length > 0 && p(l.join(" ")), a.current = t;
+  });
+  $(() => {
+    if (e.selectionManager.isFocused) d();
+    else {
+      let r = requestAnimationFrame(d);
+      return () => cancelAnimationFrame(r);
+    }
+  }, [
+    t,
+    e.selectionManager.isFocused
+  ]);
+}
+function m(o, e) {
+  let c = /* @__PURE__ */ new Set();
+  if (o === "all" || e === "all") return c;
+  for (let n of o.keys()) e.has(n) || c.add(n);
+  return c;
+}
 export {
-  o as __exports
+  F as useGridSelectionAnnouncement
 };

package/dist/index.es550.js

@@ -1,4 +1,36 @@
-var r = {};
+import { useSelectableCollection as n } from "./index.es554.js";
+import { ListKeyboardDelegate as f } from "./index.es557.js";
+import { useCollator as g } from "./index.es545.js";
+import { useMemo as $ } from "react";
+function D(a) {
+  let { selectionManager: l, collection: o, disabledKeys: t, ref: e, keyboardDelegate: r, layoutDelegate: s } = a, i = g({
+    usage: "search",
+    sensitivity: "base"
+  }), c = l.disabledBehavior, d = $(() => r || new f({
+    collection: o,
+    disabledKeys: t,
+    disabledBehavior: c,
+    ref: e,
+    collator: i,
+    layoutDelegate: s
+  }), [
+    r,
+    s,
+    o,
+    t,
+    e,
+    i,
+    c
+  ]), { collectionProps: b } = n({
+    ...a,
+    ref: e,
+    selectionManager: l,
+    keyboardDelegate: d
+  });
+  return {
+    listProps: b
+  };
+}
 export {
-  r as __exports
+  D as useSelectableList
 };

package/dist/index.es551.js

@@ -1,4 +1,174 @@
-var r = {};
+import { listMap as X, getRowId as M } from "./index.es547.js";
+import { useSlotId as Y } from "./index.es325.js";
+import { chain as j } from "./index.es490.js";
+import { mergeProps as I } from "./index.es326.js";
+import { useSyntheticLinkProps as q } from "./index.es496.js";
+import { getScrollParent as u } from "./index.es504.js";
+import { scrollIntoViewport as p } from "./index.es510.js";
+import { getFocusableTreeWalker as L } from "./index.es338.js";
+import { isFocusVisible as H } from "./index.es517.js";
+import { focusSafely as c } from "./index.es528.js";
+import { getLastItem as J } from "./index.es532.js";
+import { useRef as Q } from "react";
+import { useSelectableItem as Z } from "./index.es552.js";
+import { useLocale as _ } from "./index.es540.js";
+const D = {
+  expand: {
+    ltr: "ArrowRight",
+    rtl: "ArrowLeft"
+  },
+  collapse: {
+    ltr: "ArrowLeft",
+    rtl: "ArrowRight"
+  }
+};
+function be(b, r, n) {
+  var v, m;
+  let { node: e, isVirtualized: P, shouldSelectOnPressUp: V } = b, { direction: d } = _(), { onAction: f, linkBehavior: F, keyboardNavigationBehavior: $ } = X.get(r), y = Y(), g = Q(null), z = () => {
+    var o;
+    n.current !== null && (g.current != null && e.key !== g.current || !(!((o = n.current) === null || o === void 0) && o.contains(document.activeElement))) && c(n.current);
+  }, E = {}, s = b.hasChildItems, B = r.selectionManager.isLink(e.key);
+  if (e != null && "expandedKeys" in r) {
+    var k, K, x;
+    let o = (k = (K = r.collection).getChildren) === null || k === void 0 ? void 0 : k.call(K, e.key);
+    s = s || [
+      ...o ?? []
+    ].length > 1, f == null && !B && r.selectionManager.selectionMode === "none" && s && (f = () => r.toggleKey(e.key));
+    let i = s ? r.expandedKeys.has(e.key) : void 0, a = 1;
+    var h;
+    if (e.level > 0 && (e == null ? void 0 : e.parentKey) != null) {
+      let t = r.collection.getItem(e.parentKey);
+      if (t) {
+        var w, A;
+        let l = (w = (A = r.collection).getChildren) === null || w === void 0 ? void 0 : w.call(A, t.key);
+        a = J(l).index + 1;
+      }
+    } else a = ((h = (x = [
+      ...r.collection
+    ].filter((t) => t.level === 0).at(-1)) === null || x === void 0 ? void 0 : x.index) !== null && h !== void 0 ? h : 0) + 1;
+    E = {
+      "aria-expanded": i,
+      "aria-level": e.level + 1,
+      "aria-posinset": (e == null ? void 0 : e.index) + 1,
+      "aria-setsize": a
+    };
+  }
+  let { itemProps: C, ...N } = Z({
+    selectionManager: r.selectionManager,
+    key: e.key,
+    ref: n,
+    isVirtualized: P,
+    shouldSelectOnPressUp: V,
+    onAction: f || !((v = e.props) === null || v === void 0) && v.onAction ? j((m = e.props) === null || m === void 0 ? void 0 : m.onAction, f ? () => f(e.key) : void 0) : void 0,
+    focus: z,
+    linkBehavior: F
+  }), O = (o) => {
+    if (!o.currentTarget.contains(o.target) || !n.current || !document.activeElement) return;
+    let i = L(n.current);
+    if (i.currentNode = document.activeElement, "expandedKeys" in r && document.activeElement === n.current) {
+      if (o.key === D.expand[d] && r.selectionManager.focusedKey === e.key && s && !r.expandedKeys.has(e.key)) {
+        r.toggleKey(e.key), o.stopPropagation();
+        return;
+      } else if (o.key === D.collapse[d] && r.selectionManager.focusedKey === e.key && s && r.expandedKeys.has(e.key)) {
+        r.toggleKey(e.key), o.stopPropagation();
+        return;
+      }
+    }
+    switch (o.key) {
+      case "ArrowLeft":
+        if ($ === "arrow") {
+          let t = d === "rtl" ? i.nextNode() : i.previousNode();
+          if (t)
+            o.preventDefault(), o.stopPropagation(), c(t), p(t, {
+              containingElement: u(n.current)
+            });
+          else if (o.preventDefault(), o.stopPropagation(), d === "rtl")
+            c(n.current), p(n.current, {
+              containingElement: u(n.current)
+            });
+          else {
+            i.currentNode = n.current;
+            let l = R(i);
+            l && (c(l), p(l, {
+              containingElement: u(n.current)
+            }));
+          }
+        }
+        break;
+      case "ArrowRight":
+        if ($ === "arrow") {
+          let t = d === "rtl" ? i.previousNode() : i.nextNode();
+          if (t)
+            o.preventDefault(), o.stopPropagation(), c(t), p(t, {
+              containingElement: u(n.current)
+            });
+          else if (o.preventDefault(), o.stopPropagation(), d === "ltr")
+            c(n.current), p(n.current, {
+              containingElement: u(n.current)
+            });
+          else {
+            i.currentNode = n.current;
+            let l = R(i);
+            l && (c(l), p(l, {
+              containingElement: u(n.current)
+            }));
+          }
+        }
+        break;
+      case "ArrowUp":
+      case "ArrowDown":
+        if (!o.altKey && n.current.contains(o.target)) {
+          var a;
+          o.stopPropagation(), o.preventDefault(), (a = n.current.parentElement) === null || a === void 0 || a.dispatchEvent(new KeyboardEvent(o.nativeEvent.type, o.nativeEvent));
+        }
+        break;
+      case "Tab":
+        if ($ === "tab") {
+          let t = L(n.current, {
+            tabbable: !0
+          });
+          t.currentNode = document.activeElement, (o.shiftKey ? t.previousNode() : t.nextNode()) && o.stopPropagation();
+        }
+    }
+  }, U = (o) => {
+    if (g.current = e.key, o.target !== n.current) {
+      H() || r.selectionManager.setFocusedKey(e.key);
+      return;
+    }
+  }, T = q(e.props), G = N.hasAction ? T : {}, S = I(C, G, {
+    role: "row",
+    onKeyDownCapture: O,
+    onFocus: U,
+    // 'aria-label': [(node.textValue || undefined), rowAnnouncement].filter(Boolean).join(', '),
+    "aria-label": e.textValue || void 0,
+    "aria-selected": r.selectionManager.canSelectItem(e.key) ? r.selectionManager.isSelected(e.key) : void 0,
+    "aria-disabled": r.selectionManager.isDisabled(e.key) || void 0,
+    "aria-labelledby": y && e.textValue ? `${M(r, e.key)} ${y}` : void 0,
+    id: M(r, e.key)
+  });
+  P && (S["aria-rowindex"] = e.index + 1);
+  let W = {
+    role: "gridcell",
+    "aria-colindex": 1
+  };
+  return {
+    rowProps: {
+      ...I(S, E)
+    },
+    gridCellProps: W,
+    descriptionProps: {
+      id: y
+    },
+    ...N
+  };
+}
+function R(b) {
+  let r = null, n = null;
+  do
+    n = b.lastChild(), n && (r = n);
+  while (n);
+  return r;
+}
 export {
-  r as __exports
+  be as useGridListItem
 };