@atlaskit/side-navigation 1.6.0 → 1.6.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/side-navigation
 
+## 1.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.6.1
+
+### Patch Changes
+
+- [`3ca97be0c06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ca97be0c06) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
+- Updated dependencies
+
 ## 1.6.0
 
 ### Minor Changes

package/constellation/index/props.mdx

@@ -1,6 +1,6 @@
 import SideNavigationProps from '!!extract-react-types-loader!../../src/components/SideNavigation'
 import HeaderProps from '!!extract-react-types-loader!../../src/components/Header'
-import FooterProps from '!!extract-react-types-loader!../../src/components/Footer'
+import FooterProps from '!!extract-react-types-loader!../../docs/ert/footer'
 import NavigationContentProps from '!!extract-react-types-loader!../../src/components/NavigationContent'
 import NestableNavigationContentProps from '!!extract-react-types-loader!../../src/components/NestableNavigationContent'
 import SectionProps from '!!extract-react-types-loader!../../src/components/Section'

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

@@ -8,9 +8,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-var _stack = _interopRequireDefault(require("@atlaskit/ds-explorations/stack"));
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
+var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
 var _Header = require("../Header");
@@ -97,14 +97,14 @@ var Footer = function Footer(_ref2) {
     padding: "space.100",
     testId: testId
   }, /*#__PURE__*/_react.default.createElement(_stack.default, {
-    gap: "space.100",
-    alignItems: "center"
+    space: "100",
+    alignInline: "center"
   }, /*#__PURE__*/_react.default.createElement(_box.default, {
     display: "inlineBlock",
     width: "size.200",
     height: "size.200"
   }, iconBefore), /*#__PURE__*/_react.default.createElement(_stack.default, {
-    gap: "space.075"
+    space: "075"
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
     fontSize: "size.075",
     textAlign: "center",

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

@@ -42,13 +42,10 @@ var LoadingItems = function LoadingItems(_ref) {
     key: "loading-section-".concat(isLoading),
     duration: _motion.mediumDurationMs
   }, function (motion, state) {
-    return (
-      // eslint-disable-next-line @repo/internal/react/use-primitives
-      (0, _react.jsx)("span", (0, _extends2.default)({}, motion, {
-        "data-testid": testId && "".concat(testId, "--").concat(state),
-        css: [baseMotionStyles, state === 'entering' && enteringStyles]
-      }), isLoading ? fallback : children)
-    );
+    return (0, _react.jsx)("span", (0, _extends2.default)({}, motion, {
+      "data-testid": testId && "".concat(testId, "--").concat(state),
+      css: [baseMotionStyles, state === 'entering' && enteringStyles]
+    }), isLoading ? fallback : children);
   }));
 };
 var _default = LoadingItems;

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

@@ -10,7 +10,6 @@ var _react2 = require("@emotion/react");
 var _useScrollbarWidth = _interopRequireDefault(require("@atlaskit/ds-lib/use-scrollbar-width"));
 var _context = require("../NestableNavigationContent/context");
 var _styles = require("./styles");
-/* eslint-disable @repo/internal/react/use-primitives */
 /** @jsx jsx */
 
 /**

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

@@ -146,38 +146,32 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       containerRef.current && containerRef.current.focus();
     }
   };
-  return (
-    // eslint-disable-next-line @repo/internal/react/use-primitives
-    (0, _react2.jsx)("div", {
-      "data-testid": testId,
-      css: nestableNavigationContentStyles,
-      ref: containerRef,
-      tabIndex: -1,
-      onClick: manageFocus
-    }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_nestingMotion.NestingMotion
-    // Key is needed to have a unique react instance per stack name.
-    // This enables us to easily animate it in & out with exiting persistence.
-    , {
-      key: currentStackId,
-      enterFrom: transition === 'nesting' ? 'right' : 'left',
-      exitTo: transition === 'nesting' ? 'left' : 'right',
-      testId: testId && "".concat(testId, "-anim")
-    }, function (motion) {
-      return (
-        // eslint-disable-next-line @repo/internal/react/use-primitives
-        (0, _react2.jsx)("div", (0, _extends2.default)({
-          css: nestingRootStyles
-        }, motion), (0, _react2.jsx)(_context.NestedContext.Provider, {
-          // This provider is inside the NestingMotion to ensure it keeps a stale
-          // reference to the previous value.
-          value: context
-        }, (0, _react2.jsx)(_NestingItem.default, {
-          title: "",
-          id: ROOT_ID
-        }, children)))
-      );
-    })))
-  );
+  return (0, _react2.jsx)("div", {
+    "data-testid": testId,
+    css: nestableNavigationContentStyles,
+    ref: containerRef,
+    tabIndex: -1,
+    onClick: manageFocus
+  }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_nestingMotion.NestingMotion
+  // Key is needed to have a unique react instance per stack name.
+  // This enables us to easily animate it in & out with exiting persistence.
+  , {
+    key: currentStackId,
+    enterFrom: transition === 'nesting' ? 'right' : 'left',
+    exitTo: transition === 'nesting' ? 'left' : 'right',
+    testId: testId && "".concat(testId, "-anim")
+  }, function (motion) {
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
+      css: nestingRootStyles
+    }, motion), (0, _react2.jsx)(_context.NestedContext.Provider, {
+      // This provider is inside the NestingMotion to ensure it keeps a stale
+      // reference to the previous value.
+      value: context
+    }, (0, _react2.jsx)(_NestingItem.default, {
+      title: "",
+      id: ROOT_ID
+    }, children)));
+  })));
 };
 var _default = NestableNavigationContent;
 exports.default = _default;

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

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/* eslint-disable @repo/internal/react/use-primitives */
 /** @jsx jsx */
 
 var sidebarMinWidth = '240px';

package/dist/cjs/version.json

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

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

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 import React from 'react';
 import Box from '@atlaskit/ds-explorations/box';
-import Stack from '@atlaskit/ds-explorations/stack';
 import Text from '@atlaskit/ds-explorations/text';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
+import Stack from '@atlaskit/primitives/stack';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
@@ -87,14 +87,14 @@ const Footer = ({
     padding: "space.100",
     testId: testId
   }, /*#__PURE__*/React.createElement(Stack, {
-    gap: "space.100",
-    alignItems: "center"
+    space: "100",
+    alignInline: "center"
   }, /*#__PURE__*/React.createElement(Box, {
     display: "inlineBlock",
     width: "size.200",
     height: "size.200"
   }, iconBefore), /*#__PURE__*/React.createElement(Stack, {
-    gap: "space.075"
+    space: "075"
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "size.075",
     textAlign: "center",

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @repo/internal/react/use-primitives */
 import React, { forwardRef } from 'react';
 import Box from '@atlaskit/ds-explorations/box';
 import { N500 } from '@atlaskit/theme/colors';

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

@@ -35,9 +35,7 @@ const LoadingItems = ({
   return jsx(ExitingPersistence, null, jsx(FadeIn, {
     key: `loading-section-${isLoading}`,
     duration: mediumDurationMs
-  }, (motion, state) =>
-  // eslint-disable-next-line @repo/internal/react/use-primitives
-  jsx("span", _extends({}, motion, {
+  }, (motion, state) => jsx("span", _extends({}, motion, {
     "data-testid": testId && `${testId}--${state}`,
     css: [baseMotionStyles, state === 'entering' && enteringStyles]
   }), isLoading ? fallback : children)));

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

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/react/use-primitives */
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';

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

@@ -129,34 +129,29 @@ const NestableNavigationContent = props => {
       containerRef.current && containerRef.current.focus();
     }
   };
-  return (
-    // eslint-disable-next-line @repo/internal/react/use-primitives
-    jsx("div", {
-      "data-testid": testId,
-      css: nestableNavigationContentStyles,
-      ref: containerRef,
-      tabIndex: -1,
-      onClick: manageFocus
-    }, jsx(ExitingPersistence, null, jsx(NestingMotion
-    // Key is needed to have a unique react instance per stack name.
-    // This enables us to easily animate it in & out with exiting persistence.
-    , {
-      key: currentStackId,
-      enterFrom: transition === 'nesting' ? 'right' : 'left',
-      exitTo: transition === 'nesting' ? 'left' : 'right',
-      testId: testId && `${testId}-anim`
-    }, motion =>
-    // eslint-disable-next-line @repo/internal/react/use-primitives
-    jsx("div", _extends({
-      css: nestingRootStyles
-    }, motion), jsx(NestedContext.Provider, {
-      // This provider is inside the NestingMotion to ensure it keeps a stale
-      // reference to the previous value.
-      value: context
-    }, jsx(NestingItem, {
-      title: "",
-      id: ROOT_ID
-    }, children))))))
-  );
+  return jsx("div", {
+    "data-testid": testId,
+    css: nestableNavigationContentStyles,
+    ref: containerRef,
+    tabIndex: -1,
+    onClick: manageFocus
+  }, jsx(ExitingPersistence, null, jsx(NestingMotion
+  // Key is needed to have a unique react instance per stack name.
+  // This enables us to easily animate it in & out with exiting persistence.
+  , {
+    key: currentStackId,
+    enterFrom: transition === 'nesting' ? 'right' : 'left',
+    exitTo: transition === 'nesting' ? 'left' : 'right',
+    testId: testId && `${testId}-anim`
+  }, motion => jsx("div", _extends({
+    css: nestingRootStyles
+  }, motion), jsx(NestedContext.Provider, {
+    // This provider is inside the NestingMotion to ensure it keeps a stale
+    // reference to the previous value.
+    value: context
+  }, jsx(NestingItem, {
+    title: "",
+    id: ROOT_ID
+  }, children))))));
 };
 export default NestableNavigationContent;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/react/use-primitives */
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';

package/dist/es2019/version.json

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

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

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 import React from 'react';
 import Box from '@atlaskit/ds-explorations/box';
-import Stack from '@atlaskit/ds-explorations/stack';
 import Text from '@atlaskit/ds-explorations/text';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
+import Stack from '@atlaskit/primitives/stack';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
@@ -89,14 +89,14 @@ var Footer = function Footer(_ref2) {
     padding: "space.100",
     testId: testId
   }, /*#__PURE__*/React.createElement(Stack, {
-    gap: "space.100",
-    alignItems: "center"
+    space: "100",
+    alignInline: "center"
   }, /*#__PURE__*/React.createElement(Box, {
     display: "inlineBlock",
     width: "size.200",
     height: "size.200"
   }, iconBefore), /*#__PURE__*/React.createElement(Stack, {
-    gap: "space.075"
+    space: "075"
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "size.075",
     textAlign: "center",

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

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"],
   _excluded2 = ["children"];
-/* eslint-disable @repo/internal/react/use-primitives */
 import React, { forwardRef } from 'react';
 import Box from '@atlaskit/ds-explorations/box';
 import { N500 } from '@atlaskit/theme/colors';

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

@@ -34,13 +34,10 @@ var LoadingItems = function LoadingItems(_ref) {
     key: "loading-section-".concat(isLoading),
     duration: mediumDurationMs
   }, function (motion, state) {
-    return (
-      // eslint-disable-next-line @repo/internal/react/use-primitives
-      jsx("span", _extends({}, motion, {
-        "data-testid": testId && "".concat(testId, "--").concat(state),
-        css: [baseMotionStyles, state === 'entering' && enteringStyles]
-      }), isLoading ? fallback : children)
-    );
+    return jsx("span", _extends({}, motion, {
+      "data-testid": testId && "".concat(testId, "--").concat(state),
+      css: [baseMotionStyles, state === 'entering' && enteringStyles]
+    }), isLoading ? fallback : children);
   }));
 };
 export default LoadingItems;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/react/use-primitives */
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';

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

@@ -137,37 +137,31 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       containerRef.current && containerRef.current.focus();
     }
   };
-  return (
-    // eslint-disable-next-line @repo/internal/react/use-primitives
-    jsx("div", {
-      "data-testid": testId,
-      css: nestableNavigationContentStyles,
-      ref: containerRef,
-      tabIndex: -1,
-      onClick: manageFocus
-    }, jsx(ExitingPersistence, null, jsx(NestingMotion
-    // Key is needed to have a unique react instance per stack name.
-    // This enables us to easily animate it in & out with exiting persistence.
-    , {
-      key: currentStackId,
-      enterFrom: transition === 'nesting' ? 'right' : 'left',
-      exitTo: transition === 'nesting' ? 'left' : 'right',
-      testId: testId && "".concat(testId, "-anim")
-    }, function (motion) {
-      return (
-        // eslint-disable-next-line @repo/internal/react/use-primitives
-        jsx("div", _extends({
-          css: nestingRootStyles
-        }, motion), jsx(NestedContext.Provider, {
-          // This provider is inside the NestingMotion to ensure it keeps a stale
-          // reference to the previous value.
-          value: context
-        }, jsx(NestingItem, {
-          title: "",
-          id: ROOT_ID
-        }, children)))
-      );
-    })))
-  );
+  return jsx("div", {
+    "data-testid": testId,
+    css: nestableNavigationContentStyles,
+    ref: containerRef,
+    tabIndex: -1,
+    onClick: manageFocus
+  }, jsx(ExitingPersistence, null, jsx(NestingMotion
+  // Key is needed to have a unique react instance per stack name.
+  // This enables us to easily animate it in & out with exiting persistence.
+  , {
+    key: currentStackId,
+    enterFrom: transition === 'nesting' ? 'right' : 'left',
+    exitTo: transition === 'nesting' ? 'left' : 'right',
+    testId: testId && "".concat(testId, "-anim")
+  }, function (motion) {
+    return jsx("div", _extends({
+      css: nestingRootStyles
+    }, motion), jsx(NestedContext.Provider, {
+      // This provider is inside the NestingMotion to ensure it keeps a stale
+      // reference to the previous value.
+      value: context
+    }, jsx(NestingItem, {
+      title: "",
+      id: ROOT_ID
+    }, children)));
+  })));
 };
 export default NestableNavigationContent;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/react/use-primitives */
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';

package/dist/esm/version.json

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

package/dist/types/components/Header/index.d.ts

@@ -41,7 +41,6 @@ export declare type HeaderProps = {
      * Custom component to render as an item.
      * This can be both a functional component or a class component.
      * __Will return `null` if no component is defined.__
-     *
      * __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
      */
     component?: React.ComponentType<CustomItemComponentProps>;

package/docs/00-intro.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @repo/internal/react/use-primitives */
 import React from 'react';
 
 import { md } from '@atlaskit/docs';

package/docs/ert/footer.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required */
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
+/* eslint-disable @repo/internal/react/consistent-props-definitions */
+
+import { HeaderProps } from '../../src/components/Header';
+
+interface FooterProps extends HeaderProps {
+  /**
+   * @deprecated
+   * Enables use of deprecated `cssFn`, `onClick` and `component` props.
+   * If this prop is not set to true, you will see a deprecation warning.
+   */
+  useDeprecatedApi?: boolean;
+}
+
+export default (props: FooterProps) => null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,6 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -30,7 +29,8 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/menu": "^1.5.0",
     "@atlaskit/motion": "^1.3.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/primitives": "^0.5.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -39,11 +39,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^2.3.0",
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/atlassian-navigation": "^2.4.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/docs": "*",
     "@atlaskit/logo": "^13.11.0",
-    "@atlaskit/onboarding": "^10.6.0",
+    "@atlaskit/onboarding": "^10.7.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^16.1.0",
     "@atlaskit/visual-regression": "*",