@atlaskit/page-layout 1.7.8 → 1.7.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/page-layout
 
+## 1.7.9
+
+### Patch Changes
+
+- [`55c42f7ce9d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/55c42f7ce9d) - [ux] Add proper orientation to grab area.
+
 ## 1.7.8
 
 ### Patch Changes

package/__perf__/utils/perf-example.tsx

@@ -48,7 +48,7 @@ const Wrapper = ({
 
 const sidebarWrapperStyles = css({
   height: '100%',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   nav: {
     minWidth: 20,
     overflowX: 'hidden',

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

@@ -75,6 +75,7 @@ var GrabArea = function GrabArea(_ref) {
     ,
     role: "separator",
     css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
     "aria-valuemax": 100,

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

@@ -37,7 +37,7 @@ var showResizeButtonStyles = (0, _react2.css)({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 var globalResizingStyles = (0, _react2.css)({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -50,7 +50,7 @@ var globalResizingStyles = (0, _react2.css)({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them

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

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 var focusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
       outline: 'none'
@@ -26,7 +26,7 @@ var focusStyles = (0, _react.css)({
 var sidebarFocusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
       outline: 'none'

package/dist/cjs/version.json

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

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

@@ -74,6 +74,7 @@ const GrabArea = ({
   ,
   role: "separator",
   css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+  "aria-orientation": "vertical",
   "aria-valuenow": leftSidebarPercentageExpanded,
   "aria-valuemin": 0,
   "aria-valuemax": 100,

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

@@ -31,7 +31,7 @@ const showResizeButtonStyles = css({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 const globalResizingStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -44,7 +44,7 @@ const globalResizingStyles = css({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them

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

@@ -19,7 +19,7 @@ const increaseHitAreaStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     opacity: 1
   }

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

@@ -11,7 +11,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     width: `${MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH}px`,
     position: 'fixed',
@@ -26,7 +26,7 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     width: `min(90vw, ${MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH}px)`,
     maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,

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

@@ -15,7 +15,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
     cursor: 'pointer',
@@ -31,7 +31,7 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     cursor: 'revert'
   }

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

@@ -5,7 +5,7 @@ import { B100 } from '@atlaskit/theme/colors';
 const focusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: `0px 0px 0px 2px inset ${`var(--ds-border-focused, ${B100})`}`,
       outline: 'none'
@@ -20,7 +20,7 @@ const focusStyles = css({
 const sidebarFocusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: `0px 0px 0px 2px inset ${`var(--ds-border-focused, ${B100})`}`,
       outline: 'none'

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

@@ -31,7 +31,7 @@ const gridStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     gridTemplateAreas: gridTemplateAreasMobile,
     gridTemplateColumns: `${LEFT_PANEL_WIDTH} minmax(0, 1fr)`

package/dist/es2019/version.json

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

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

@@ -69,6 +69,7 @@ var GrabArea = function GrabArea(_ref) {
     ,
     role: "separator",
     css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
     "aria-valuemax": 100,

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

@@ -33,7 +33,7 @@ var showResizeButtonStyles = css({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 var globalResizingStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -46,7 +46,7 @@ var globalResizingStyles = css({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them

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

@@ -5,7 +5,7 @@ import { B100 } from '@atlaskit/theme/colors';
 var focusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(B100, ")")),
       outline: 'none'
@@ -20,7 +20,7 @@ var focusStyles = css({
 var sidebarFocusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(B100, ")")),
       outline: 'none'

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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

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