@heliux-org/design-system-core 0.0.155 → 0.0.156

package/dist/components/Table/components/newComponents/utils/components/Resizer.js

@@ -0,0 +1,222 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resizer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const index_1 = require("../functions/index");
+/**
+ * Component that allows to resize parent element.
+ * Parent must have `position: relative`.
+ *
+ * Ideally should be used within a shadow root.
+ * @private
+ * @example
+ * const ref = React.useRef<HTMLDivElement>(null);
+ * return (
+ *   <div ref={ref} style={{ position: 'relative' }}>
+ *     <Resizer elementRef={ref} />
+ *   </div>
+ * );
+ */
+const Resizer = (props) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
+            position: "absolute",
+            inset: -6,
+            display: "grid",
+            pointerEvents: "none",
+        } }, { children: [(0, jsx_runtime_1.jsx)(ResizerStyles, {}), (0, jsx_runtime_1.jsx)(Resizers, Object.assign({}, props))] })));
+};
+exports.Resizer = Resizer;
+const Resizers = (props) => {
+    const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
+    const isResizing = React.useRef(false);
+    const onResizePointerDown = (event) => {
+        if (!elementRef.current || event.button !== 0) {
+            return;
+        }
+        const initialPointerX = event.clientX;
+        const initialPointerY = event.clientY;
+        const [initialTranslateX, initialTranslateY] = (0, index_1.getTranslateValuesFromElement)(elementRef.current);
+        const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
+        let width = `${initialWidth}px`;
+        let height = `${initialHeight}px`;
+        let translateX = initialTranslateX;
+        let translateY = initialTranslateY;
+        let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        if (Number.isNaN(minWidth)) {
+            minWidth = 380;
+        }
+        const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
+        const resizer = event.currentTarget.dataset.iuiResizer;
+        const ownerDocument = elementRef.current.ownerDocument || document;
+        const originalUserSelect = ownerDocument.body.style.userSelect;
+        ownerDocument.body.style.userSelect = "none";
+        const onResizePointerMove = (event) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (!elementRef.current) {
+                return;
+            }
+            if (!isResizing.current) {
+                isResizing.current = true;
+                onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
+            }
+            const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const clientX = (0, index_1.getBoundedValue)(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
+            const clientY = (0, index_1.getBoundedValue)(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
+            const diffX = initialPointerX - clientX;
+            const diffY = initialPointerY - clientY;
+            switch (resizer) {
+                case "top-left": {
+                    const newHeight = initialHeight + diffY;
+                    if (newHeight >= minHeight) {
+                        height = elementRef.current.style.height = `${newHeight}px`;
+                        translateY = initialTranslateY - diffY;
+                    }
+                    const newWidth = initialWidth + diffX;
+                    if (newWidth >= minWidth) {
+                        width = elementRef.current.style.width = `${newWidth}px`;
+                        translateX = initialTranslateX - diffX;
+                    }
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case "top": {
+                    const newHeight = initialHeight + diffY;
+                    if (newHeight < minHeight) {
+                        break;
+                    }
+                    height = elementRef.current.style.height = `${newHeight}px`;
+                    translateY = initialTranslateY - diffY;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case "top-right": {
+                    const newHeight = initialHeight + diffY;
+                    if (newHeight >= minHeight) {
+                        height = elementRef.current.style.height = `${newHeight}px`;
+                        translateY = initialTranslateY - diffY;
+                    }
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case "right": {
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    height = elementRef.current.style.height = `${initialHeight}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case "bottom-right": {
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case "bottom": {
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case "bottom-left": {
+                    const newWidth = initialWidth + diffX;
+                    if (newWidth >= minWidth) {
+                        width = elementRef.current.style.width = `${newWidth}px`;
+                        translateX = initialTranslateX - diffX;
+                    }
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                case "left": {
+                    const newWidth = initialWidth + diffX;
+                    if (newWidth < minWidth) {
+                        break;
+                    }
+                    width = elementRef.current.style.width = `${newWidth}px`;
+                    height = elementRef.current.style.height = `${initialHeight}px`;
+                    translateX = initialTranslateX - diffX;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+                    break;
+                }
+                default:
+                    break;
+            }
+        };
+        ownerDocument.addEventListener("pointermove", onResizePointerMove);
+        ownerDocument.addEventListener("pointerup", () => {
+            ownerDocument.removeEventListener("pointermove", onResizePointerMove);
+            if (elementRef.current) {
+                ownerDocument.body.style.userSelect = originalUserSelect;
+                isResizing.current = false;
+                onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
+                    width,
+                    height,
+                    transform: `translate(${translateX}px, ${translateY}px)`,
+                });
+            }
+        }, { once: true });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-iui-resizer": "top-left", onPointerDown: onResizePointerDown, style: { cursor: "nw-resize" } }), (0, jsx_runtime_1.jsx)("div", { "data-iui-resizer": "top", onPointerDown: onResizePointerDown, style: { cursor: "n-resize" } }), (0, jsx_runtime_1.jsx)("div", { "data-iui-resizer": "top-right", onPointerDown: onResizePointerDown, style: { cursor: "ne-resize" } }), (0, jsx_runtime_1.jsx)("div", { "data-iui-resizer": "right", onPointerDown: onResizePointerDown, style: { cursor: "e-resize" } }), (0, jsx_runtime_1.jsx)("div", { "data-iui-resizer": "bottom-right", onPointerDown: onResizePointerDown, style: { cursor: "se-resize" } }), (0, jsx_runtime_1.jsx)("div", { "data-iui-resizer": "bottom", onPointerDown: onResizePointerDown, style: { cursor: "s-resize" } }), (0, jsx_runtime_1.jsx)("div", { "data-iui-resizer": "bottom-left", onPointerDown: onResizePointerDown, style: { cursor: "sw-resize" } }), (0, jsx_runtime_1.jsx)("div", { "data-iui-resizer": "left", onPointerDown: onResizePointerDown, style: { cursor: "w-resize" } })] }));
+};
+// ----------------------------------------------------------------------------
+const ResizerStyles = React.memo(() => (0, jsx_runtime_1.jsx)("style", { children: resizerStyles }));
+const resizerStyles = /* css */ `
+[data-iui-resizer] {
+  pointer-events: auto;
+  grid-area: 1 / 1 / -1 / -1;
+  width: 12px;
+  height: 12px;
+  z-index: 1;
+}
+[data-iui-resizer='top'],
+[data-iui-resizer='bottom'] {
+  height: 8px;
+  width: auto;
+  z-index: 0;
+}
+[data-iui-resizer='left'],
+[data-iui-resizer='right'] {
+  height: auto;
+  width: 8px;
+  z-index: 0;
+}
+[data-iui-resizer^='top'] {
+  align-self: start;
+}
+[data-iui-resizer^='bottom'] {
+  align-self: end;
+}
+[data-iui-resizer$='left'] {
+  justify-self: start;
+}
+[data-iui-resizer$='right'] {
+  justify-self: end;
+}`;
+//# sourceMappingURL=Resizer.js.map

package/dist/components/Table/components/newComponents/utils/components/Resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.js","sourceRoot":"","sources":["../../../../../../../src/components/Table/components/newComponents/utils/components/Resizer.tsx"],"names":[],"mappings":"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"}

package/dist/components/Table/components/newComponents/utils/components/ShadowRoot.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShadowRoot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const ReactDOM = __importStar(require("react-dom"));
+const isBrowser = typeof document !== 'undefined';
+const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
+/**
+ * Wrapper around `<template>` element that attaches shadow root to its parent
+ * and moves its children into the shadow root.
+ *
+ * @private
+ */
+const ShadowRoot = ({ children, css, }) => {
+    const [shadowRoot, setShadowRoot] = React.useState();
+    const isFirstRender = useIsFirstRender();
+    const styleSheet = React.useRef();
+    const attachShadowRef = React.useCallback((template) => {
+        const parent = template === null || template === void 0 ? void 0 : template.parentElement;
+        if (!template || !parent) {
+            return;
+        }
+        if (parent.shadowRoot) {
+            parent.shadowRoot.replaceChildren(); // Remove previous shadowroot content
+        }
+        queueMicrotask(() => {
+            const shadow = parent.shadowRoot || parent.attachShadow({ mode: 'open' });
+            if (css && supportsAdoptedStylesheets) {
+                styleSheet.current || (styleSheet.current = new CSSStyleSheet());
+                styleSheet.current.replaceSync(css);
+                shadow.adoptedStyleSheets = [styleSheet.current];
+            }
+            ReactDOM.flushSync(() => setShadowRoot(shadow));
+        });
+    }, [css]);
+    if (!isBrowser) {
+        return ((0, jsx_runtime_1.jsxs)("template", Object.assign({}, { shadowrootmode: 'open' }, { children: [css && (0, jsx_runtime_1.jsx)("style", { children: css }), children] })));
+    }
+    // In browsers that support DSD, the template will be automatically removed as soon as it's parsed.
+    // To pass hydration, the first client render needs to emulate this browser behavior and return null.
+    if (supportsDSD && isFirstRender) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: shadowRoot ? (ReactDOM.createPortal(children, shadowRoot)) : ((0, jsx_runtime_1.jsx)("template", { ref: attachShadowRef })) }));
+};
+exports.ShadowRoot = ShadowRoot;
+// ----------------------------------------------------------------------------
+function useIsFirstRender() {
+    const [isFirstRender, setIsFirstRender] = React.useState(true);
+    React.useEffect(() => setIsFirstRender(false), []);
+    return isFirstRender;
+}
+//# sourceMappingURL=ShadowRoot.js.map

package/dist/components/Table/components/newComponents/utils/components/ShadowRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowRoot.js","sourceRoot":"","sources":["../../../../../../../src/components/Table/components/newComponents/utils/components/ShadowRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAChG,6CAA+B;AAC/B,oDAAsC;AAEtC,MAAM,SAAS,GAAG,OAAO,QAAQ,KAAK,WAAW,CAAC;AAClD,MAAM,WAAW,GACf,SAAS,IAAI,gBAAgB,IAAI,mBAAmB,CAAC,SAAS,CAAC;AACjE,MAAM,0BAA0B,GAC9B,SAAS,IAAI,oBAAoB,IAAI,QAAQ,CAAC,SAAS,CAAC;AAE1D;;;;;GAKG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,GAAG,GAIJ,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAc,CAAC;IACjE,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAiB,CAAC;IAEjD,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,CAAC,QAAoC,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CAAC;QACvC,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,CAAC,UAAU,EAAE;YACrB,MAAM,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC,CAAC,qCAAqC;SAC3E;QACD,cAAc,CAAC,GAAG,EAAE;YAClB,MAAM,MAAM,GACV,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;YAE7D,IAAI,GAAG,IAAI,0BAA0B,EAAE;gBACrC,UAAU,CAAC,OAAO,KAAlB,UAAU,CAAC,OAAO,GAAK,IAAI,aAAa,EAAE,EAAC;gBAC3C,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;gBACpC,MAAM,CAAC,kBAAkB,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;aAClD;YAED,QAAQ,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,CACL,sDAAc,EAAE,cAAc,EAAE,MAAM,EAAE,eACrC,GAAG,IAAI,4CAAQ,GAAG,GAAS,EAC3B,QAAQ,KACA,CACZ,CAAC;KACH;IAED,mGAAmG;IACnG,qGAAqG;IACrG,IAAI,WAAW,IAAI,aAAa,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,2DACG,UAAU,CAAC,CAAC,CAAC,CACZ,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,CAC5C,CAAC,CAAC,CAAC,CACF,qCAAU,GAAG,EAAE,eAAe,GAAI,CACnC,GACA,CACJ,CAAC;AACJ,CAAC,CAAC;AA5DW,QAAA,UAAU,cA4DrB;AAEF,+EAA+E;AAE/E,SAAS,gBAAgB;IACvB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IACnD,OAAO,aAAa,CAAC;AACvB,CAAC"}

package/dist/components/Table/components/newComponents/utils/components/VirtualScroll.js

@@ -0,0 +1,325 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVirtualization = exports.VirtualScroll = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+// @ts-nocheck
+const React = __importStar(require("react"));
+const ReactDOM = __importStar(require("react-dom"));
+const index_1 = require("../hooks/index");
+const unstable_batchedUpdates = (_a = ReactDOM.unstable_batchedUpdates) !== null && _a !== void 0 ? _a : ((cb) => void cb());
+const getScrollableParent = (element, ownerDocument = document) => {
+    if (!element || element === ownerDocument.body) {
+        return ownerDocument.body;
+    }
+    return isElementScrollable(element)
+        ? element
+        : getScrollableParent(element.parentElement, ownerDocument);
+};
+const isElementScrollable = (element) => {
+    return /(auto|scroll|overlay)/.test(getElementStyle(element, 'overflow') +
+        getElementStyle(element, 'overflow-y'));
+};
+const getElementStyle = (element, prop) => {
+    return getComputedStyle(element, null).getPropertyValue(prop);
+};
+const getElementHeight = (element) => {
+    var _a;
+    return (_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
+};
+const getElementHeightWithMargins = (element) => {
+    if (!element) {
+        return undefined;
+    }
+    const margin = parseFloat(getElementStyle(element, 'margin-block-start')) +
+        parseFloat(getElementStyle(element, 'margin-block-end'));
+    return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
+};
+const getNumberOfNodesInHeight = (childHeight, totalHeight) => {
+    if (!childHeight) {
+        return 0;
+    }
+    return Math.floor(totalHeight / childHeight);
+};
+const getTranslateValue = (childHeight, startIndex) => {
+    if (startIndex > 0) {
+        return childHeight * startIndex;
+    }
+    return 0;
+};
+const getVisibleNodeCount = (childHeight, startIndex, childrenLength, scrollContainer) => {
+    return Math.min(childrenLength - startIndex, getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)));
+};
+/**
+ * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
+ * and the amount provided through `bufferSize` prop at the start and the end. Can be used inside other components like `Table`.
+ *
+ * It has two wrapper elements, so DOM will be changed. One is used for setting full expected height in the scrollable container
+ * and other is for transformation (translateY) to show the correct part of the list.
+ *
+ * Currently it works only with the direct vertically scrollable parent element. It does not work with body scroll.
+ * It supports only static (same) height rows virtualization. Expect some issues, if list consists of different height elements.
+ * @example
+ * const itemRenderer = React.useCallback(() => (
+ *  <div key={index}>
+ *    This is my item #{index}
+ *  </div>
+ * ), [])
+ * <VirtualScroll
+ *  itemsLength={1000}
+ *  itemRenderer={itemRenderer}
+ * />
+ * @private
+ */
+exports.VirtualScroll = React.forwardRef((props, ref) => {
+    const { innerProps, outerProps, visibleChildren } = (0, exports.useVirtualization)(props);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, outerProps, { ref: ref }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, innerProps, { children: visibleChildren })) })));
+});
+/**
+ * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
+ * It returns `outerProps` and `innerProps`, which need to be applied on 2 container elements and `visibleChildren` which is a list of virtualized items.
+ * @example
+ * const itemRenderer = React.useCallback((index: number) => (
+ *  <li key={index}>
+ *    This is my item #{index}
+ *  </li>
+ * ), [])
+ *
+ * const { outerProps, innerProps, visibleChildren } = useVirtualization({itemsLength: 1000, itemRenderer: itemRenderer});
+ * return (
+ *  <div {...outerProps}>
+ *   <ul {...innerProps}>
+ *    {visibleChildren}
+ *   </ul>
+ *  </div>
+ * );
+ * @private
+ */
+const useVirtualization = (props) => {
+    const { itemsLength, itemRenderer, bufferSize = 10, scrollToIndex, style } = props, rest = __rest(props, ["itemsLength", "itemRenderer", "bufferSize", "scrollToIndex", "style"]);
+    const [startNode, setStartNode] = React.useState(0);
+    const [visibleNodeCount, setVisibleNodeCount] = React.useState(0);
+    const scrollContainer = React.useRef();
+    const parentRef = React.useRef(null);
+    const childHeight = React.useRef({ first: 0, middle: 0, last: 0 });
+    const onScrollRef = React.useRef();
+    // Used only to recalculate on resize
+    const [scrollContainerHeight, setScrollContainerHeight] = React.useState(0);
+    const visibleIndex = React.useRef({ start: 0, end: 0 });
+    // Used to mark when scroll container has height (updated by resize observer)
+    // because before that calculations are not right
+    const [isMounted, setIsMounted] = React.useState(false);
+    const getScrollableContainer = () => {
+        var _a, _b;
+        return (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
+    };
+    const visibleChildren = React.useMemo(() => {
+        const arr = [];
+        const endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
+        for (let i = startNode; i < endIndex; i++) {
+            arr.push(itemRenderer(i));
+        }
+        return arr;
+    }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
+    const updateChildHeight = React.useCallback(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!parentRef.current || !visibleChildren.length) {
+            return;
+        }
+        const firstChild = parentRef.current.children.item(0);
+        const secondChild = parentRef.current.children.item(1);
+        const lastChild = parentRef.current.children.item(parentRef.current.children.length - 1);
+        const firstChildHeight = Number((_b = (_a = getElementHeightWithMargins(firstChild)) === null || _a === void 0 ? void 0 : _a.toFixed(2)) !== null && _b !== void 0 ? _b : 0);
+        childHeight.current = {
+            first: firstChildHeight,
+            middle: Number((_d = (_c = getElementHeightWithMargins(secondChild)) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : firstChildHeight),
+            last: Number((_f = (_e = getElementHeightWithMargins(lastChild)) === null || _e === void 0 ? void 0 : _e.toFixed(2)) !== null && _f !== void 0 ? _f : firstChildHeight),
+        };
+    }, [visibleChildren.length]);
+    const onResize = React.useCallback(({ height }) => {
+        // Initial value returned by resize observer is 0
+        // So wait for the next one
+        if (height > 0) {
+            setIsMounted(true);
+        }
+        unstable_batchedUpdates(() => {
+            setScrollContainerHeight(height);
+            updateChildHeight();
+        });
+    }, [updateChildHeight]);
+    const [resizeRef, resizeObserver] = (0, index_1.useResizeObserver)(onResize);
+    // Find scrollable parent
+    // Needed only on init
+    (0, index_1.useLayoutEffect)(() => {
+        var _a;
+        const scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+        scrollContainer.current = scrollableParent;
+        resizeRef(scrollableParent);
+    }, [resizeRef]);
+    // Stop watching resize, when virtual scroll is unmounted
+    (0, index_1.useLayoutEffect)(() => {
+        return () => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    }, [resizeObserver]);
+    // Get child height when children available
+    (0, index_1.useLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
+    const updateVirtualScroll = React.useCallback(() => {
+        const scrollableContainer = getScrollableContainer();
+        if (!scrollableContainer) {
+            return;
+        }
+        const start = getNumberOfNodesInHeight(childHeight.current.middle, Math.round(scrollableContainer.scrollTop));
+        const visibleNodes = getVisibleNodeCount(childHeight.current.middle, start, itemsLength, scrollableContainer);
+        // If there are less items at the end than buffer size
+        // show more items at the start.
+        // Have boundaries for edge cases, e.g. 1 item length
+        const startIndex = Math.min(Math.max(0, start - bufferSize), Math.max(0, itemsLength - bufferSize * 2 - visibleNodes));
+        visibleIndex.current = { start: start, end: start + visibleNodes };
+        setStartNode(startIndex);
+        setVisibleNodeCount(visibleNodes);
+        if (!parentRef.current) {
+            return;
+        }
+        parentRef.current.style.transform = `translateY(${getTranslateValue(childHeight.current.middle, startIndex)}px)`;
+    }, [bufferSize, itemsLength]);
+    const onScroll = React.useCallback(() => {
+        updateVirtualScroll();
+    }, [updateVirtualScroll]);
+    const removeScrollListener = React.useCallback(() => {
+        var _a, _b;
+        if (!onScrollRef.current) {
+            return;
+        }
+        !scrollContainer.current ||
+            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)
+            ? (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener('scroll', onScrollRef.current)
+            : scrollContainer.current.removeEventListener('scroll', onScrollRef.current);
+    }, []);
+    // Add event listener to the scrollable container.
+    (0, index_1.useLayoutEffect)(() => {
+        var _a, _b;
+        removeScrollListener();
+        onScrollRef.current = onScroll;
+        if (!scrollContainer.current ||
+            scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)) {
+            (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener('scroll', onScroll);
+        }
+        else {
+            scrollContainer.current.addEventListener('scroll', onScroll);
+        }
+        return removeScrollListener;
+    }, [onScroll, removeScrollListener]);
+    (0, index_1.useLayoutEffect)(() => {
+        if (!isMounted) {
+            return;
+        }
+        const scrollableContainer = getScrollableContainer();
+        if (!scrollableContainer || scrollToIndex == null) {
+            return;
+        }
+        // if `scrollToIndex` is not visible, scroll to it
+        if (scrollToIndex > visibleIndex.current.end ||
+            scrollToIndex < visibleIndex.current.start) {
+            const indexDiff = scrollToIndex > visibleIndex.current.end
+                ? scrollToIndex - visibleIndex.current.end
+                : scrollToIndex - visibleIndex.current.start;
+            if (scrollToIndex === 0) {
+                scrollableContainer.scrollTo({ top: 0 });
+                return;
+            }
+            // If go down: add to the existing scrollTop needed height
+            // If go up: calculate the exact scroll top
+            scrollableContainer.scrollTo({
+                top: indexDiff > 0
+                    ? Math.ceil(scrollableContainer.scrollTop) +
+                        indexDiff * childHeight.current.middle
+                    : scrollToIndex * childHeight.current.middle,
+            });
+            // update visible index
+            const start = getNumberOfNodesInHeight(childHeight.current.middle, Math.round(scrollableContainer.scrollTop));
+            const visibleNodes = getVisibleNodeCount(childHeight.current.middle, start, itemsLength, scrollableContainer);
+            visibleIndex.current = { start: start, end: start + visibleNodes };
+        }
+        // if `scrollToIndex` is the first visible node
+        // ensure it is fully visible
+        if (scrollToIndex === visibleIndex.current.start) {
+            const roundedScrollTop = Math.round(scrollableContainer.scrollTop);
+            const diff = roundedScrollTop % childHeight.current.middle;
+            diff > 0 &&
+                scrollableContainer.scrollTo({
+                    top: roundedScrollTop - diff,
+                });
+            return;
+        }
+        // if `scrollToIndex` is the last visible node
+        // ensure it is fully visible
+        if (scrollToIndex === visibleIndex.current.end) {
+            const diff = (scrollableContainer.offsetHeight - childHeight.current.first) %
+                childHeight.current.middle;
+            const roundedScrollTop = Math.ceil(scrollableContainer.scrollTop);
+            const scrollTopMod = roundedScrollTop % childHeight.current.middle;
+            if (diff > 0 && scrollTopMod === 0) {
+                scrollableContainer.scrollTo({
+                    top: roundedScrollTop + childHeight.current.middle - diff,
+                });
+            }
+        }
+    }, [scrollToIndex, isMounted, itemsLength]);
+    (0, index_1.useLayoutEffect)(() => {
+        if (!scrollContainerHeight) {
+            return;
+        }
+        updateVirtualScroll();
+    }, [scrollContainerHeight, updateVirtualScroll]);
+    return {
+        outerProps: Object.assign({ style: Object.assign({ minBlockSize: itemsLength > 1
+                    ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
+                        childHeight.current.first +
+                        childHeight.current.last
+                    : childHeight.current.middle, minInlineSize: '100%' }, style) }, rest),
+        innerProps: {
+            style: { willChange: 'transform' },
+            ref: (0, index_1.mergeRefs)(parentRef), // convert object ref to callback ref for better types
+        },
+        visibleChildren,
+    };
+};
+exports.useVirtualization = useVirtualization;
+//# sourceMappingURL=VirtualScroll.js.map