@atlaskit/side-navigation 1.6.3 → 1.6.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/side-navigation
 
+## 1.6.5
+
+### Patch Changes
+
+- [`f7f852b0a4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7f852b0a4f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
+## 1.6.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.6.3
 
 ### Patch Changes

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

@@ -13,8 +13,11 @@ var _menu = require("@atlaskit/menu");
 var _styles = require("../../common/styles");
 var _context = require("../NestableNavigationContent/context");
 var _excluded = ["cssFn"];
+/* eslint-disable @repo/internal/react/no-unsafe-overrides */
 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; }
+// Dirty hack to get generics working with forward ref [1/2]
+
 /**
  * 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.

package/dist/cjs/components/NavigationContent/styles.js

@@ -7,16 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.outerContainerCSS = exports.innerContainerCSS = exports.containerCSS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
-var _constants2 = require("../../common/constants");
+var _constants = require("../../common/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 scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;
 var scrollIndicatorBorderRadius = 1;
-var containerPadding = (0, _constants.gridSize)();
+var containerPadding = 8;
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var skeletonHeadingHeight = containerPadding;
 var skeletonHeadingMarginOffset = 3;
@@ -46,7 +45,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")"),
+      backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -61,7 +60,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")")
+      backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")")
     }
   };
 };
@@ -87,7 +86,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(_colors.N10, ")"), ")"),
+      backgroundColor: "var(".concat(_constants.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(_colors.N10, ")"), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -105,7 +104,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(_colors.N10, ")"), ")")
+      backgroundColor: "var(".concat(_constants.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(_colors.N10, ")"), ")")
     }
   });
 };

package/dist/cjs/components/NestableNavigationContent/nesting-motion.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
 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; }
+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; } /** @jsx jsx */
 /**
  * @internal
  */

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

@@ -23,10 +23,13 @@ var _context = require("../NestableNavigationContent/context");
 var _hooks = require("../utils/hooks");
 var _styles2 = require("./styles");
 var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
+/** @jsx jsx */
 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; }
 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; }
+// Doesn't extend from ButtonItemProps because it blows ERT up.
+
 /**
  * NestingItem will render itself differently depending in what context it is rendered in.
  * When not open - it will render itself as an item.

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.6.3",
+	"version": "1.6.5",
 	"sideEffects": false
 }

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

@@ -4,6 +4,9 @@ import React, { forwardRef } from 'react';
 import { CustomItem as Custom } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+// Dirty hack to get generics working with forward ref [1/2]
+
 /**
  * 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.

package/dist/es2019/components/NavigationContent/styles.js

@@ -1,12 +1,11 @@
 import { N10, N30 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 const scrollIndicatorMaskZIndex = 2;
 const scrollIndicatorZIndex = 1;
 const scrollIndicatorHeight = 2;
 const scrollIndicatorBorderRadius = 1;
-const containerPadding = gridSize();
+const containerPadding = 8;
 const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const skeletonHeadingHeight = containerPadding;
 const skeletonHeadingMarginOffset = 3;

package/dist/es2019/components/NestingItem/index.js

@@ -11,6 +11,9 @@ import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
+
+// Doesn't extend from ButtonItemProps because it blows ERT up.
+
 /**
  * NestingItem will render itself differently depending in what context it is rendered in.
  * When not open - it will render itself as an item.

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.6.3",
+	"version": "1.6.5",
 	"sideEffects": false
 }

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

@@ -6,6 +6,9 @@ import React, { forwardRef } from 'react';
 import { CustomItem as Custom } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
+
+// Dirty hack to get generics working with forward ref [1/2]
+
 /**
  * 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.

package/dist/esm/components/NavigationContent/styles.js

@@ -2,14 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { N10, N30 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 var scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;
 var scrollIndicatorBorderRadius = 1;
-var containerPadding = gridSize();
+var containerPadding = 8;
 var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var skeletonHeadingHeight = containerPadding;
 var skeletonHeadingMarginOffset = 3;

package/dist/esm/components/NestingItem/index.js

@@ -18,6 +18,9 @@ import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
+
+// Doesn't extend from ButtonItemProps because it blows ERT up.
+
 /**
  * NestingItem will render itself differently depending in what context it is rendered in.
  * When not open - it will render itself as an item.

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.6.3",
+	"version": "1.6.5",
 	"sideEffects": false
 }

package/dist/types/components/NavigationContent/styles.d.ts

@@ -17,7 +17,7 @@ export declare const outerContainerCSS: (opts: StyleOpts & {
     readonly '&::before': {
         readonly content: "''";
         readonly display: "block";
-        readonly left: number;
+        readonly left: 8;
         readonly right: number;
         readonly height: 2;
         readonly borderRadius: 1;
@@ -32,7 +32,7 @@ export declare const outerContainerCSS: (opts: StyleOpts & {
         readonly borderRadius: 1;
         readonly flexShrink: 0;
         readonly height: 2;
-        readonly left: number;
+        readonly left: 8;
         readonly right: number;
         readonly bottom: 0;
         readonly zIndex: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/menu": "^1.5.0",
     "@atlaskit/motion": "^1.3.0",
-    "@atlaskit/primitives": "^0.6.0",
+    "@atlaskit/primitives": "^0.7.0",
     "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
@@ -42,7 +42,7 @@
     "@atlaskit/atlassian-navigation": "^2.4.0",
     "@atlaskit/button": "^16.6.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/logo": "^13.11.0",
+    "@atlaskit/logo": "^13.12.0",
     "@atlaskit/onboarding": "^10.7.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^16.1.0",
@@ -67,7 +67,6 @@
       "design-system": "v1",
       "dom-events": "use-bind-event-listener",
       "ui-components": [
-        "primitives",
         "lite-mode"
       ],
       "design-tokens": [