@cleartrip/ct-design-scroll-container 5.26.0-SNAPSHOT-native-main.0 → 5.26.0

package/dist/ct-design-scroll-container.umd.js

@@ -1,823 +1,516 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-style-manager'), require('@cleartrip/ct-design-common-utils')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-style-manager', '@cleartrip/ct-design-common-utils'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemScrollContainer = {}, global.jsxRuntime, global.React, global.ctDesignStyleManager, global.ctDesignCommonUtils));
-})(this, (function (exports, jsxRuntime, react, ctDesignStyleManager, ctDesignCommonUtils) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-style-manager'), require('eventemitter3'), require('@cleartrip/ct-design-common-utils')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-style-manager', 'eventemitter3', '@cleartrip/ct-design-common-utils'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemScrollContainer = {}, global.jsxRuntime, global.React, global.ctDesignStyleManager, global.EventEmitter, global.ctDesignCommonUtils));
+})(this, (function (exports, jsxRuntime, react, ctDesignStyleManager, EventEmitter, ctDesignCommonUtils) { 'use strict';
 
-  var eventemitter3Exports = {};
-  var eventemitter3 = {
-    get exports(){ return eventemitter3Exports; },
-    set exports(v){ eventemitter3Exports = v; },
-  };
+    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-  (function (module) {
+    var EventEmitter__default = /*#__PURE__*/_interopDefault(EventEmitter);
 
-    var has = Object.prototype.hasOwnProperty,
-      prefix = '~';
+    exports.EVENT_NAMES = void 0;
+    (function (EVENT_NAMES) {
+        EVENT_NAMES["SCROLL_VIEW"] = "scroll-view";
+        EVENT_NAMES["SCROLL_INTO_VIEW"] = "scroll-into-view";
+    })(exports.EVENT_NAMES || (exports.EVENT_NAMES = {}));
 
-    /**
-     * Constructor to create a storage for our `EE` objects.
-     * An `Events` instance is a plain object whose properties are event names.
-     *
-     * @constructor
-     * @private
-     */
-    function Events() {}
-
-    //
-    // We try to not inherit from `Object.prototype`. In some engines creating an
-    // instance in this way is faster than calling `Object.create(null)` directly.
-    // If `Object.create(null)` is not supported we prefix the event names with a
-    // character to make sure that the built-in object properties are not
-    // overridden or used as an attack vector.
-    //
-    if (Object.create) {
-      Events.prototype = Object.create(null);
-
-      //
-      // This hack is needed because the `__proto__` property is still inherited in
-      // some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
-      //
-      if (!new Events().__proto__) prefix = false;
-    }
-
-    /**
-     * Representation of a single event listener.
-     *
-     * @param {Function} fn The listener function.
-     * @param {*} context The context to invoke the listener with.
-     * @param {Boolean} [once=false] Specify if the listener is a one-time listener.
-     * @constructor
-     * @private
-     */
-    function EE(fn, context, once) {
-      this.fn = fn;
-      this.context = context;
-      this.once = once || false;
-    }
-
-    /**
-     * Add a listener for a given event.
-     *
-     * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
-     * @param {(String|Symbol)} event The event name.
-     * @param {Function} fn The listener function.
-     * @param {*} context The context to invoke the listener with.
-     * @param {Boolean} once Specify if the listener is a one-time listener.
-     * @returns {EventEmitter}
-     * @private
-     */
-    function addListener(emitter, event, fn, context, once) {
-      if (typeof fn !== 'function') {
-        throw new TypeError('The listener must be a function');
-      }
-      var listener = new EE(fn, context || emitter, once),
-        evt = prefix ? prefix + event : event;
-      if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);else emitter._events[evt] = [emitter._events[evt], listener];
-      return emitter;
-    }
-
-    /**
-     * Clear event by name.
-     *
-     * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
-     * @param {(String|Symbol)} evt The Event name.
-     * @private
-     */
-    function clearEvent(emitter, evt) {
-      if (--emitter._eventsCount === 0) emitter._events = new Events();else delete emitter._events[evt];
-    }
-
-    /**
-     * Minimal `EventEmitter` interface that is molded against the Node.js
-     * `EventEmitter` interface.
-     *
-     * @constructor
-     * @public
-     */
-    function EventEmitter() {
-      this._events = new Events();
-      this._eventsCount = 0;
+    class CustomDocumentEvent {
+        constructor() {
+            this.eventMap = new Map();
+            this.emitter = new EventEmitter__default.default();
+        }
+        addEventListener(event, listener) {
+            if (event === exports.EVENT_NAMES.SCROLL_VIEW) {
+                const _listener = listener;
+                const eventHandler = () => {
+                    _listener([{ x: window.scrollX, y: window.scrollY }]);
+                };
+                window.addEventListener('scroll', eventHandler);
+                this.eventMap.set(listener, eventHandler);
+            }
+            else {
+                this.emitter.addListener(event, listener);
+                this.eventMap.set(listener, listener);
+            }
+        }
+        removeEventListener(event, listener) {
+            if (event === exports.EVENT_NAMES.SCROLL_VIEW) {
+                const eventHandler = this.eventMap.get(listener);
+                if (eventHandler) {
+                    window.removeEventListener('scroll', eventHandler);
+                    this.eventMap.delete(listener);
+                }
+            }
+            else {
+                this.emitter.removeListener(event, listener);
+            }
+        }
+        dispose() {
+            this.emitter.removeAllListeners();
+        }
+        emit(event, data) {
+            return this.emitter.emit(event, data);
+        }
     }
-
-    /**
-     * Return an array listing the events for which the emitter has registered
-     * listeners.
-     *
-     * @returns {Array}
-     * @public
-     */
-    EventEmitter.prototype.eventNames = function eventNames() {
-      var names = [],
-        events,
-        name;
-      if (this._eventsCount === 0) return names;
-      for (name in events = this._events) {
-        if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
-      }
-      if (Object.getOwnPropertySymbols) {
-        return names.concat(Object.getOwnPropertySymbols(events));
-      }
-      return names;
-    };
-
-    /**
-     * Return the listeners registered for a given event.
-     *
-     * @param {(String|Symbol)} event The event name.
-     * @returns {Array} The registered listeners.
-     * @public
-     */
-    EventEmitter.prototype.listeners = function listeners(event) {
-      var evt = prefix ? prefix + event : event,
-        handlers = this._events[evt];
-      if (!handlers) return [];
-      if (handlers.fn) return [handlers.fn];
-      for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
-        ee[i] = handlers[i].fn;
-      }
-      return ee;
+    const scrollEvent = new CustomDocumentEvent();
+
+    const staticScrollStyles = ctDesignStyleManager.makeStyles(() => ({
+        viewport: {
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+            minWidth: 0,
+            width: '100%',
+            position: 'relative',
+            WebkitOverflowScrolling: 'touch',
+        },
+        viewportVertical: {
+            flex: 1,
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            overscrollBehavior: 'contain',
+        },
+        viewportHorizontal: {
+            flex: 1,
+            minWidth: 0,
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            alignItems: 'flex-start',
+        },
+        contentVertical: {
+            display: 'flex',
+            flexDirection: 'column',
+            flexShrink: 0,
+            width: '100%',
+        },
+        contentHorizontal: {
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'nowrap',
+            flexShrink: 0,
+            width: 'max-content',
+            minWidth: '100%',
+        },
+        hideScrollbar: {
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+        },
+        pagingSnapVertical: { scrollSnapType: 'y mandatory' },
+        pagingSnapHorizontal: { scrollSnapType: 'x mandatory' },
+        viewportVerticalNested: {
+            flex: 1,
+            minHeight: 0,
+            height: '100%',
+            maxHeight: '100%',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            overscrollBehavior: 'auto',
+        },
+    }));
+    const getScrollableParent = (node) => {
+        var _a;
+        let parent = (_a = node === null || node === void 0 ? void 0 : node.parentElement) !== null && _a !== void 0 ? _a : null;
+        while (parent) {
+            const { overflowY } = getComputedStyle(parent);
+            if (/(auto|scroll|overlay)/.test(overflowY) && parent.scrollHeight > parent.clientHeight + 1) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
     };
-
-    /**
-     * Return the number of listeners listening to a given event.
-     *
-     * @param {(String|Symbol)} event The event name.
-     * @returns {Number} The number of listeners.
-     * @public
-     */
-    EventEmitter.prototype.listenerCount = function listenerCount(event) {
-      var evt = prefix ? prefix + event : event,
-        listeners = this._events[evt];
-      if (!listeners) return 0;
-      if (listeners.fn) return 1;
-      return listeners.length;
+    const emitScrollEvent = (target) => ({
+        nativeEvent: {
+            contentOffset: {
+                x: target.scrollLeft,
+                y: target.scrollTop,
+            },
+            layoutMeasurement: {
+                height: target.clientHeight,
+                width: target.clientWidth,
+            },
+            contentSize: {
+                height: target.scrollHeight,
+                width: target.scrollWidth,
+            },
+        },
+    });
+    const ScrollContainer = react.forwardRef(({ children, styleConfig, onScroll, horizontal = false, scrollEventThrottle = 0, showsVerticalScrollIndicator = false, showsHorizontalScrollIndicator = true, width, onIndexChange, currentActiveIndex, pagingEnabled = false, snapToOffsets, totalItemsLength, contentContainerStyle, onLayout, attachScrollEvent = false, nestedScrollEnabled = false, stickyHeaderIndices: _stickyHeaderIndices, removeClippedSubviews: _removeClippedSubviews, isVisible: _isVisible, keyboardShouldPersistTaps: _keyboardShouldPersistTaps, bounces: _bounces, id, onClick, onMouseEnter, onMouseLeave, onTransitionEnd, onTouchStart, onTouchEnd, onTouchCancel, onTouchMove, }, ref) => {
+        const localRef = react.useRef(null);
+        const lastScrollEventTimeRef = react.useRef(0);
+        const handleFocus = react.useCallback(() => {
+            var _a;
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, []);
+        const handleGetBoundingRect = react.useCallback((callback) => {
+            var _a;
+            const rect = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (rect) {
+                callback === null || callback === void 0 ? void 0 : callback({
+                    x: rect.x,
+                    y: rect.y,
+                    width: rect.width,
+                    height: rect.height,
+                });
+            }
+        }, []);
+        const handleAddEventListener = react.useCallback((type, listener, options) => {
+            var _a;
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener, options);
+        }, []);
+        const handleRemoveEventListener = react.useCallback((type, listener, options) => {
+            var _a;
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener, options);
+        }, []);
+        react.useImperativeHandle(ref, () => {
+            var _a;
+            return ({
+                getScrollableNode: () => null,
+                focus: handleFocus,
+                getBoundingRectWithCallback: handleGetBoundingRect,
+                getElementRef: () => localRef,
+                measure: (callback) => {
+                    var _a;
+                    const rect = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                    if (!rect)
+                        return;
+                    callback(rect.x, rect.y, rect.width, rect.height, rect.x, rect.y);
+                },
+                classList: {
+                    add: (className) => {
+                        var _a;
+                        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.classList.add(className);
+                    },
+                },
+                addEventListener: handleAddEventListener,
+                removeEventListener: handleRemoveEventListener,
+                style: (((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.style) || {}),
+                scrollTo: (x, y) => {
+                    const node = localRef.current;
+                    if (!node)
+                        return;
+                    node.scrollTo({ left: x, top: y, behavior: 'auto' });
+                },
+                scrollToEnd: () => {
+                    const node = localRef.current;
+                    if (!node)
+                        return;
+                    if (horizontal) {
+                        node.scrollTo({
+                            left: node.scrollWidth - node.clientWidth,
+                            top: 0,
+                            behavior: 'auto',
+                        });
+                    }
+                    else {
+                        node.scrollTo({
+                            left: 0,
+                            top: node.scrollHeight - node.clientHeight,
+                            behavior: 'auto',
+                        });
+                    }
+                },
+                scrollById: (id, animated = true) => {
+                    const target = document.getElementById(id);
+                    target === null || target === void 0 ? void 0 : target.scrollIntoView({ behavior: animated ? 'smooth' : 'auto', block: 'nearest', inline: 'nearest' });
+                },
+                get scrollLeft() {
+                    var _a, _b;
+                    return (_b = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+                },
+                set scrollLeft(value) {
+                    if (localRef.current) {
+                        localRef.current.scrollLeft = value;
+                    }
+                },
+                get scrollTop() {
+                    var _a, _b;
+                    return (_b = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
+                },
+                set scrollTop(value) {
+                    if (localRef.current) {
+                        localRef.current.scrollTop = value;
+                    }
+                },
+            });
+        }, [handleFocus, handleGetBoundingRect, handleAddEventListener, handleRemoveEventListener, horizontal]);
+        const { root: rootStyles = [] } = styleConfig || {};
+        const contentStyles = contentContainerStyle !== null && contentContainerStyle !== void 0 ? contentContainerStyle : [];
+        const hideHorizontalScrollbar = horizontal && showsHorizontalScrollIndicator === false;
+        const hideVerticalScrollbar = !horizontal && showsVerticalScrollIndicator === false;
+        const viewportClassName = ctDesignStyleManager.useWebMergeStyles([
+            staticScrollStyles.viewport,
+            horizontal
+                ? staticScrollStyles.viewportHorizontal
+                : nestedScrollEnabled
+                    ? staticScrollStyles.viewportVerticalNested
+                    : staticScrollStyles.viewportVertical,
+            ...(hideHorizontalScrollbar || hideVerticalScrollbar ? [staticScrollStyles.hideScrollbar] : []),
+            ...(pagingEnabled
+                ? [horizontal ? staticScrollStyles.pagingSnapHorizontal : staticScrollStyles.pagingSnapVertical]
+                : []),
+            ...rootStyles,
+        ], [horizontal, nestedScrollEnabled, hideHorizontalScrollbar, hideVerticalScrollbar, pagingEnabled, rootStyles]);
+        const contentClassName = ctDesignStyleManager.useWebMergeStyles([horizontal ? staticScrollStyles.contentHorizontal : staticScrollStyles.contentVertical, ...contentStyles], [horizontal, contentStyles]);
+        const fireScroll = react.useCallback((target) => {
+            const event = emitScrollEvent(target);
+            if (scrollEventThrottle > 0) {
+                const now = Date.now();
+                if (now - lastScrollEventTimeRef.current < scrollEventThrottle) {
+                    return;
+                }
+                lastScrollEventTimeRef.current = now;
+            }
+            if (attachScrollEvent) {
+                scrollEvent.emit('scroll-view', [event.nativeEvent.contentOffset]);
+            }
+            onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
+            if (horizontal && width && totalItemsLength && onIndexChange) {
+                const offsetX = target.scrollLeft;
+                const visibleWidth = target.clientWidth;
+                const tolerance = 2;
+                let index;
+                if (offsetX <= tolerance) {
+                    index = 0;
+                }
+                else {
+                    const centerX = offsetX + visibleWidth / 2;
+                    index = Math.max(0, Math.min(totalItemsLength - 1, Math.round((centerX - width / 2) / width)));
+                }
+                onIndexChange(index);
+            }
+        }, [attachScrollEvent, horizontal, onIndexChange, onScroll, scrollEventThrottle, totalItemsLength, width]);
+        const handleScroll = react.useCallback((e) => {
+            fireScroll(e.currentTarget);
+        }, [fireScroll]);
+        const handleNestedWheel = react.useCallback((e) => {
+            if (!nestedScrollEnabled || horizontal) {
+                return;
+            }
+            const node = e.currentTarget;
+            const hasOverflow = node.scrollHeight > node.clientHeight + 1;
+            const maxScrollTop = node.scrollHeight - node.clientHeight;
+            const atTop = node.scrollTop <= 0;
+            const atBottom = node.scrollTop >= maxScrollTop - 1;
+            const scrollingUp = e.deltaY < 0;
+            const scrollingDown = e.deltaY > 0;
+            const shouldForward = !hasOverflow || (scrollingUp && atTop) || (scrollingDown && atBottom);
+            if (!shouldForward) {
+                return;
+            }
+            const scrollableParent = getScrollableParent(node);
+            if (!scrollableParent) {
+                return;
+            }
+            e.preventDefault();
+            scrollableParent.scrollTop += e.deltaY;
+        }, [horizontal, nestedScrollEnabled]);
+        react.useLayoutEffect(() => {
+            const node = localRef.current;
+            if (!node || !onLayout)
+                return;
+            onLayout({
+                layout: {
+                    height: node.clientHeight,
+                    width: node.clientWidth,
+                    x: node.getBoundingClientRect().x,
+                    y: node.getBoundingClientRect().y,
+                },
+            });
+        }, [onLayout]);
+        react.useEffect(() => {
+            const node = localRef.current;
+            if (!node || typeof currentActiveIndex !== 'number' || currentActiveIndex < 0 || !width) {
+                return;
+            }
+            node.scrollTo({
+                left: horizontal ? currentActiveIndex * (width + 16) : 0,
+                top: horizontal ? 0 : currentActiveIndex * (width + 16),
+                behavior: 'smooth',
+            });
+        }, [currentActiveIndex, horizontal, width]);
+        react.useEffect(() => {
+            if (!(snapToOffsets === null || snapToOffsets === void 0 ? void 0 : snapToOffsets.length) || !localRef.current)
+                return;
+        }, [snapToOffsets]);
+        return (jsxRuntime.jsx("div", { ref: localRef, id: id, className: viewportClassName, onScroll: handleScroll, onWheel: nestedScrollEnabled && !horizontal ? handleNestedWheel : undefined, onClick: (event) => onClick === null || onClick === void 0 ? void 0 : onClick({
+                stopPropagation: () => event.stopPropagation(),
+                preventDefault: () => event.preventDefault(),
+                nativeEvent: {
+                    locationX: event.clientX,
+                    locationY: event.clientY,
+                },
+            }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTransitionEnd: onTransitionEnd, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onTouchCancel: onTouchCancel, onTouchMove: onTouchMove, children: jsxRuntime.jsx("div", { className: contentClassName, children: children }) }));
+    });
+    ScrollContainer.displayName = 'ScrollContainer';
+
+    const ScrollContext = react.createContext({
+        isScrolling: false,
+        refs: {},
+        observableChildRefs: [],
+        parentScrollAvailable: false,
+        horizontal: false,
+        scrollToBottom: () => {
+        },
+    });
+    const ScrollContextProvider = ({ children, isScrolling, refs, scrollTo, scrollToSkip, isScrollToScrolling, observableChildRefs, horizontal, scrollToBottom, }) => {
+        return (jsxRuntime.jsx(ScrollContext.Provider, { value: {
+                observableChildRefs,
+                isScrolling,
+                refs,
+                scrollTo,
+                scrollToSkip,
+                isScrollToScrolling,
+                parentScrollAvailable: true,
+                horizontal,
+                scrollToBottom,
+            }, children: children }));
     };
-
-    /**
-     * Calls each of the listeners registered for a given event.
-     *
-     * @param {(String|Symbol)} event The event name.
-     * @returns {Boolean} `true` if the event had listeners, else `false`.
-     * @public
-     */
-    EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
-      var evt = prefix ? prefix + event : event;
-      if (!this._events[evt]) return false;
-      var listeners = this._events[evt],
-        len = arguments.length,
-        args,
-        i;
-      if (listeners.fn) {
-        if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);
-        switch (len) {
-          case 1:
-            return listeners.fn.call(listeners.context), true;
-          case 2:
-            return listeners.fn.call(listeners.context, a1), true;
-          case 3:
-            return listeners.fn.call(listeners.context, a1, a2), true;
-          case 4:
-            return listeners.fn.call(listeners.context, a1, a2, a3), true;
-          case 5:
-            return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
-          case 6:
-            return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
+    const useGetScrolling = () => {
+        const context = react.useContext(ScrollContext);
+        if (!context) {
+            return { isScrolling: false, isScrollToScrolling: false, scrollParentAvailable: false, horizontal: false };
         }
-        for (i = 1, args = new Array(len - 1); i < len; i++) {
-          args[i - 1] = arguments[i];
-        }
-        listeners.fn.apply(listeners.context, args);
-      } else {
-        var length = listeners.length,
-          j;
-        for (i = 0; i < length; i++) {
-          if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);
-          switch (len) {
-            case 1:
-              listeners[i].fn.call(listeners[i].context);
-              break;
-            case 2:
-              listeners[i].fn.call(listeners[i].context, a1);
-              break;
-            case 3:
-              listeners[i].fn.call(listeners[i].context, a1, a2);
-              break;
-            case 4:
-              listeners[i].fn.call(listeners[i].context, a1, a2, a3);
-              break;
-            default:
-              if (!args) for (j = 1, args = new Array(len - 1); j < len; j++) {
-                args[j - 1] = arguments[j];
-              }
-              listeners[i].fn.apply(listeners[i].context, args);
-          }
-        }
-      }
-      return true;
+        return {
+            isScrolling: context.isScrolling,
+            isScrollToScrolling: context.isScrollToScrolling,
+            scrollParentAvailable: context.parentScrollAvailable,
+            horizontal: context.horizontal,
+            isList: context.isList,
+        };
     };
-
-    /**
-     * Add a listener for a given event.
-     *
-     * @param {(String|Symbol)} event The event name.
-     * @param {Function} fn The listener function.
-     * @param {*} [context=this] The context to invoke the listener with.
-     * @returns {EventEmitter} `this`.
-     * @public
-     */
-    EventEmitter.prototype.on = function on(event, fn, context) {
-      return addListener(this, event, fn, context, false);
+    const useGetRefMaps = () => {
+        const { refs } = react.useContext(ScrollContext);
+        return refs;
+    };
+    const useGetScrollToLast = () => {
+        const { scrollToBottom } = react.useContext(ScrollContext);
+        return {
+            scrollToBottom,
+        };
+    };
+    const useAddObservableChild = (observableChildMethod) => {
+        const context = react.useContext(ScrollContext);
+        const insideScrollParent = !!context;
+        const { observableChildRefs } = context || { observableChildRefs: [] };
+        react.useEffect(() => {
+            const observableChild = observableChildMethod();
+            const index = insideScrollParent ? observableChildRefs.push(observableChild) : 0;
+            return () => {
+                if (insideScrollParent) {
+                    observableChildRefs.splice(index - 1, 1);
+                }
+            };
+        }, [observableChildRefs, insideScrollParent]);
+    };
+    const useObserver = () => {
+        const { observableChildRefs } = react.useContext(ScrollContext);
+        return observableChildRefs;
     };
 
-    /**
-     * Add a one-time listener for a given event.
-     *
-     * @param {(String|Symbol)} event The event name.
-     * @param {Function} fn The listener function.
-     * @param {*} [context=this] The context to invoke the listener with.
-     * @returns {EventEmitter} `this`.
-     * @public
-     */
-    EventEmitter.prototype.once = function once(event, fn, context) {
-      return addListener(this, event, fn, context, true);
+    const useHandleScroll = ({ threshold = 140, animated = false } = {}) => {
+        const [isAtTop, setIsAtTop] = react.useState(false);
+        const handleScroll = react.useCallback((_event) => {
+            const position = window.scrollY > threshold;
+            setIsAtTop(position);
+        }, [threshold]);
+        const handleWindowScroll = react.useCallback((_event) => {
+            handleScroll({
+                nativeEvent: {
+                    contentOffset: { x: 0, y: window.scrollY },
+                    layoutMeasurement: { height: 0, width: 0 },
+                    contentSize: { height: 0, width: 0 },
+                },
+            });
+        }, [handleScroll]);
+        react.useEffect(() => {
+            if (ctDesignCommonUtils.isServer() || !animated)
+                return;
+            window.addEventListener('scroll', handleWindowScroll);
+            return () => {
+                window.removeEventListener('scroll', handleWindowScroll);
+            };
+        }, [handleWindowScroll, animated]);
+        const scrollManager = react.useMemo(() => ({ isAtTop, handleScroll, scrollY: window.scrollY }), [isAtTop, handleScroll]);
+        return scrollManager;
     };
 
-    /**
-     * Remove the listeners of a given event.
-     *
-     * @param {(String|Symbol)} event The event name.
-     * @param {Function} fn Only remove the listeners that match this function.
-     * @param {*} context Only remove the listeners that have this context.
-     * @param {Boolean} once Only remove one-time listeners.
-     * @returns {EventEmitter} `this`.
-     * @public
-     */
-    EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
-      var evt = prefix ? prefix + event : event;
-      if (!this._events[evt]) return this;
-      if (!fn) {
-        clearEvent(this, evt);
-        return this;
-      }
-      var listeners = this._events[evt];
-      if (listeners.fn) {
-        if (listeners.fn === fn && (!once || listeners.once) && (!context || listeners.context === context)) {
-          clearEvent(this, evt);
-        }
-      } else {
-        for (var i = 0, events = [], length = listeners.length; i < length; i++) {
-          if (listeners[i].fn !== fn || once && !listeners[i].once || context && listeners[i].context !== context) {
-            events.push(listeners[i]);
-          }
+    const AnimatedScrollContext = react.createContext({
+        isAtTop: false,
+        handleScroll: () => {
+        },
+        scrollY: 0,
+    });
+    const AnimatedScrollContextProvider = ({ children, threshold = 0, }) => {
+        const scrollManager = useHandleScroll({ threshold });
+        return jsxRuntime.jsx(AnimatedScrollContext.Provider, { value: scrollManager, children: children });
+    };
+    const useAnimatedScroll = () => {
+        const context = react.useContext(AnimatedScrollContext);
+        if (!context) {
+            return {
+                isAtTop: false,
+                handleScroll: () => {
+                },
+                scrollY: 0,
+            };
         }
-
-        //
-        // Reset the array, or remove it completely if we have no more listeners.
-        //
-        if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;else clearEvent(this, evt);
-      }
-      return this;
+        return context;
     };
-
-    /**
-     * Remove all listeners, or those of the specified event.
-     *
-     * @param {(String|Symbol)} [event] The event name.
-     * @returns {EventEmitter} `this`.
-     * @public
-     */
-    EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
-      var evt;
-      if (event) {
-        evt = prefix ? prefix + event : event;
-        if (this._events[evt]) clearEvent(this, evt);
-      } else {
-        this._events = new Events();
-        this._eventsCount = 0;
-      }
-      return this;
+    const useAnimatedScrollValue = () => {
+        const { scrollY, isAtTop } = useAnimatedScroll();
+        return { scrollY, isAtTop };
     };
 
-    //
-    // Alias methods names because people roll like that.
-    //
-    EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
-    EventEmitter.prototype.addListener = EventEmitter.prototype.on;
-
-    //
-    // Expose the prefix.
-    //
-    EventEmitter.prefixed = prefix;
-
-    //
-    // Allow `EventEmitter` to be imported as module namespace.
-    //
-    EventEmitter.EventEmitter = EventEmitter;
-
-    //
-    // Expose the module.
-    //
-    {
-      module.exports = EventEmitter;
-    }
-  })(eventemitter3);
-
-  exports.EVENT_NAMES = void 0;
-  (function (EVENT_NAMES) {
-      EVENT_NAMES["SCROLL_VIEW"] = "scroll-view";
-      EVENT_NAMES["SCROLL_INTO_VIEW"] = "scroll-into-view";
-  })(exports.EVENT_NAMES || (exports.EVENT_NAMES = {}));
-
-  class CustomDocumentEvent {
-      constructor() {
-          this.eventMap = new Map();
-          this.emitter = new eventemitter3Exports();
-      }
-      addEventListener(event, listener) {
-          if (event === exports.EVENT_NAMES.SCROLL_VIEW) {
-              const _listener = listener;
-              const eventHandler = () => {
-                  _listener([{ x: window.scrollX, y: window.scrollY }]);
-              };
-              window.addEventListener('scroll', eventHandler);
-              this.eventMap.set(listener, eventHandler);
-          }
-          else {
-              this.emitter.addListener(event, listener);
-              this.eventMap.set(listener, listener);
-          }
-      }
-      removeEventListener(event, listener) {
-          if (event === exports.EVENT_NAMES.SCROLL_VIEW) {
-              const eventHandler = this.eventMap.get(listener);
-              if (eventHandler) {
-                  window.removeEventListener('scroll', eventHandler);
-                  this.eventMap.delete(listener);
-              }
-          }
-          else {
-              this.emitter.removeListener(event, listener);
-          }
-      }
-      dispose() {
-          this.emitter.removeAllListeners();
-      }
-      emit(event, data) {
-          return this.emitter.emit(event, data);
-      }
-  }
-  const scrollEvent = new CustomDocumentEvent();
-
-  const staticScrollStyles = ctDesignStyleManager.makeStyles(() => ({
-      viewport: {
-          display: 'flex',
-          flexDirection: 'column',
-          minHeight: 0,
-          minWidth: 0,
-          width: '100%',
-          position: 'relative',
-          WebkitOverflowScrolling: 'touch',
-      },
-      viewportVertical: {
-          flex: 1,
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          overscrollBehavior: 'contain',
-      },
-      viewportHorizontal: {
-          flex: 1,
-          minWidth: 0,
-          overflowX: 'auto',
-          overflowY: 'hidden',
-          alignItems: 'flex-start',
-      },
-      contentVertical: {
-          display: 'flex',
-          flexDirection: 'column',
-          flexShrink: 0,
-          width: '100%',
-      },
-      contentHorizontal: {
-          display: 'flex',
-          flexDirection: 'row',
-          flexWrap: 'nowrap',
-          flexShrink: 0,
-          width: 'max-content',
-          minWidth: '100%',
-      },
-      hideScrollbar: {
-          scrollbarWidth: 'none',
-          msOverflowStyle: 'none',
-          '&::-webkit-scrollbar': {
-              display: 'none',
-          },
-      },
-      pagingSnapVertical: { scrollSnapType: 'y mandatory' },
-      pagingSnapHorizontal: { scrollSnapType: 'x mandatory' },
-      viewportVerticalNested: {
-          flex: 1,
-          minHeight: 0,
-          height: '100%',
-          maxHeight: '100%',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          overscrollBehavior: 'auto',
-      },
-  }));
-  const getScrollableParent = (node) => {
-      var _a;
-      let parent = (_a = node === null || node === void 0 ? void 0 : node.parentElement) !== null && _a !== void 0 ? _a : null;
-      while (parent) {
-          const { overflowY } = getComputedStyle(parent);
-          if (/(auto|scroll|overlay)/.test(overflowY) && parent.scrollHeight > parent.clientHeight + 1) {
-              return parent;
-          }
-          parent = parent.parentElement;
-      }
-      return null;
-  };
-  const emitScrollEvent = (target) => ({
-      nativeEvent: {
-          contentOffset: {
-              x: target.scrollLeft,
-              y: target.scrollTop,
-          },
-          layoutMeasurement: {
-              height: target.clientHeight,
-              width: target.clientWidth,
-          },
-          contentSize: {
-              height: target.scrollHeight,
-              width: target.scrollWidth,
-          },
-      },
-  });
-  const ScrollContainer = react.forwardRef(({ children, styleConfig, onScroll, horizontal = false, scrollEventThrottle = 0, showsVerticalScrollIndicator = false, showsHorizontalScrollIndicator = true, width, onIndexChange, currentActiveIndex, pagingEnabled = false, snapToOffsets, totalItemsLength, contentContainerStyle, onLayout, attachScrollEvent = false, nestedScrollEnabled = false, stickyHeaderIndices: _stickyHeaderIndices, removeClippedSubviews: _removeClippedSubviews, isVisible: _isVisible, keyboardShouldPersistTaps: _keyboardShouldPersistTaps, bounces: _bounces, id, onClick, onMouseEnter, onMouseLeave, onTransitionEnd, onTouchStart, onTouchEnd, onTouchCancel, onTouchMove, }, ref) => {
-      const localRef = react.useRef(null);
-      const lastScrollEventTimeRef = react.useRef(0);
-      const handleFocus = react.useCallback(() => {
-          var _a;
-          (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      }, []);
-      const handleGetBoundingRect = react.useCallback((callback) => {
-          var _a;
-          const rect = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-          if (rect) {
-              callback === null || callback === void 0 ? void 0 : callback({
-                  x: rect.x,
-                  y: rect.y,
-                  width: rect.width,
-                  height: rect.height,
-              });
-          }
-      }, []);
-      const handleAddEventListener = react.useCallback((type, listener, options) => {
-          var _a;
-          (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener, options);
-      }, []);
-      const handleRemoveEventListener = react.useCallback((type, listener, options) => {
-          var _a;
-          (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener, options);
-      }, []);
-      react.useImperativeHandle(ref, () => {
-          var _a;
-          return ({
-              focus: handleFocus,
-              getBoundingRectWithCallback: handleGetBoundingRect,
-              getElementRef: () => localRef,
-              measure: (callback) => {
-                  var _a;
-                  const rect = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-                  if (!rect)
-                      return;
-                  callback(rect.x, rect.y, rect.width, rect.height, rect.x, rect.y);
-              },
-              classList: {
-                  add: (className) => {
-                      var _a;
-                      (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.classList.add(className);
-                  },
-              },
-              addEventListener: handleAddEventListener,
-              removeEventListener: handleRemoveEventListener,
-              style: (((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.style) || {}),
-              scrollTo: (x, y) => {
-                  const node = localRef.current;
-                  if (!node)
-                      return;
-                  node.scrollTo({ left: x, top: y, behavior: 'auto' });
-              },
-              scrollToEnd: () => {
-                  const node = localRef.current;
-                  if (!node)
-                      return;
-                  if (horizontal) {
-                      node.scrollTo({
-                          left: node.scrollWidth - node.clientWidth,
-                          top: 0,
-                          behavior: 'auto',
-                      });
-                  }
-                  else {
-                      node.scrollTo({
-                          left: 0,
-                          top: node.scrollHeight - node.clientHeight,
-                          behavior: 'auto',
-                      });
-                  }
-              },
-              scrollById: (id, animated = true) => {
-                  const target = document.getElementById(id);
-                  target === null || target === void 0 ? void 0 : target.scrollIntoView({ behavior: animated ? 'smooth' : 'auto', block: 'nearest', inline: 'nearest' });
-              },
-              get scrollLeft() {
-                  var _a, _b;
-                  return (_b = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
-              },
-              set scrollLeft(value) {
-                  if (localRef.current) {
-                      localRef.current.scrollLeft = value;
-                  }
-              },
-              get scrollTop() {
-                  var _a, _b;
-                  return (_b = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
-              },
-              set scrollTop(value) {
-                  if (localRef.current) {
-                      localRef.current.scrollTop = value;
-                  }
-              },
-          });
-      }, [handleFocus, handleGetBoundingRect, handleAddEventListener, handleRemoveEventListener, horizontal]);
-      const { root: rootStyles = [] } = styleConfig || {};
-      const contentStyles = contentContainerStyle !== null && contentContainerStyle !== void 0 ? contentContainerStyle : [];
-      const hideHorizontalScrollbar = horizontal && showsHorizontalScrollIndicator === false;
-      const hideVerticalScrollbar = !horizontal && showsVerticalScrollIndicator === false;
-      const viewportClassName = ctDesignStyleManager.useWebMergeStyles([
-          staticScrollStyles.viewport,
-          horizontal
-              ? staticScrollStyles.viewportHorizontal
-              : nestedScrollEnabled
-                  ? staticScrollStyles.viewportVerticalNested
-                  : staticScrollStyles.viewportVertical,
-          ...(hideHorizontalScrollbar || hideVerticalScrollbar ? [staticScrollStyles.hideScrollbar] : []),
-          ...(pagingEnabled
-              ? [horizontal ? staticScrollStyles.pagingSnapHorizontal : staticScrollStyles.pagingSnapVertical]
-              : []),
-          ...rootStyles,
-      ], [horizontal, nestedScrollEnabled, hideHorizontalScrollbar, hideVerticalScrollbar, pagingEnabled, rootStyles]);
-      const contentClassName = ctDesignStyleManager.useWebMergeStyles([horizontal ? staticScrollStyles.contentHorizontal : staticScrollStyles.contentVertical, ...contentStyles], [horizontal, contentStyles]);
-      const fireScroll = react.useCallback((target) => {
-          const event = emitScrollEvent(target);
-          if (scrollEventThrottle > 0) {
-              const now = Date.now();
-              if (now - lastScrollEventTimeRef.current < scrollEventThrottle) {
-                  return;
-              }
-              lastScrollEventTimeRef.current = now;
-          }
-          if (attachScrollEvent) {
-              scrollEvent.emit('scroll-view', [event.nativeEvent.contentOffset]);
-          }
-          onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
-          if (horizontal && width && totalItemsLength && onIndexChange) {
-              const offsetX = target.scrollLeft;
-              const visibleWidth = target.clientWidth;
-              const tolerance = 2;
-              let index;
-              if (offsetX <= tolerance) {
-                  index = 0;
-              }
-              else {
-                  const centerX = offsetX + visibleWidth / 2;
-                  index = Math.max(0, Math.min(totalItemsLength - 1, Math.round((centerX - width / 2) / width)));
-              }
-              onIndexChange(index);
-          }
-      }, [attachScrollEvent, horizontal, onIndexChange, onScroll, scrollEventThrottle, totalItemsLength, width]);
-      const handleScroll = react.useCallback((e) => {
-          fireScroll(e.currentTarget);
-      }, [fireScroll]);
-      const handleNestedWheel = react.useCallback((e) => {
-          if (!nestedScrollEnabled || horizontal) {
-              return;
-          }
-          const node = e.currentTarget;
-          const hasOverflow = node.scrollHeight > node.clientHeight + 1;
-          const maxScrollTop = node.scrollHeight - node.clientHeight;
-          const atTop = node.scrollTop <= 0;
-          const atBottom = node.scrollTop >= maxScrollTop - 1;
-          const scrollingUp = e.deltaY < 0;
-          const scrollingDown = e.deltaY > 0;
-          const shouldForward = !hasOverflow || (scrollingUp && atTop) || (scrollingDown && atBottom);
-          if (!shouldForward) {
-              return;
-          }
-          const scrollableParent = getScrollableParent(node);
-          if (!scrollableParent) {
-              return;
-          }
-          e.preventDefault();
-          scrollableParent.scrollTop += e.deltaY;
-      }, [horizontal, nestedScrollEnabled]);
-      react.useLayoutEffect(() => {
-          const node = localRef.current;
-          if (!node || !onLayout)
-              return;
-          onLayout({
-              layout: {
-                  height: node.clientHeight,
-                  width: node.clientWidth,
-                  x: node.getBoundingClientRect().x,
-                  y: node.getBoundingClientRect().y,
-              },
-          });
-      }, [onLayout]);
-      react.useEffect(() => {
-          const node = localRef.current;
-          if (!node || typeof currentActiveIndex !== 'number' || currentActiveIndex < 0 || !width) {
-              return;
-          }
-          node.scrollTo({
-              left: horizontal ? currentActiveIndex * (width + 16) : 0,
-              top: horizontal ? 0 : currentActiveIndex * (width + 16),
-              behavior: 'smooth',
-          });
-      }, [currentActiveIndex, horizontal, width]);
-      react.useEffect(() => {
-          if (!(snapToOffsets === null || snapToOffsets === void 0 ? void 0 : snapToOffsets.length) || !localRef.current)
-              return;
-      }, [snapToOffsets]);
-      return (jsxRuntime.jsx("div", { ref: localRef, id: id, className: viewportClassName, onScroll: handleScroll, onWheel: nestedScrollEnabled && !horizontal ? handleNestedWheel : undefined, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTransitionEnd: onTransitionEnd, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onTouchCancel: onTouchCancel, onTouchMove: onTouchMove, children: jsxRuntime.jsx("div", { className: contentClassName, children: children }) }));
-  });
-  ScrollContainer.displayName = 'ScrollContainer';
-
-  const ScrollContext = react.createContext({
-      isScrolling: false,
-      refs: {},
-      observableChildRefs: [],
-      parentScrollAvailable: false,
-      horizontal: false,
-      scrollToBottom: () => {
-      },
-  });
-  const ScrollContextProvider = ({ children, isScrolling, refs, scrollTo, scrollToSkip, isScrollToScrolling, observableChildRefs, horizontal, scrollToBottom, }) => {
-      return (jsxRuntime.jsx(ScrollContext.Provider, { value: {
-              observableChildRefs,
-              isScrolling,
-              refs,
-              scrollTo,
-              scrollToSkip,
-              isScrollToScrolling,
-              parentScrollAvailable: true,
-              horizontal,
-              scrollToBottom,
-          }, children: children }));
-  };
-  const useGetScrolling = () => {
-      const context = react.useContext(ScrollContext);
-      if (!context) {
-          return { isScrolling: false, isScrollToScrolling: false, scrollParentAvailable: false, horizontal: false };
-      }
-      return {
-          isScrolling: context.isScrolling,
-          isScrollToScrolling: context.isScrollToScrolling,
-          scrollParentAvailable: context.parentScrollAvailable,
-          horizontal: context.horizontal,
-          isList: context.isList,
-      };
-  };
-  const useGetRefMaps = () => {
-      const { refs } = react.useContext(ScrollContext);
-      return refs;
-  };
-  const useGetScrollToLast = () => {
-      const { scrollToBottom } = react.useContext(ScrollContext);
-      return {
-          scrollToBottom,
-      };
-  };
-  const useAddObservableChild = (observableChildMethod) => {
-      const context = react.useContext(ScrollContext);
-      const insideScrollParent = !!context;
-      const { observableChildRefs } = context || { observableChildRefs: [] };
-      react.useEffect(() => {
-          const observableChild = observableChildMethod();
-          const index = insideScrollParent ? observableChildRefs.push(observableChild) : 0;
-          return () => {
-              if (insideScrollParent) {
-                  observableChildRefs.splice(index - 1, 1);
-              }
-          };
-      }, [observableChildRefs, insideScrollParent]);
-  };
-  const useObserver = () => {
-      const { observableChildRefs } = react.useContext(ScrollContext);
-      return observableChildRefs;
-  };
-
-  const useHandleScroll = ({ threshold = 140, animated = false } = {}) => {
-      const [isAtTop, setIsAtTop] = react.useState(false);
-      const handleScroll = react.useCallback((_event) => {
-          const position = window.scrollY > threshold;
-          setIsAtTop(position);
-      }, [threshold]);
-      const handleWindowScroll = react.useCallback((_event) => {
-          handleScroll({
-              nativeEvent: {
-                  contentOffset: { x: 0, y: window.scrollY },
-                  layoutMeasurement: { height: 0, width: 0 },
-                  contentSize: { height: 0, width: 0 },
-              },
-          });
-      }, [handleScroll]);
-      react.useEffect(() => {
-          if (ctDesignCommonUtils.isServer() || !animated)
-              return;
-          window.addEventListener('scroll', handleWindowScroll);
-          return () => {
-              window.removeEventListener('scroll', handleWindowScroll);
-          };
-      }, [handleWindowScroll, animated]);
-      const scrollManager = react.useMemo(() => ({ isAtTop, handleScroll, scrollY: window.scrollY }), [isAtTop, handleScroll]);
-      return scrollManager;
-  };
-
-  const AnimatedScrollContext = react.createContext({
-      isAtTop: false,
-      handleScroll: () => {
-      },
-      scrollY: 0,
-  });
-  const AnimatedScrollContextProvider = ({ children, threshold = 0, }) => {
-      const scrollManager = useHandleScroll({ threshold });
-      return jsxRuntime.jsx(AnimatedScrollContext.Provider, { value: scrollManager, children: children });
-  };
-  const useAnimatedScroll = () => {
-      const context = react.useContext(AnimatedScrollContext);
-      if (!context) {
-          return {
-              isAtTop: false,
-              handleScroll: () => {
-              },
-              scrollY: 0,
-          };
-      }
-      return context;
-  };
-  const useAnimatedScrollValue = () => {
-      const { scrollY, isAtTop } = useAnimatedScroll();
-      return { scrollY, isAtTop };
-  };
-
-  const StickyContext = react.createContext({ stickyIndex: -1 });
-  const StickyProvider = ({ children, stickyIndex }) => {
-      return jsxRuntime.jsx(StickyContext.Provider, { value: { stickyIndex }, children: children });
-  };
-  const ParentStickyContext = react.createContext({});
-  const ParentStickyProvider = ({ children, addStickyIndices, removeStickIndices, }) => {
-      return (jsxRuntime.jsx(ParentStickyContext.Provider, { value: { addStickyIndices, removeStickIndices }, children: children }));
-  };
-  const useStickyContext = () => {
-      const { stickyIndex } = react.useContext(StickyContext);
-      return stickyIndex;
-  };
-  const useParentStickyContext = () => {
-      const { addStickyIndices, removeStickIndices } = react.useContext(ParentStickyContext);
-      return [addStickyIndices, removeStickIndices];
-  };
+    const StickyContext = react.createContext({ stickyIndex: -1 });
+    const StickyProvider = ({ children, stickyIndex }) => {
+        return jsxRuntime.jsx(StickyContext.Provider, { value: { stickyIndex }, children: children });
+    };
+    const ParentStickyContext = react.createContext({});
+    const ParentStickyProvider = ({ children, addStickyIndices, removeStickIndices, }) => {
+        return (jsxRuntime.jsx(ParentStickyContext.Provider, { value: { addStickyIndices, removeStickIndices }, children: children }));
+    };
+    const useStickyContext = () => {
+        const { stickyIndex } = react.useContext(StickyContext);
+        return stickyIndex;
+    };
+    const useParentStickyContext = () => {
+        const { addStickyIndices, removeStickIndices } = react.useContext(ParentStickyContext);
+        return [addStickyIndices, removeStickIndices];
+    };
 
-  const useScrollById = () => {
-      const { refs, scrollTo: _scrollTo } = react.useContext(ScrollContext);
-      const scrollTo = react.useCallback((id, { x: _x, y: _y }) => {
-          var _a, _b, _c;
-          (_c = (_b = (_a = refs[id]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingRectWithCallback) === null || _c === void 0 ? void 0 : _c.call(_b, ({ x, y }) => {
-              _scrollTo === null || _scrollTo === void 0 ? void 0 : _scrollTo(y - _y, x - _x);
-          });
-      }, [_scrollTo, refs]);
-      return { scrollTo };
-  };
+    const useScrollById = () => {
+        const { refs, scrollTo: _scrollTo } = react.useContext(ScrollContext);
+        const scrollTo = react.useCallback((id, { x: _x, y: _y }) => {
+            var _a, _b, _c;
+            (_c = (_b = (_a = refs[id]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.getBoundingRectWithCallback) === null || _c === void 0 ? void 0 : _c.call(_b, ({ x, y }) => {
+                _scrollTo === null || _scrollTo === void 0 ? void 0 : _scrollTo(y - _y, x - _x);
+            });
+        }, [_scrollTo, refs]);
+        return { scrollTo };
+    };
 
-  exports.AnimatedScrollContextProvider = AnimatedScrollContextProvider;
-  exports.ParentStickyProvider = ParentStickyProvider;
-  exports.ScrollContainer = ScrollContainer;
-  exports.ScrollContext = ScrollContext;
-  exports.ScrollContextProvider = ScrollContextProvider;
-  exports.StickyProvider = StickyProvider;
-  exports.scrollEvent = scrollEvent;
-  exports.useAddObservableChild = useAddObservableChild;
-  exports.useAnimatedScroll = useAnimatedScroll;
-  exports.useAnimatedScrollValue = useAnimatedScrollValue;
-  exports.useGetRefMaps = useGetRefMaps;
-  exports.useGetScrollToLast = useGetScrollToLast;
-  exports.useGetScrolling = useGetScrolling;
-  exports.useHandleScroll = useHandleScroll;
-  exports.useObserver = useObserver;
-  exports.useParentStickyContext = useParentStickyContext;
-  exports.useScrollById = useScrollById;
-  exports.useStickyContext = useStickyContext;
+    exports.AnimatedScrollContextProvider = AnimatedScrollContextProvider;
+    exports.ParentStickyProvider = ParentStickyProvider;
+    exports.ScrollContainer = ScrollContainer;
+    exports.ScrollContext = ScrollContext;
+    exports.ScrollContextProvider = ScrollContextProvider;
+    exports.StickyProvider = StickyProvider;
+    exports.scrollEvent = scrollEvent;
+    exports.useAddObservableChild = useAddObservableChild;
+    exports.useAnimatedScroll = useAnimatedScroll;
+    exports.useAnimatedScrollValue = useAnimatedScrollValue;
+    exports.useGetRefMaps = useGetRefMaps;
+    exports.useGetScrollToLast = useGetScrollToLast;
+    exports.useGetScrolling = useGetScrolling;
+    exports.useHandleScroll = useHandleScroll;
+    exports.useObserver = useObserver;
+    exports.useParentStickyContext = useParentStickyContext;
+    exports.useScrollById = useScrollById;
+    exports.useStickyContext = useStickyContext;
 
 }));
 //# sourceMappingURL=ct-design-scroll-container.umd.js.map