@atlaskit/page-layout 1.7.13 → 1.8.0

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

@@ -60,5 +60,4 @@ var PageLayout = function PageLayout(_ref) {
     onLeftSidebarExpand: onLeftSidebarExpand
   }, children))));
 };
-var _default = PageLayout;
-exports.default = _default;
+var _default = exports.default = PageLayout;

package/dist/cjs/components/slots/right-panel.js

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

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

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

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,10 @@
 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 { Box, xcss } from '@atlaskit/primitives';
+import { B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 /**
  * Determines the color of the grab line.
@@ -11,7 +13,7 @@ import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/consta
  */
 const varLineColor = '--ds-line';
 const grabAreaStyles = css({
-  width: 24,
+  width: 4,
   height: '100%',
   padding: 0,
   backgroundColor: 'transparent',
@@ -22,14 +24,21 @@ const grabAreaStyles = css({
   },
   ':focus': {
     outline: 0
+  }
+});
+const grabAreaEnabledStyles = css({
+  ':hover': {
+    [varLineColor]: `var(--ds-border-selected, ${B200})`
+  },
+  ':active': {
+    borderColor: `var(--ds-border-selected, ${B200})`,
+    [varLineColor]: `var(--ds-border-selected, ${B200})`
   },
-  ':enabled': {
-    ':hover': {
-      [varLineColor]: `var(--ds-border-selected, ${B100})`
-    },
-    ':active, :focus': {
-      [varLineColor]: `var(--ds-border-selected, ${B200})`
-    }
+  ':focus-visible': {
+    outlineColor: `var(--ds-border-selected, ${B200})`,
+    outlineStyle: 'solid',
+    outlineWidth: "var(--ds-border-width-outline, 2px)",
+    [varLineColor]: `var(--ds-border-selected, ${B200})`
   }
 });
 const grabAreaCollapsedStyles = css({
@@ -38,11 +47,11 @@ const grabAreaCollapsedStyles = css({
   border: 0,
   cursor: 'default'
 });
-const lineStyles = css({
+const lineStyles = xcss({
   display: 'block',
-  width: 2,
+  width: 'border.width.outline',
   height: '100%',
-  backgroundColor: `var(${varLineColor})`,
+  backgroundColor: 'color.background.neutral',
   transition: 'background-color 200ms'
 });
 const grabAreaLineSelector = {
@@ -53,6 +62,7 @@ const grabAreaSelector = {
 };
 const GrabArea = ({
   testId,
+  valueTextLabel = 'Width',
   isDisabled,
   isLeftSidebarCollapsed,
   label,
@@ -61,6 +71,7 @@ const GrabArea = ({
   onMouseDown,
   onBlur,
   onFocus,
+  ref,
   ...rest
 }) => jsx("button", _extends({}, grabAreaSelector, {
   "aria-label": label,
@@ -68,24 +79,26 @@ 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",
-  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+  role: "slider",
+  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, !isDisabled && grabAreaEnabledStyles],
   "aria-orientation": "vertical",
   "aria-valuenow": leftSidebarPercentageExpanded,
   "aria-valuemin": 0,
   "aria-valuemax": 100,
+  "aria-valuetext": `${valueTextLabel} ${leftSidebarPercentageExpanded}%`,
   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
+}, rest), jsx(Box, _extends({
+  as: "span",
+  xcss: lineStyles
 }, grabAreaLineSelector)));
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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,13 @@
 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 { Box, xcss } from '@atlaskit/primitives';
+import { B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 /**
  * Determines the color of the grab line.
@@ -14,7 +16,7 @@ import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/consta
  */
 var varLineColor = '--ds-line';
 var grabAreaStyles = css({
-  width: 24,
+  width: 4,
   height: '100%',
   padding: 0,
   backgroundColor: 'transparent',
@@ -25,29 +27,38 @@ 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, ")"))
   }
 });
+var grabAreaEnabledStyles = css({
+  ':hover': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")")),
+  ':active': _defineProperty({
+    borderColor: "var(--ds-border-selected, ".concat(B200, ")")
+  }, varLineColor, "var(--ds-border-selected, ".concat(B200, ")")),
+  ':focus-visible': _defineProperty({
+    outlineColor: "var(--ds-border-selected, ".concat(B200, ")"),
+    outlineStyle: 'solid',
+    outlineWidth: "var(--ds-border-width-outline, 2px)"
+  }, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
+});
 var grabAreaCollapsedStyles = css({
   padding: 0,
   backgroundColor: 'transparent',
   border: 0,
   cursor: 'default'
 });
-var lineStyles = css({
+var lineStyles = xcss({
   display: 'block',
-  width: 2,
+  width: 'border.width.outline',
   height: '100%',
-  backgroundColor: "var(".concat(varLineColor, ")"),
+  backgroundColor: 'color.background.neutral',
   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 +67,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,24 +75,26 @@ 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",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    role: "slider",
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, !isDisabled && grabAreaEnabledStyles],
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
     "aria-valuemax": 100,
+    "aria-valuetext": "".concat(valueTextLabel, " ").concat(leftSidebarPercentageExpanded, "%"),
     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
+  }, rest), jsx(Box, _extends({
+    as: "span",
+    xcss: lineStyles
   }, grabAreaLineSelector)));
 };
 

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