@atlaskit/page-layout 1.3.8 → 1.3.10

package/dist/es2019/components/slots/internal/left-sidebar-inner.js

@@ -1,17 +1,18 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const prefersReducedMotionStyles = css(prefersReducedMotion());
+
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
  * If we were to apply `position: fixed` to the outer wrapper, it will be popped
  * out of its flex container and Main would stretch to occupy all the space.
  */
-
 const fixedInnerStyles = css({
   width: `${LEFT_SIDEBAR_WIDTH}`,
   position: 'fixed',
@@ -23,12 +24,12 @@ const fixedInnerStyles = css({
 const fixedInnerFlyoutStyles = css({
   width: LEFT_SIDEBAR_FLYOUT_WIDTH
 });
+
 /**
  * Static in the sense of `position: static`.
  *
  * It will expand the page height to fit its content.
  */
-
 const staticInnerStyles = css({
   height: '100%'
 });
@@ -37,7 +38,6 @@ const draggingStyles = css({
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
 });
-
 const LeftSidebarInner = ({
   children,
   isFixed = false,
@@ -47,7 +47,7 @@ const LeftSidebarInner = ({
   return jsx("div", {
     css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default LeftSidebarInner;

package/dist/es2019/components/slots/internal/left-sidebar-outer.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -25,12 +24,12 @@ const draggingStyles = css({
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
 });
+
 /**
  * In fixed mode this element's child is taken out of the document flow.
  * It doesn't take up the width as expected,
  * so the pseudo element forces it to take up the necessary width.
  */
-
 const fixedStyles = css({
   '::after': {
     display: 'inline-block',
@@ -45,7 +44,6 @@ const flyoutFixedStyles = css({
   width: COLLAPSED_LEFT_SIDEBAR_WIDTH
 });
 const selector = getPageLayoutSlotSelector('left-sidebar');
-
 const LeftSidebarOuter = ({
   children,
   isFixed = false,
@@ -75,5 +73,4 @@ const LeftSidebarOuter = ({
     ref: ref
   }, selector), children));
 };
-
 export default /*#__PURE__*/forwardRef(LeftSidebarOuter);

package/dist/es2019/components/slots/internal/resizable-children-wrapper.js

@@ -1,17 +1,18 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion';
 import { TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarCollapsing } from '../../../common/hooks';
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const prefersReducedMotionStyles = css(prefersReducedMotion());
+
 /**
  * The transition duration is intentionally set to 0ms.
  *
  * A transition is being used here to delay the setting of
  * opacity and visibility so that it syncs collapsing sidebar.
  */
-
 const hideLeftSidebarContentsStyles = css({
   opacity: 0,
   transition: `opacity 0ms linear, visibility 0ms linear`,
@@ -29,7 +30,6 @@ const fixedChildrenWrapperStyles = css({
   minWidth: 240,
   height: '100%'
 });
-
 const ResizableChildrenWrapper = ({
   children,
   isLeftSidebarCollapsed = false,
@@ -44,7 +44,7 @@ const ResizableChildrenWrapper = ({
   }, jsx("div", {
     css: fixedChildrenWrapperStyles
   }, children));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default ResizableChildrenWrapper;

package/dist/es2019/components/slots/internal/slot-focus-ring.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { ClassNames, css, jsx } from '@emotion/react';
 import { B100 } from '@atlaskit/theme/colors';
 const focusStyles = css({
@@ -11,11 +12,11 @@ const focusStyles = css({
     }
   }
 });
+
 /**
  * Sidebars have an outer and inner component,
  * so the nested selector needs to target an extra level deeper.
  */
-
 const sidebarFocusStyles = css({
   ':focus': {
     outline: 'none',
@@ -26,6 +27,7 @@ const sidebarFocusStyles = css({
     }
   }
 });
+
 /**
  * We don't use `@atlaskit/focus-ring` here,
  * because we need inset focus styles and:
@@ -35,7 +37,6 @@ const sidebarFocusStyles = css({
  * 2. We cannot wrap `children` in `FocusRing`,
  *    because there's no guarantee the passed child takes `className`.
  */
-
 const SlotFocusRing = ({
   children,
   isSidebar = false
@@ -46,5 +47,4 @@ const SlotFocusRing = ({
     className: isSidebar ? css(sidebarFocusStyles) : css(focusStyles)
   }));
 };
-
 export default SlotFocusRing;

package/dist/es2019/components/slots/left-panel.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -18,6 +17,7 @@ const leftPanelFixedStyles = css({
   bottom: 0,
   left: 0
 });
+
 /**
  * __Left panel__
  *
@@ -26,7 +26,6 @@ const leftPanelFixedStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const LeftPanel = props => {
   const {
     children,
@@ -61,5 +60,4 @@ const LeftPanel = props => {
     value: leftPanelWidth
   }), children));
 };
-
 export default LeftPanel;

package/dist/es2019/components/slots/left-sidebar-without-resize.js

@@ -7,6 +7,7 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
 import SlotDimensions from './slot-dimensions';
+
 /**
  * __Left sidebar without resize__
  *
@@ -15,7 +16,6 @@ import SlotDimensions from './slot-dimensions';
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const LeftSidebarWithoutResize = props => {
   const {
     children,
@@ -49,5 +49,4 @@ const LeftSidebarWithoutResize = props => {
     isFixed: isFixed
   }, children));
 };
-
 export default LeftSidebarWithoutResize;

package/dist/es2019/components/slots/left-sidebar.js

@@ -1,5 +1,4 @@
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
@@ -11,6 +10,7 @@ import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
 import ResizableChildrenWrapper from './internal/resizable-children-wrapper';
 import SlotDimensions from './slot-dimensions';
+
 /**
  * __Left sidebar__
  *
@@ -19,7 +19,6 @@ import SlotDimensions from './slot-dimensions';
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const LeftSidebar = props => {
   const {
     children,
@@ -59,7 +58,9 @@ const LeftSidebar = props => {
   const mouseXRef = useRef(0);
   const handlerRef = useRef(null);
   useEffect(() => {
-    isLockedRef.current = isLocked; // I tried a one-time `mousemove` handler that gets attached
+    isLockedRef.current = isLocked;
+
+    // I tried a one-time `mousemove` handler that gets attached
     // when the lock releases. This is not robust because
     // the mouse can stay still after release (e.g. using keyboard)
     // and the sidebar will erroneously stay open.
@@ -70,52 +71,44 @@ const LeftSidebar = props => {
       handlerRef.current = event => {
         mouseXRef.current = event.clientX;
       };
-
       document.addEventListener('mousemove', handlerRef.current);
     }
-
     if (!isLocked && handlerRef.current) {
       if (mouseXRef.current >= lastLeftSidebarWidth) {
-        setLeftSidebarState({ ...leftSidebarState,
+        setLeftSidebarState({
+          ...leftSidebarState,
           isFlyoutOpen: false
         });
       }
-
       document.removeEventListener('mousemove', handlerRef.current);
       handlerRef.current = null;
     }
-
     return () => {
       if (handlerRef.current) {
         document.removeEventListener('mousemove', handlerRef.current);
       }
     };
   }, [isLocked, lastLeftSidebarWidth, leftSidebarState, setLeftSidebarState]);
-
   const _width = Math.max(width || 0, DEFAULT_LEFT_SIDEBAR_WIDTH);
-
   const collapsedStateOverrideOpen = collapsedState === 'expanded';
   let leftSidebarWidthOnMount;
-
   if (collapsedStateOverrideOpen) {
     leftSidebarWidthOnMount = resolveDimension(VAR_LEFT_SIDEBAR_FLYOUT, _width, !width);
   } else if (isLeftSidebarCollapsed || collapsedState === 'collapsed') {
     leftSidebarWidthOnMount = COLLAPSED_LEFT_SIDEBAR_WIDTH;
   } else {
     leftSidebarWidthOnMount = resolveDimension(VAR_LEFT_SIDEBAR_WIDTH, _width, !width || !collapsedStateOverrideOpen && getGridStateFromStorage('isLeftSidebarCollapsed'));
-  } // Update state from cache on mount
-
+  }
 
+  // Update state from cache on mount
   useEffect(() => {
     const cachedCollapsedState = !collapsedStateOverrideOpen && (collapsedState === 'collapsed' || getGridStateFromStorage('isLeftSidebarCollapsed') || false);
     const cachedGridState = getGridStateFromStorage('gridState') || {};
     let leftSidebarWidth = !width && cachedGridState[VAR_LEFT_SIDEBAR_FLYOUT] ? Math.max(cachedGridState[VAR_LEFT_SIDEBAR_FLYOUT], DEFAULT_LEFT_SIDEBAR_WIDTH) : _width;
     const lastLeftSidebarWidth = !width && cachedGridState[VAR_LEFT_SIDEBAR_FLYOUT] ? Math.max(cachedGridState[VAR_LEFT_SIDEBAR_FLYOUT], DEFAULT_LEFT_SIDEBAR_WIDTH) : _width;
-
     if (cachedCollapsedState) {
       leftSidebarWidth = COLLAPSED_LEFT_SIDEBAR_WIDTH;
     }
-
     setLeftSidebarState({
       isFlyoutOpen: false,
       isResizing,
@@ -124,10 +117,12 @@ const LeftSidebar = props => {
       lastLeftSidebarWidth,
       flyoutLockCount: 0,
       isFixed
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Every time other than mount,
-  // update the local storage and css variables.
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
+  // Every time other than mount,
+  // update the local storage and css variables.
   const notFirstRun = useRef(false);
   useEffect(() => {
     if (notFirstRun.current) {
@@ -137,82 +132,72 @@ const LeftSidebar = props => {
       });
       mergeGridStateIntoStorage('isLeftSidebarCollapsed', isLeftSidebarCollapsed);
     }
-
     if (!notFirstRun.current) {
       notFirstRun.current = true;
     }
-
     return () => {
       removeMouseOverListener();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLeftSidebarCollapsed, leftSidebarWidth, id]);
-
   const onMouseOver = event => {
     const isMouseOnResizeButton = event.target.matches(`[${RESIZE_BUTTON_SELECTOR}]`) || event.target.matches(`[${RESIZE_BUTTON_SELECTOR}] *`);
-
     if (isFlyoutOpen || isMouseOnResizeButton || !isLeftSidebarCollapsed) {
       return;
     }
-
     event.persist();
     flyoutTimerRef.current && clearTimeout(flyoutTimerRef.current);
-
     if (!mouseOverEventRef.current) {
       mouseOverEventRef.current = event => {
         const leftSidebar = leftSideBarRef.current;
-
         if (leftSidebar === null || isLockedRef.current) {
           return;
         }
-
         if (!leftSidebar.contains(event.target)) {
           flyoutTimerRef.current && clearTimeout(flyoutTimerRef.current);
           onFlyoutCollapse && onFlyoutCollapse();
-          setLeftSidebarState(current => ({ ...current,
+          setLeftSidebarState(current => ({
+            ...current,
             isFlyoutOpen: false
           }));
           removeMouseOverListener();
         }
       };
     }
-
     document.addEventListener('mouseover', mouseOverEventRef.current, {
       capture: true,
       passive: true
     });
     flyoutTimerRef.current = setTimeout(() => {
-      setLeftSidebarState(current => ({ ...current,
+      setLeftSidebarState(current => ({
+        ...current,
         isFlyoutOpen: true
       }));
       onFlyoutExpand && onFlyoutExpand();
     }, FLYOUT_DELAY);
   };
-
   const removeMouseOverListener = () => {
     mouseOverEventRef.current && document.removeEventListener('mouseover', mouseOverEventRef.current, {
       capture: true,
       passive: true
     });
   };
-
   useSkipLink(id, skipLinkTitle);
-
   const onMouseLeave = event => {
     const isMouseOnResizeButton = event.target.matches(`[${RESIZE_BUTTON_SELECTOR}]`) || event.target.matches(`[${RESIZE_BUTTON_SELECTOR}] *`);
-
     if (isMouseOnResizeButton || !isLeftSidebarCollapsed || flyoutLockCount > 0) {
       return;
     }
-
     onFlyoutCollapse && onFlyoutCollapse();
     setTimeout(() => {
-      setLeftSidebarState(current => ({ ...current,
+      setLeftSidebarState(current => ({
+        ...current,
         isFlyoutOpen: false
       }));
     }, FLYOUT_DELAY);
   };
-
-  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+  return (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     jsx(LeftSidebarOuter, {
       ref: leftSideBarRef,
       testId: testId,
@@ -234,7 +219,8 @@ const LeftSidebar = props => {
     }, children), jsx(ResizeControl, {
       testId: testId,
       resizeGrabAreaLabel: resizeGrabAreaLabel,
-      resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      resizeButtonLabel: resizeButtonLabel
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
       ,
       overrides: overrides,
       onCollapse: onCollapse,
@@ -246,5 +232,4 @@ const LeftSidebar = props => {
     })))
   );
 };
-
 export default LeftSidebar;

package/dist/es2019/components/slots/main.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -9,8 +8,9 @@ import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, TRANSI
 import { useIsSidebarDragging } from '../../common/hooks';
 import { getPageLayoutSlotSelector } from '../../common/utils';
 import { SidebarResizeContext, useSkipLink } from '../../controllers';
-import SlotFocusRing from './internal/slot-focus-ring'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+import SlotFocusRing from './internal/slot-focus-ring';
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const mainStyles = css({
   minWidth: 0,
@@ -25,16 +25,17 @@ const draggingStyles = css({
   // Make sure drag to resize remains snappy.
   transition: 'none'
 });
+
 /**
  * Adds a negative left margin to main,
  * which transitions at the same speed as the left sidebar's width increase.
  * This give an illusion that the flyout is appearing on top of the main content,
  * while main remains in place.
  */
-
 const flyoutStyles = css({
   marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
 });
+
 /**
  * __Main__
  *
@@ -43,7 +44,6 @@ const flyoutStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const Main = props => {
   const {
     children,
@@ -68,5 +68,4 @@ const Main = props => {
     id: id
   }, getPageLayoutSlotSelector('main')), children));
 };
-
 export default Main;

package/dist/es2019/components/slots/page-layout.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -22,6 +21,7 @@ const gridStyles = css({
   gridTemplateRows: `${BANNER_HEIGHT} ${TOP_NAVIGATION_HEIGHT} auto`,
   outline: 'none'
 });
+
 /**
  * __Page layout__
  *
@@ -30,7 +30,6 @@ const gridStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const PageLayout = ({
   skipLinksLabel = DEFAULT_I18N_PROPS_SKIP_LINKS,
   children,
@@ -49,5 +48,4 @@ const PageLayout = ({
     onLeftSidebarExpand: onLeftSidebarExpand
   }, children))));
 };
-
 export default PageLayout;

package/dist/es2019/components/slots/right-panel.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -18,6 +17,7 @@ const fixedStyles = css({
   right: 0,
   bottom: 0
 });
+
 /**
  * __Right panel__
  *
@@ -26,7 +26,6 @@ const fixedStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const RightPanel = props => {
   const {
     children,
@@ -61,5 +60,4 @@ const RightPanel = props => {
     value: rightPanelWidth
   }), children));
 };
-
 export default RightPanel;

package/dist/es2019/components/slots/right-sidebar.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -8,13 +7,13 @@ import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils'
 import { publishGridState, useSkipLink } from '../../controllers';
 import SlotFocusRing from './internal/slot-focus-ring';
 import SlotDimensions from './slot-dimensions';
+
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
  * If we were to apply `position: fixed` to the outer wrapper, it will be popped
  * out of its flex container and Main would stretch to occupy all the space.
  */
-
 const fixedInnerStyles = css({
   /**
    * This width on the inner wrapper is required when it is using fixed
@@ -32,12 +31,12 @@ const staticInnerStyles = css({
 const outerStyles = css({
   width: RIGHT_SIDEBAR_WIDTH
 });
+
 /**
  * In fixed mode this element's child is taken out of the document flow.
  * It doesn't take up the width as expected,
  * so the pseudo element forces it to take up the necessary width.
  */
-
 const fixedOuterStyles = css({
   '&::after': {
     display: 'inline-block',
@@ -45,6 +44,7 @@ const fixedOuterStyles = css({
     content: "''"
   }
 });
+
 /**
  * __Right sidebar__
  *
@@ -53,7 +53,6 @@ const fixedOuterStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const RightSidebar = props => {
   const {
     children,
@@ -92,5 +91,4 @@ const RightSidebar = props => {
     css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
   }, children)));
 };
-
 export default RightSidebar;

package/dist/es2019/components/slots/top-navigation.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -19,6 +18,7 @@ const fixedStyles = css({
   right: RIGHT_PANEL_WIDTH,
   left: LEFT_PANEL_WIDTH
 });
+
 /**
  * __Top navigation__
  *
@@ -27,7 +27,6 @@ const fixedStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const TopNavigation = props => {
   const {
     children,
@@ -62,5 +61,4 @@ const TopNavigation = props => {
     value: topNavigationHeight
   }), children));
 };
-
 export default TopNavigation;

package/dist/es2019/controllers/sidebar-resize-context.js

@@ -8,8 +8,8 @@ const leftSidebarState = {
   lastLeftSidebarWidth: 0,
   flyoutLockCount: 0,
   isFixed: true
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
   expandLeftSidebar: noop,
@@ -24,6 +24,7 @@ export const usePageLayoutResize = () => {
   } = useContext(SidebarResizeContext);
   return context;
 };
+
 /**
  * _**WARNING:**_ This hook is intended as a temporary solution and
  * is likely to be removed in a future version of page-layout.
@@ -41,17 +42,18 @@ export const usePageLayoutResize = () => {
  * you are rendering. This way the left sidebar will be locked for
  * as long as the popup is open.
  */
-
 export const useLeftSidebarFlyoutLock = () => {
   const {
     setLeftSidebarState
   } = useContext(SidebarResizeContext);
   useEffect(() => {
-    setLeftSidebarState(current => ({ ...current,
+    setLeftSidebarState(current => ({
+      ...current,
       flyoutLockCount: current.flyoutLockCount + 1
     }));
     return () => {
-      setLeftSidebarState(current => ({ ...current,
+      setLeftSidebarState(current => ({
+        ...current,
         flyoutLockCount: current.flyoutLockCount - 1
       }));
     };