@atlaskit/page-layout 1.7.7 → 1.7.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/page-layout
 
+## 1.7.8
+
+### Patch Changes
+
+- [`6a33c4fd6b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a33c4fd6b6) - Removes unnecessary aria attribute from grab area in left sidebar.
+
 ## 1.7.7
 
 ### Patch Changes

package/__perf__/utils/product-integration/sample-footer.tsx

@@ -31,10 +31,13 @@ const ExampleFooter = () => {
       component={Container}
       description={
         <Fragment>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkStyles}>Give feedback</a> {' ∙ '}
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkStyles}>Learn more</a>
+          <a href="https://www.atlassian.com/company/contact" css={linkStyles}>
+            Give feedback
+          </a>
+          {' ∙ '}
+          <a href="http://www.atlassian.com" css={linkStyles}>
+            Learn more
+          </a>
         </Fragment>
       }
     >

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

@@ -51,7 +51,10 @@ const PerfExample = () => {
       <NestableNavigationContent initialStack={[]}>
         <Section>
           <ButtonItem iconBefore={<WorkIcon label="" />}>Your work</ButtonItem>
-          <LinkItem href="#" iconBefore={<CustomerIcon label="" />}>
+          <LinkItem
+            href="https://www.atlassian.com/customers"
+            iconBefore={<CustomerIcon label="" />}
+          >
             Your customers
           </LinkItem>
           <NestingItem

package/dist/cjs/components/resize-control/grab-area.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
-var _excluded = ["testId", "isLeftSidebarCollapsed"];
+var _excluded = ["testId", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
 /** @jsx jsx */
 /**
  * Determines the color of the grab line.
@@ -52,15 +52,36 @@ var lineStyles = (0, _react.css)({
 });
 var grabAreaLineSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_SELECTOR, true);
-// TODO: Consider allowing this to be controlled using arrow keys
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
+    isDisabled = _ref.isDisabled,
     isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
+    label = _ref.label,
+    leftSidebarPercentageExpanded = _ref.leftSidebarPercentageExpanded,
+    onKeyDown = _ref.onKeyDown,
+    onMouseDown = _ref.onMouseDown,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
+    "aria-label": label,
     "data-testid": testId,
-    type: "button",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
+    disabled: isDisabled,
+    type: "button"
+    // The separator role is applied to a button to utilize the native
+    // interactive and disabled functionality on the resize separator. While a
+    // range input would be more semantically accurate, it does not affect
+    // usability.
+    ,
+    role: "separator",
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    "aria-valuenow": leftSidebarPercentageExpanded,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onFocus: onFocus,
+    onBlur: onBlur
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest), (0, _react.jsx)("span", (0, _extends2.default)({
     css: lineStyles

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

@@ -325,26 +325,20 @@ var ResizeControl = function ResizeControl(_ref) {
     return Math.round(innerWidth / 2) - (0, _utils.getLeftPanelWidth)();
   }, []);
   var leftSidebarPercentageExpanded = (0, _utils.getLeftSidebarPercentage)(leftSidebarState.leftSidebarWidth, maxAriaWidth);
-
-  /* eslint-disable jsx-a11y/role-supports-aria-props */
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), (0, _react2.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
   }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && (0, _react2.jsx)(_grabArea.default, {
-    role: "separator",
-    "aria-label": resizeGrabAreaLabel,
-    "aria-valuenow": leftSidebarPercentageExpanded,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-expanded": !isLeftSidebarCollapsed,
+    isDisabled: isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    label: resizeGrabAreaLabel,
+    leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    testId: testId && "".concat(testId, "-grab-area"),
-    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    disabled: isLeftSidebarCollapsed
+    testId: testId && "".concat(testId, "-grab-area")
   }), resizeButton.render(_resizeButton.default, {
     isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
@@ -353,7 +347,6 @@ var ResizeControl = function ResizeControl(_ref) {
   })), leftSidebarState.isResizing ? (0, _react2.jsx)(_react2.Global, {
     styles: globalResizingStyles
   }) : null);
-  /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.7",
+	"version": "1.7.8",
 	"sideEffects": false
 }

package/dist/es2019/components/resize-control/grab-area.js

@@ -51,15 +51,36 @@ const grabAreaLineSelector = {
 const grabAreaSelector = {
   [GRAB_AREA_SELECTOR]: true
 };
-// TODO: Consider allowing this to be controlled using arrow keys
 const GrabArea = ({
   testId,
+  isDisabled,
   isLeftSidebarCollapsed,
+  label,
+  leftSidebarPercentageExpanded,
+  onKeyDown,
+  onMouseDown,
+  onBlur,
+  onFocus,
   ...rest
 }) => jsx("button", _extends({}, grabAreaSelector, {
+  "aria-label": label,
   "data-testid": testId,
-  type: "button",
-  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
+  disabled: isDisabled,
+  type: "button"
+  // The separator role is applied to a button to utilize the native
+  // interactive and disabled functionality on the resize separator. While a
+  // range input would be more semantically accurate, it does not affect
+  // usability.
+  ,
+  role: "separator",
+  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+  "aria-valuenow": leftSidebarPercentageExpanded,
+  "aria-valuemin": 0,
+  "aria-valuemax": 100,
+  onKeyDown: onKeyDown,
+  onMouseDown: onMouseDown,
+  onFocus: onFocus,
+  onBlur: onBlur
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, rest), jsx("span", _extends({
   css: lineStyles

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

@@ -326,26 +326,20 @@ const ResizeControl = ({
     return Math.round(innerWidth / 2) - getLeftPanelWidth();
   }, []);
   const leftSidebarPercentageExpanded = getLeftSidebarPercentage(leftSidebarState.leftSidebarWidth, maxAriaWidth);
-
-  /* eslint-disable jsx-a11y/role-supports-aria-props */
   return jsx(Fragment, null, jsx("div", _extends({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && `${testId}-shadow`
   }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && jsx(GrabArea, {
-    role: "separator",
-    "aria-label": resizeGrabAreaLabel,
-    "aria-valuenow": leftSidebarPercentageExpanded,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-expanded": !isLeftSidebarCollapsed,
+    isDisabled: isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    label: resizeGrabAreaLabel,
+    leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    testId: testId && `${testId}-grab-area`,
-    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    disabled: isLeftSidebarCollapsed
+    testId: testId && `${testId}-grab-area`
   }), resizeButton.render(ResizeButton, {
     isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
@@ -354,7 +348,6 @@ const ResizeControl = ({
   })), leftSidebarState.isResizing ? jsx(Global, {
     styles: globalResizingStyles
   }) : null);
-  /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.7",
+	"version": "1.7.8",
 	"sideEffects": false
 }

package/dist/esm/components/resize-control/grab-area.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["testId", "isLeftSidebarCollapsed"];
+var _excluded = ["testId", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
@@ -46,15 +46,36 @@ var lineStyles = css({
 });
 var grabAreaLineSelector = _defineProperty({}, GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = _defineProperty({}, GRAB_AREA_SELECTOR, true);
-// TODO: Consider allowing this to be controlled using arrow keys
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
+    isDisabled = _ref.isDisabled,
     isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
+    label = _ref.label,
+    leftSidebarPercentageExpanded = _ref.leftSidebarPercentageExpanded,
+    onKeyDown = _ref.onKeyDown,
+    onMouseDown = _ref.onMouseDown,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     rest = _objectWithoutProperties(_ref, _excluded);
   return jsx("button", _extends({}, grabAreaSelector, {
+    "aria-label": label,
     "data-testid": testId,
-    type: "button",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
+    disabled: isDisabled,
+    type: "button"
+    // The separator role is applied to a button to utilize the native
+    // interactive and disabled functionality on the resize separator. While a
+    // range input would be more semantically accurate, it does not affect
+    // usability.
+    ,
+    role: "separator",
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    "aria-valuenow": leftSidebarPercentageExpanded,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onFocus: onFocus,
+    onBlur: onBlur
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest), jsx("span", _extends({
     css: lineStyles

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

@@ -321,26 +321,20 @@ var ResizeControl = function ResizeControl(_ref) {
     return Math.round(innerWidth / 2) - getLeftPanelWidth();
   }, []);
   var leftSidebarPercentageExpanded = getLeftSidebarPercentage(leftSidebarState.leftSidebarWidth, maxAriaWidth);
-
-  /* eslint-disable jsx-a11y/role-supports-aria-props */
   return jsx(Fragment, null, jsx("div", _extends({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && "".concat(testId, "-shadow")
   }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && jsx(GrabArea, {
-    role: "separator",
-    "aria-label": resizeGrabAreaLabel,
-    "aria-valuenow": leftSidebarPercentageExpanded,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-expanded": !isLeftSidebarCollapsed,
+    isDisabled: isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    label: resizeGrabAreaLabel,
+    leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    testId: testId && "".concat(testId, "-grab-area"),
-    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    disabled: isLeftSidebarCollapsed
+    testId: testId && "".concat(testId, "-grab-area")
   }), resizeButton.render(ResizeButton, {
     isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
@@ -349,7 +343,6 @@ var ResizeControl = function ResizeControl(_ref) {
   })), leftSidebarState.isResizing ? jsx(Global, {
     styles: globalResizingStyles
   }) : null);
-  /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.7",
+	"version": "1.7.8",
 	"sideEffects": false
 }

package/dist/types/components/resize-control/grab-area.d.ts

@@ -1,9 +1,16 @@
 /** @jsx jsx */
-import { ComponentProps } from 'react';
+import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import { jsx } from '@emotion/react';
 export type GrabAreaProps = {
-    testId?: string;
+    isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;
+    label: string;
+    leftSidebarPercentageExpanded: number;
+    onBlur: (event: FocusEvent) => void;
+    onFocus: (event: FocusEvent) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
+    testId?: string;
 } & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, isLeftSidebarCollapsed, ...rest }: GrabAreaProps) => jsx.JSX.Element;
+declare const GrabArea: ({ testId, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ...rest }: GrabAreaProps) => jsx.JSX.Element;
 export default GrabArea;

package/dist/types-ts4.5/components/resize-control/grab-area.d.ts

@@ -1,9 +1,16 @@
 /** @jsx jsx */
-import { ComponentProps } from 'react';
+import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import { jsx } from '@emotion/react';
 export type GrabAreaProps = {
-    testId?: string;
+    isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;
+    label: string;
+    leftSidebarPercentageExpanded: number;
+    onBlur: (event: FocusEvent) => void;
+    onFocus: (event: FocusEvent) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
+    testId?: string;
 } & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, isLeftSidebarCollapsed, ...rest }: GrabAreaProps) => jsx.JSX.Element;
+declare const GrabArea: ({ testId, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ...rest }: GrabAreaProps) => jsx.JSX.Element;
 export default GrabArea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^1.0.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -59,7 +59,6 @@
     "@atlaskit/notification-indicator": "^9.1.0",
     "@atlaskit/notification-log-client": "^6.1.0",
     "@atlaskit/popup": "^1.8.0",
-    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/side-navigation": "^1.10.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
@@ -113,4 +112,4 @@
       "type": "boolean"
     }
   }
-}
+}

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

@@ -1,174 +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;
-    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)
-
-```