@atlaskit/side-navigation 3.1.3 → 3.2.0

package/afm-cc/tsconfig.json

@@ -30,6 +30,9 @@
         {
             "path": "../../motion/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../primitives/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "extends": "../../../../tsconfig.products.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__side-navigation/app",
+    "composite": true,
+    "rootDir": "../",
+    "baseUrl": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../ds-lib/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../icon/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../menu/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../motion/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../primitives/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../theme/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../tokens/afm-jira/tsconfig.json"
+    }
+  ]
+}

package/codemods/0.8.0-change-css-fn-prop.tsx

@@ -1,11 +1,12 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, {
-  API,
-  ASTPath,
-  FileInfo,
-  ImportDeclaration,
-  ImportSpecifier,
-  Options,
+import { type NodePath } from 'ast-types/lib/node-path';
+import {
+  type API,
+  type ASTPath,
+  type default as core,
+  type FileInfo,
+  type ImportDeclaration,
+  type ImportSpecifier,
+  type Options,
 } from 'jscodeshift';
 
 import {

package/codemods/helpers/generic.tsx

@@ -1,15 +1,16 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, {
-  ASTPath,
-  ImportDeclaration,
-  ImportDefaultSpecifier,
-  ImportSpecifier,
-  JSXAttribute,
-  JSXElement,
-  Node,
-  Program,
+import { type NodePath } from 'ast-types/lib/node-path';
+import {
+  type ASTPath,
+  type default as core,
+  type ImportDeclaration,
+  type ImportDefaultSpecifier,
+  type ImportSpecifier,
+  type JSXAttribute,
+  type JSXElement,
+  type Node,
+  type Program,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 export type Nullable<T> = T | null;
 

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

@@ -10,12 +10,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
 var _Item = require("../Item");
 var _excluded = ["children", "data-testid"],
   _excluded2 = ["children"];
 /** @jsx jsx */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var containerStyles = (0, _react2.css)({
   display: 'block',
   position: 'relative'
@@ -67,12 +70,15 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _ref3;
     return _ref3 = {
       userSelect: 'auto'
-    }, (0, _defineProperty2.default)(_ref3, '[data-item-title]', {
+    }, (0, _defineProperty2.default)(_ref3, '[data-item-title]', _objectSpread(_objectSpread({}, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.side-navigation-tokenised-typography-styles') ? {
+      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    } : {
       fontSize: '0.875rem',
       letterSpacing: '-0.003em',
-      fontWeight: "var(--ds-font-weight-semibold, 600)",
+      fontWeight: "var(--ds-font-weight-semibold, 600)"
+    }), {}, {
       color: "var(--ds-text, ".concat(_colors.N500, ")")
-    }), (0, _defineProperty2.default)(_ref3, 'div&:hover', {
+    })), (0, _defineProperty2.default)(_ref3, 'div&:hover', {
       backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       cursor: 'default'
     }), (0, _defineProperty2.default)(_ref3, 'div&:active', {

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
@@ -55,9 +56,13 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
   const cssFn = overrideStyleFunction(() => ({
     userSelect: 'auto',
     ['[data-item-title]']: {
-      fontSize: '0.875rem',
-      letterSpacing: '-0.003em',
-      fontWeight: "var(--ds-font-weight-semibold, 600)",
+      ...(getBooleanFF('platform.design-system-team.side-navigation-tokenised-typography-styles') ? {
+        font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+      } : {
+        fontSize: '0.875rem',
+        letterSpacing: '-0.003em',
+        fontWeight: "var(--ds-font-weight-semibold, 600)"
+      }),
       color: `var(--ds-text, ${N500})`
     },
     // Will look interactive if the `component` is anything other than a div.

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

@@ -3,9 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "data-testid"],
   _excluded2 = ["children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
@@ -60,12 +63,15 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
     var _ref3;
     return _ref3 = {
       userSelect: 'auto'
-    }, _defineProperty(_ref3, '[data-item-title]', {
+    }, _defineProperty(_ref3, '[data-item-title]', _objectSpread(_objectSpread({}, getBooleanFF('platform.design-system-team.side-navigation-tokenised-typography-styles') ? {
+      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    } : {
       fontSize: '0.875rem',
       letterSpacing: '-0.003em',
-      fontWeight: "var(--ds-font-weight-semibold, 600)",
+      fontWeight: "var(--ds-font-weight-semibold, 600)"
+    }), {}, {
       color: "var(--ds-text, ".concat(N500, ")")
-    }), _defineProperty(_ref3, 'div&:hover', {
+    })), _defineProperty(_ref3, 'div&:hover', {
       backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       cursor: 'default'
     }), _defineProperty(_ref3, 'div&:active', {

package/dist/types/components/Item/button-item.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonItemProps } from '@atlaskit/menu';
+import { type ButtonItemProps } from '@atlaskit/menu';
 export type { ButtonItemProps } from '@atlaskit/menu';
 /**
  * __Button item__

package/dist/types/components/Item/custom-item.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+import { type CustomItemComponentProps, type CustomItemProps } from '@atlaskit/menu';
 export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
 interface CustomItemPropsHack {
     <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {

package/dist/types/components/Item/link-item.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinkItemProps } from '@atlaskit/menu';
+import { type LinkItemProps } from '@atlaskit/menu';
 export type { LinkItemProps } from '@atlaskit/menu';
 /**
  * __Link item__

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export interface NavigationContentProps {
     children: React.ReactNode;
     /**

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface NavigationFooterProps {
     children: ReactNode;
 }

package/dist/types/components/NestableNavigationContent/context.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { type MutableRefObject } from 'react';
 /**
  * @internal
  */

package/dist/types/components/NestableNavigationContent/nesting-motion.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { Ref } from 'react';
+import { type Ref } from 'react';
 import { jsx } from '@emotion/react';
-import { Direction } from '@atlaskit/motion';
+import { type Direction } from '@atlaskit/motion';
 interface ChildrenAsFunctionProps {
     'data-enter-from': string;
     'data-exit-to': string;

package/dist/types/components/NestingItem/hack-for-ert.d.ts

@@ -1,2 +1,2 @@
-import { NestingItemProps } from './index';
+import { type NestingItemProps } from './index';
 export default function (_: NestingItemProps): void;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { CSSFn, CustomItemComponentProps, Overrides } from '@atlaskit/menu';
+import { type CSSFn, type CustomItemComponentProps, type Overrides } from '@atlaskit/menu';
 interface NestingItemOverrides extends Overrides {
     /**
      * Use this to override the back button displayed when navigation is nested.

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

@@ -1,4 +1,4 @@
-import { CSSFn } from '@atlaskit/menu';
+import { type CSSFn } from '@atlaskit/menu';
 export declare const enabledCSS: {
     "&:hover [data-custom-icon]": {
         display: string;

package/dist/types/components/Section/heading-item.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { HeadingItemProps } from '@atlaskit/menu';
+import { type HeadingItemProps } from '@atlaskit/menu';
 export type { HeadingItemProps } from '@atlaskit/menu';
 /**
  * __Heading item__

package/dist/types/components/Section/skeleton-heading-item.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SkeletonHeadingItemProps } from '@atlaskit/menu';
+import { type SkeletonHeadingItemProps } from '@atlaskit/menu';
 export type { SkeletonHeadingItemProps } from '@atlaskit/menu';
 /**
  * __Skeleton heading item__

package/dist/types/components/utils/hooks.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { type MutableRefObject } from 'react';
 export declare const useChildIds: (currentStackId: string, committedStack: string[], onUnknownNest?: ((stack: string[]) => void) | undefined) => {
     childIdsRef: MutableRefObject<Set<string>>;
 };

package/dist/types-ts4.5/components/Item/button-item.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonItemProps } from '@atlaskit/menu';
+import { type ButtonItemProps } from '@atlaskit/menu';
 export type { ButtonItemProps } from '@atlaskit/menu';
 /**
  * __Button item__

package/dist/types-ts4.5/components/Item/custom-item.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
+import { type CustomItemComponentProps, type CustomItemProps } from '@atlaskit/menu';
 export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
 interface CustomItemPropsHack {
     <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {

package/dist/types-ts4.5/components/Item/link-item.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinkItemProps } from '@atlaskit/menu';
+import { type LinkItemProps } from '@atlaskit/menu';
 export type { LinkItemProps } from '@atlaskit/menu';
 /**
  * __Link item__

package/dist/types-ts4.5/components/NavigationContent/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export interface NavigationContentProps {
     children: React.ReactNode;
     /**

package/dist/types-ts4.5/components/NavigationFooter/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface NavigationFooterProps {
     children: ReactNode;
 }

package/dist/types-ts4.5/components/NestableNavigationContent/context.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { type MutableRefObject } from 'react';
 /**
  * @internal
  */

package/dist/types-ts4.5/components/NestableNavigationContent/nesting-motion.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { Ref } from 'react';
+import { type Ref } from 'react';
 import { jsx } from '@emotion/react';
-import { Direction } from '@atlaskit/motion';
+import { type Direction } from '@atlaskit/motion';
 interface ChildrenAsFunctionProps {
     'data-enter-from': string;
     'data-exit-to': string;

package/dist/types-ts4.5/components/NestingItem/hack-for-ert.d.ts

@@ -1,2 +1,2 @@
-import { NestingItemProps } from './index';
+import { type NestingItemProps } from './index';
 export default function (_: NestingItemProps): void;

package/dist/types-ts4.5/components/NestingItem/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { CSSFn, CustomItemComponentProps, Overrides } from '@atlaskit/menu';
+import { type CSSFn, type CustomItemComponentProps, type Overrides } from '@atlaskit/menu';
 interface NestingItemOverrides extends Overrides {
     /**
      * Use this to override the back button displayed when navigation is nested.

package/dist/types-ts4.5/components/NestingItem/styles.d.ts

@@ -1,4 +1,4 @@
-import { CSSFn } from '@atlaskit/menu';
+import { type CSSFn } from '@atlaskit/menu';
 export declare const enabledCSS: {
     "&:hover [data-custom-icon]": {
         display: string;

package/dist/types-ts4.5/components/Section/heading-item.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { HeadingItemProps } from '@atlaskit/menu';
+import { type HeadingItemProps } from '@atlaskit/menu';
 export type { HeadingItemProps } from '@atlaskit/menu';
 /**
  * __Heading item__

package/dist/types-ts4.5/components/Section/skeleton-heading-item.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SkeletonHeadingItemProps } from '@atlaskit/menu';
+import { type SkeletonHeadingItemProps } from '@atlaskit/menu';
 export type { SkeletonHeadingItemProps } from '@atlaskit/menu';
 /**
  * __Skeleton heading item__

package/dist/types-ts4.5/components/utils/hooks.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { type MutableRefObject } from 'react';
 export declare const useChildIds: (currentStackId: string, committedStack: string[], onUnknownNest?: ((stack: string[]) => void) | undefined) => {
     childIdsRef: MutableRefObject<Set<string>>;
 };

package/docs/ert/footer.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 
-import { HeaderProps } from '../../src/components/Header';
+import { type HeaderProps } from '../../src/components/Header';
 
 interface FooterProps extends HeaderProps {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,8 @@
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/menu": "^2.3.0",
     "@atlaskit/motion": "^1.6.0",
-    "@atlaskit/primitives": "^6.3.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
+    "@atlaskit/primitives": "^6.4.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
@@ -48,7 +49,6 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "@types/jest-axe": "^3.5.5",
@@ -90,5 +90,9 @@
     }
   },
   "homepage": "https://atlassian.design/components/side-navigation/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "platform-feature-flags": {
+    "platform.design-system-team.side-navigation-tokenised-typography-styles": {
+      "type": "boolean"
+    }
+  }
 }