@atlaskit/navigation-system 11.3.0 → 11.3.2

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

@@ -1,279 +1,209 @@
-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';
-const defaultMainMinWidth = 320;
-function useStableAreaState(state) {
-  const {
-    mode,
-    width,
-    minWidth
-  } = state !== null && state !== void 0 ? state : {};
-  return useMemo(() => mode !== undefined && width !== undefined && minWidth !== undefined ? {
-    mode,
-    width,
-    minWidth
-  } : undefined, [mode, width, minWidth]);
-}
+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({
   children,
   layoutRef
 }) {
-  const occupiedWidth = useOccupiedLayoutWidth(layoutRef);
-  const [dimensions, setDimensions] = useState(null);
-  const [mainMinWidth, setMainMinWidth] = useState(defaultMainMinWidth);
-  const [areas, setAreas] = useState({});
-  const [resizeSession, setResizeSession] = useState(null);
-  const areaStatesRef = React.useRef({});
-  const configsRef = React.useRef({});
-  const openSequence = React.useRef(0);
-  useEffect(() => {
-    setResizeSession(null);
-  }, [mainMinWidth, occupiedWidth]);
+  var _states$sideNav$mode, _states$sideNav, _states$chatPanel$mo, _states$chatPanel;
+  const [Runtime, setRuntime] = useState(null);
+  const [states, setStates] = useState({});
+  const actions = useRef(null);
+  const configs = useRef({});
+  const [lastOpenedOverlay, setLastOpenedOverlay] = useState(null);
+  const [configRevision, setConfigRevision] = useState(0);
+  const cssModes = useCssLayoutAreaStates(layoutRef, configRevision, Runtime === null);
+  const 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'];
+  const 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(() => {
-    const root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
-    let previous = null;
-    // Match the actual rem-based grid breakpoint, including browser font settings.
     const inlineChatQuery = window.matchMedia('(min-width: 40rem)');
-    const inlineSideNavQuery = window.matchMedia('(min-width: 64rem)');
-    const updateDimensions = contentWidth => {
-      var _style$paddingLeft, _style$paddingRight, _previous;
-      const style = root && contentWidth === undefined ? getComputedStyle(root) : null;
-      const 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;
-      const next = {
-        viewportWidth: window.innerWidth,
-        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) {
+    const dismissOlderOverlay = () => {
+      var _olderOverlay$onReque;
+      const sideNav = configs.current['side-nav'];
+      const 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();
-    const observer = new ResizeObserver(entries => {
-      const entry = entries.find(entry => 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;
       }
-    });
-    if (root) {
-      observer.observe(root);
-    }
-    const unbindResize = bind(window, {
-      type: 'resize',
-      listener: () => updateDimensions()
-    });
-    const unbindQuery = bind(inlineChatQuery, {
-      type: 'change',
-      listener: () => updateDimensions()
-    });
-    const unbindSideNavQuery = bind(inlineSideNavQuery, {
-      type: 'change',
-      listener: () => updateDimensions()
-    });
-    return () => {
-      observer.disconnect();
-      unbindResize();
-      unbindQuery();
-      unbindSideNavQuery();
+      const olderOverlay = lastOpenedOverlay === 'side-nav' ? chatPanel : sideNav;
+      (_olderOverlay$onReque = olderOverlay.onRequestClose) === null || _olderOverlay$onReque === void 0 ? void 0 : _olderOverlay$onReque.call(olderOverlay);
     };
-  }, [layoutRef]);
-  const registerArea = useCallback((area, config) => {
-    const previous = configsRef.current[area];
-    configsRef.current[area] = config;
-    setResizeSession(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.
-    const openedAt = ++openSequence.current;
-    setAreas(current => {
-      const existing = current[area];
-      return {
-        ...current,
-        [area]: {
-          ...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
-        }
-      };
-    });
-  }, []);
-  const unregisterArea = useCallback(area => {
-    delete configsRef.current[area];
-    setResizeSession(null);
-    setAreas(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.
-      const next = {
-        ...current
-      };
-      delete next[area];
-      return next;
+    dismissOlderOverlay();
+    return bind(inlineChatQuery, {
+      type: 'change',
+      listener: dismissOlderOverlay
     });
-  }, []);
-  const freezeSiblingWidths = useCallback(area => {
-    const baselineWidths = {};
-    for (const areaName of ['side-nav', 'panel', 'chat-panel']) {
-      const state = areaStatesRef.current[areaName];
-      if ((state === null || state === void 0 ? void 0 : state.mode) === 'inline') {
-        baselineWidths[areaName] = state.width;
-      }
+  }, [chatPanelMode, lastOpenedOverlay, sideNavMode]);
+  const mainMinWidth = useRef(320);
+  const loadRef = useRef(() => {});
+  const ready = useRef(false);
+  const waiting = useRef([]);
+  const pending = useRef([]);
+  const prepareResize = useCallback(() => {
+    if (ready.current) {
+      return Promise.resolve(true);
     }
-    // Keep the same siblings fixed after completion, including while a controlled
-    // consumer rejects or asynchronously accepts the requested width.
-    setResizeSession({
-      area,
-      baselineWidths
+    return new Promise(resolve => {
+      waiting.current.push(resolve);
+      loadRef.current();
     });
   }, []);
-  const startResize = useCallback((area, mode) => {
-    if (mode !== 'inline') {
+  useEffect(() => {
+    const root = layoutRef === null || layoutRef === void 0 ? void 0 : layoutRef.current;
+    if (!root) {
       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.
-    const renderedState = areaStatesRef.current[area];
-    if ((renderedState === null || renderedState === void 0 ? void 0 : renderedState.mode) === 'inline') {
-      setAreas(current => {
-        const existing = current[area];
-        return existing ? {
-          ...current,
-          [area]: {
-            ...existing,
-            liveResize: {
-              mode,
-              width: renderedState.width
-            }
-          }
-        } : current;
-      });
-    }
-  }, [freezeSiblingWidths]);
-  const resize = useCallback((area, mode, width) => {
-    setAreas(current => {
-      var _existing$liveResize;
-      const existing = current[area];
-      if ((existing === null || existing === void 0 ? void 0 : (_existing$liveResize = existing.liveResize) === null || _existing$liveResize === void 0 ? void 0 : _existing$liveResize.mode) === mode && existing.liveResize.width === width) {
-        return current;
+    let cancelled = false;
+    let loading = false;
+    const waitingForRuntime = waiting.current;
+    const load = () => {
+      if (loading) {
+        return;
       }
-      return existing ? {
-        ...current,
-        [area]: {
-          ...existing,
-          liveResize: {
-            mode,
-            width
-          }
+      loading = true;
+      void import( /* webpackChunkName: "@atlaskit-internal_navigation-layout-sizing" */'./layout-area-sizing-runtime').then(({
+        LayoutAreaSizingRuntime
+      }) => {
+        if (!cancelled) {
+          setRuntime(() => LayoutAreaSizingRuntime);
         }
-      } : current;
-    });
-  }, []);
-  const completeResize = useCallback((area, mode, width) => {
-    if (mode === 'inline') {
-      // Keyboard resizing completes without a preceding pointer-drag session.
-      freezeSiblingWidths(area);
-    }
-    setAreas(current => {
-      const existing = current[area];
-      if (!existing) {
-        return current;
+      }, () => {
+        loading = false;
+        pending.current = [];
+        for (const resolve of waitingForRuntime.splice(0)) {
+          resolve(false);
+        }
+      });
+    };
+    loadRef.current = load;
+    const loadForSplitter = event => {
+      if (event.target instanceof Element && event.target.closest('[data-panel-splitter]')) {
+        load();
+      }
+    };
+    const unbindRoot = bindAll(root, [{
+      type: 'pointerover',
+      listener: loadForSplitter,
+      options: {
+        passive: true
       }
-      if (mode === 'overlay') {
-        return {
-          ...current,
-          [area]: {
-            ...existing,
-            liveResize: undefined,
-            preferredOverlayWidth: width
-          }
-        };
+    }, {
+      type: 'focusin',
+      listener: loadForSplitter
+    }, {
+      type: 'pointerdown',
+      listener: loadForSplitter,
+      options: {
+        passive: true
       }
-      return {
-        ...current,
-        [area]: {
-          ...existing,
-          liveResize: undefined,
-          preferredInlineWidth: width
+    }]);
+    return () => {
+      cancelled = true;
+      ready.current = false;
+      pending.current = [];
+      for (const resolve of waitingForRuntime.splice(0)) {
+        resolve(false);
+      }
+      loadRef.current = () => {};
+      unbindRoot();
+    };
+  }, [layoutRef]);
+  const onReady = useCallback(runtime => {
+    actions.current = runtime;
+    if (runtime) {
+      runtime.setMainMinWidth(mainMinWidth.current);
+      for (const area of ['side-nav', 'panel', 'chat-panel']) {
+        const config = configs.current[area];
+        if (config) {
+          runtime.registerArea(area, config);
         }
-      };
-    });
-  }, [freezeSiblingWidths]);
-  const areaStates = useMemo(() => dimensions === null ? {} : calculateLayoutAreaStates({
-    ...dimensions,
-    occupiedWidth,
-    mainMinWidth,
-    areas,
-    resizeSession
-  }), [areas, mainMinWidth, resizeSession, dimensions, occupiedWidth]);
-  useEffect(() => {
-    areaStatesRef.current = areaStates;
-  }, [areaStates]);
-  useEffect(() => {
-    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;
+      }
     }
-    const sideNav = areas['side-nav'];
-    const chatPanel = areas['chat-panel'];
-    if (!(sideNav !== null && sideNav !== void 0 && sideNav.isOpen) || !(chatPanel !== null && chatPanel !== void 0 && chatPanel.isOpen)) {
-      return;
+  }, []);
+  const onUpdate = useCallback(next => {
+    setStates(next);
+    const runtime = actions.current;
+    if (runtime && Object.values(next).some(Boolean)) {
+      ready.current = true;
+      for (const action of pending.current.splice(0)) {
+        action(runtime);
+      }
+      for (const resolve of waiting.current.splice(0)) {
+        resolve(true);
+      }
     }
-    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 ? void 0 : _chatPanel$onRequestC.call(chatPanel);
+  }, []);
+  const dispatch = useCallback(action => {
+    if (ready.current && actions.current) {
+      action(actions.current);
     } else {
-      var _sideNav$onRequestClo;
-      (_sideNav$onRequestClo = sideNav.onRequestClose) === null || _sideNav$onRequestClo === void 0 ? 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.
-  const getResizeBounds = useCallback(area => {
-    var _areaStatesRef$curren;
-    const bounds = (_areaStatesRef$curren = areaStatesRef.current[area]) === null || _areaStatesRef$curren === void 0 ? void 0 : _areaStatesRef$curren.resizeBounds;
-    return bounds ? {
-      min: `${bounds.min}px`,
-      max: `${bounds.max}px`
-    } : undefined;
   }, []);
   const value = useMemo(() => ({
-    getResizeBounds,
-    registerArea,
-    unregisterArea,
-    startResize,
-    resize,
-    completeResize,
-    setMainMinWidth
-  }), [completeResize, getResizeBounds, registerArea, resize, startResize, unregisterArea]);
-  const sideNavState = useStableAreaState(areaStates['side-nav']);
-  const panelState = useStableAreaState(areaStates.panel);
-  const chatPanelState = useStableAreaState(areaStates['chat-panel']);
+    prepareResize,
+    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(revision => revision + 1);
+      (_actions$current = actions.current) === null || _actions$current === void 0 ? void 0 : _actions$current.registerArea(area, config);
+    },
+    unregisterArea: area => {
+      var _actions$current2;
+      delete configs.current[area];
+      setConfigRevision(revision => revision + 1);
+      (_actions$current2 = actions.current) === null || _actions$current2 === void 0 ? void 0 : _actions$current2.unregisterArea(area);
+    },
+    setMainMinWidth: width => {
+      var _actions$current3;
+      if (mainMinWidth.current !== width) {
+        setConfigRevision(revision => revision + 1);
+      }
+      mainMinWidth.current = width;
+      (_actions$current3 = actions.current) === null || _actions$current3 === void 0 ? void 0 : _actions$current3.setMainMinWidth(width);
+    },
+    getResizeBounds: area => {
+      var _actions$current4;
+      return (_actions$current4 = actions.current) === null || _actions$current4 === void 0 ? void 0 : _actions$current4.getResizeBounds(area);
+    },
+    startResize: (area, mode) => dispatch(runtime => runtime.startResize(area, mode)),
+    resize: (area, mode, width) => dispatch(runtime => runtime.resize(area, mode, width)),
+    completeResize: (area, mode, width) => dispatch(runtime => runtime.completeResize(area, mode, width))
+  }), [dispatch, prepareResize]);
   const SideNavStateProvider = layoutAreaStateContexts['side-nav'].Provider;
   const PanelStateProvider = layoutAreaStateContexts.panel.Provider;
   const 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
+  }));
 }