@atlaskit/side-navigation 7.0.1 → 9.0.0

package/dist/esm/components/NestingItem/index.compiled.css

@@ -1 +1,5 @@
-._1e0c1nu9{display:inline}
+._1c06idpf [data-item-elem-after]{opacity:0}
+._1e0c1nu9{display:inline}
+._9mqr1kw7:active [data-right-arrow], ._povs1kw7:focus [data-right-arrow], ._uv2d1kw7:hover [data-right-arrow], ._atks1kw7 [data-custom-icon]{display:inherit}
+._udl3glyw [data-right-arrow], ._kqsfglyw:active [data-custom-icon], ._udrwglyw:focus [data-custom-icon], ._13qvglyw:hover [data-custom-icon]{display:none}
+._udl3glyw [data-right-arrow]{display:none}

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
+var _excluded = ["children", "iconAfter", "title", "onClick", "className", "isDisabled", "isSelected", "id", "component", "testId"];
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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; }
@@ -14,14 +14,14 @@ import ArrowRightIcon from '@atlaskit/icon/core/migration/arrow-right--arrow-rig
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { N10 } from '@atlaskit/theme/colors';
-import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
-import { nestingItemStyle } from './styles';
 var styles = {
-  iconContainer: "_1e0c1nu9"
+  iconContainer: "_1e0c1nu9",
+  nestingItem: "_udl3glyw _kqsfglyw _udrwglyw _13qvglyw _9mqr1kw7 _povs1kw7 _uv2d1kw7 _atks1kw7",
+  nestingItemDisabled: "_1c06idpf _udl3glyw"
 };
 
 // Doesn't extend from ButtonItemProps because it blows ERT up.
@@ -36,7 +36,8 @@ var NestingItem = function NestingItem(props) {
     iconAfter = props.iconAfter,
     title = props.title,
     onClick = props.onClick,
-    cssFn = props.cssFn,
+    className = props.className,
+    isDisabled = props.isDisabled,
     isSelected = props.isSelected,
     id = props.id,
     component = props.component,
@@ -54,7 +55,6 @@ var NestingItem = function NestingItem(props) {
     goBackButtonRef = _useNestedContext.goBackButtonRef,
     isDefaultFocusControl = _useNestedContext.isDefaultFocusControl,
     focusGoBackButton = _useNestedContext.focusGoBackButton;
-  var mergedStyles = overrideStyleFunction(nestingItemStyle, cssFn);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isInteracted = _useState2[0],
@@ -160,21 +160,27 @@ var NestingItem = function NestingItem(props) {
     }))),
     onClick: onClickHandler,
     isSelected: isSelected,
+    isDisabled: isDisabled,
     testId: testId && "".concat(testId, "--item")
   }, rest), {}, {
-    children: title,
-    cssFn: mergedStyles
+    children: title
   });
   if (component) {
     return /*#__PURE__*/React.createElement(CustomItem, _extends({
       ref: isForwardRefCheck(component) ? parentItemRef : null
     }, componentProps, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: ax([styles.nestingItem, isDisabled && styles.nestingItemDisabled, className])
       //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
+      ,
       component: component
     }));
   }
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
     ref: activeParentRef
-  }, componentProps));
+  }, componentProps, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([styles.nestingItem, isDisabled && styles.nestingItemDisabled, className])
+  }));
 };
 export default NestingItem;

package/dist/types/common/styles.d.ts

@@ -7,5 +7,4 @@ import { type CSSFn, type StatelessCSSFn } from '@atlaskit/menu';
  * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
 export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
-export declare const baseSideNavItemStyle: CSSFn;
 export declare const sectionHeaderSpacingStyles: StatelessCSSFn;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { type ButtonItemProps } from '@atlaskit/menu';
 export type { ButtonItemProps } from '@atlaskit/menu';
 /**
@@ -10,5 +10,5 @@ export type { ButtonItemProps } from '@atlaskit/menu';
  * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const ButtonItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
+declare const ButtonItem: import("react").ForwardRefExoticComponent<ButtonItemProps & import("react").RefAttributes<HTMLElement>>;
 export default ButtonItem;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { type LinkItemProps } from '@atlaskit/menu';
 export type { LinkItemProps } from '@atlaskit/menu';
 /**
@@ -12,5 +12,5 @@ export type { LinkItemProps } from '@atlaskit/menu';
  * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const LinkItem: React.ForwardRefExoticComponent<LinkItemProps & React.RefAttributes<HTMLElement>>;
+declare const LinkItem: import("react").ForwardRefExoticComponent<LinkItemProps & import("react").RefAttributes<HTMLElement>>;
 export default LinkItem;

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

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-import { type CSSFn, type CustomItemComponentProps, type Overrides } from '@atlaskit/menu';
+import { type CustomItemComponentProps, type Overrides } from '@atlaskit/menu';
 interface NestingItemOverrides extends Overrides {
     /**
      * Use this to override the back button displayed when navigation is nested.
@@ -52,10 +52,9 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
      */
     testId?: string;
     /**
-     * A function that can be used to override the styles of the component.
-     * It receives the current styles and state and expects a styles object.
+     * Not recommended for general use as it enables unsafe style overrides.
      */
-    cssFn?: CSSFn;
+    className?: string;
     /**
      * Element to render before the item text.
      * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.

package/dist/types-ts4.5/common/styles.d.ts

@@ -7,5 +7,4 @@ import { type CSSFn, type StatelessCSSFn } from '@atlaskit/menu';
  * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
 export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
-export declare const baseSideNavItemStyle: CSSFn;
 export declare const sectionHeaderSpacingStyles: StatelessCSSFn;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { type ButtonItemProps } from '@atlaskit/menu';
 export type { ButtonItemProps } from '@atlaskit/menu';
 /**
@@ -10,5 +10,5 @@ export type { ButtonItemProps } from '@atlaskit/menu';
  * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const ButtonItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
+declare const ButtonItem: import("react").ForwardRefExoticComponent<ButtonItemProps & import("react").RefAttributes<HTMLElement>>;
 export default ButtonItem;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { type LinkItemProps } from '@atlaskit/menu';
 export type { LinkItemProps } from '@atlaskit/menu';
 /**
@@ -12,5 +12,5 @@ export type { LinkItemProps } from '@atlaskit/menu';
  * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const LinkItem: React.ForwardRefExoticComponent<LinkItemProps & React.RefAttributes<HTMLElement>>;
+declare const LinkItem: import("react").ForwardRefExoticComponent<LinkItemProps & import("react").RefAttributes<HTMLElement>>;
 export default LinkItem;

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

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-import { type CSSFn, type CustomItemComponentProps, type Overrides } from '@atlaskit/menu';
+import { type CustomItemComponentProps, type Overrides } from '@atlaskit/menu';
 interface NestingItemOverrides extends Overrides {
     /**
      * Use this to override the back button displayed when navigation is nested.
@@ -52,10 +52,9 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
      */
     testId?: string;
     /**
-     * A function that can be used to override the styles of the component.
-     * It receives the current styles and state and expects a styles object.
+     * Not recommended for general use as it enables unsafe style overrides.
      */
-    cssFn?: CSSFn;
+    className?: string;
     /**
      * Element to render before the item text.
      * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "7.0.1",
+	"version": "9.0.0",
 	"description": "A highly composable side navigation component that supports nested views.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,13 +34,13 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^25.0.0",
-		"@atlaskit/menu": "^3.1.0",
+		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/menu": "^4.0.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -48,25 +48,25 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "^2.0.0",
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/atlassian-navigation": "^5.0.0",
-		"@atlaskit/button": "^21.1.0",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/atlassian-navigation": "^5.1.0",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/dropdown-menu": "^13.0.0",
+		"@atlaskit/dropdown-menu": "^14.1.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/image": "^2.0.0",
-		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/image": "^3.0.0",
+		"@atlaskit/link": "^3.1.0",
 		"@atlaskit/logo": "^16.0.0",
-		"@atlaskit/onboarding": "^13.0.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
+		"@atlaskit/onboarding": "^14.0.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.6.0",
 		"@atlaskit/pragmatic-drag-and-drop-live-region": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^2.0.0",
-		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.1.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/select": "^20.0.0",
-		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlaskit/select": "^20.4.0",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"raf-stub": "^2.0.1",
 		"tiny-invariant": "^1.2.0",

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

@@ -1,36 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.nestingItemStyle = exports.enabledCSS = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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; }
-// exposed for testing purposes
-var enabledCSS = exports.enabledCSS = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '&:hover [data-custom-icon]', {
-  display: 'none'
-}), '&:active [data-custom-icon]', {
-  display: 'none'
-}), '&:focus [data-custom-icon]', {
-  display: 'none'
-}), '& [data-custom-icon]', {
-  display: 'inherit'
-}), '&:hover [data-right-arrow]', {
-  display: 'inherit'
-}), '&:active [data-right-arrow]', {
-  display: 'inherit'
-}), '&:focus [data-right-arrow]', {
-  display: 'inherit'
-}), '& [data-right-arrow]', {
-  display: 'none'
-});
-var disabledCSS = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, '[data-item-elem-after]', {
-  opacity: 0
-}), '& [data-right-arrow]', {
-  display: 'none'
-});
-var nestingItemStyle = exports.nestingItemStyle = function nestingItemStyle(state) {
-  return _objectSpread({}, state.isDisabled ? disabledCSS : enabledCSS);
-};

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

@@ -1,40 +0,0 @@
-// exposed for testing purposes
-export const enabledCSS = {
-  ['&:hover [data-custom-icon]']: {
-    display: 'none'
-  },
-  ['&:active [data-custom-icon]']: {
-    display: 'none'
-  },
-  ['&:focus [data-custom-icon]']: {
-    display: 'none'
-  },
-  ['& [data-custom-icon]']: {
-    display: 'inherit'
-  },
-  ['&:hover [data-right-arrow]']: {
-    display: 'inherit'
-  },
-  ['&:active [data-right-arrow]']: {
-    display: 'inherit'
-  },
-  ['&:focus [data-right-arrow]']: {
-    display: 'inherit'
-  },
-  ['& [data-right-arrow]']: {
-    display: 'none'
-  }
-};
-const disabledCSS = {
-  ['[data-item-elem-after]']: {
-    opacity: 0
-  },
-  ['& [data-right-arrow]']: {
-    display: 'none'
-  }
-};
-export const nestingItemStyle = state => {
-  return {
-    ...(state.isDisabled ? disabledCSS : enabledCSS)
-  };
-};

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

@@ -1,29 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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; }
-// exposed for testing purposes
-export var enabledCSS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '&:hover [data-custom-icon]', {
-  display: 'none'
-}), '&:active [data-custom-icon]', {
-  display: 'none'
-}), '&:focus [data-custom-icon]', {
-  display: 'none'
-}), '& [data-custom-icon]', {
-  display: 'inherit'
-}), '&:hover [data-right-arrow]', {
-  display: 'inherit'
-}), '&:active [data-right-arrow]', {
-  display: 'inherit'
-}), '&:focus [data-right-arrow]', {
-  display: 'inherit'
-}), '& [data-right-arrow]', {
-  display: 'none'
-});
-var disabledCSS = _defineProperty(_defineProperty({}, '[data-item-elem-after]', {
-  opacity: 0
-}), '& [data-right-arrow]', {
-  display: 'none'
-});
-export var nestingItemStyle = function nestingItemStyle(state) {
-  return _objectSpread({}, state.isDisabled ? disabledCSS : enabledCSS);
-};

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

@@ -1,28 +0,0 @@
-import { type CSSFn } from '@atlaskit/menu';
-export declare const enabledCSS: {
-    "&:hover [data-custom-icon]": {
-        display: string;
-    };
-    "&:active [data-custom-icon]": {
-        display: string;
-    };
-    "&:focus [data-custom-icon]": {
-        display: string;
-    };
-    "& [data-custom-icon]": {
-        display: string;
-    };
-    "&:hover [data-right-arrow]": {
-        display: string;
-    };
-    "&:active [data-right-arrow]": {
-        display: string;
-    };
-    "&:focus [data-right-arrow]": {
-        display: string;
-    };
-    "& [data-right-arrow]": {
-        display: string;
-    };
-};
-export declare const nestingItemStyle: CSSFn;

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

@@ -1,28 +0,0 @@
-import { type CSSFn } from '@atlaskit/menu';
-export declare const enabledCSS: {
-    "&:hover [data-custom-icon]": {
-        display: string;
-    };
-    "&:active [data-custom-icon]": {
-        display: string;
-    };
-    "&:focus [data-custom-icon]": {
-        display: string;
-    };
-    "& [data-custom-icon]": {
-        display: string;
-    };
-    "&:hover [data-right-arrow]": {
-        display: string;
-    };
-    "&:active [data-right-arrow]": {
-        display: string;
-    };
-    "&:focus [data-right-arrow]": {
-        display: string;
-    };
-    "& [data-right-arrow]": {
-        display: string;
-    };
-};
-export declare const nestingItemStyle: CSSFn;