@digipair/skill-web-spectrum 0.91.0-0 → 0.92.0

package/flow.cjs.js

@@ -0,0 +1,1257 @@
+'use strict';
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function _class_call_check$2(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties$2(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class$2(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties$2(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties$2(Constructor, staticProps);
+    return Constructor;
+}
+var SizeCache = /*#__PURE__*/ function() {
+    function SizeCache(config) {
+        _class_call_check$2(this, SizeCache);
+        this._map = new Map();
+        this._roundAverageSize = false;
+        this.totalSize = 0;
+        if ((config === null || config === void 0 ? void 0 : config.roundAverageSize) === true) {
+            this._roundAverageSize = true;
+        }
+    }
+    _create_class$2(SizeCache, [
+        {
+            key: "set",
+            value: function set(index, value) {
+                var prev = this._map.get(index) || 0;
+                this._map.set(index, value);
+                this.totalSize += value - prev;
+            }
+        },
+        {
+            key: "averageSize",
+            get: function get() {
+                if (this._map.size > 0) {
+                    var average = this.totalSize / this._map.size;
+                    return this._roundAverageSize ? Math.round(average) : average;
+                }
+                return 0;
+            }
+        },
+        {
+            key: "getSize",
+            value: function getSize(index) {
+                return this._map.get(index);
+            }
+        },
+        {
+            key: "clear",
+            value: function clear() {
+                this._map.clear();
+                this.totalSize = 0;
+            }
+        }
+    ]);
+    return SizeCache;
+} 
+();
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function _class_call_check$1(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties$1(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class$1(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties$1(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property$1(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function dim1(direction) {
+    return direction === "horizontal" ? "width" : "height";
+}
+var BaseLayout = /*#__PURE__*/ function() {
+    function BaseLayout(hostSink, config) {
+        var _this = this;
+        _class_call_check$1(this, BaseLayout);
+        /**
+         * The last set viewport scroll position.
+         */ this._latestCoords = {
+            left: 0,
+            top: 0
+        };
+        /**
+         * Scrolling direction.
+         */ this._direction = null;
+        /**
+         * Dimensions of the viewport.
+         */ this._viewportSize = {
+            width: 0,
+            height: 0
+        };
+        this.totalScrollSize = {
+            width: 0,
+            height: 0
+        };
+        this.offsetWithinScroller = {
+            left: 0,
+            top: 0
+        };
+        /**
+         * Flag for debouncing asynchronous reflow requests.
+         */ this._pendingReflow = false;
+        this._pendingLayoutUpdate = false;
+        this._pin = null;
+        /**
+         * The index of the first item intersecting the viewport.
+         */ this._firstVisible = 0;
+        /**
+         * The index of the last item intersecting the viewport.
+         */ this._lastVisible = 0;
+        /**
+         * Pixel offset in the scroll direction of the first child.
+         */ this._physicalMin = 0;
+        /**
+         * Pixel offset in the scroll direction of the last child.
+         */ this._physicalMax = 0;
+        /**
+         * Index of the first child.
+         */ this._first = -1;
+        /**
+         * Index of the last child.
+         */ this._last = -1;
+        /**
+         * Length in the scrolling direction.
+         */ this._sizeDim = "height";
+        /**
+         * Length in the non-scrolling direction.
+         */ this._secondarySizeDim = "width";
+        /**
+         * Position in the scrolling direction.
+         */ this._positionDim = "top";
+        /**
+         * Position in the non-scrolling direction.
+         */ this._secondaryPositionDim = "left";
+        /**
+         * Current scroll offset in pixels.
+         */ this._scrollPosition = 0;
+        /**
+         * Difference between current scroll offset and scroll offset calculated due
+         * to a reflow.
+         */ this._scrollError = 0;
+        /**
+         * Total number of items that could possibly be displayed. Used to help
+         * calculate the scroll size.
+         */ this._items = [];
+        /**
+         * The total (estimated) length of all items in the scrolling direction.
+         */ this._scrollSize = 1;
+        /**
+         * Number of pixels beyond the viewport to still include
+         * in the active range of items.
+         */ // TODO (graynorton): Probably want to make this something we calculate based
+        // on viewport size, item size, other factors, possibly still with a dial of some kind
+        this._overhang = 1000;
+        this._hostSink = hostSink;
+        // Delay setting config so that subclasses do setup work first
+        Promise.resolve().then(function() {
+            return _this.config = config || _this._getDefaultConfig();
+        });
+    }
+    _create_class$1(BaseLayout, [
+        {
+            key: "_getDefaultConfig",
+            value: function _getDefaultConfig() {
+                return {
+                    direction: "vertical"
+                };
+            }
+        },
+        {
+            key: "config",
+            get: function get() {
+                return {
+                    direction: this.direction
+                };
+            },
+            set: function set(config) {
+                Object.assign(this, Object.assign({}, this._getDefaultConfig(), config));
+            }
+        },
+        {
+            key: "items",
+            get: /**
+     * Maximum index of children + 1, to help estimate total height of the scroll
+     * space.
+     */ function get() {
+                return this._items;
+            },
+            set: function set(items) {
+                this._setItems(items);
+            }
+        },
+        {
+            key: "_setItems",
+            value: function _setItems(items) {
+                if (items !== this._items) {
+                    this._items = items;
+                    this._scheduleReflow();
+                }
+            }
+        },
+        {
+            key: "direction",
+            get: /**
+     * Primary scrolling direction.
+     */ function get() {
+                return this._direction;
+            },
+            set: function set(dir) {
+                // Force it to be either horizontal or vertical.
+                dir = dir === "horizontal" ? dir : "vertical";
+                if (dir !== this._direction) {
+                    this._direction = dir;
+                    this._sizeDim = dir === "horizontal" ? "width" : "height";
+                    this._secondarySizeDim = dir === "horizontal" ? "height" : "width";
+                    this._positionDim = dir === "horizontal" ? "left" : "top";
+                    this._secondaryPositionDim = dir === "horizontal" ? "top" : "left";
+                    this._triggerReflow();
+                }
+            }
+        },
+        {
+            key: "viewportSize",
+            get: /**
+     * Height and width of the viewport.
+     */ function get() {
+                return this._viewportSize;
+            },
+            set: function set(dims) {
+                var _this = this, _viewDim1 = _this._viewDim1, _viewDim2 = _this._viewDim2;
+                Object.assign(this._viewportSize, dims);
+                if (_viewDim2 !== this._viewDim2) {
+                    // this._viewDim2Changed();
+                    this._scheduleLayoutUpdate();
+                } else if (_viewDim1 !== this._viewDim1) {
+                    this._checkThresholds();
+                }
+            }
+        },
+        {
+            key: "viewportScroll",
+            get: /**
+     * Scroll offset of the viewport.
+     */ function get() {
+                return this._latestCoords;
+            },
+            set: function set(coords) {
+                Object.assign(this._latestCoords, coords);
+                var oldPos = this._scrollPosition;
+                this._scrollPosition = this._latestCoords[this._positionDim];
+                var change = Math.abs(oldPos - this._scrollPosition);
+                if (change >= 1) {
+                    this._checkThresholds();
+                }
+            }
+        },
+        {
+            /**
+     * Perform a reflow if one has been scheduled.
+     */ key: "reflowIfNeeded",
+            value: function reflowIfNeeded() {
+                var force = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+                if (force || this._pendingReflow) {
+                    this._pendingReflow = false;
+                    this._reflow();
+                }
+            }
+        },
+        {
+            key: "pin",
+            get: function get() {
+                if (this._pin !== null) {
+                    var _this__pin = this._pin, index = _this__pin.index, block = _this__pin.block;
+                    return {
+                        index: Math.max(0, Math.min(index, this.items.length - 1)),
+                        block: block
+                    };
+                }
+                return null;
+            },
+            set: function set(options) {
+                this._pin = options;
+                this._triggerReflow();
+            }
+        },
+        {
+            key: "_clampScrollPosition",
+            value: function _clampScrollPosition(val) {
+                return Math.max(-this.offsetWithinScroller[this._positionDim], Math.min(val, this.totalScrollSize[dim1(this.direction)] - this._viewDim1));
+            }
+        },
+        {
+            key: "unpin",
+            value: function unpin() {
+                if (this._pin !== null) {
+                    this._sendUnpinnedMessage();
+                    this._pin = null;
+                }
+            }
+        },
+        {
+            key: "_updateLayout",
+            value: function _updateLayout() {
+            // Override
+            }
+        },
+        {
+            key: "_viewDim1",
+            get: // protected _viewDim2Changed(): void {
+            //   this._scheduleLayoutUpdate();
+            // }
+            /**
+     * The height or width of the viewport, whichever corresponds to the scrolling direction.
+     */ function get() {
+                return this._viewportSize[this._sizeDim];
+            }
+        },
+        {
+            key: "_viewDim2",
+            get: /**
+     * The height or width of the viewport, whichever does NOT correspond to the scrolling direction.
+     */ function get() {
+                return this._viewportSize[this._secondarySizeDim];
+            }
+        },
+        {
+            key: "_scheduleReflow",
+            value: function _scheduleReflow() {
+                this._pendingReflow = true;
+            }
+        },
+        {
+            key: "_scheduleLayoutUpdate",
+            value: function _scheduleLayoutUpdate() {
+                this._pendingLayoutUpdate = true;
+                this._scheduleReflow();
+            }
+        },
+        {
+            // For triggering a reflow based on incoming changes to
+            // the layout config.
+            key: "_triggerReflow",
+            value: function _triggerReflow() {
+                var _this = this;
+                this._scheduleLayoutUpdate();
+                // TODO graynorton@: reflowIfNeeded() isn't really supposed
+                // to be called internally. Address in larger cleanup
+                // of virtualizer / layout interaction pattern.
+                // this.reflowIfNeeded(true);
+                Promise.resolve().then(function() {
+                    return _this.reflowIfNeeded();
+                });
+            }
+        },
+        {
+            key: "_reflow",
+            value: function _reflow() {
+                if (this._pendingLayoutUpdate) {
+                    this._updateLayout();
+                    this._pendingLayoutUpdate = false;
+                }
+                this._updateScrollSize();
+                this._setPositionFromPin();
+                this._getActiveItems();
+                this._updateVisibleIndices();
+                this._sendStateChangedMessage();
+            }
+        },
+        {
+            /**
+     * If we are supposed to be pinned to a particular
+     * item or set of coordinates, we set `_scrollPosition`
+     * accordingly and adjust `_scrollError` as needed
+     * so that the virtualizer can keep the scroll
+     * position in the DOM in sync
+     */ key: "_setPositionFromPin",
+            value: function _setPositionFromPin() {
+                if (this.pin !== null) {
+                    var lastScrollPosition = this._scrollPosition;
+                    var _this_pin = this.pin, index = _this_pin.index, block = _this_pin.block;
+                    this._scrollPosition = this._calculateScrollIntoViewPosition({
+                        index: index,
+                        block: block || "start"
+                    }) - this.offsetWithinScroller[this._positionDim];
+                    this._scrollError = lastScrollPosition - this._scrollPosition;
+                }
+            }
+        },
+        {
+            /**
+     * Calculate the coordinates to scroll to, given
+     * a request to scroll to the element at a specific
+     * index.
+     *
+     * Supports the same positioning options (`start`,
+     * `center`, `end`, `nearest`) as the standard
+     * `Element.scrollIntoView()` method, but currently
+     * only considers the provided value in the `block`
+     * dimension, since we don't yet have any layouts
+     * that support virtualization in two dimensions.
+     */ key: "_calculateScrollIntoViewPosition",
+            value: function _calculateScrollIntoViewPosition(options) {
+                var block = options.block;
+                var index = Math.min(this.items.length, Math.max(0, options.index));
+                var itemStartPosition = this._getItemPosition(index)[this._positionDim];
+                var scrollPosition = itemStartPosition;
+                if (block !== "start") {
+                    var itemSize = this._getItemSize(index)[this._sizeDim];
+                    if (block === "center") {
+                        scrollPosition = itemStartPosition - 0.5 * this._viewDim1 + 0.5 * itemSize;
+                    } else {
+                        var itemEndPosition = itemStartPosition - this._viewDim1 + itemSize;
+                        if (block === "end") {
+                            scrollPosition = itemEndPosition;
+                        } else {
+                            // block === 'nearest'
+                            var currentScrollPosition = this._scrollPosition;
+                            scrollPosition = Math.abs(currentScrollPosition - itemStartPosition) < Math.abs(currentScrollPosition - itemEndPosition) ? itemStartPosition : itemEndPosition;
+                        }
+                    }
+                }
+                scrollPosition += this.offsetWithinScroller[this._positionDim];
+                return this._clampScrollPosition(scrollPosition);
+            }
+        },
+        {
+            key: "getScrollIntoViewCoordinates",
+            value: function getScrollIntoViewCoordinates(options) {
+                return _define_property$1({}, this._positionDim, this._calculateScrollIntoViewPosition(options));
+            }
+        },
+        {
+            key: "_sendUnpinnedMessage",
+            value: function _sendUnpinnedMessage() {
+                this._hostSink({
+                    type: "unpinned"
+                });
+            }
+        },
+        {
+            key: "_sendVisibilityChangedMessage",
+            value: function _sendVisibilityChangedMessage() {
+                this._hostSink({
+                    type: "visibilityChanged",
+                    firstVisible: this._firstVisible,
+                    lastVisible: this._lastVisible
+                });
+            }
+        },
+        {
+            key: "_sendStateChangedMessage",
+            value: function _sendStateChangedMessage() {
+                var childPositions = new Map();
+                if (this._first !== -1 && this._last !== -1) {
+                    for(var idx = this._first; idx <= this._last; idx++){
+                        childPositions.set(idx, this._getItemPosition(idx));
+                    }
+                }
+                var _obj;
+                var message = {
+                    type: "stateChanged",
+                    scrollSize: (_obj = {}, _define_property$1(_obj, this._sizeDim, this._scrollSize), _define_property$1(_obj, this._secondarySizeDim, null), _obj),
+                    range: {
+                        first: this._first,
+                        last: this._last,
+                        firstVisible: this._firstVisible,
+                        lastVisible: this._lastVisible
+                    },
+                    childPositions: childPositions
+                };
+                if (this._scrollError) {
+                    var _obj1;
+                    message.scrollError = (_obj1 = {}, _define_property$1(_obj1, this._positionDim, this._scrollError), _define_property$1(_obj1, this._secondaryPositionDim, 0), _obj1);
+                    this._scrollError = 0;
+                }
+                this._hostSink(message);
+            }
+        },
+        {
+            key: "_num",
+            get: /**
+     * Number of items to display.
+     */ function get() {
+                if (this._first === -1 || this._last === -1) {
+                    return 0;
+                }
+                return this._last - this._first + 1;
+            }
+        },
+        {
+            key: "_checkThresholds",
+            value: function _checkThresholds() {
+                if (this._viewDim1 === 0 && this._num > 0 || this._pin !== null) {
+                    this._scheduleReflow();
+                } else {
+                    var min = Math.max(0, this._scrollPosition - this._overhang);
+                    var max = Math.min(this._scrollSize, this._scrollPosition + this._viewDim1 + this._overhang);
+                    if (this._physicalMin > min || this._physicalMax < max) {
+                        this._scheduleReflow();
+                    } else {
+                        this._updateVisibleIndices({
+                            emit: true
+                        });
+                    }
+                }
+            }
+        },
+        {
+            /**
+     * Find the indices of the first and last items to intersect the viewport.
+     * Emit a visibleindiceschange event when either index changes.
+     */ key: "_updateVisibleIndices",
+            value: function _updateVisibleIndices(options) {
+                if (this._first === -1 || this._last === -1) return;
+                var firstVisible = this._first;
+                while(firstVisible < this._last && Math.round(this._getItemPosition(firstVisible)[this._positionDim] + this._getItemSize(firstVisible)[this._sizeDim]) <= Math.round(this._scrollPosition)){
+                    firstVisible++;
+                }
+                var lastVisible = this._last;
+                while(lastVisible > this._first && Math.round(this._getItemPosition(lastVisible)[this._positionDim]) >= Math.round(this._scrollPosition + this._viewDim1)){
+                    lastVisible--;
+                }
+                if (firstVisible !== this._firstVisible || lastVisible !== this._lastVisible) {
+                    this._firstVisible = firstVisible;
+                    this._lastVisible = lastVisible;
+                    if (options && options.emit) {
+                        this._sendVisibilityChangedMessage();
+                    }
+                }
+            }
+        }
+    ]);
+    return BaseLayout;
+} 
+();
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _get(target, property, receiver) {
+    if (typeof Reflect !== "undefined" && Reflect.get) {
+        _get = Reflect.get;
+    } else {
+        _get = function get(target, property, receiver) {
+            var base = _super_prop_base(target, property);
+            if (!base) return;
+            var desc = Object.getOwnPropertyDescriptor(base, property);
+            if (desc.get) {
+                return desc.get.call(receiver || target);
+            }
+            return desc.value;
+        };
+    }
+    return _get(target, property, receiver || target);
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _super_prop_base(object, property) {
+    while(!Object.prototype.hasOwnProperty.call(object, property)){
+        object = _get_prototype_of(object);
+        if (object === null) break;
+    }
+    return object;
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _is_native_reflect_construct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+        return true;
+    } catch (e) {
+        return false;
+    }
+}
+function _create_super(Derived) {
+    var hasNativeReflectConstruct = _is_native_reflect_construct();
+    return function _createSuperInternal() {
+        var Super = _get_prototype_of(Derived), result;
+        if (hasNativeReflectConstruct) {
+            var NewTarget = _get_prototype_of(this).constructor;
+            result = Reflect.construct(Super, arguments, NewTarget);
+        } else {
+            result = Super.apply(this, arguments);
+        }
+        return _possible_constructor_return(this, result);
+    };
+}
+var flow = function(config) {
+    return Object.assign({
+        type: FlowLayout
+    }, config);
+};
+function leadingMargin(direction) {
+    return direction === "horizontal" ? "marginLeft" : "marginTop";
+}
+function trailingMargin(direction) {
+    return direction === "horizontal" ? "marginRight" : "marginBottom";
+}
+function offset(direction) {
+    return direction === "horizontal" ? "xOffset" : "yOffset";
+}
+function collapseMargins(a, b) {
+    var _Math, _Math1;
+    var m = [
+        a,
+        b
+    ].sort();
+    return m[1] <= 0 ? (_Math = Math).min.apply(_Math, _to_consumable_array(m)) : m[0] >= 0 ? (_Math1 = Math).max.apply(_Math1, _to_consumable_array(m)) : m[0] + m[1];
+}
+var MetricsCache = /*#__PURE__*/ function() {
+    function MetricsCache() {
+        _class_call_check(this, MetricsCache);
+        this._childSizeCache = new SizeCache();
+        this._marginSizeCache = new SizeCache();
+        this._metricsCache = new Map();
+    }
+    _create_class(MetricsCache, [
+        {
+            key: "update",
+            value: function update(metrics, direction) {
+                var _this = this;
+                var marginsToUpdate = new Set();
+                Object.keys(metrics).forEach(function(key) {
+                    var k = Number(key);
+                    _this._metricsCache.set(k, metrics[k]);
+                    _this._childSizeCache.set(k, metrics[k][dim1(direction)]);
+                    marginsToUpdate.add(k);
+                    marginsToUpdate.add(k + 1);
+                });
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = marginsToUpdate[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var k = _step.value;
+                        var _this__metricsCache_get, _this__metricsCache_get1;
+                        var a = ((_this__metricsCache_get = this._metricsCache.get(k)) === null || _this__metricsCache_get === void 0 ? void 0 : _this__metricsCache_get[leadingMargin(direction)]) || 0;
+                        var b = ((_this__metricsCache_get1 = this._metricsCache.get(k - 1)) === null || _this__metricsCache_get1 === void 0 ? void 0 : _this__metricsCache_get1[trailingMargin(direction)]) || 0;
+                        this._marginSizeCache.set(k, collapseMargins(a, b));
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+            }
+        },
+        {
+            key: "averageChildSize",
+            get: function get() {
+                return this._childSizeCache.averageSize;
+            }
+        },
+        {
+            key: "totalChildSize",
+            get: function get() {
+                return this._childSizeCache.totalSize;
+            }
+        },
+        {
+            key: "averageMarginSize",
+            get: function get() {
+                return this._marginSizeCache.averageSize;
+            }
+        },
+        {
+            key: "totalMarginSize",
+            get: function get() {
+                return this._marginSizeCache.totalSize;
+            }
+        },
+        {
+            key: "getLeadingMarginValue",
+            value: function getLeadingMarginValue(index, direction) {
+                var _this__metricsCache_get;
+                return ((_this__metricsCache_get = this._metricsCache.get(index)) === null || _this__metricsCache_get === void 0 ? void 0 : _this__metricsCache_get[leadingMargin(direction)]) || 0;
+            }
+        },
+        {
+            key: "getChildSize",
+            value: function getChildSize(index) {
+                return this._childSizeCache.getSize(index);
+            }
+        },
+        {
+            key: "getMarginSize",
+            value: function getMarginSize(index) {
+                return this._marginSizeCache.getSize(index);
+            }
+        },
+        {
+            key: "clear",
+            value: function clear() {
+                this._childSizeCache.clear();
+                this._marginSizeCache.clear();
+                this._metricsCache.clear();
+            }
+        }
+    ]);
+    return MetricsCache;
+}();
+var FlowLayout = /*#__PURE__*/ function(BaseLayout) {
+    _inherits(FlowLayout, BaseLayout);
+    var _super = _create_super(FlowLayout);
+    function FlowLayout() {
+        _class_call_check(this, FlowLayout);
+        var _this;
+        _this = _super.call.apply(_super, [
+            this
+        ].concat(Array.prototype.slice.call(arguments)));
+        /**
+         * Initial estimate of item size
+         */ _this._itemSize = {
+            width: 100,
+            height: 100
+        };
+        /**
+         * Indices of children mapped to their (position and length) in the scrolling
+         * direction. Used to keep track of children that are in range.
+         */ _this._physicalItems = new Map();
+        /**
+         * Used in tandem with _physicalItems to track children in range across
+         * reflows.
+         */ _this._newPhysicalItems = new Map();
+        /**
+         * Width and height of children by their index.
+         */ _this._metricsCache = new MetricsCache();
+        /**
+         * anchorIdx is the anchor around which we reflow. It is designed to allow
+         * jumping to any point of the scroll size. We choose it once and stick with
+         * it until stable. _first and _last are deduced around it.
+         */ _this._anchorIdx = null;
+        /**
+         * Position in the scrolling direction of the anchor child.
+         */ _this._anchorPos = null;
+        /**
+         * Whether all children in range were in range during the previous reflow.
+         */ _this._stable = true;
+        _this._measureChildren = true;
+        _this._estimate = true;
+        return _this;
+    }
+    _create_class(FlowLayout, [
+        {
+            key: "measureChildren",
+            get: // protected _defaultConfig: BaseLayoutConfig = Object.assign({}, super._defaultConfig, {
+            // })
+            // constructor(config: Layout1dConfig) {
+            //   super(config);
+            // }
+            function get() {
+                return this._measureChildren;
+            }
+        },
+        {
+            /**
+     * Determine the average size of all children represented in the sizes
+     * argument.
+     */ key: "updateItemSizes",
+            value: function updateItemSizes(sizes) {
+                this._metricsCache.update(sizes, this.direction);
+                // if (this._nMeasured) {
+                // this._updateItemSize();
+                this._scheduleReflow();
+            // }
+            }
+        },
+        {
+            /**
+     * Set the average item size based on the total length and number of children
+     * in range.
+     */ // _updateItemSize() {
+            //   // Keep integer values.
+            //   this._itemSize[this._sizeDim] = this._metricsCache.averageChildSize;
+            // }
+            key: "_getPhysicalItem",
+            value: function _getPhysicalItem(idx) {
+                var _this__newPhysicalItems_get;
+                return (_this__newPhysicalItems_get = this._newPhysicalItems.get(idx)) !== null && _this__newPhysicalItems_get !== void 0 ? _this__newPhysicalItems_get : this._physicalItems.get(idx);
+            }
+        },
+        {
+            key: "_getSize",
+            value: function _getSize(idx) {
+                var item = this._getPhysicalItem(idx);
+                return item && this._metricsCache.getChildSize(idx);
+            }
+        },
+        {
+            key: "_getAverageSize",
+            value: function _getAverageSize() {
+                return this._metricsCache.averageChildSize || this._itemSize[this._sizeDim];
+            }
+        },
+        {
+            key: "_estimatePosition",
+            value: function _estimatePosition(idx) {
+                var c = this._metricsCache;
+                if (this._first === -1 || this._last === -1) {
+                    return c.averageMarginSize + idx * (c.averageMarginSize + this._getAverageSize());
+                } else {
+                    if (idx < this._first) {
+                        var delta = this._first - idx;
+                        var refItem = this._getPhysicalItem(this._first);
+                        return refItem.pos - (c.getMarginSize(this._first - 1) || c.averageMarginSize) - (delta * c.averageChildSize + (delta - 1) * c.averageMarginSize);
+                    } else {
+                        var delta1 = idx - this._last;
+                        var refItem1 = this._getPhysicalItem(this._last);
+                        return refItem1.pos + (c.getChildSize(this._last) || c.averageChildSize) + (c.getMarginSize(this._last) || c.averageMarginSize) + delta1 * (c.averageChildSize + c.averageMarginSize);
+                    }
+                }
+            }
+        },
+        {
+            /**
+     * Returns the position in the scrolling direction of the item at idx.
+     * Estimates it if the item at idx is not in the DOM.
+     */ key: "_getPosition",
+            value: function _getPosition(idx) {
+                var item = this._getPhysicalItem(idx);
+                var averageMarginSize = this._metricsCache.averageMarginSize;
+                var _this__metricsCache_getMarginSize;
+                return idx === 0 ? (_this__metricsCache_getMarginSize = this._metricsCache.getMarginSize(0)) !== null && _this__metricsCache_getMarginSize !== void 0 ? _this__metricsCache_getMarginSize : averageMarginSize : item ? item.pos : this._estimatePosition(idx);
+            }
+        },
+        {
+            key: "_calculateAnchor",
+            value: function _calculateAnchor(lower, upper) {
+                if (lower <= 0) {
+                    return 0;
+                }
+                if (upper > this._scrollSize - this._viewDim1) {
+                    return this.items.length - 1;
+                }
+                return Math.max(0, Math.min(this.items.length - 1, Math.floor((lower + upper) / 2 / this._delta)));
+            }
+        },
+        {
+            key: "_getAnchor",
+            value: function _getAnchor(lower, upper) {
+                if (this._physicalItems.size === 0) {
+                    return this._calculateAnchor(lower, upper);
+                }
+                if (this._first < 0) {
+                    return this._calculateAnchor(lower, upper);
+                }
+                if (this._last < 0) {
+                    return this._calculateAnchor(lower, upper);
+                }
+                var firstItem = this._getPhysicalItem(this._first), lastItem = this._getPhysicalItem(this._last), firstMin = firstItem.pos, lastMin = lastItem.pos, lastMax = lastMin + this._metricsCache.getChildSize(this._last);
+                if (lastMax < lower) {
+                    // Window is entirely past physical items, calculate new anchor
+                    return this._calculateAnchor(lower, upper);
+                }
+                if (firstMin > upper) {
+                    // Window is entirely before physical items, calculate new anchor
+                    return this._calculateAnchor(lower, upper);
+                }
+                // Window contains a physical item
+                // Find one, starting with the one that was previously first visible
+                var candidateIdx = this._firstVisible - 1;
+                var cMax = -Infinity;
+                while(cMax < lower){
+                    var candidate = this._getPhysicalItem(++candidateIdx);
+                    cMax = candidate.pos + this._metricsCache.getChildSize(candidateIdx);
+                }
+                return candidateIdx;
+            }
+        },
+        {
+            /**
+     * Updates _first and _last based on items that should be in the current
+     * viewed range.
+     */ key: "_getActiveItems",
+            value: function _getActiveItems() {
+                if (this._viewDim1 === 0 || this.items.length === 0) {
+                    this._clearItems();
+                } else {
+                    this._getItems();
+                }
+            }
+        },
+        {
+            /**
+     * Sets the range to empty.
+     */ key: "_clearItems",
+            value: function _clearItems() {
+                this._first = -1;
+                this._last = -1;
+                this._physicalMin = 0;
+                this._physicalMax = 0;
+                var items = this._newPhysicalItems;
+                this._newPhysicalItems = this._physicalItems;
+                this._newPhysicalItems.clear();
+                this._physicalItems = items;
+                this._stable = true;
+            }
+        },
+        {
+            /*
+     * Updates _first and _last based on items that should be in the given range.
+     */ key: "_getItems",
+            value: function _getItems() {
+                var items = this._newPhysicalItems;
+                this._stable = true;
+                var lower, upper;
+                // The anchorIdx is the anchor around which we reflow. It is designed to
+                // allow jumping to any point of the scroll size. We choose it once and
+                // stick with it until stable. first and last are deduced around it.
+                // If we have a pinned item, we anchor on it
+                if (this.pin !== null) {
+                    var index = this.pin.index;
+                    this._anchorIdx = index;
+                    this._anchorPos = this._getPosition(index);
+                }
+                // Determine the lower and upper bounds of the region to be
+                // rendered, relative to the viewport
+                lower = this._scrollPosition - this._overhang; //leadingOverhang;
+                upper = this._scrollPosition + this._viewDim1 + this._overhang; // trailingOverhang;
+                if (upper < 0 || lower > this._scrollSize) {
+                    this._clearItems();
+                    return;
+                }
+                // If we are scrolling to a specific index or if we are doing another
+                // pass to stabilize a previously started reflow, we will already
+                // have an anchor. If not, establish an anchor now.
+                if (this._anchorIdx === null || this._anchorPos === null) {
+                    this._anchorIdx = this._getAnchor(lower, upper);
+                    this._anchorPos = this._getPosition(this._anchorIdx);
+                }
+                var anchorSize = this._getSize(this._anchorIdx);
+                if (anchorSize === undefined) {
+                    this._stable = false;
+                    anchorSize = this._getAverageSize();
+                }
+                var _this__metricsCache_getMarginSize;
+                var anchorLeadingMargin = (_this__metricsCache_getMarginSize = this._metricsCache.getMarginSize(this._anchorIdx)) !== null && _this__metricsCache_getMarginSize !== void 0 ? _this__metricsCache_getMarginSize : this._metricsCache.averageMarginSize;
+                var _this__metricsCache_getMarginSize1;
+                var anchorTrailingMargin = (_this__metricsCache_getMarginSize1 = this._metricsCache.getMarginSize(this._anchorIdx + 1)) !== null && _this__metricsCache_getMarginSize1 !== void 0 ? _this__metricsCache_getMarginSize1 : this._metricsCache.averageMarginSize;
+                if (this._anchorIdx === 0) {
+                    this._anchorPos = anchorLeadingMargin;
+                }
+                if (this._anchorIdx === this.items.length - 1) {
+                    this._anchorPos = this._scrollSize - anchorTrailingMargin - anchorSize;
+                }
+                // Anchor might be outside bounds, so prefer correcting the error and keep
+                // that anchorIdx.
+                var anchorErr = 0;
+                if (this._anchorPos + anchorSize + anchorTrailingMargin < lower) {
+                    anchorErr = lower - (this._anchorPos + anchorSize + anchorTrailingMargin);
+                }
+                if (this._anchorPos - anchorLeadingMargin > upper) {
+                    anchorErr = upper - (this._anchorPos - anchorLeadingMargin);
+                }
+                if (anchorErr) {
+                    this._scrollPosition -= anchorErr;
+                    lower -= anchorErr;
+                    upper -= anchorErr;
+                    this._scrollError += anchorErr;
+                }
+                items.set(this._anchorIdx, {
+                    pos: this._anchorPos,
+                    size: anchorSize
+                });
+                this._first = this._last = this._anchorIdx;
+                this._physicalMin = this._anchorPos - anchorLeadingMargin;
+                this._physicalMax = this._anchorPos + anchorSize + anchorTrailingMargin;
+                while(this._physicalMin > lower && this._first > 0){
+                    var size = this._getSize(--this._first);
+                    if (size === undefined) {
+                        this._stable = false;
+                        size = this._getAverageSize();
+                    }
+                    var margin = this._metricsCache.getMarginSize(this._first);
+                    if (margin === undefined) {
+                        this._stable = false;
+                        margin = this._metricsCache.averageMarginSize;
+                    }
+                    this._physicalMin -= size;
+                    var pos = this._physicalMin;
+                    items.set(this._first, {
+                        pos: pos,
+                        size: size
+                    });
+                    this._physicalMin -= margin;
+                    if (this._stable === false && this._estimate === false) {
+                        break;
+                    }
+                }
+                while(this._physicalMax < upper && this._last < this.items.length - 1){
+                    var size1 = this._getSize(++this._last);
+                    if (size1 === undefined) {
+                        this._stable = false;
+                        size1 = this._getAverageSize();
+                    }
+                    var margin1 = this._metricsCache.getMarginSize(this._last);
+                    if (margin1 === undefined) {
+                        this._stable = false;
+                        margin1 = this._metricsCache.averageMarginSize;
+                    }
+                    var pos1 = this._physicalMax;
+                    items.set(this._last, {
+                        pos: pos1,
+                        size: size1
+                    });
+                    this._physicalMax += size1 + margin1;
+                    if (!this._stable && !this._estimate) {
+                        break;
+                    }
+                }
+                // This handles the cases where we were relying on estimated sizes.
+                var extentErr = this._calculateError();
+                if (extentErr) {
+                    this._physicalMin -= extentErr;
+                    this._physicalMax -= extentErr;
+                    this._anchorPos -= extentErr;
+                    this._scrollPosition -= extentErr;
+                    items.forEach(function(item) {
+                        return item.pos -= extentErr;
+                    });
+                    this._scrollError += extentErr;
+                }
+                if (this._stable) {
+                    this._newPhysicalItems = this._physicalItems;
+                    this._newPhysicalItems.clear();
+                    this._physicalItems = items;
+                }
+            }
+        },
+        {
+            key: "_calculateError",
+            value: function _calculateError() {
+                if (this._first === 0) {
+                    return this._physicalMin;
+                } else if (this._physicalMin <= 0) {
+                    return this._physicalMin - this._first * this._delta;
+                } else if (this._last === this.items.length - 1) {
+                    return this._physicalMax - this._scrollSize;
+                } else if (this._physicalMax >= this._scrollSize) {
+                    return this._physicalMax - this._scrollSize + (this.items.length - 1 - this._last) * this._delta;
+                }
+                return 0;
+            }
+        },
+        {
+            key: "_reflow",
+            value: function _reflow() {
+                var _this = this, _first = _this._first, _last = _this._last;
+                _get(_get_prototype_of(FlowLayout.prototype), "_reflow", this).call(this);
+                if (this._first === -1 && this._last == -1 || this._first === _first && this._last === _last) {
+                    this._resetReflowState();
+                }
+            }
+        },
+        {
+            key: "_resetReflowState",
+            value: function _resetReflowState() {
+                this._anchorIdx = null;
+                this._anchorPos = null;
+                this._stable = true;
+            }
+        },
+        {
+            key: "_updateScrollSize",
+            value: function _updateScrollSize() {
+                var averageMarginSize = this._metricsCache.averageMarginSize;
+                this._scrollSize = Math.max(1, this.items.length * (averageMarginSize + this._getAverageSize()) + averageMarginSize);
+            }
+        },
+        {
+            key: "_delta",
+            get: /**
+     * Returns the average size (precise or estimated) of an item in the scrolling direction,
+     * including any surrounding space.
+     */ function get() {
+                var averageMarginSize = this._metricsCache.averageMarginSize;
+                return this._getAverageSize() + averageMarginSize;
+            }
+        },
+        {
+            /**
+     * Returns the top and left positioning of the item at idx.
+     */ key: "_getItemPosition",
+            value: function _getItemPosition(idx) {
+                var _this__metricsCache_getLeadingMarginValue;
+                var _obj;
+                return _obj = {}, _define_property(_obj, this._positionDim, this._getPosition(idx)), _define_property(_obj, this._secondaryPositionDim, 0), _define_property(_obj, offset(this.direction), -((_this__metricsCache_getLeadingMarginValue = this._metricsCache.getLeadingMarginValue(idx, this.direction)) !== null && _this__metricsCache_getLeadingMarginValue !== void 0 ? _this__metricsCache_getLeadingMarginValue : this._metricsCache.averageMarginSize)), _obj;
+            }
+        },
+        {
+            /**
+     * Returns the height and width of the item at idx.
+     */ key: "_getItemSize",
+            value: function _getItemSize(idx) {
+                var _obj;
+                return _obj = {}, _define_property(_obj, this._sizeDim, this._getSize(idx) || this._getAverageSize()), _define_property(_obj, this._secondarySizeDim, this._itemSize[this._secondarySizeDim]), _obj;
+            }
+        },
+        {
+            key: "_viewDim2Changed",
+            value: function _viewDim2Changed() {
+                this._metricsCache.clear();
+                this._scheduleReflow();
+            }
+        }
+    ]);
+    return FlowLayout;
+} 
+(BaseLayout);
+
+exports.FlowLayout = FlowLayout;
+exports.flow = flow;