@dreamcommerce/aurora 2.9.0-12 → 2.9.0-13

package/build/cjs/packages/aurora/src/components/scroll_sync/components/scroll_sync_container.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scroll_sync_container_hook = require('../hooks/scroll_sync_container_hook.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollSyncContainer = ({ children, id }) => {
+    const elementRef = React__default['default'].useRef(null);
+    scroll_sync_container_hook.useScrollSyncContainer(id, elementRef);
+    return React__default['default'].createElement(React__default['default'].Fragment, null, children(elementRef));
+};
+
+exports.ScrollSyncContainer = ScrollSyncContainer;
+exports.default = ScrollSyncContainer;
+//# sourceMappingURL=scroll_sync_container.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/components/scroll_sync_container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_sync_context.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const ScrollSyncContext = React.createContext({
+    registerContainer: () => { },
+    unregisterContainer: () => { },
+    hasContainer: () => false
+});
+const ScrollSyncContextProvider = ScrollSyncContext.Provider;
+
+exports.ScrollSyncContext = ScrollSyncContext;
+exports.ScrollSyncContextProvider = ScrollSyncContextProvider;
+//# sourceMappingURL=scroll_sync_context.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_sync_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_sync_provider.js

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var use_lazy_ref = require('../../../hooks/use_lazy_ref.js');
+var scroll_sync_context = require('./scroll_sync_context.js');
+var setup_scroll_syncer = require('./setup_scroll_syncer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const SCROLL_CONTAINER_ID_ATTRIBUTE = 'data-scroll-sync-id';
+class ScrollSyncer {
+    constructor() {
+        this.scrollContainers = [];
+        this.proportional = true;
+        this.vertical = true;
+        this.horizontal = true;
+        this.enabled = true;
+        this._addScrollEvent = (container) => {
+            container.$el.addEventListener('scroll', this._handleScrollEvent);
+        };
+        this._handleScrollEvent = (ev) => {
+            const $container = ev.target;
+            const containerId = $container.getAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE);
+            if (!containerId)
+                return;
+            const container = this._getContentContainer(containerId);
+            if (!container)
+                return;
+            window.requestAnimationFrame(() => this._syncScrollPositions(container));
+        };
+        this._removeScrollEvent = (container) => {
+            container.$el.removeEventListener('scroll', this._handleScrollEvent);
+        };
+        this._syncScrollPosition = (containerToSync, scrolledContainer) => {
+            const $scrolledContainerEl = scrolledContainer.$el;
+            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = $scrolledContainerEl;
+            const scrollTopOffset = scrollHeight - clientHeight;
+            const scrollLeftOffset = scrollWidth - clientWidth;
+            const paneHeight = containerToSync.$el.scrollHeight - clientHeight;
+            const paneWidth = containerToSync.$el.scrollWidth - clientWidth;
+            if (this.vertical && scrollTopOffset > 0) {
+                containerToSync.$el.scrollTop = this.proportional ? (paneHeight * scrollTop) / scrollTopOffset : scrollTop;
+            }
+            if (this.horizontal && scrollLeftOffset > 0) {
+                containerToSync.$el.scrollLeft = this.proportional ? (paneWidth * scrollLeft) / scrollLeftOffset : scrollLeft;
+            }
+        };
+        this._syncScrollPositions = (scrolledContainer) => {
+            this.scrollContainers.forEach((containerToSync) => {
+                if (containerToSync.id !== scrolledContainer.id) {
+                    this._syncScrollPosition(containerToSync, scrolledContainer);
+                }
+            });
+        };
+        this._getContentContainer = (id) => {
+            return this.scrollContainers.find((currContainer) => currContainer.id === id);
+        };
+    }
+    registerContainer(container) {
+        container.$el.setAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE, container.id);
+        this.scrollContainers.push(container);
+        this._addScrollEvent(container);
+    }
+    unregisterContainer(id) {
+        const container = this._getContentContainer(id);
+        if (!container)
+            return;
+        this.scrollContainers = this.scrollContainers.filter((currContainer) => container.id !== currContainer.id);
+        container.$el.removeAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE);
+        this._removeScrollEvent(container);
+    }
+    hasContainer(id) {
+        return !!this.scrollContainers.find((container) => container.id === id);
+    }
+    dispose() {
+        // unregister all events
+    }
+}
+const ScrollSyncProvider = ({ children }) => {
+    const scrollSyncerSetup = use_lazy_ref.useLazyRef(() => setup_scroll_syncer.setupScrollSyncer());
+    const value = {
+        registerContainer(container) {
+            scrollSyncerSetup.current.scrollSyncerApi.registerContainer(container);
+        },
+        unregisterContainer(id) {
+            scrollSyncerSetup.current.scrollSyncerApi.unregisterContainer(id);
+        },
+        hasContainer(id) {
+            return scrollSyncerSetup.current.scrollSyncerApi.hasContainer(id);
+        }
+    };
+    return React__default['default'].createElement(scroll_sync_context.ScrollSyncContextProvider, { value: value }, children);
+};
+
+exports.ScrollSyncProvider = ScrollSyncProvider;
+exports.ScrollSyncer = ScrollSyncer;
+//# sourceMappingURL=scroll_sync_provider.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/context/scroll_sync_provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/context/setup_scroll_syncer.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var scroll_sync_provider = require('./scroll_sync_provider.js');
+
+const setupScrollSyncer = () => {
+    return { scrollSyncerApi: new scroll_sync_provider.ScrollSyncer() };
+};
+
+exports.setupScrollSyncer = setupScrollSyncer;
+//# sourceMappingURL=setup_scroll_syncer.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/context/setup_scroll_syncer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_container_hook.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scroll_sync_hook = require('./scroll_sync_hook.js');
+
+const useScrollSyncContainer = (id, ref) => {
+    const scrollSyncApi = scroll_sync_hook.useScrollSync();
+    React.useEffect(() => {
+        if (!ref.current)
+            return;
+        if (!scrollSyncApi.hasContainer(id))
+            scrollSyncApi.registerContainer({ id, $el: ref.current });
+        return () => scrollSyncApi.unregisterContainer(id);
+    }, []);
+};
+
+exports.useScrollSyncContainer = useScrollSyncContainer;
+//# sourceMappingURL=scroll_sync_container_hook.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_container_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_hook.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scroll_sync_context = require('../context/scroll_sync_context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const useScrollSync = () => {
+    const context = React__default['default'].useContext(scroll_sync_context.ScrollSyncContext);
+    if (!context) {
+        throw new Error('useScrollSync must be used within a ScrollSyncContextProvider');
+    }
+    return context;
+};
+
+exports.useScrollSync = useScrollSync;
+//# sourceMappingURL=scroll_sync_hook.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/scroll_sync/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scroll_sync_provider = require('./context/scroll_sync_provider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollSync = ({ children }) => {
+    return React__default['default'].createElement(scroll_sync_provider.ScrollSyncProvider, null, children);
+};
+
+exports.ScrollSync = ScrollSync;
+exports.default = ScrollSync;
+//# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/scroll_sync/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/index.js

@@ -83,6 +83,8 @@ var index$J = require('./components/with_loader/index.js');
 var values_syncer = require('./components/controls/components/values_syncer.js');
 var index$N = require('./components/tree/index.js');
 var tree_node = require('./components/tree/components/tree_node.js');
+var scroll_sync_container = require('./components/scroll_sync/components/scroll_sync_container.js');
+var index$O = require('./components/scroll_sync/index.js');
 
 
 
@@ -169,4 +171,6 @@ exports.WithLoader = index$J['default'];
 exports.ValuesSyncer = values_syncer['default'];
 exports.Tree = index$N.Tree;
 exports.TreeNode = tree_node.TreeNode;
+exports.ScrollSyncContainer = scroll_sync_container.ScrollSyncContainer;
+exports.ScrollSync = index$O.ScrollSync;
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/scroll_sync/components/scroll_sync_container.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type TScrollSyncContainerProps = {
+    id: string;
+    children: (elementRef: React.Ref<HTMLElement>) => React.ReactNode;
+};
+export declare const ScrollSyncContainer: ({ children, id }: TScrollSyncContainerProps) => JSX.Element;
+export default ScrollSyncContainer;

package/build/esm/packages/aurora/src/components/scroll_sync/components/scroll_sync_container.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useScrollSyncContainer } from '../hooks/scroll_sync_container_hook.js';
+
+const ScrollSyncContainer = ({ children, id }) => {
+    const elementRef = React.useRef(null);
+    useScrollSyncContainer(id, elementRef);
+    return React.createElement(React.Fragment, null, children(elementRef));
+};
+
+export default ScrollSyncContainer;
+export { ScrollSyncContainer };
+//# sourceMappingURL=scroll_sync_container.js.map

package/build/esm/packages/aurora/src/components/scroll_sync/components/scroll_sync_container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_sync_context.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type TScrollSyncContainer = {
+    id: string;
+    $el: HTMLElement;
+};
+export interface IScrollSyncContext {
+    registerContainer: (container: TScrollSyncContainer) => void;
+    unregisterContainer: (id: string) => void;
+    hasContainer: (id: string) => boolean;
+}
+export declare const ScrollSyncContext: import("react").Context<IScrollSyncContext>;
+export declare const ScrollSyncContextProvider: import("react").Provider<IScrollSyncContext>;

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_sync_context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+const ScrollSyncContext = createContext({
+    registerContainer: () => { },
+    unregisterContainer: () => { },
+    hasContainer: () => false
+});
+const ScrollSyncContextProvider = ScrollSyncContext.Provider;
+
+export { ScrollSyncContext, ScrollSyncContextProvider };
+//# sourceMappingURL=scroll_sync_context.js.map

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_sync_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_sync_provider.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { TScrollSyncContainer } from "./scroll_sync_context";
+export declare class ScrollSyncer {
+    private scrollContainers;
+    proportional: boolean;
+    vertical: boolean;
+    horizontal: boolean;
+    enabled: boolean;
+    constructor();
+    registerContainer(container: TScrollSyncContainer): void;
+    unregisterContainer(id: string): void;
+    private _addScrollEvent;
+    private _handleScrollEvent;
+    private _removeScrollEvent;
+    private _syncScrollPosition;
+    private _syncScrollPositions;
+    private _getContentContainer;
+    hasContainer(id: string): boolean;
+    dispose(): void;
+}
+export declare const ScrollSyncProvider: ({ children }: PropsWithChildren<{}>) => JSX.Element;

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_sync_provider.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useLazyRef } from '../../../hooks/use_lazy_ref.js';
+import { ScrollSyncContextProvider } from './scroll_sync_context.js';
+import { setupScrollSyncer } from './setup_scroll_syncer.js';
+
+const SCROLL_CONTAINER_ID_ATTRIBUTE = 'data-scroll-sync-id';
+class ScrollSyncer {
+    constructor() {
+        this.scrollContainers = [];
+        this.proportional = true;
+        this.vertical = true;
+        this.horizontal = true;
+        this.enabled = true;
+        this._addScrollEvent = (container) => {
+            container.$el.addEventListener('scroll', this._handleScrollEvent);
+        };
+        this._handleScrollEvent = (ev) => {
+            const $container = ev.target;
+            const containerId = $container.getAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE);
+            if (!containerId)
+                return;
+            const container = this._getContentContainer(containerId);
+            if (!container)
+                return;
+            window.requestAnimationFrame(() => this._syncScrollPositions(container));
+        };
+        this._removeScrollEvent = (container) => {
+            container.$el.removeEventListener('scroll', this._handleScrollEvent);
+        };
+        this._syncScrollPosition = (containerToSync, scrolledContainer) => {
+            const $scrolledContainerEl = scrolledContainer.$el;
+            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = $scrolledContainerEl;
+            const scrollTopOffset = scrollHeight - clientHeight;
+            const scrollLeftOffset = scrollWidth - clientWidth;
+            const paneHeight = containerToSync.$el.scrollHeight - clientHeight;
+            const paneWidth = containerToSync.$el.scrollWidth - clientWidth;
+            if (this.vertical && scrollTopOffset > 0) {
+                containerToSync.$el.scrollTop = this.proportional ? (paneHeight * scrollTop) / scrollTopOffset : scrollTop;
+            }
+            if (this.horizontal && scrollLeftOffset > 0) {
+                containerToSync.$el.scrollLeft = this.proportional ? (paneWidth * scrollLeft) / scrollLeftOffset : scrollLeft;
+            }
+        };
+        this._syncScrollPositions = (scrolledContainer) => {
+            this.scrollContainers.forEach((containerToSync) => {
+                if (containerToSync.id !== scrolledContainer.id) {
+                    this._syncScrollPosition(containerToSync, scrolledContainer);
+                }
+            });
+        };
+        this._getContentContainer = (id) => {
+            return this.scrollContainers.find((currContainer) => currContainer.id === id);
+        };
+    }
+    registerContainer(container) {
+        container.$el.setAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE, container.id);
+        this.scrollContainers.push(container);
+        this._addScrollEvent(container);
+    }
+    unregisterContainer(id) {
+        const container = this._getContentContainer(id);
+        if (!container)
+            return;
+        this.scrollContainers = this.scrollContainers.filter((currContainer) => container.id !== currContainer.id);
+        container.$el.removeAttribute(SCROLL_CONTAINER_ID_ATTRIBUTE);
+        this._removeScrollEvent(container);
+    }
+    hasContainer(id) {
+        return !!this.scrollContainers.find((container) => container.id === id);
+    }
+    dispose() {
+        // unregister all events
+    }
+}
+const ScrollSyncProvider = ({ children }) => {
+    const scrollSyncerSetup = useLazyRef(() => setupScrollSyncer());
+    const value = {
+        registerContainer(container) {
+            scrollSyncerSetup.current.scrollSyncerApi.registerContainer(container);
+        },
+        unregisterContainer(id) {
+            scrollSyncerSetup.current.scrollSyncerApi.unregisterContainer(id);
+        },
+        hasContainer(id) {
+            return scrollSyncerSetup.current.scrollSyncerApi.hasContainer(id);
+        }
+    };
+    return React.createElement(ScrollSyncContextProvider, { value: value }, children);
+};
+
+export { ScrollSyncProvider, ScrollSyncer };
+//# sourceMappingURL=scroll_sync_provider.js.map

package/build/esm/packages/aurora/src/components/scroll_sync/context/scroll_sync_provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/scroll_sync/context/setup_scroll_syncer.d.ts

@@ -0,0 +1,4 @@
+import { ScrollSyncer } from "./scroll_sync_provider";
+export declare const setupScrollSyncer: () => {
+    scrollSyncerApi: ScrollSyncer;
+};

package/build/esm/packages/aurora/src/components/scroll_sync/context/setup_scroll_syncer.js

@@ -0,0 +1,8 @@
+import { ScrollSyncer } from './scroll_sync_provider.js';
+
+const setupScrollSyncer = () => {
+    return { scrollSyncerApi: new ScrollSyncer() };
+};
+
+export { setupScrollSyncer };
+//# sourceMappingURL=setup_scroll_syncer.js.map

package/build/esm/packages/aurora/src/components/scroll_sync/context/setup_scroll_syncer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_container_hook.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useScrollSyncContainer: (id: string, ref: React.RefObject<HTMLElement>) => void;

package/build/esm/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_container_hook.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useScrollSync } from './scroll_sync_hook.js';
+
+const useScrollSyncContainer = (id, ref) => {
+    const scrollSyncApi = useScrollSync();
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        if (!scrollSyncApi.hasContainer(id))
+            scrollSyncApi.registerContainer({ id, $el: ref.current });
+        return () => scrollSyncApi.unregisterContainer(id);
+    }, []);
+};
+
+export { useScrollSyncContainer };
+//# sourceMappingURL=scroll_sync_container_hook.js.map

package/build/esm/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_container_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_hook.d.ts

@@ -0,0 +1 @@
+export declare const useScrollSync: () => import("../context/scroll_sync_context").IScrollSyncContext;

package/build/esm/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_hook.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ScrollSyncContext } from '../context/scroll_sync_context.js';
+
+const useScrollSync = () => {
+    const context = React.useContext(ScrollSyncContext);
+    if (!context) {
+        throw new Error('useScrollSync must be used within a ScrollSyncContextProvider');
+    }
+    return context;
+};
+
+export { useScrollSync };
+//# sourceMappingURL=scroll_sync_hook.js.map

package/build/esm/packages/aurora/src/components/scroll_sync/hooks/scroll_sync_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/scroll_sync/index.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export declare const ScrollSync: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+export default ScrollSync;

package/build/esm/packages/aurora/src/components/scroll_sync/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ScrollSyncProvider } from './context/scroll_sync_provider.js';
+
+const ScrollSync = ({ children }) => {
+    return React.createElement(ScrollSyncProvider, null, children);
+};
+
+export default ScrollSync;
+export { ScrollSync };
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/scroll_sync/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/index.d.ts

@@ -107,13 +107,15 @@ import XhrImagePicker from "./components/xhr_image_picker";
 import ValuesSyncer from "./components/controls/components/values_syncer";
 import { Tree } from "./components/tree";
 import { TreeNode } from "./components/tree/components/tree_node";
+import { ScrollSyncContainer } from "./components/scroll_sync/components/scroll_sync_container";
+import { ScrollSync } from "./components/scroll_sync";
 /**
  * export hooks
  */
 /**
  * export components
  */
-export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, ControlXhrImagePicker, Heading, Typography, Modal, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideSubHeader, SlideContent, SlideFooter, XhrImagePicker, ValuesSyncer, Tree, TreeNode };
+export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, ControlXhrImagePicker, Heading, Typography, Modal, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideSubHeader, SlideContent, SlideFooter, XhrImagePicker, ValuesSyncer, Tree, TreeNode, ScrollSyncContainer, ScrollSync };
 /**
  * export types
  */

package/build/esm/packages/aurora/src/index.js

@@ -79,4 +79,6 @@ export { default as WithLoader } from './components/with_loader/index.js';
 export { default as ValuesSyncer } from './components/controls/components/values_syncer.js';
 export { Tree } from './components/tree/index.js';
 export { TreeNode } from './components/tree/components/tree_node.js';
+export { ScrollSyncContainer } from './components/scroll_sync/components/scroll_sync_container.js';
+export { ScrollSync } from './components/scroll_sync/index.js';
 //# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.9.0-12",
+  "version": "2.9.0-13",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",