@atlaskit/navigation-system 11.3.0 → 11.3.2

package/dist/esm/ui/page-layout/layout-area-sizing-provider.js

@@ -1,295 +1,290 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { bind } from 'bind-event-listener';
-import { calculateLayoutAreaStates } from './calculate-layout-area-states';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { bind, bindAll } from 'bind-event-listener';
 import { LayoutAreaSizingContext } from './layout-area-sizing-context';
 import { layoutAreaStateContexts } from './layout-area-state-contexts';
-import { useOccupiedLayoutWidth } from './use-occupied-layout-width';
-var defaultMainMinWidth = 320;
-function useStableAreaState(state) {
-  var _ref = state !== null && state !== void 0 ? state : {},
-    mode = _ref.mode,
-    width = _ref.width,
-    minWidth = _ref.minWidth;
-  return useMemo(function () {
-    return mode !== undefined && width !== undefined && minWidth !== undefined ? {
-      mode: mode,
-      width: width,
-      minWidth: minWidth
-    } : undefined;
-  }, [mode, width, minWidth]);
-}
-export function LayoutAreaSizingProvider(_ref2) {
-  var children = _ref2.children,
-    layoutRef = _ref2.layoutRef;
-  var occupiedWidth = useOccupiedLayoutWidth(layoutRef);
+import { useCssLayoutAreaStates } from './use-css-layout-area-states';
+
+/**
+ * Stable, synchronous boundary for SSR content. The drag/cascade implementation
+ * is a sibling, not a replacement wrapper, so loading it cannot remount the app.
+ * CSS handles initial and responsive geometry; only splitter interaction requests
+ * the asynchronous chunk. The eager observer reads modes without changing widths.
+ */
+export function LayoutAreaSizingProvider(_ref) {
+  var _states$sideNav$mode, _states$sideNav, _states$chatPanel$mo, _states$chatPanel;
+  var children = _ref.children,
+    layoutRef = _ref.layoutRef;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    dimensions = _useState2[0],
-    setDimensions = _useState2[1];
-  var _useState3 = useState(defaultMainMinWidth),
+    Runtime = _useState2[0],
+    setRuntime = _useState2[1];
+  var _useState3 = useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
-    mainMinWidth = _useState4[0],
-    setMainMinWidth = _useState4[1];
-  var _useState5 = useState({}),
+    states = _useState4[0],
+    setStates = _useState4[1];
+  var actions = useRef(null);
+  var configs = useRef({});
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    areas = _useState6[0],
-    setAreas = _useState6[1];
-  var _useState7 = useState(null),
+    lastOpenedOverlay = _useState6[0],
+    setLastOpenedOverlay = _useState6[1];
+  var _useState7 = useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
-    resizeSession = _useState8[0],
-    setResizeSession = _useState8[1];
-  var areaStatesRef = React.useRef({});
-  var configsRef = React.useRef({});
-  var openSequence = React.useRef(0);
-  useEffect(function () {
-    setResizeSession(null);
-  }, [mainMinWidth, occupiedWidth]);
+    configRevision = _useState8[0],
+    setConfigRevision = _useState8[1];
+  var cssModes = useCssLayoutAreaStates(layoutRef, configRevision, Runtime === null);
+  var sideNavMode = (_states$sideNav$mode = (_states$sideNav = states['side-nav']) === null || _states$sideNav === void 0 ? void 0 : _states$sideNav.mode) !== null && _states$sideNav$mode !== void 0 ? _states$sideNav$mode : cssModes['side-nav'];
+  var chatPanelMode = (_states$chatPanel$mo = (_states$chatPanel = states['chat-panel']) === null || _states$chatPanel === void 0 ? void 0 : _states$chatPanel.mode) !== null && _states$chatPanel$mo !== void 0 ? _states$chatPanel$mo : cssModes['chat-panel'];
+
+  // Overlay dismissal is available before the sizing chunk loads. Keep the open
+  // order here too: replaying registrations into the runtime loses that order.
   useEffect(function () {
-    var root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
-    var previous = null;
-    // Match the actual rem-based grid breakpoint, including browser font settings.
     var inlineChatQuery = window.matchMedia('(min-width: 40rem)');
-    var inlineSideNavQuery = window.matchMedia('(min-width: 64rem)');
-    var updateDimensions = function updateDimensions(contentWidth) {
-      var _style$paddingLeft, _style$paddingRight, _previous;
-      var style = root && contentWidth === undefined ? getComputedStyle(root) : null;
-      var layoutWidth = contentWidth !== null && contentWidth !== void 0 ? contentWidth : root ? Math.max(0, root.clientWidth - (parseFloat((_style$paddingLeft = style === null || style === void 0 ? void 0 : style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : '') || 0) - (parseFloat((_style$paddingRight = style === null || style === void 0 ? void 0 : style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : '') || 0)) : window.innerWidth;
-      var next = {
-        viewportWidth: window.innerWidth,
-        layoutWidth: layoutWidth,
-        isChatPanelOverlay: !inlineChatQuery.matches,
-        isSideNavOverlay: !inlineSideNavQuery.matches
-      };
-      if (((_previous = previous) === null || _previous === void 0 ? void 0 : _previous.viewportWidth) === next.viewportWidth && previous.layoutWidth === next.layoutWidth && previous.isChatPanelOverlay === next.isChatPanelOverlay && previous.isSideNavOverlay === next.isSideNavOverlay) {
+    var dismissOlderOverlay = function dismissOlderOverlay() {
+      var _olderOverlay$onReque;
+      var sideNav = configs.current['side-nav'];
+      var chatPanel = configs.current['chat-panel'];
+      if (!(sideNav !== null && sideNav !== void 0 && sideNav.isOpen) || !(chatPanel !== null && chatPanel !== void 0 && chatPanel.isOpen) || !lastOpenedOverlay) {
         return;
       }
-      previous = next;
-      setDimensions(next);
-      setResizeSession(null);
-    };
-    updateDimensions();
-    var observer = new ResizeObserver(function (entries) {
-      var entry = entries.find(function (entry) {
-        return entry.target === root;
-      });
-      if (entry) {
-        updateDimensions(entry.contentRect.width);
+      // Before allocation, CSS puts both areas in overlay below 40rem. Once
+      // sizing is active, also honour overlays caused by custom widths/slots.
+      if (inlineChatQuery.matches && (sideNavMode !== 'overlay' || chatPanelMode !== 'overlay')) {
+        return;
       }
+      var olderOverlay = lastOpenedOverlay === 'side-nav' ? chatPanel : sideNav;
+      (_olderOverlay$onReque = olderOverlay.onRequestClose) === null || _olderOverlay$onReque === void 0 || _olderOverlay$onReque.call(olderOverlay);
+    };
+    dismissOlderOverlay();
+    return bind(inlineChatQuery, {
+      type: 'change',
+      listener: dismissOlderOverlay
     });
-    if (root) {
-      observer.observe(root);
+  }, [chatPanelMode, lastOpenedOverlay, sideNavMode]);
+  var mainMinWidth = useRef(320);
+  var loadRef = useRef(function () {});
+  var ready = useRef(false);
+  var waiting = useRef([]);
+  var pending = useRef([]);
+  var prepareResize = useCallback(function () {
+    if (ready.current) {
+      return Promise.resolve(true);
     }
-    var unbindResize = bind(window, {
-      type: 'resize',
-      listener: function listener() {
-        return updateDimensions();
-      }
+    return new Promise(function (resolve) {
+      waiting.current.push(resolve);
+      loadRef.current();
     });
-    var unbindQuery = bind(inlineChatQuery, {
-      type: 'change',
-      listener: function listener() {
-        return updateDimensions();
+  }, []);
+  useEffect(function () {
+    var root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    if (!root) {
+      return;
+    }
+    var cancelled = false;
+    var loading = false;
+    var waitingForRuntime = waiting.current;
+    var load = function load() {
+      if (loading) {
+        return;
       }
-    });
-    var unbindSideNavQuery = bind(inlineSideNavQuery, {
-      type: 'change',
-      listener: function listener() {
-        return updateDimensions();
+      loading = true;
+      void import( /* webpackChunkName: "@atlaskit-internal_navigation-layout-sizing" */'./layout-area-sizing-runtime').then(function (_ref2) {
+        var LayoutAreaSizingRuntime = _ref2.LayoutAreaSizingRuntime;
+        if (!cancelled) {
+          setRuntime(function () {
+            return LayoutAreaSizingRuntime;
+          });
+        }
+      }, function () {
+        loading = false;
+        pending.current = [];
+        var _iterator = _createForOfIteratorHelper(waitingForRuntime.splice(0)),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var resolve = _step.value;
+            resolve(false);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+    };
+    loadRef.current = load;
+    var loadForSplitter = function loadForSplitter(event) {
+      if (event.target instanceof Element && event.target.closest('[data-panel-splitter]')) {
+        load();
       }
-    });
+    };
+    var unbindRoot = bindAll(root, [{
+      type: 'pointerover',
+      listener: loadForSplitter,
+      options: {
+        passive: true
+      }
+    }, {
+      type: 'focusin',
+      listener: loadForSplitter
+    }, {
+      type: 'pointerdown',
+      listener: loadForSplitter,
+      options: {
+        passive: true
+      }
+    }]);
     return function () {
-      observer.disconnect();
-      unbindResize();
-      unbindQuery();
-      unbindSideNavQuery();
+      cancelled = true;
+      ready.current = false;
+      pending.current = [];
+      var _iterator2 = _createForOfIteratorHelper(waitingForRuntime.splice(0)),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var resolve = _step2.value;
+          resolve(false);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      loadRef.current = function () {};
+      unbindRoot();
     };
   }, [layoutRef]);
-  var registerArea = useCallback(function (area, config) {
-    var previous = configsRef.current[area];
-    configsRef.current[area] = config;
-    setResizeSession(function (current) {
-      // A changed layout/configuration needs a fresh allocation. A controlled
-      // acknowledgement for the resized area keeps its siblings fixed.
-      return (previous === null || previous === void 0 ? void 0 : previous.isOpen) === config.isOpen && previous.minWidth === config.minWidth && previous.maxWidth === config.maxWidth && previous.defaultWidth === config.defaultWidth && previous.compactDefaultWidth === config.compactDefaultWidth && (previous.requestedWidth === config.requestedWidth || (current === null || current === void 0 ? void 0 : current.area) === area) ? current : null;
-    });
-    // Allocate once per registration, outside the updater React may replay. Gaps are
-    // harmless: only relative ordering of closed-to-open transitions is significant.
-    var openedAt = ++openSequence.current;
-    setAreas(function (current) {
-      var existing = current[area];
-      return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, area, _objectSpread(_objectSpread(_objectSpread({}, existing), config), {}, {
-        liveResize: config.isOpen ? existing === null || existing === void 0 ? void 0 : existing.liveResize : undefined,
-        openedAt: config.isOpen && !(existing !== null && existing !== void 0 && existing.isOpen) ? openedAt : existing === null || existing === void 0 ? void 0 : existing.openedAt
-      })));
-    });
-  }, []);
-  var unregisterArea = useCallback(function (area) {
-    delete configsRef.current[area];
-    setResizeSession(null);
-    setAreas(function (current) {
-      if (!current[area]) {
-        return current;
-      }
-      // Closing uses isOpen: false and retains preferences. Unregistering means
-      // the owning component unmounted; a replacement must start with its own defaults.
-      var next = _objectSpread({}, current);
-      delete next[area];
-      return next;
-    });
-  }, []);
-  var freezeSiblingWidths = useCallback(function (area) {
-    var baselineWidths = {};
-    var _iterator = _createForOfIteratorHelper(['side-nav', 'panel', 'chat-panel']),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var areaName = _step.value;
-        var state = areaStatesRef.current[areaName];
-        if ((state === null || state === void 0 ? void 0 : state.mode) === 'inline') {
-          baselineWidths[areaName] = state.width;
+  var onReady = useCallback(function (runtime) {
+    actions.current = runtime;
+    if (runtime) {
+      runtime.setMainMinWidth(mainMinWidth.current);
+      var _iterator3 = _createForOfIteratorHelper(['side-nav', 'panel', 'chat-panel']),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var area = _step3.value;
+          var config = configs.current[area];
+          if (config) {
+            runtime.registerArea(area, config);
+          }
         }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
       }
-      // Keep the same siblings fixed after completion, including while a controlled
-      // consumer rejects or asynchronously accepts the requested width.
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
     }
-    setResizeSession({
-      area: area,
-      baselineWidths: baselineWidths
-    });
   }, []);
-  var startResize = useCallback(function (area, mode) {
-    if (mode !== 'inline') {
-      return;
-    }
-    freezeSiblingWidths(area);
-
-    // Start from the effective width, which may already be compressed below the preferred width.
-    // Reapplying the preferred width here would move the splitter away from the pointer.
-    var renderedState = areaStatesRef.current[area];
-    if ((renderedState === null || renderedState === void 0 ? void 0 : renderedState.mode) === 'inline') {
-      setAreas(function (current) {
-        var existing = current[area];
-        return existing ? _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, area, _objectSpread(_objectSpread({}, existing), {}, {
-          liveResize: {
-            mode: mode,
-            width: renderedState.width
-          }
-        }))) : current;
-      });
-    }
-  }, [freezeSiblingWidths]);
-  var resize = useCallback(function (area, mode, width) {
-    setAreas(function (current) {
-      var _existing$liveResize;
-      var existing = current[area];
-      if ((existing === null || existing === void 0 || (_existing$liveResize = existing.liveResize) === null || _existing$liveResize === void 0 ? void 0 : _existing$liveResize.mode) === mode && existing.liveResize.width === width) {
-        return current;
-      }
-      return existing ? _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, area, _objectSpread(_objectSpread({}, existing), {}, {
-        liveResize: {
-          mode: mode,
-          width: width
+  var onUpdate = useCallback(function (next) {
+    setStates(next);
+    var runtime = actions.current;
+    if (runtime && Object.values(next).some(Boolean)) {
+      ready.current = true;
+      var _iterator4 = _createForOfIteratorHelper(pending.current.splice(0)),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var action = _step4.value;
+          action(runtime);
         }
-      }))) : current;
-    });
-  }, []);
-  var completeResize = useCallback(function (area, mode, width) {
-    if (mode === 'inline') {
-      // Keyboard resizing completes without a preceding pointer-drag session.
-      freezeSiblingWidths(area);
-    }
-    setAreas(function (current) {
-      var existing = current[area];
-      if (!existing) {
-        return current;
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
       }
-      if (mode === 'overlay') {
-        return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, area, _objectSpread(_objectSpread({}, existing), {}, {
-          liveResize: undefined,
-          preferredOverlayWidth: width
-        })));
+      var _iterator5 = _createForOfIteratorHelper(waiting.current.splice(0)),
+        _step5;
+      try {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var resolve = _step5.value;
+          resolve(true);
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
       }
-      return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, area, _objectSpread(_objectSpread({}, existing), {}, {
-        liveResize: undefined,
-        preferredInlineWidth: width
-      })));
-    });
-  }, [freezeSiblingWidths]);
-  var areaStates = useMemo(function () {
-    return dimensions === null ? {} : calculateLayoutAreaStates(_objectSpread(_objectSpread({}, dimensions), {}, {
-      occupiedWidth: occupiedWidth,
-      mainMinWidth: mainMinWidth,
-      areas: areas,
-      resizeSession: resizeSession
-    }));
-  }, [areas, mainMinWidth, resizeSession, dimensions, occupiedWidth]);
-  useEffect(function () {
-    areaStatesRef.current = areaStates;
-  }, [areaStates]);
-  useEffect(function () {
-    var _areaStates$sideNav, _areaStates$chatPane, _sideNav$openedAt, _chatPanel$openedAt;
-    if (((_areaStates$sideNav = areaStates['side-nav']) === null || _areaStates$sideNav === void 0 ? void 0 : _areaStates$sideNav.mode) !== 'overlay' || ((_areaStates$chatPane = areaStates['chat-panel']) === null || _areaStates$chatPane === void 0 ? void 0 : _areaStates$chatPane.mode) !== 'overlay') {
-      return;
     }
-    var sideNav = areas['side-nav'];
-    var chatPanel = areas['chat-panel'];
-    if (!(sideNav !== null && sideNav !== void 0 && sideNav.isOpen) || !(chatPanel !== null && chatPanel !== void 0 && chatPanel.isOpen)) {
-      return;
-    }
-    if (((_sideNav$openedAt = sideNav.openedAt) !== null && _sideNav$openedAt !== void 0 ? _sideNav$openedAt : 0) > ((_chatPanel$openedAt = chatPanel.openedAt) !== null && _chatPanel$openedAt !== void 0 ? _chatPanel$openedAt : 0)) {
-      var _chatPanel$onRequestC;
-      (_chatPanel$onRequestC = chatPanel.onRequestClose) === null || _chatPanel$onRequestC === void 0 || _chatPanel$onRequestC.call(chatPanel);
+  }, []);
+  var dispatch = useCallback(function (action) {
+    if (ready.current && actions.current) {
+      action(actions.current);
     } else {
-      var _sideNav$onRequestClo;
-      (_sideNav$onRequestClo = sideNav.onRequestClose) === null || _sideNav$onRequestClo === void 0 || _sideNav$onRequestClo.call(sideNav);
+      pending.current.push(action);
+      loadRef.current();
     }
-  }, [areas, areaStates]);
-
-  // Read bounds lazily: changing a sibling's capacity must not publish new render
-  // state or recreate drag listeners for a region whose own width did not change.
-  var getResizeBounds = useCallback(function (area) {
-    var _areaStatesRef$curren;
-    var bounds = (_areaStatesRef$curren = areaStatesRef.current[area]) === null || _areaStatesRef$curren === void 0 ? void 0 : _areaStatesRef$curren.resizeBounds;
-    return bounds ? {
-      min: "".concat(bounds.min, "px"),
-      max: "".concat(bounds.max, "px")
-    } : undefined;
   }, []);
   var value = useMemo(function () {
     return {
-      getResizeBounds: getResizeBounds,
-      registerArea: registerArea,
-      unregisterArea: unregisterArea,
-      startResize: startResize,
-      resize: resize,
-      completeResize: completeResize,
-      setMainMinWidth: setMainMinWidth
+      prepareResize: prepareResize,
+      registerArea: function registerArea(area, config) {
+        var _configs$current$area, _actions$current;
+        if (area !== 'panel' && config.isOpen && !((_configs$current$area = configs.current[area]) !== null && _configs$current$area !== void 0 && _configs$current$area.isOpen)) {
+          setLastOpenedOverlay(area);
+        }
+        configs.current[area] = config;
+        setConfigRevision(function (revision) {
+          return revision + 1;
+        });
+        (_actions$current = actions.current) === null || _actions$current === void 0 || _actions$current.registerArea(area, config);
+      },
+      unregisterArea: function unregisterArea(area) {
+        var _actions$current2;
+        delete configs.current[area];
+        setConfigRevision(function (revision) {
+          return revision + 1;
+        });
+        (_actions$current2 = actions.current) === null || _actions$current2 === void 0 || _actions$current2.unregisterArea(area);
+      },
+      setMainMinWidth: function setMainMinWidth(width) {
+        var _actions$current3;
+        if (mainMinWidth.current !== width) {
+          setConfigRevision(function (revision) {
+            return revision + 1;
+          });
+        }
+        mainMinWidth.current = width;
+        (_actions$current3 = actions.current) === null || _actions$current3 === void 0 || _actions$current3.setMainMinWidth(width);
+      },
+      getResizeBounds: function getResizeBounds(area) {
+        var _actions$current4;
+        return (_actions$current4 = actions.current) === null || _actions$current4 === void 0 ? void 0 : _actions$current4.getResizeBounds(area);
+      },
+      startResize: function startResize(area, mode) {
+        return dispatch(function (runtime) {
+          return runtime.startResize(area, mode);
+        });
+      },
+      resize: function resize(area, mode, width) {
+        return dispatch(function (runtime) {
+          return runtime.resize(area, mode, width);
+        });
+      },
+      completeResize: function completeResize(area, mode, width) {
+        return dispatch(function (runtime) {
+          return runtime.completeResize(area, mode, width);
+        });
+      }
     };
-  }, [completeResize, getResizeBounds, registerArea, resize, startResize, unregisterArea]);
-  var sideNavState = useStableAreaState(areaStates['side-nav']);
-  var panelState = useStableAreaState(areaStates.panel);
-  var chatPanelState = useStableAreaState(areaStates['chat-panel']);
+  }, [dispatch, prepareResize]);
   var SideNavStateProvider = layoutAreaStateContexts['side-nav'].Provider;
   var PanelStateProvider = layoutAreaStateContexts.panel.Provider;
   var ChatPanelStateProvider = layoutAreaStateContexts['chat-panel'].Provider;
   return /*#__PURE__*/React.createElement(LayoutAreaSizingContext.Provider, {
     value: value
   }, /*#__PURE__*/React.createElement(SideNavStateProvider, {
-    value: sideNavState
+    value: states['side-nav']
   }, /*#__PURE__*/React.createElement(PanelStateProvider, {
-    value: panelState
+    value: states.panel
   }, /*#__PURE__*/React.createElement(ChatPanelStateProvider, {
-    value: chatPanelState
-  }, children))));
+    value: states['chat-panel']
+  }, children))), Runtime && /*#__PURE__*/React.createElement(Runtime, {
+    layoutRef: layoutRef,
+    onReady: onReady,
+    onUpdate: onUpdate
+  }));
 }