@atlaskit/page-layout 1.7.13 → 1.8.1

package/dist/cjs/components/slots/slot-dimensions.js

@@ -8,10 +8,9 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
-var _default = function _default(_ref) {
+var _default = exports.default = function _default(_ref) {
   var variableName = _ref.variableName,
     value = _ref.value,
     mobileValue = _ref.mobileValue;
   return /*#__PURE__*/_react.default.createElement("style", null, ":root{--".concat(variableName, ":").concat(value, "px;}"), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') && mobileValue && "".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }"));
-};
-exports.default = _default;
+};

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

@@ -70,5 +70,4 @@ var TopNavigation = function TopNavigation(props) {
     }), children);
   });
 };
-var _default = TopNavigation;
-exports.default = _default;
+var _default = exports.default = TopNavigation;

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

@@ -22,7 +22,7 @@ var leftSidebarState = {
   isFixed: true
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
+var SidebarResizeContext = exports.SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   isLeftSidebarCollapsed: false,
   expandLeftSidebar: _noop.default,
   collapseLeftSidebar: _noop.default,
@@ -30,8 +30,7 @@ var SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   setLeftSidebarState: _noop.default,
   toggleLeftSidebar: _noop.default
 });
-exports.SidebarResizeContext = SidebarResizeContext;
-var usePageLayoutResize = function usePageLayoutResize() {
+var usePageLayoutResize = exports.usePageLayoutResize = function usePageLayoutResize() {
   var _useContext = (0, _react.useContext)(SidebarResizeContext),
     setLeftSidebarState = _useContext.setLeftSidebarState,
     context = (0, _objectWithoutProperties2.default)(_useContext, _excluded);
@@ -55,8 +54,7 @@ var usePageLayoutResize = function usePageLayoutResize() {
  * you are rendering. This way the left sidebar will be locked for
  * as long as the popup is open.
  */
-exports.usePageLayoutResize = usePageLayoutResize;
-var useLeftSidebarFlyoutLock = function useLeftSidebarFlyoutLock() {
+var useLeftSidebarFlyoutLock = exports.useLeftSidebarFlyoutLock = function useLeftSidebarFlyoutLock() {
   var _useContext2 = (0, _react.useContext)(SidebarResizeContext),
     setLeftSidebarState = _useContext2.setLeftSidebarState;
   (0, _react.useEffect)(function () {
@@ -73,5 +71,4 @@ var useLeftSidebarFlyoutLock = function useLeftSidebarFlyoutLock() {
       });
     };
   }, [setLeftSidebarState]);
-};
-exports.useLeftSidebarFlyoutLock = useLeftSidebarFlyoutLock;
+};

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

@@ -26,7 +26,7 @@ var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
 };
 var leftSidebarSelector = (0, _utils.getPageLayoutSlotCSSSelector)('left-sidebar');
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var SidebarResizeController = function SidebarResizeController(_ref) {
+var SidebarResizeController = exports.SidebarResizeController = function SidebarResizeController(_ref) {
   var children = _ref.children,
     onExpand = _ref.onLeftSidebarExpand,
     onCollapse = _ref.onLeftSidebarCollapse;
@@ -89,7 +89,7 @@ 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;
     }
@@ -100,7 +100,7 @@ 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, _constants.DEFAULT_LEFT_SIDEBAR_WIDTH);
     var updatedLeftSidebarState = {
       isLeftSidebarCollapsed: false,
@@ -126,7 +126,7 @@ 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();
         }
       }
     });
@@ -165,7 +165,7 @@ 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;
     }
@@ -176,7 +176,7 @@ 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
@@ -206,7 +206,7 @@ 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();
         }
       }
     });
@@ -240,7 +240,7 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   (0, _react.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 = (0, _react.useMemo)(function () {
@@ -257,5 +257,4 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   return /*#__PURE__*/_react.default.createElement(_sidebarResizeContext.SidebarResizeContext.Provider, {
     value: context
   }, children);
-};
-exports.SidebarResizeController = SidebarResizeController;
+};

package/dist/cjs/controllers/skip-link-context.js

@@ -8,17 +8,15 @@ exports.useSkipLinks = exports.useSkipLink = exports.SkipLinksContext = void 0;
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var SkipLinksContext = /*#__PURE__*/(0, _react.createContext)({
+var SkipLinksContext = exports.SkipLinksContext = /*#__PURE__*/(0, _react.createContext)({
   skipLinksData: [],
   registerSkipLink: _noop.default,
   unregisterSkipLink: _noop.default
 });
-exports.SkipLinksContext = SkipLinksContext;
-var useSkipLinks = function useSkipLinks() {
+var useSkipLinks = exports.useSkipLinks = function useSkipLinks() {
   return (0, _react.useContext)(SkipLinksContext);
 };
-exports.useSkipLinks = useSkipLinks;
-var useSkipLink = function useSkipLink(id, skipLinkTitle) {
+var useSkipLink = exports.useSkipLink = function useSkipLink(id, skipLinkTitle) {
   var _useSkipLinks = useSkipLinks(),
     registerSkipLink = _useSkipLinks.registerSkipLink,
     unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
@@ -33,5 +31,4 @@ var useSkipLink = function useSkipLink(id, skipLinkTitle) {
       unregisterSkipLink(id);
     };
   }, [id, skipLinkTitle, registerSkipLink, unregisterSkipLink]);
-};
-exports.useSkipLink = useSkipLink;
+};

package/dist/cjs/controllers/skip-link-controller.js

@@ -38,7 +38,7 @@ var byDOMOrder = function byDOMOrder(a, b) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var SkipLinksController = function SkipLinksController(_ref) {
+var SkipLinksController = exports.SkipLinksController = function SkipLinksController(_ref) {
   var children = _ref.children;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -71,5 +71,4 @@ var SkipLinksController = function SkipLinksController(_ref) {
   return /*#__PURE__*/_react.default.createElement(_skipLinkContext.SkipLinksContext.Provider, {
     value: context
   }, children);
-};
-exports.SkipLinksController = SkipLinksController;
+};

package/dist/cjs/controllers/use-page-layout-grid.js

@@ -27,5 +27,4 @@ var publishGridState = function publishGridState(gridState) {
     (0, _utils.mergeGridStateIntoStorage)('gridState', (0, _defineProperty2.default)({}, slotName, value));
   });
 };
-var _default = publishGridState;
-exports.default = _default;
+var _default = exports.default = publishGridState;

package/dist/cjs/controllers/use-update-css-vars.js

@@ -13,5 +13,4 @@ function useUpdateCssVar(cssVar, value) {
     };
   }, [cssVar, value]);
 }
-var _default = useUpdateCssVar;
-exports.default = _default;
+var _default = exports.default = useUpdateCssVar;

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

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable react/react-in-jsx-scope */
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { B100, B200 } from '@atlaskit/theme/colors';
+import { B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 /**
  * Determines the color of the grab line.
@@ -23,13 +24,8 @@ const grabAreaStyles = css({
   ':focus': {
     outline: 0
   },
-  ':enabled': {
-    ':hover': {
-      [varLineColor]: `var(--ds-border-selected, ${B100})`
-    },
-    ':active, :focus': {
-      [varLineColor]: `var(--ds-border-selected, ${B200})`
-    }
+  ':enabled:hover, :enabled:focus, :enabled:active': {
+    [varLineColor]: `var(--ds-border-selected, ${B200})`
   }
 });
 const grabAreaCollapsedStyles = css({
@@ -40,9 +36,9 @@ const grabAreaCollapsedStyles = css({
 });
 const lineStyles = css({
   display: 'block',
-  width: 2,
+  width: "var(--ds-border-width-outline, 2px)",
   height: '100%',
-  backgroundColor: `var(${varLineColor})`,
+  backgroundColor: 'var(--ds-line)',
   transition: 'background-color 200ms'
 });
 const grabAreaLineSelector = {
@@ -53,6 +49,7 @@ const grabAreaSelector = {
 };
 const GrabArea = ({
   testId,
+  valueTextLabel = 'Width',
   isDisabled,
   isLeftSidebarCollapsed,
   label,
@@ -61,6 +58,7 @@ const GrabArea = ({
   onMouseDown,
   onBlur,
   onFocus,
+  ref,
   ...rest
 }) => jsx("button", _extends({}, grabAreaSelector, {
   "aria-label": label,
@@ -68,17 +66,18 @@ const GrabArea = ({
   disabled: isDisabled,
   "aria-hidden": isLeftSidebarCollapsed,
   type: "button"
-  // The separator role is applied to a button to utilize the native
-  // interactive and disabled functionality on the resize separator. While a
+  // The slider role is applied to a button to utilize the native
+  // interactive and disabled functionality on the resize slider. While a
   // range input would be more semantically accurate, it does not affect
   // usability.
   ,
-  role: "separator",
+  role: "slider",
   css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
   "aria-orientation": "vertical",
   "aria-valuenow": leftSidebarPercentageExpanded,
   "aria-valuemin": 0,
   "aria-valuemax": 100,
+  "aria-valuetext": `${valueTextLabel} ${leftSidebarPercentageExpanded}%`,
   onKeyDown: onKeyDown,
   onMouseDown: onMouseDown,
   onFocus: onFocus,

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

@@ -19,10 +19,9 @@ const cssSelector = {
 };
 const resizeControlStyles = css({
   position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '100%',
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineStart: '100%',
   outline: 'none'
 });
 const showResizeButtonStyles = css({
@@ -58,8 +57,9 @@ const globalResizingStyles = css({
 const ResizeControl = ({
   testId,
   overrides,
-  resizeButtonLabel = '',
-  resizeGrabAreaLabel = 'Resize',
+  resizeButtonLabel = 'Current project sidebar',
+  valueTextLabel = 'Width',
+  resizeGrabAreaLabel = 'Resize Current Project Sidebar',
   onResizeStart,
   onResizeEnd
 }) => {
@@ -334,6 +334,7 @@ const ResizeControl = ({
     isDisabled: isLeftSidebarCollapsed,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     label: resizeGrabAreaLabel,
+    valueTextLabel: valueTextLabel,
     leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
     onBlur: onBlur,
     onFocus: onFocus,

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

@@ -50,6 +50,7 @@ const LeftSidebar = props => {
     children,
     width,
     isFixed = true,
+    valueTextLabel,
     resizeButtonLabel,
     resizeGrabAreaLabel,
     overrides,
@@ -330,6 +331,7 @@ const LeftSidebar = props => {
     testId: testId && `${testId}-resize-children-wrapper`
   }, children), jsx(ResizeControl, {
     testId: testId,
+    valueTextLabel: valueTextLabel,
     resizeGrabAreaLabel: resizeGrabAreaLabel,
     resizeButtonLabel: resizeButtonLabel
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides

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

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["testId", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
+var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus", "ref"];
+/* eslint-disable react/react-in-jsx-scope */
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { B100, B200 } from '@atlaskit/theme/colors';
+import { B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 /**
  * Determines the color of the grab line.
@@ -26,10 +27,7 @@ var grabAreaStyles = css({
   ':focus': {
     outline: 0
   },
-  ':enabled': {
-    ':hover': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B100, ")")),
-    ':active, :focus': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
-  }
+  ':enabled:hover, :enabled:focus, :enabled:active': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
 });
 var grabAreaCollapsedStyles = css({
   padding: 0,
@@ -39,15 +37,17 @@ var grabAreaCollapsedStyles = css({
 });
 var lineStyles = css({
   display: 'block',
-  width: 2,
+  width: "var(--ds-border-width-outline, 2px)",
   height: '100%',
-  backgroundColor: "var(".concat(varLineColor, ")"),
+  backgroundColor: 'var(--ds-line)',
   transition: 'background-color 200ms'
 });
 var grabAreaLineSelector = _defineProperty({}, GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = _defineProperty({}, GRAB_AREA_SELECTOR, true);
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
+    _ref$valueTextLabel = _ref.valueTextLabel,
+    valueTextLabel = _ref$valueTextLabel === void 0 ? 'Width' : _ref$valueTextLabel,
     isDisabled = _ref.isDisabled,
     isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
     label = _ref.label,
@@ -56,6 +56,7 @@ var GrabArea = function GrabArea(_ref) {
     onMouseDown = _ref.onMouseDown,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
+    ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return jsx("button", _extends({}, grabAreaSelector, {
     "aria-label": label,
@@ -63,17 +64,18 @@ var GrabArea = function GrabArea(_ref) {
     disabled: isDisabled,
     "aria-hidden": isLeftSidebarCollapsed,
     type: "button"
-    // The separator role is applied to a button to utilize the native
-    // interactive and disabled functionality on the resize separator. While a
+    // The slider role is applied to a button to utilize the native
+    // interactive and disabled functionality on the resize slider. While a
     // range input would be more semantically accurate, it does not affect
     // usability.
     ,
-    role: "separator",
+    role: "slider",
     css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
     "aria-valuemax": 100,
+    "aria-valuetext": "".concat(valueTextLabel, " ").concat(leftSidebarPercentageExpanded, "%"),
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     onFocus: onFocus,

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

@@ -21,10 +21,9 @@ import Shadow from './shadow';
 var cssSelector = _defineProperty({}, RESIZE_CONTROL_SELECTOR, true);
 var resizeControlStyles = css({
   position: 'absolute',
-  top: 0,
-  bottom: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  left: '100%',
+  insetBlockEnd: 0,
+  insetBlockStart: 0,
+  insetInlineStart: '100%',
   outline: 'none'
 });
 var showResizeButtonStyles = css({
@@ -61,9 +60,11 @@ var ResizeControl = function ResizeControl(_ref) {
   var testId = _ref.testId,
     overrides = _ref.overrides,
     _ref$resizeButtonLabe = _ref.resizeButtonLabel,
-    resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? '' : _ref$resizeButtonLabe,
+    resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? 'Current project sidebar' : _ref$resizeButtonLabe,
+    _ref$valueTextLabel = _ref.valueTextLabel,
+    valueTextLabel = _ref$valueTextLabel === void 0 ? 'Width' : _ref$valueTextLabel,
     _ref$resizeGrabAreaLa = _ref.resizeGrabAreaLabel,
-    resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize' : _ref$resizeGrabAreaLa,
+    resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize Current Project Sidebar' : _ref$resizeGrabAreaLa,
     onResizeStart = _ref.onResizeStart,
     onResizeEnd = _ref.onResizeEnd;
   var _useContext = useContext(SidebarResizeContext),
@@ -93,7 +94,7 @@ var ResizeControl = function ResizeControl(_ref) {
   }, [leftSidebarState]);
   var toggleSideBar = useCallback(function (event) {
     // don't cascade down to the LeftSidebarOuter
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    event === null || event === void 0 || event.stopPropagation();
     toggleLeftSidebar();
   }, [toggleLeftSidebar]);
   var onMouseDown = function onMouseDown(event) {
@@ -176,7 +177,7 @@ var ResizeControl = function ResizeControl(_ref) {
   var onResizeOffLeftOfScreen = function onResizeOffLeftOfScreen() {
     var _unbindEvents$current;
     onUpdateResize.cancel();
-    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
+    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 || _unbindEvents$current.call(unbindEvents);
     unbindEvents.current = null;
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
     offset.current = 0;
@@ -242,7 +243,7 @@ var ResizeControl = function ResizeControl(_ref) {
       }, _defineProperty(_objectSpread3, VAR_LEFT_SIDEBAR_WIDTH, sidebarWidth.current), _defineProperty(_objectSpread3, "lastLeftSidebarWidth", sidebarWidth.current), _objectSpread3));
       setLeftSidebarState(updatedLeftSidebarState);
     }
-    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 || _unbindEvents$current2.call(unbindEvents);
     unbindEvents.current = null;
     onUpdateResize.cancel();
     sidebarWidth.current = 0;
@@ -253,7 +254,7 @@ var ResizeControl = function ResizeControl(_ref) {
       var _updatedLeftSidebarSt;
       setIsGrabAreaFocused(false);
       // Note: the `collapseSidebar` codepath does not return state, so we need to pull it from the ref
-      onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd((_updatedLeftSidebarSt = updatedLeftSidebarState) !== null && _updatedLeftSidebarSt !== void 0 ? _updatedLeftSidebarSt : stableSidebarState.current);
+      onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd((_updatedLeftSidebarSt = updatedLeftSidebarState) !== null && _updatedLeftSidebarSt !== void 0 ? _updatedLeftSidebarSt : stableSidebarState.current);
     });
   };
   var onKeyDown = function onKeyDown(event) {
@@ -329,6 +330,7 @@ var ResizeControl = function ResizeControl(_ref) {
     isDisabled: isLeftSidebarCollapsed,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
     label: resizeGrabAreaLabel,
+    valueTextLabel: valueTextLabel,
     leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
     onBlur: onBlur,
     onFocus: onFocus,

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

@@ -53,6 +53,7 @@ var LeftSidebar = function LeftSidebar(props) {
     width = props.width,
     _props$isFixed = props.isFixed,
     isFixed = _props$isFixed === void 0 ? true : _props$isFixed,
+    valueTextLabel = props.valueTextLabel,
     resizeButtonLabel = props.resizeButtonLabel,
     resizeGrabAreaLabel = props.resizeGrabAreaLabel,
     overrides = props.overrides,
@@ -236,7 +237,7 @@ var LeftSidebar = function LeftSidebar(props) {
       if (current.isFlyoutOpen) {
         return current;
       }
-      onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+      onExpand === null || onExpand === void 0 || onExpand();
       return _objectSpread(_objectSpread({}, current), {}, {
         isFlyoutOpen: true
       });
@@ -252,7 +253,7 @@ var LeftSidebar = function LeftSidebar(props) {
       if (!current.isFlyoutOpen) {
         return current;
       }
-      onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
+      onCollapse === null || onCollapse === void 0 || onCollapse();
       return _objectSpread(_objectSpread({}, current), {}, {
         isFlyoutOpen: false
       });
@@ -327,6 +328,7 @@ var LeftSidebar = function LeftSidebar(props) {
     testId: testId && "".concat(testId, "-resize-children-wrapper")
   }, children), jsx(ResizeControl, {
     testId: testId,
+    valueTextLabel: valueTextLabel,
     resizeGrabAreaLabel: resizeGrabAreaLabel,
     resizeButtonLabel: resizeButtonLabel
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides

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;