@atlaskit/page-layout 1.7.13 → 1.8.0

package/dist/esm/controllers/sidebar-resize-controller.js

@@ -79,7 +79,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       setLeftSidebarState(flyoutOpenSidebarState);
 
       // Flush the desktop transitions, cleanup, and call the `onExpand` still
-      (_transition$current = transition.current) === null || _transition$current === void 0 ? void 0 : _transition$current.complete();
+      (_transition$current = transition.current) === null || _transition$current === void 0 || _transition$current.complete();
       handleDataAttributesAndCb(stableRef.current.onExpand, flyoutOpenSidebarState);
       return;
     }
@@ -90,7 +90,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     }
 
     // flush existing transition
-    (_transition$current3 = transition.current) === null || _transition$current3 === void 0 ? void 0 : _transition$current3.complete();
+    (_transition$current3 = transition.current) === null || _transition$current3 === void 0 || _transition$current3.complete();
     var width = Math.max(lastLeftSidebarWidth, DEFAULT_LEFT_SIDEBAR_WIDTH);
     var updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -116,7 +116,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       listener: function listener(event) {
         if (event.target === sidebar && event.propertyName === 'width') {
           var _transition$current4;
-          (_transition$current4 = transition.current) === null || _transition$current4 === void 0 ? void 0 : _transition$current4.complete();
+          (_transition$current4 = transition.current) === null || _transition$current4 === void 0 || _transition$current4.complete();
         }
       }
     });
@@ -155,7 +155,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       setLeftSidebarState(flyoutCloseSidebarState);
 
       // Flush the desktop transitions, cleanup, and call the `onCollapse` still
-      (_transition$current5 = transition.current) === null || _transition$current5 === void 0 ? void 0 : _transition$current5.complete();
+      (_transition$current5 = transition.current) === null || _transition$current5 === void 0 || _transition$current5.complete();
       handleDataAttributesAndCb(stableRef.current.onCollapse, flyoutCloseSidebarState);
       return;
     }
@@ -166,7 +166,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     }
 
     // flush existing transition
-    (_transition$current7 = transition.current) === null || _transition$current7 === void 0 ? void 0 : _transition$current7.complete();
+    (_transition$current7 = transition.current) === null || _transition$current7 === void 0 || _transition$current7.complete();
 
     // data-attribute is used as a CSS selector to sync the hiding/showing
     // of the nav contents with expand/collapse animation
@@ -196,7 +196,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       listener: function listener(event) {
         if (sidebar === event.target && event.propertyName === 'width') {
           var _transition$current8;
-          (_transition$current8 = transition.current) === null || _transition$current8 === void 0 ? void 0 : _transition$current8.complete();
+          (_transition$current8 = transition.current) === null || _transition$current8 === void 0 || _transition$current8.complete();
         }
       }
     });
@@ -230,7 +230,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
   useEffect(function mount() {
     return function unmount() {
       var _transition$current9;
-      (_transition$current9 = transition.current) === null || _transition$current9 === void 0 ? void 0 : _transition$current9.abort();
+      (_transition$current9 = transition.current) === null || _transition$current9 === void 0 || _transition$current9.abort();
     };
   }, []);
   var context = useMemo(function () {

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

@@ -42,6 +42,14 @@ export interface LeftSidebarProps extends SlotWidthProps {
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * The `aria-valuetext` allows users relying on assistive technologies,
+     * particularly screen readers, to determine the purpose of the slider.
+     * The default value is "Width".
+     * The aria-valuenow property is automatically appended to the valueTextLabel.
+     * For Example, valueTextLabel="Width" will render aria-valuetext="Width 62%”.
+     */
+    valueTextLabel?: string;
     /**
      * You can override prop(s) for the mentioned component(s).
      */
@@ -51,11 +59,11 @@ export interface LeftSidebarProps extends SlotWidthProps {
         };
     };
     /**
-     * Display label for grab area. This will be announced to the screenreaders when the grab area receives focus
+     * Display label for grab area/slider to resize the left side bar. This will be rendered through assistive technologies.
      */
     resizeGrabAreaLabel?: string;
     /**
-     * Display label for resize button.
+     * Display label for expand/collapse button for the left sidebar.
      */
     resizeButtonLabel?: string;
     /**

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import { jsx } from '@emotion/react';
+import { LeftSidebarProps } from '../../common/types';
 export type GrabAreaProps = {
     isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;
@@ -11,6 +12,7 @@ export type GrabAreaProps = {
     onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
     onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
     testId?: string;
+    ref?: React.Ref<HTMLButtonElement>;
 } & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ...rest }: GrabAreaProps) => jsx.JSX.Element;
+declare const GrabArea: ({ testId, valueTextLabel, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ref, ...rest }: GrabAreaProps & Partial<LeftSidebarProps>) => jsx.JSX.Element;
 export default GrabArea;

package/dist/types/components/resize-control/index.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { ResizeControlProps } from './types';
-declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
+declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, valueTextLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
 export default ResizeControl;

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

@@ -12,6 +12,7 @@ export type ResizeControlProps = {
             render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
         };
     };
+    valueTextLabel?: string;
     resizeGrabAreaLabel?: string;
     resizeButtonLabel?: string;
     onCollapse?: (leftSidebarState: LeftSidebarState) => void;

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

@@ -42,6 +42,14 @@ export interface LeftSidebarProps extends SlotWidthProps {
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * The `aria-valuetext` allows users relying on assistive technologies,
+     * particularly screen readers, to determine the purpose of the slider.
+     * The default value is "Width".
+     * The aria-valuenow property is automatically appended to the valueTextLabel.
+     * For Example, valueTextLabel="Width" will render aria-valuetext="Width 62%”.
+     */
+    valueTextLabel?: string;
     /**
      * You can override prop(s) for the mentioned component(s).
      */
@@ -51,11 +59,11 @@ export interface LeftSidebarProps extends SlotWidthProps {
         };
     };
     /**
-     * Display label for grab area. This will be announced to the screenreaders when the grab area receives focus
+     * Display label for grab area/slider to resize the left side bar. This will be rendered through assistive technologies.
      */
     resizeGrabAreaLabel?: string;
     /**
-     * Display label for resize button.
+     * Display label for expand/collapse button for the left sidebar.
      */
     resizeButtonLabel?: string;
     /**

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import { jsx } from '@emotion/react';
+import { LeftSidebarProps } from '../../common/types';
 export type GrabAreaProps = {
     isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;
@@ -11,6 +12,7 @@ export type GrabAreaProps = {
     onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
     onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
     testId?: string;
+    ref?: React.Ref<HTMLButtonElement>;
 } & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ...rest }: GrabAreaProps) => jsx.JSX.Element;
+declare const GrabArea: ({ testId, valueTextLabel, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ref, ...rest }: GrabAreaProps & Partial<LeftSidebarProps>) => jsx.JSX.Element;
 export default GrabArea;

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { ResizeControlProps } from './types';
-declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
+declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, valueTextLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
 export default ResizeControl;

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

@@ -12,6 +12,7 @@ export type ResizeControlProps = {
             render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
         };
     };
+    valueTextLabel?: string;
     resizeGrabAreaLabel?: string;
     resizeButtonLabel?: string;
     onCollapse?: (leftSidebarState: LeftSidebarState) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.7.13",
+  "version": "1.8.0",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,11 +35,11 @@
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/motion": "^1.4.0",
+    "@atlaskit/motion": "^1.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.4.0",
+    "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.26.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -51,16 +51,15 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/atlassian-navigation": "^2.6.0",
+    "@atlaskit/atlassian-navigation": "^2.8.0",
     "@atlaskit/atlassian-notifications": "^0.4.0",
-    "@atlaskit/drawer": "^7.5.0",
-    "@atlaskit/icon": "*",
+    "@atlaskit/drawer": "^7.6.0",
     "@atlaskit/logo": "^13.14.0",
-    "@atlaskit/menu": "^1.10.0",
+    "@atlaskit/menu": "^2.0.0",
     "@atlaskit/notification-indicator": "^9.1.0",
     "@atlaskit/notification-log-client": "^6.1.0",
-    "@atlaskit/popup": "^1.9.0",
-    "@atlaskit/side-navigation": "^2.0.0",
+    "@atlaskit/popup": "^1.11.0",
+    "@atlaskit/side-navigation": "^3.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -83,6 +83,7 @@ interface LeftSidebarProps extends SlotWidthProps {
   resizeButtonLabel?: string;
   resizeGrabAreaLabel?: string;
   testId?: string;
+  valueTextLabel?: string;
   width?: number;
 }
 

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

@@ -62,6 +62,7 @@ interface LeftSidebarProps extends SlotWidthProps {
     resizeButtonLabel?: string;
     resizeGrabAreaLabel?: string;
     testId?: string;
+    valueTextLabel?: string;
     width?: number;
 }