@atlaskit/page-layout 1.8.4 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/page-layout
 
+## 2.0.1
+
+### Patch Changes
+
+- [#58110](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58110) [`9e7a86f76af4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e7a86f76af4) - Resizing the Sidebar can now only be triggered via left-click (main button click). This prevents situations where right-clicking the resize button unexpectedly starts resizing the Sidebar.
+
+## 2.0.0
+
+### Major Changes
+
+- [#56597](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/56597) [`162c25fea4d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/162c25fea4d3) - Remove `onExpand` and `onCollapse` props on `LeftSidebar` component. These props were non-functional. Use `onLeftSidebarExpand` and `onLeftSidebarCollapse` props on `PageLayout` component instead.
+
 ## 1.8.4
 
 ### Patch Changes

package/__perf__/utils/product-integration/atlassian-navigation.tsx

@@ -19,6 +19,13 @@ import { HelpPopup } from './help-popup';
 import { NotificationsPopup } from './notifications-popup';
 import { ProfilePopup } from './profile-popup';
 
+const drawerLabelText = {
+  search: 'Search drawer',
+  settings: 'Settings drawer',
+};
+
+const { search, settings } = drawerLabelText;
+
 const ProductHomeExample = () => (
   <ProductHome icon={JiraIcon} logo={JiraLogo} siteTitle="Extranet" />
 );
@@ -43,8 +50,8 @@ const SearchDrawer = () => {
         tooltip="Search"
         label="Search"
       />
-      <Drawer isOpen={isOpen} onClose={onClose}>
-        <div>search drawer</div>
+      <Drawer label={search} isOpen={isOpen} onClose={onClose}>
+        <div>{search}</div>
       </Drawer>
     </Fragment>
   );
@@ -64,8 +71,8 @@ const SettingsDrawer = () => {
   return (
     <Fragment>
       <Settings isSelected={isOpen} onClick={onClick} tooltip="Settings" />
-      <Drawer isOpen={isOpen} onClose={onClose}>
-        settings drawer
+      <Drawer label={settings} isOpen={isOpen} onClose={onClose}>
+        {settings}
       </Drawer>
     </Fragment>
   );

package/dist/cjs/components/resize-control/index.js

@@ -104,8 +104,11 @@ var ResizeControl = function ResizeControl(_ref) {
       return;
     }
 
-    // TODO: should only a primary pointer be able to start a resize?
-    // Keeping as is for now, but worth considering
+    // Only allow left (primary) clicks to trigger resize as we've received
+    // bug reports about right click unexpectedly beginning a resize.
+    if (event.button !== 0) {
+      return;
+    }
 
     // It is possible for a mousedown to fire during a resize
     // Example: the user presses another pointer button while dragging

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

@@ -58,8 +58,6 @@ var LeftSidebar = function LeftSidebar(props) {
     resizeButtonLabel = props.resizeButtonLabel,
     resizeGrabAreaLabel = props.resizeGrabAreaLabel,
     overrides = props.overrides,
-    onExpand = props.onExpand,
-    onCollapse = props.onCollapse,
     onResizeStart = props.onResizeStart,
     onResizeEnd = props.onResizeEnd,
     onFlyoutExpand = props.onFlyoutExpand,
@@ -237,12 +235,11 @@ var LeftSidebar = function LeftSidebar(props) {
       if (current.isFlyoutOpen) {
         return current;
       }
-      onExpand === null || onExpand === void 0 || onExpand();
       return _objectSpread(_objectSpread({}, current), {}, {
         isFlyoutOpen: true
       });
     });
-  }, [setLeftSidebarState, onExpand, mobileMediaQuery]);
+  }, [setLeftSidebarState, mobileMediaQuery]);
 
   // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   var closeMobileFlyout = (0, _react.useCallback)(function () {
@@ -253,12 +250,11 @@ var LeftSidebar = function LeftSidebar(props) {
       if (!current.isFlyoutOpen) {
         return current;
       }
-      onCollapse === null || onCollapse === void 0 || onCollapse();
       return _objectSpread(_objectSpread({}, current), {}, {
         isFlyoutOpen: false
       });
     });
-  }, [setLeftSidebarState, onCollapse, mobileMediaQuery]);
+  }, [setLeftSidebarState, mobileMediaQuery]);
 
   // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   (0, _responsive.UNSAFE_useMediaQuery)('below.sm', function (event) {
@@ -336,8 +332,6 @@ var LeftSidebar = function LeftSidebar(props) {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     overrides: overrides,
-    onCollapse: onCollapse,
-    onExpand: onExpand,
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd
   }))));

package/dist/es2019/components/resize-control/index.js

@@ -96,8 +96,11 @@ const ResizeControl = ({
       return;
     }
 
-    // TODO: should only a primary pointer be able to start a resize?
-    // Keeping as is for now, but worth considering
+    // Only allow left (primary) clicks to trigger resize as we've received
+    // bug reports about right click unexpectedly beginning a resize.
+    if (event.button !== 0) {
+      return;
+    }
 
     // It is possible for a mousedown to fire during a resize
     // Example: the user presses another pointer button while dragging

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

@@ -50,8 +50,6 @@ const LeftSidebar = props => {
     resizeButtonLabel,
     resizeGrabAreaLabel,
     overrides,
-    onExpand,
-    onCollapse,
     onResizeStart,
     onResizeEnd,
     onFlyoutExpand,
@@ -231,13 +229,12 @@ const LeftSidebar = props => {
       if (current.isFlyoutOpen) {
         return current;
       }
-      onExpand === null || onExpand === void 0 ? void 0 : onExpand();
       return {
         ...current,
         isFlyoutOpen: true
       };
     });
-  }, [setLeftSidebarState, onExpand, mobileMediaQuery]);
+  }, [setLeftSidebarState, mobileMediaQuery]);
 
   // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   const closeMobileFlyout = useCallback(() => {
@@ -248,13 +245,12 @@ const LeftSidebar = props => {
       if (!current.isFlyoutOpen) {
         return current;
       }
-      onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
       return {
         ...current,
         isFlyoutOpen: false
       };
     });
-  }, [setLeftSidebarState, onCollapse, mobileMediaQuery]);
+  }, [setLeftSidebarState, mobileMediaQuery]);
 
   // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   useMediaQuery('below.sm', event => {
@@ -334,8 +330,6 @@ const LeftSidebar = props => {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     overrides: overrides,
-    onCollapse: onCollapse,
-    onExpand: onExpand,
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd
   }))));

package/dist/esm/components/resize-control/index.js

@@ -100,8 +100,11 @@ var ResizeControl = function ResizeControl(_ref) {
       return;
     }
 
-    // TODO: should only a primary pointer be able to start a resize?
-    // Keeping as is for now, but worth considering
+    // Only allow left (primary) clicks to trigger resize as we've received
+    // bug reports about right click unexpectedly beginning a resize.
+    if (event.button !== 0) {
+      return;
+    }
 
     // It is possible for a mousedown to fire during a resize
     // Example: the user presses another pointer button while dragging

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

@@ -53,8 +53,6 @@ var LeftSidebar = function LeftSidebar(props) {
     resizeButtonLabel = props.resizeButtonLabel,
     resizeGrabAreaLabel = props.resizeGrabAreaLabel,
     overrides = props.overrides,
-    onExpand = props.onExpand,
-    onCollapse = props.onCollapse,
     onResizeStart = props.onResizeStart,
     onResizeEnd = props.onResizeEnd,
     onFlyoutExpand = props.onFlyoutExpand,
@@ -232,12 +230,11 @@ var LeftSidebar = function LeftSidebar(props) {
       if (current.isFlyoutOpen) {
         return current;
       }
-      onExpand === null || onExpand === void 0 || onExpand();
       return _objectSpread(_objectSpread({}, current), {}, {
         isFlyoutOpen: true
       });
     });
-  }, [setLeftSidebarState, onExpand, mobileMediaQuery]);
+  }, [setLeftSidebarState, mobileMediaQuery]);
 
   // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   var closeMobileFlyout = useCallback(function () {
@@ -248,12 +245,11 @@ var LeftSidebar = function LeftSidebar(props) {
       if (!current.isFlyoutOpen) {
         return current;
       }
-      onCollapse === null || onCollapse === void 0 || onCollapse();
       return _objectSpread(_objectSpread({}, current), {}, {
         isFlyoutOpen: false
       });
     });
-  }, [setLeftSidebarState, onCollapse, mobileMediaQuery]);
+  }, [setLeftSidebarState, mobileMediaQuery]);
 
   // CLEANUP NOTE: If we revert `'platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g'`, this would be gone.
   useMediaQuery('below.sm', function (event) {
@@ -331,8 +327,6 @@ var LeftSidebar = function LeftSidebar(props) {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     overrides: overrides,
-    onCollapse: onCollapse,
-    onExpand: onExpand,
     onResizeStart: onResizeStart,
     onResizeEnd: onResizeEnd
   }))));

package/dist/types/common/types.d.ts

@@ -66,14 +66,6 @@ export interface LeftSidebarProps extends SlotWidthProps {
      * Display label for expand/collapse button for the left sidebar.
      */
     resizeButtonLabel?: string;
-    /**
-     * Called when left-sidebar is collapsed.
-     */
-    onCollapse?: () => void;
-    /**
-     * Called when left-sidebar is expanded.
-     */
-    onExpand?: () => void;
     /**
      * Called when left-sidebar resize starts using mouse or touch.
      */

package/dist/types-ts4.5/common/types.d.ts

@@ -66,14 +66,6 @@ export interface LeftSidebarProps extends SlotWidthProps {
      * Display label for expand/collapse button for the left sidebar.
      */
     resizeButtonLabel?: string;
-    /**
-     * Called when left-sidebar is collapsed.
-     */
-    onCollapse?: () => void;
-    /**
-     * Called when left-sidebar is expanded.
-     */
-    onExpand?: () => void;
     /**
      * Called when left-sidebar resize starts using mouse or touch.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.8.4",
+  "version": "2.0.1",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,9 +40,9 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.10.0",
+    "@atlaskit/primitives": "^1.13.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -54,7 +54,8 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/atlassian-navigation": "^2.9.0",
+    "@af/integration-testing": "*",
+    "@atlaskit/atlassian-navigation": "^2.10.0",
     "@atlaskit/atlassian-notifications": "^0.4.0",
     "@atlaskit/drawer": "^7.6.0",
     "@atlaskit/logo": "^13.14.0",

package/tmp/api-report-tmp.d.ts

@@ -1,175 +0,0 @@
-## API Report File for "@atlaskit/page-layout"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ButtonHTMLAttributes } from 'react';
-import { ElementType } from 'react';
-import { jsx } from '@emotion/react';
-import { KeyboardEvent as KeyboardEvent_2 } from 'react';
-import { MouseEvent as MouseEvent_2 } from 'react';
-import { ReactElement } from 'react';
-import { ReactNode } from 'react';
-
-// @public
-export const Banner: (props: SlotHeightProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export const BANNER_HEIGHT: string;
-
-// @public
-export const Content: (props: ContentProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-interface ContentProps {
-    children: ReactNode;
-    testId?: string;
-}
-
-// @public (undocumented)
-type DimensionNames = 'bannerHeight' | 'leftPanelWidth' | 'leftSidebarFlyoutWidth' | 'leftSidebarWidth' | 'rightPanelWidth' | 'rightSidebarWidth' | 'topNavigationHeight';
-
-// @public (undocumented)
-export type Dimensions = Partial<Record<DimensionNames, number>>;
-
-// @public (undocumented)
-export const LEFT_PANEL_WIDTH: string;
-
-// @public (undocumented)
-export const LEFT_SIDEBAR_WIDTH: string;
-
-// @public
-export const LeftPanel: (props: SlotWidthProps) => jsx.JSX.Element;
-
-// @public
-export const LeftSidebar: (props: LeftSidebarProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-interface LeftSidebarProps extends SlotWidthProps {
-    collapsedState?: 'collapsed' | 'expanded';
-    onCollapse?: () => void;
-    onExpand?: () => void;
-    onFlyoutCollapse?: () => void;
-    onFlyoutExpand?: () => void;
-    onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
-    onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
-    overrides?: {
-        ResizeButton?: {
-            render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
-        };
-    };
-    resizeButtonLabel?: string;
-    resizeGrabAreaLabel?: string;
-    testId?: string;
-    valueTextLabel?: string;
-    width?: number;
-}
-
-// @public (undocumented)
-export type LeftSidebarState = {
-    isFlyoutOpen: boolean;
-    isResizing: boolean;
-    isLeftSidebarCollapsed: boolean;
-    leftSidebarWidth: number;
-    lastLeftSidebarWidth: number;
-    flyoutLockCount: number;
-    isFixed: boolean;
-};
-
-// @public
-export const LeftSidebarWithoutResize: (props: SlotWidthProps) => jsx.JSX.Element;
-
-// @public
-export const Main: (props: SlotWidthProps) => jsx.JSX.Element;
-
-// @public
-export const PageLayout: ({ skipLinksLabel, children, testId, onLeftSidebarExpand, onLeftSidebarCollapse, }: PageLayoutProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-interface PageLayoutProps extends SidebarResizeControllerProps {
-    // (undocumented)
-    skipLinksLabel?: string;
-    testId?: string;
-}
-
-// @public (undocumented)
-type ResizeButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    isLeftSidebarCollapsed: boolean;
-    label: string;
-    testId?: string;
-};
-
-// @public (undocumented)
-export const RIGHT_PANEL_WIDTH: string;
-
-// @public (undocumented)
-export const RIGHT_SIDEBAR_WIDTH: string;
-
-// @public
-export const RightPanel: (props: SlotWidthProps) => jsx.JSX.Element;
-
-// @public
-export const RightSidebar: (props: SlotWidthProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-type SidebarResizeControllerProps = {
-    children: ReactNode;
-    onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
-    onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
-};
-
-// @public (undocumented)
-type SkipLinkData = {
-    id: string;
-    skipLinkTitle: string;
-    listIndex?: number;
-};
-
-// @public (undocumented)
-export interface SlotHeightProps extends SlotProps {
-    height?: number;
-    shouldPersistHeight?: boolean;
-}
-
-// @public (undocumented)
-interface SlotProps {
-    children: ReactNode;
-    // (undocumented)
-    id?: string;
-    isFixed?: boolean;
-    // (undocumented)
-    skipLinkTitle?: string;
-    testId?: string;
-}
-
-// @public (undocumented)
-export interface SlotWidthProps extends SlotProps {
-    shouldPersistWidth?: boolean;
-    width?: number;
-}
-
-// @public (undocumented)
-export const TOP_NAVIGATION_HEIGHT: string;
-
-// @public
-export const TopNavigation: (props: SlotHeightProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export const useCustomSkipLink: (id: SkipLinkData['id'], skipLinkTitle: SkipLinkData['skipLinkTitle'], listIndex?: SkipLinkData['listIndex']) => void;
-
-// @public
-export const useLeftSidebarFlyoutLock: () => void;
-
-// @public (undocumented)
-export const usePageLayoutResize: () => {
-    isLeftSidebarCollapsed: boolean;
-    expandLeftSidebar: () => void;
-    collapseLeftSidebar: (event?: KeyboardEvent_2 | MouseEvent_2, collapseWithoutTransition?: boolean) => void;
-    toggleLeftSidebar: (event?: KeyboardEvent_2 | MouseEvent_2, collapseWithoutTransition?: boolean) => void;
-    leftSidebarState: LeftSidebarState;
-};
-
-// (No @packageDocumentation comment for this package)
-
-```