react-layout-virtual 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -4,3 +4,4 @@
  * @author Alexandr Kalabin
  */
 export { default } from './ReactLayoutVirtual';
+export { type ListItemProps } from './ReactLayoutVirtual';

package/dist/index.js

@@ -1,372 +1,6 @@
-import re, { useRef as g, useState as te, useLayoutEffect as ne, useEffect as se } from "react";
-import { flushSync as oe, createPortal as ae } from "react-dom";
-import le, { ScrollableContainer as ie, ArrayItemStore as ce, DynamicListLayout as ue } from "layout-virtual";
-var O = { exports: {} }, y = {};
-var V;
-function fe() {
-  if (V) return y;
-  V = 1;
-  var v = /* @__PURE__ */ Symbol.for("react.transitional.element"), t = /* @__PURE__ */ Symbol.for("react.fragment");
-  function c(l, n, o) {
-    var s = null;
-    if (o !== void 0 && (s = "" + o), n.key !== void 0 && (s = "" + n.key), "key" in n) {
-      o = {};
-      for (var i in n)
-        i !== "key" && (o[i] = n[i]);
-    } else o = n;
-    return n = o.ref, {
-      $$typeof: v,
-      type: l,
-      key: s,
-      ref: n !== void 0 ? n : null,
-      props: o
-    };
-  }
-  return y.Fragment = t, y.jsx = c, y.jsxs = c, y;
-}
-var S = {};
-var z;
-function de() {
-  return z || (z = 1, process.env.NODE_ENV !== "production" && (function() {
-    function v(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === Q ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case T:
-          return "Fragment";
-        case j:
-          return "Profiler";
-        case P:
-          return "StrictMode";
-        case J:
-          return "Suspense";
-        case B:
-          return "SuspenseList";
-        case Z:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case w:
-            return "Portal";
-          case G:
-            return e.displayName || "Context";
-          case I:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case H:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case X:
-            return r = e.displayName || null, r !== null ? r : v(e.type) || "Memo";
-          case A:
-            r = e._payload, e = e._init;
-            try {
-              return v(e(r));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function t(e) {
-      return "" + e;
-    }
-    function c(e) {
-      try {
-        t(e);
-        var r = !1;
-      } catch {
-        r = !0;
-      }
-      if (r) {
-        r = console;
-        var u = r.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return u.call(
-          r,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
-        ), t(e);
-      }
-    }
-    function l(e) {
-      if (e === T) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === A)
-        return "<...>";
-      try {
-        var r = v(e);
-        return r ? "<" + r + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function n() {
-      var e = C.A;
-      return e === null ? null : e.getOwner();
-    }
-    function o() {
-      return Error("react-stack-top-frame");
-    }
-    function s(e) {
-      if (Y.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function i(e, r) {
-      function u() {
-        F || (F = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          r
-        ));
-      }
-      u.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: u,
-        configurable: !0
-      });
-    }
-    function a() {
-      var e = v(this.type);
-      return $[e] || ($[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function f(e, r, u, d, k, L) {
-      var m = u.ref;
-      return e = {
-        $$typeof: b,
-        type: e,
-        key: r,
-        props: u,
-        _owner: d
-      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: a
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: k
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: L
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function _(e, r, u, d, k, L) {
-      var m = r.children;
-      if (m !== void 0)
-        if (d)
-          if (K(m)) {
-            for (d = 0; d < m.length; d++)
-              R(m[d]);
-            Object.freeze && Object.freeze(m);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else R(m);
-      if (Y.call(r, "key")) {
-        m = v(e);
-        var x = Object.keys(r).filter(function(ee) {
-          return ee !== "key";
-        });
-        d = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", U[m + d] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          d,
-          m,
-          x,
-          m
-        ), U[m + d] = !0);
-      }
-      if (m = null, u !== void 0 && (c(u), m = "" + u), s(r) && (c(r.key), m = "" + r.key), "key" in r) {
-        u = {};
-        for (var M in r)
-          M !== "key" && (u[M] = r[M]);
-      } else u = r;
-      return m && i(
-        u,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), f(
-        e,
-        m,
-        u,
-        n(),
-        k,
-        L
-      );
-    }
-    function R(e) {
-      E(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? E(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function E(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === b;
-    }
-    var p = re, b = /* @__PURE__ */ Symbol.for("react.transitional.element"), w = /* @__PURE__ */ Symbol.for("react.portal"), T = /* @__PURE__ */ Symbol.for("react.fragment"), P = /* @__PURE__ */ Symbol.for("react.strict_mode"), j = /* @__PURE__ */ Symbol.for("react.profiler"), I = /* @__PURE__ */ Symbol.for("react.consumer"), G = /* @__PURE__ */ Symbol.for("react.context"), H = /* @__PURE__ */ Symbol.for("react.forward_ref"), J = /* @__PURE__ */ Symbol.for("react.suspense"), B = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), A = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), C = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, K = Array.isArray, N = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    p = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var F, $ = {}, D = p.react_stack_bottom_frame.bind(
-      p,
-      o
-    )(), W = N(l(o)), U = {};
-    S.Fragment = T, S.jsx = function(e, r, u) {
-      var d = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return _(
-        e,
-        r,
-        u,
-        !1,
-        d ? Error("react-stack-top-frame") : D,
-        d ? N(l(e)) : W
-      );
-    }, S.jsxs = function(e, r, u) {
-      var d = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return _(
-        e,
-        r,
-        u,
-        !0,
-        d ? Error("react-stack-top-frame") : D,
-        d ? N(l(e)) : W
-      );
-    };
-  })()), S;
-}
-var q;
-function me() {
-  return q || (q = 1, process.env.NODE_ENV === "production" ? O.exports = fe() : O.exports = de()), O.exports;
-}
-var h = me();
-class _e {
-  _store = null;
-  _scrollableContainer;
-  _renderedIndexRegistry = /* @__PURE__ */ new Map();
-  _renderedItemsRegistry = /* @__PURE__ */ new Map();
-  _itemsSetter;
-  _renderedRangeRefPool = /* @__PURE__ */ new Map();
-  _listItems = [];
-  _flushItems = () => {
-    this._itemsSetter(this._listItems);
-  };
-  _getRenderedBoundaryIndex(t) {
-    const c = t === "first" ? this._scrollableContainer.getFirstItem() : t === "last" ? this._scrollableContainer.getLastItem() : null;
-    if (c)
-      return this.getIndex(c);
-  }
-  constructor(t) {
-    this._scrollableContainer = new ie({ ...t }), this._itemsSetter = t.itemsSetter;
-  }
-  render(t, c, l) {
-    const n = this._getRenderedBoundaryIndex("first"), o = this._getRenderedBoundaryIndex("last");
-    let s = t, i = c, a = n, f = o, _ = 0;
-    return l === "down" ? (console.log("SCROLLING DOWN"), a !== void 0 && o !== void 0 && (f = Math.min(s - 1, o), s = Math.max(o + 1, s), a <= f && (_ = this.removeRange(a, f, l)))) : l === "up" && (console.log("SCROLLING UP"), f !== void 0 && n !== void 0 && (a = Math.max(i + 1, n), i = Math.min(n - 1, i), a <= f && (_ = this.removeRange(a, f, l)))), s < i && this.renderRange(s, i, l), _;
-  }
-  renderRange(t, c, l) {
-    console.log("_renderRange", t, c, l), t > c && console.error("_renderRange", t, c, l);
-    const n = this._store, o = this._listItems, s = [], i = this._renderedRangeRefPool;
-    if (n) {
-      for (let a = t; a <= c; a++) {
-        const f = n.getByIndex(a);
-        if (f) {
-          const _ = f.render, R = i.get(a) || { current: null, idx: a };
-          i.set(a, R), s.push(/* @__PURE__ */ h.jsx(_, { data: f.data, ref: R, index: a }, a));
-        }
-      }
-      this._listItems = l === "down" ? o.concat(s) : l === "up" ? s.concat(o) : this._listItems;
-    }
-  }
-  removeRange(t, c, l) {
-    const n = this._renderedIndexRegistry, o = this._renderedItemsRegistry;
-    let s = 0, i = 1 / 0, a = 0;
-    for (let f = t; f <= c; f++) {
-      const _ = o.get(f);
-      if (_) {
-        const { offsetTop: R, offsetHeight: E } = _;
-        i = Math.min(i, R), a = Math.max(a, R + E), o.delete(f), n.delete(_), s++;
-      }
-    }
-    return s && (this._listItems = l === "down" ? this._listItems.slice(s) : l === "up" ? this._listItems.slice(0, -s) : this._listItems), console.log("_removeItems startIndex:", t, "endIndex:", c, "removedHeight:", a > i ? a - i : 0, "removedItemsCount:", s), a > i ? a - i : 0;
-  }
-  clear() {
-    this._renderedIndexRegistry.clear(), this._renderedItemsRegistry.clear(), this._listItems = [], this._itemsSetter(this._listItems);
-  }
-  getIndex(t) {
-    return this._renderedIndexRegistry.get(t);
-  }
-  getItem(t) {
-    return this._renderedItemsRegistry.get(t);
-  }
-  get scrollableContainer() {
-    return this._scrollableContainer;
-  }
-  attach(t) {
-    this._store = t;
-  }
-  flush() {
-    return oe(this._flushItems), Promise.resolve();
-  }
-  commit() {
-    const t = this._renderedIndexRegistry, c = this._renderedItemsRegistry, l = this._renderedRangeRefPool;
-    for (const n of l.values()) {
-      const { idx: o, current: s } = n;
-      s && (t.set(s, o), c.set(o, s));
-    }
-    l.clear();
-  }
-}
-function ge(v) {
-  const { overscanHeight: t = 200, data: c, renderItem: l, scrollerRef: n } = v, o = n || g(null), s = g(null), i = g(null), a = g(null), f = g(null), _ = g(null), R = g(null), [E, p] = te([]), b = g(void 0);
-  ne(() => {
-    b.current = new _e({
-      container: o.current,
-      scrollHeightFiller: s.current,
-      viewportContainer: i.current,
-      scrollCanvas: a.current,
-      topSpacer: f.current,
-      contentLayer: _.current,
-      bottomSpacer: R.current,
-      itemsSetter: p
-    });
-    const T = new ce(), P = new ue({ overscanHeight: t, renderer: b.current }), j = new le({ store: T, layout: P });
-    for (let I = 0; I < c.length; I++)
-      j.insert({ data: c[I], render: l }, I);
-  }, []), se(() => {
-    b.current?.commit();
-  }, [E]);
-  const w = /* @__PURE__ */ h.jsxs(h.Fragment, { children: [
-    /* @__PURE__ */ h.jsx("div", { ref: s }),
-    /* @__PURE__ */ h.jsx("div", { ref: i, children: /* @__PURE__ */ h.jsxs("div", { ref: a, children: [
-      /* @__PURE__ */ h.jsx("div", { ref: f }),
-      /* @__PURE__ */ h.jsx("div", { ref: _, children: E }),
-      /* @__PURE__ */ h.jsx("div", { ref: R })
-    ] }) })
-  ] });
-  return n && n.current ? ae(w, n.current) : /* @__PURE__ */ h.jsx("div", { ref: o, children: w });
-}
-export {
-  ge as default
-};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useRef as n,useState as s,useLayoutEffect as i,useEffect as o}from"react";import{flushSync as l,createPortal as h}from"react-dom";import d,{ScrollableContainer as a,ArrayItemStore as c,DynamicListLayout as u}from"layout-virtual";class f{t=null;i;o=/* @__PURE__ */new Map;l=/* @__PURE__ */new Map;h;u=/* @__PURE__ */new Map;m=[];v=()=>{this.h(this.m)};p(e){const t="first"===e?this.i.getFirstItem():"last"===e?this.i.getLastItem():null;if(t)return this.getIndex(t)}constructor(e){this.i=new a({...e}),this.h=e.itemsSetter}render(e,t,r){const n=this.p("first"),s=this.p("last");let i=e,o=t,l=n,h=s,d=0;return"down"===r?(console.log("SCROLLING DOWN"),void 0!==l&&void 0!==s&&(h=Math.min(i-1,s),i=Math.max(s+1,i),l<=h&&(d=this.removeRange(l,h,r)))):"up"===r&&(console.log("SCROLLING UP"),void 0!==h&&void 0!==n&&(l=Math.max(o+1,n),o=Math.min(n-1,o),l<=h&&(d=this.removeRange(l,h,r)))),i<o&&this.renderRange(i,o,r),d}renderRange(t,r,n){console.log("_renderRange",t,r,n),t>r&&console.error("_renderRange",t,r,n);const s=this.t,i=this.m,o=[],l=this.u;if(s){for(let n=t;n<=r;n++){const t=s.getByIndex(n);if(t){const r=t.render,s=l.get(n)||{current:null,idx:n};l.set(n,s),o.push(/* @__PURE__ */e(r,{data:t.data,ref:s,index:n},n))}}this.m="down"===n?i.concat(o):"up"===n?o.concat(i):this.m}}removeRange(e,t,r){const n=this.o,s=this.l;let i=0,o=1/0,l=0;for(let h=e;h<=t;h++){const e=s.get(h);if(e){const{offsetTop:t,offsetHeight:r}=e;o=Math.min(o,t),l=Math.max(l,t+r),s.delete(h),n.delete(e),i++}}return i&&(this.m="down"===r?this.m.slice(i):"up"===r?this.m.slice(0,-i):this.m),console.log("_removeItems startIndex:",e,"endIndex:",t,"removedHeight:",l>o?l-o:0,"removedItemsCount:",i),l>o?l-o:0}clear(){this.o.clear(),this.l.clear(),this.m=[],this.h(this.m)}getIndex(e){return this.o.get(e)}getItem(e){return this.l.get(e)}get scrollableContainer(){return this.i}attach(e){this.t=e}flush(){return l(this.v),Promise.resolve()}commit(){const e=this.o,t=this.l,r=this.u;for(const n of r.values()){const{idx:r,current:s}=n;s&&(e.set(s,r),t.set(r,s))}r.clear()}}function m(l){const{overscanHeight:a=200,data:m,renderItem:v,scrollerRef:g}=l,p=n(null),I=g??p,w=n(null),R=n(null),_=n(null),x=n(null),M=n(null),C=n(null),[y,S]=s([]),H=n(void 0);i(()=>{H.current=new f({container:I.current,scrollHeightFiller:w.current,viewportContainer:R.current,scrollCanvas:_.current,topSpacer:x.current,contentLayer:M.current,bottomSpacer:C.current,itemsSetter:S});const e=new c,t=new u({overscanHeight:a,renderer:H.current}),r=new d({store:e,layout:t});for(let n=0;n<m.length;n++)r.insert({data:m[n],render:v},n)},[]),o(()=>{H.current?.commit()},[y]);const L=/* @__PURE__ */t(r,{children:[
+/* @__PURE__ */e("div",{ref:w}),
+/* @__PURE__ */e("div",{ref:R,children:/* @__PURE__ */t("div",{ref:_,children:[
+/* @__PURE__ */e("div",{ref:x}),
+/* @__PURE__ */e("div",{ref:M,children:y}),
+/* @__PURE__ */e("div",{ref:C})]})})]});return g&&g.current?h(L,g.current):/* @__PURE__ */e("div",{ref:I,children:L})}export{m as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-virtual",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React virtual scrolling component for responsive lists and grids with dynamic item sizes.",
   "keywords": [
     "virtual",