@atlaskit/side-navigation 1.5.1 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/side-navigation
 
+## 1.5.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.5.2
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
 ## 1.5.1
 
 ### Patch Changes

package/dist/cjs/common/styles.js

@@ -1,23 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sectionHeaderSpacingStyles = exports.overrideStyleFunction = exports.baseSideNavItemStyle = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var borderRadius = (0, _constants.borderRadius)();
+
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
@@ -25,7 +19,6 @@ var borderRadius = (0, _constants.borderRadius)();
  *
  * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
-
 var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
   var newStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
     return {};
@@ -34,7 +27,6 @@ var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
     return [baseStyle(state), newStyle(state)];
   };
 };
-
 exports.overrideStyleFunction = overrideStyleFunction;
 var defaultStyles = {
   '&:hover': {
@@ -61,14 +53,13 @@ var selectedStyles = {
     color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
   }
 };
-
 var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
   var isSelected = _ref.isSelected,
-      isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled;
   return _objectSpread(_objectSpread(_objectSpread({
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
-    padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 10px)"),
+    padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 10px)"),
     borderRadius: borderRadius,
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
@@ -78,22 +69,19 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
     // TODO: Can this be moved into menu?
     // center align icons with app-switcher regardless of size
     display: 'flex',
-    height: "var(--ds-scale-300, 24px)",
-    width: "var(--ds-scale-300, 24px)",
+    height: "var(--ds-space-300, 24px)",
+    width: "var(--ds-space-300, 24px)",
     alignItems: 'center',
     justifyContent: 'center',
     // this margin could be removed if the respective item had a more
     // compositional API so an Inline could be used to separate elements instead
-    marginRight: "var(--ds-scale-200, 16px)"
+    marginRight: "var(--ds-space-200, 16px)"
   }));
 };
-
 exports.baseSideNavItemStyle = baseSideNavItemStyle;
-
 var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
   return {
-    paddingInline: "var(--ds-scale-100, 10px)"
+    paddingInline: "var(--ds-space-100, 10px)"
   };
 };
-
 exports.sectionHeaderSpacingStyles = sectionHeaderSpacingStyles;

package/dist/cjs/components/Footer/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _styles = require("../../common/styles");
-
 var _Header = require("../Header");
-
 var _Item = require("../Item");
-
 /**
  * __Footer__
  *
@@ -35,8 +27,8 @@ var Footer = function Footer(props) {
       alignItems: 'center',
       width: '100%',
       '[data-item-elem-before]': {
-        marginRight: "var(--ds-scale-0, 0px)",
-        marginBottom: "var(--ds-scale-100, 8px)",
+        marginRight: "var(--ds-space-0, 0px)",
+        marginBottom: "var(--ds-space-100, 8px)",
         display: 'inline-block'
       },
       '[data-item-title]': {
@@ -46,7 +38,7 @@ var Footer = function Footer(props) {
       '[data-item-description]': {
         textAlign: 'center',
         display: 'inline-block',
-        margin: "var(--ds-scale-075, 6px)"
+        margin: "var(--ds-space-075, 6px)"
       },
       // Will look interactive if the `component` is anything other than a div.
       'div&:hover': {
@@ -58,14 +50,15 @@ var Footer = function Footer(props) {
         color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
       }
     };
-  }, props.cssFn); // https://stackoverflow.com/a/39333479
+  }, props.cssFn);
 
+  // https://stackoverflow.com/a/39333479
   var safeProps = function (_ref) {
     var iconBefore = _ref.iconBefore,
-        onClick = _ref.onClick,
-        description = _ref.description,
-        children = _ref.children,
-        testId = _ref.testId;
+      onClick = _ref.onClick,
+      description = _ref.description,
+      children = _ref.children,
+      testId = _ref.testId;
     return {
       iconBefore: iconBefore,
       onClick: onClick,
@@ -74,13 +67,12 @@ var Footer = function Footer(props) {
       testId: testId
     };
   }(props);
-
   return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, safeProps, {
-    component: props.component || _Header.Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    component: props.component || _Header.Container
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn
   }));
 };
-
 var _default = Footer;
 exports.default = _default;

package/dist/cjs/components/Header/index.js

@@ -1,39 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Container = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _typography = require("@atlaskit/theme/typography");
-
 var _styles = require("../../common/styles");
-
 var _Item = require("../Item");
-
 var _excluded = ["children"],
-    _excluded2 = ["children"];
-
+  _excluded2 = ["children"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * __Container__
  *
@@ -41,19 +26,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var Container = function Container(_ref) {
   var children = _ref.children,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // https://stackoverflow.com/a/39333479
   var safeProps = function (_ref2) {
     var className = _ref2.className,
-        testId = _ref2['data-testid'],
-        onClick = _ref2.onClick,
-        onMouseDown = _ref2.onMouseDown,
-        onDragStart = _ref2.onDragStart,
-        draggable = _ref2.draggable,
-        ref = _ref2.ref,
-        tabIndex = _ref2.tabIndex,
-        disabled = _ref2.disabled;
+      testId = _ref2['data-testid'],
+      onClick = _ref2.onClick,
+      onMouseDown = _ref2.onMouseDown,
+      onDragStart = _ref2.onDragStart,
+      draggable = _ref2.draggable,
+      ref = _ref2.ref,
+      tabIndex = _ref2.tabIndex,
+      disabled = _ref2.disabled;
     return {
       className: className,
       testId: testId,
@@ -66,15 +50,12 @@ var Container = function Container(_ref) {
       disabled: disabled
     };
   }(props);
-
   return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
     as: "div",
     display: "block"
   }, safeProps), children);
 };
-
 exports.Container = Container;
-
 /**
  * __Header__
  *
@@ -84,7 +65,6 @@ exports.Container = Container;
 var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var cssFn = (0, _styles.overrideStyleFunction)(function () {
     var _ref3;
-
     return _ref3 = {
       userSelect: 'auto'
     }, (0, _defineProperty2.default)(_ref3, '[data-item-title]', {
@@ -102,15 +82,17 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, props.cssFn);
   return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
     ref: ref,
-    component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    component: props.component || Container
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
-    cssFn: cssFn // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    cssFn: cssFn
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     overrides: {
       Title: {
         render: function render(_, _ref4) {
           var children = _ref4.children,
-              props = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
+            props = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
           return /*#__PURE__*/_react.default.createElement("h2", props, children);
         }
       }

package/dist/cjs/components/Item/button-item.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _menu = require("@atlaskit/menu");
-
 var _styles = require("../../common/styles");
-
 var _context = require("../NestableNavigationContent/context");
-
 var _excluded = ["cssFn"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * __Button item__
  *
@@ -36,20 +24,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-var ButtonItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
+var ButtonItem = /*#__PURE__*/(0, _react.forwardRef)(
+// Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
-
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride

package/dist/cjs/components/Item/custom-item.js

@@ -1,55 +1,42 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _menu = require("@atlaskit/menu");
-
 var _styles = require("../../common/styles");
-
 var _context = require("../NestableNavigationContent/context");
-
 var _excluded = ["cssFn"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * Used to support any custom items needed by products alongside the Header and Footer patterns.
  * Specific implementation of headers and footers are provided in the examples folder.
  */
-var CustomItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
+var CustomItem = /*#__PURE__*/(0, _react.forwardRef)(
+// Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
-
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
   return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride
   }, rest));
-} // Dirty hack to get generics working with forward ref [2/2]
+}
+// Dirty hack to get generics working with forward ref [2/2]
 );
 var _default = CustomItem;
 exports.default = _default;

package/dist/cjs/components/Item/go-back-item.js

@@ -1,34 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _arrowLeftCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left-circle"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _buttonItem = _interopRequireDefault(require("./button-item"));
-
 var _excluded = ["cssFn", "iconBefore", "onClick", "isSelected"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * __Go back item__
  *
@@ -40,30 +27,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      _ref$iconBefore = _ref.iconBefore,
-      iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/_react.default.createElement(_arrowLeftCircle.default, {
-    secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
-    label: ""
-  }) : _ref$iconBefore,
-      onClick = _ref.onClick,
-      isSelected = _ref.isSelected,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    _ref$iconBefore = _ref.iconBefore,
+    iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/_react.default.createElement(_arrowLeftCircle.default, {
+      secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
+      label: ""
+    }) : _ref$iconBefore,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isInteracted = _useState2[0],
-      setIsInteracted = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isInteracted = _useState2[0],
+    setIsInteracted = _useState2[1];
   var onClickHandler = (0, _react.useCallback)(function (e) {
     if (isInteracted) {
       return;
     }
-
     setIsInteracted(true);
     onClick && onClick(e);
   }, [onClick, isInteracted]);
   return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
-    isSelected: isSelected || isInteracted // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    isSelected: isSelected || isInteracted
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn,
     iconBefore: iconBefore,

package/dist/cjs/components/Item/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -35,13 +34,8 @@ Object.defineProperty(exports, "SkeletonItem", {
     return _skeletonItem.default;
   }
 });
-
 var _buttonItem = _interopRequireDefault(require("./button-item"));
-
 var _customItem = _interopRequireDefault(require("./custom-item"));
-
 var _goBackItem = _interopRequireDefault(require("./go-back-item"));
-
 var _linkItem = _interopRequireDefault(require("./link-item"));
-
 var _skeletonItem = _interopRequireDefault(require("./skeleton-item"));

package/dist/cjs/components/Item/link-item.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _menu = require("@atlaskit/menu");
-
 var _styles = require("../../common/styles");
-
 var _context = require("../NestableNavigationContent/context");
-
 var _excluded = ["cssFn"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * __Link item__
  *
@@ -38,20 +26,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-var LinkItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
+var LinkItem = /*#__PURE__*/(0, _react.forwardRef)(
+// Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
-
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride

package/dist/cjs/components/Item/skeleton-item.js

@@ -1,28 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _menu = require("@atlaskit/menu");
-
 var _styles = require("../../common/styles");
-
 var _context = require("../NestableNavigationContent/context");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * __Skeleton item__
  *
@@ -33,27 +23,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var SkeletonItem = function SkeletonItem(props) {
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , (0, _extends2.default)({
     cssFn: function cssFn() {
       return _objectSpread(_objectSpread({}, (0, _styles.sectionHeaderSpacingStyles)()), {}, {
         // This doubles up & to get a higher specificity as well as to not overwite the base styles.
         '&&::before': {
-          height: "var(--ds-scale-300, 20px)",
-          marginRight: "var(--ds-scale-200, 18px)",
-          width: "var(--ds-scale-300, 20px)"
+          height: "var(--ds-space-300, 20px)",
+          marginRight: "var(--ds-space-200, 18px)",
+          width: "var(--ds-space-300, 20px)"
         }
       });
-    } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    }
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
-
 var _default = SkeletonItem;
 exports.default = _default;