@atlaskit/side-navigation 6.0.2 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/side-navigation
 
+## 7.0.0
+
+### Major Changes
+
+- [#129933](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129933)
+  [`67ff94142c5ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/67ff94142c5ad) -
+  Removes the deprecated cssFn prop from the Header and Footer components.
+
+## 6.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.2
 
 ### Patch Changes

package/dist/cjs/components/Footer/index.compiled.css

@@ -1,3 +1,24 @@
+
+._vrjtdcr7 [data-item-title]{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._13e21h6o [data-item-description]{text-align:center}
+._14741h6o._14741h6o{text-align:center}
+._14bw1o8l [data-item-description]{display:inline-block}
+._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
+._16vx1h6o [data-item-title]{text-align:center}
 ._1bsb1k8s{width:1.5rem}
+._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
 ._1e0c1o8l{display:inline-block}
-._4t3i1k8s{height:1.5rem}
+._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
+._1kba1h6o._1kba1h6o{align-items:center}
+._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
+._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
+._4t3i1k8s{height:1.5rem}
+._76zj1o8l [data-item-elem-before]{display:inline-block}
+._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
+._if291ule._if291ule{display:block}
+._oiqe1tcg._oiqe1tcg{min-height:24px}
+._w1ap1osq._w1ap1osq{width:100%}
+._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
+div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._jl2n73ad:hover{cursor:default}
+div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}

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

@@ -14,14 +14,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
-var _styles = require("../../common/styles");
 var _Header = require("../Header");
 var _Item = require("../Item");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 var styles = {
-  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s"
+  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
+  oldFooter: "_vrjtdcr7 _16vx1h6o _1cg71wug _if291ule _14741h6o _oiqe1tcg _1kba1h6o _w1ap1osq _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
 };
 /**
  * __Footer__
@@ -30,40 +30,6 @@ var styles = {
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 var OldFooter = function OldFooter(props) {
-  var cssFn = (0, _styles.overrideStyleFunction)(function () {
-    return {
-      userSelect: 'auto',
-      display: 'block',
-      textAlign: 'center',
-      minHeight: '24px',
-      alignItems: 'center',
-      width: '100%',
-      '[data-item-elem-before]': {
-        marginRight: "var(--ds-space-0, 0px)",
-        marginBottom: "var(--ds-space-100, 8px)",
-        display: 'inline-block'
-      },
-      '[data-item-title]': {
-        textAlign: 'center',
-        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-      },
-      '[data-item-description]': {
-        textAlign: 'center',
-        display: 'inline-block',
-        margin: "var(--ds-space-075, 6px)"
-      },
-      // Will look interactive if the `component` is anything other than a div.
-      'div&:hover': {
-        backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-        cursor: 'default'
-      },
-      'div&:active': {
-        backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-        color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
-      }
-    };
-  }, props.cssFn);
-
   // https://stackoverflow.com/a/39333479
   var safeProps = function (_ref) {
     var iconBefore = _ref.iconBefore,
@@ -81,9 +47,9 @@ var OldFooter = function OldFooter(props) {
   }(props);
   return /*#__PURE__*/React.createElement(_Item.CustomItem, (0, _extends2.default)({}, safeProps, {
     component: props.component || _Header.Container
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    // @ts-expect-error
     ,
-    cssFn: cssFn
+    className: (0, _runtime.ax)([styles.oldFooter])
   }));
 };
 
@@ -134,7 +100,6 @@ var FooterFacade = function FooterFacade(_ref3) {
     testId = _ref3.testId,
     children = _ref3.children,
     component = _ref3.component,
-    cssFn = _ref3.cssFn,
     onClick = _ref3.onClick;
   if (!useDeprecatedApi) {
     return /*#__PURE__*/React.createElement(Footer, {
@@ -144,14 +109,11 @@ var FooterFacade = function FooterFacade(_ref3) {
     }, children);
   }
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'CI') {
-    (0, _warnOnce.default)('The `@atlaskit/side-navigation` Footer has simplified its API, removing support for the `component`, `cssFn` and `onClick` props.\n\nThese props will stop working in a future major release. Reach out to #help-design-system on slack for help.');
+    (0, _warnOnce.default)('The `@atlaskit/side-navigation` Footer has simplified its API, removing support for the `component` and `onClick` props.\n\nThese props will stop working in a future major release. Reach out to #help-design-system on slack for help.');
   }
   return /*#__PURE__*/React.createElement(OldFooter, {
     onClick: onClick,
-    component: component
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    cssFn: cssFn,
+    component: component,
     iconBefore: iconBefore,
     description: description,
     testId: testId

package/dist/cjs/components/Header/index.compiled.css

@@ -0,0 +1,7 @@
+
+._vrjt140y [data-item-title]{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
+._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
+div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._jl2n73ad:hover{cursor:default}
+div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._1v6j10s3:active{color:var(--ds-text,#42526e)}

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,17 +7,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Container = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _colors = require("@atlaskit/theme/colors");
-var _styles = require("../../common/styles");
 var _Item = require("../Item");
 var _excluded = ["children", "data-testid"],
   _excluded2 = ["children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  header: "_vrjt140y _1cmd10s3 _1cg71wug _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
+};
+
 /**
  * __Container__
  *
@@ -65,38 +70,24 @@ var Container = exports.Container = function Container(_ref) {
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var cssFn = (0, _styles.overrideStyleFunction)(function () {
-    return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-      userSelect: 'auto'
-    }, '[data-item-title]', {
-      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-      color: "var(--ds-text, ".concat(_colors.N500, ")")
-    }), 'div&:hover', {
-      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-      cursor: 'default'
-    }), 'div&:active', {
-      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-      color: "var(--ds-text, ".concat(_colors.N500, ")")
-    });
-  }, 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
+    // @ts-expect-error
     ,
-    cssFn: cssFn
+
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
     overrides: {
       Title: {
         // eslint-disable-next-line @atlaskit/design-system/use-heading
-        render: function render(_, _ref4) {
-          var children = _ref4.children,
-            props = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
+        render: function render(_, _ref3) {
+          var children = _ref3.children,
+            props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
           return /*#__PURE__*/_react.default.createElement("h2", props, children);
         }
       }
-    }
+    },
+    className: (0, _runtime.ax)([styles.header])
   }));
 });
 var _default = exports.default = Header;

package/dist/es2019/components/Footer/index.compiled.css

@@ -1,3 +1,24 @@
+
+._vrjtdcr7 [data-item-title]{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._13e21h6o [data-item-description]{text-align:center}
+._14741h6o._14741h6o{text-align:center}
+._14bw1o8l [data-item-description]{display:inline-block}
+._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
+._16vx1h6o [data-item-title]{text-align:center}
 ._1bsb1k8s{width:1.5rem}
+._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
 ._1e0c1o8l{display:inline-block}
-._4t3i1k8s{height:1.5rem}
+._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
+._1kba1h6o._1kba1h6o{align-items:center}
+._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
+._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
+._4t3i1k8s{height:1.5rem}
+._76zj1o8l [data-item-elem-before]{display:inline-block}
+._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
+._if291ule._if291ule{display:block}
+._oiqe1tcg._oiqe1tcg{min-height:24px}
+._w1ap1osq._w1ap1osq{width:100%}
+._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
+div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._jl2n73ad:hover{cursor:default}
+div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}

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

@@ -8,11 +8,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
 import { N500 } from '@atlaskit/theme/colors';
-import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
 const styles = {
-  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s"
+  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
+  oldFooter: "_vrjtdcr7 _16vx1h6o _1cg71wug _if291ule _14741h6o _oiqe1tcg _1kba1h6o _w1ap1osq _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
 };
 /**
  * __Footer__
@@ -21,38 +21,6 @@ const styles = {
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 const OldFooter = props => {
-  const cssFn = overrideStyleFunction(() => ({
-    userSelect: 'auto',
-    display: 'block',
-    textAlign: 'center',
-    minHeight: '24px',
-    alignItems: 'center',
-    width: '100%',
-    '[data-item-elem-before]': {
-      marginRight: "var(--ds-space-0, 0px)",
-      marginBottom: "var(--ds-space-100, 8px)",
-      display: 'inline-block'
-    },
-    '[data-item-title]': {
-      textAlign: 'center',
-      font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-    },
-    '[data-item-description]': {
-      textAlign: 'center',
-      display: 'inline-block',
-      margin: "var(--ds-space-075, 6px)"
-    },
-    // Will look interactive if the `component` is anything other than a div.
-    'div&:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-      cursor: 'default'
-    },
-    'div&:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-      color: `var(--ds-text-subtle, ${N500})`
-    }
-  }), props.cssFn);
-
   // https://stackoverflow.com/a/39333479
   const safeProps = (({
     iconBefore,
@@ -69,9 +37,9 @@ const OldFooter = props => {
   }))(props);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, safeProps, {
     component: props.component || Container
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    // @ts-expect-error
     ,
-    cssFn: cssFn
+    className: ax([styles.oldFooter])
   }));
 };
 
@@ -122,7 +90,6 @@ const FooterFacade = ({
   testId,
   children,
   component,
-  cssFn,
   onClick
 }) => {
   if (!useDeprecatedApi) {
@@ -133,14 +100,11 @@ const FooterFacade = ({
     }, children);
   }
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'CI') {
-    warnOnce('The `@atlaskit/side-navigation` Footer has simplified its API, removing support for the `component`, `cssFn` and `onClick` props.\n\nThese props will stop working in a future major release. Reach out to #help-design-system on slack for help.');
+    warnOnce('The `@atlaskit/side-navigation` Footer has simplified its API, removing support for the `component` and `onClick` props.\n\nThese props will stop working in a future major release. Reach out to #help-design-system on slack for help.');
   }
   return /*#__PURE__*/React.createElement(OldFooter, {
     onClick: onClick,
-    component: component
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    cssFn: cssFn,
+    component: component,
     iconBefore: iconBefore,
     description: description,
     testId: testId

package/dist/es2019/components/Header/index.compiled.css

@@ -0,0 +1,7 @@
+
+._vrjt140y [data-item-title]{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
+._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
+div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._jl2n73ad:hover{cursor:default}
+div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._1v6j10s3:active{color:var(--ds-text,#42526e)}

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

@@ -1,8 +1,13 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { N500 } from '@atlaskit/theme/colors';
-import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+const styles = {
+  header: "_vrjt140y _1cmd10s3 _1cg71wug _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
+};
 
 /**
  * __Container__
@@ -52,30 +57,13 @@ export const Container = ({
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 const Header = /*#__PURE__*/forwardRef((props, ref) => {
-  const cssFn = overrideStyleFunction(() => ({
-    userSelect: 'auto',
-    ['[data-item-title]']: {
-      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-      color: `var(--ds-text, ${N500})`
-    },
-    // Will look interactive if the `component` is anything other than a div.
-    'div&:hover': {
-      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-      cursor: 'default'
-    },
-    'div&:active': {
-      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-      color: `var(--ds-text, ${N500})`
-    }
-  }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
     ref: ref,
     component: props.component || Container
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    // @ts-expect-error
     ,
-    cssFn: cssFn
+
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
     overrides: {
       Title: {
         // eslint-disable-next-line @atlaskit/design-system/use-heading
@@ -84,7 +72,8 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
           ...props
         }) => /*#__PURE__*/React.createElement("h2", props, children)
       }
-    }
+    },
+    className: ax([styles.header])
   }));
 });
 export default Header;

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

@@ -1,3 +1,24 @@
+
+._vrjtdcr7 [data-item-title]{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._13e21h6o [data-item-description]{text-align:center}
+._14741h6o._14741h6o{text-align:center}
+._14bw1o8l [data-item-description]{display:inline-block}
+._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
+._16vx1h6o [data-item-title]{text-align:center}
 ._1bsb1k8s{width:1.5rem}
+._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
 ._1e0c1o8l{display:inline-block}
-._4t3i1k8s{height:1.5rem}
+._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
+._1kba1h6o._1kba1h6o{align-items:center}
+._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
+._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
+._4t3i1k8s{height:1.5rem}
+._76zj1o8l [data-item-elem-before]{display:inline-block}
+._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
+._if291ule._if291ule{display:block}
+._oiqe1tcg._oiqe1tcg{min-height:24px}
+._w1ap1osq._w1ap1osq{width:100%}
+._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
+div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._jl2n73ad:hover{cursor:default}
+div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}

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

@@ -8,11 +8,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
 import { N500 } from '@atlaskit/theme/colors';
-import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
 var styles = {
-  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s"
+  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
+  oldFooter: "_vrjtdcr7 _16vx1h6o _1cg71wug _if291ule _14741h6o _oiqe1tcg _1kba1h6o _w1ap1osq _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
 };
 /**
  * __Footer__
@@ -21,40 +21,6 @@ var styles = {
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 var OldFooter = function OldFooter(props) {
-  var cssFn = overrideStyleFunction(function () {
-    return {
-      userSelect: 'auto',
-      display: 'block',
-      textAlign: 'center',
-      minHeight: '24px',
-      alignItems: 'center',
-      width: '100%',
-      '[data-item-elem-before]': {
-        marginRight: "var(--ds-space-0, 0px)",
-        marginBottom: "var(--ds-space-100, 8px)",
-        display: 'inline-block'
-      },
-      '[data-item-title]': {
-        textAlign: 'center',
-        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-      },
-      '[data-item-description]': {
-        textAlign: 'center',
-        display: 'inline-block',
-        margin: "var(--ds-space-075, 6px)"
-      },
-      // Will look interactive if the `component` is anything other than a div.
-      'div&:hover': {
-        backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-        cursor: 'default'
-      },
-      'div&:active': {
-        backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-        color: "var(--ds-text-subtle, ".concat(N500, ")")
-      }
-    };
-  }, props.cssFn);
-
   // https://stackoverflow.com/a/39333479
   var safeProps = function (_ref) {
     var iconBefore = _ref.iconBefore,
@@ -72,9 +38,9 @@ var OldFooter = function OldFooter(props) {
   }(props);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, safeProps, {
     component: props.component || Container
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    // @ts-expect-error
     ,
-    cssFn: cssFn
+    className: ax([styles.oldFooter])
   }));
 };
 
@@ -125,7 +91,6 @@ var FooterFacade = function FooterFacade(_ref3) {
     testId = _ref3.testId,
     children = _ref3.children,
     component = _ref3.component,
-    cssFn = _ref3.cssFn,
     onClick = _ref3.onClick;
   if (!useDeprecatedApi) {
     return /*#__PURE__*/React.createElement(Footer, {
@@ -135,14 +100,11 @@ var FooterFacade = function FooterFacade(_ref3) {
     }, children);
   }
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'CI') {
-    warnOnce('The `@atlaskit/side-navigation` Footer has simplified its API, removing support for the `component`, `cssFn` and `onClick` props.\n\nThese props will stop working in a future major release. Reach out to #help-design-system on slack for help.');
+    warnOnce('The `@atlaskit/side-navigation` Footer has simplified its API, removing support for the `component` and `onClick` props.\n\nThese props will stop working in a future major release. Reach out to #help-design-system on slack for help.');
   }
   return /*#__PURE__*/React.createElement(OldFooter, {
     onClick: onClick,
-    component: component
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
-    cssFn: cssFn,
+    component: component,
     iconBefore: iconBefore,
     description: description,
     testId: testId

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

@@ -0,0 +1,7 @@
+
+._vrjt140y [data-item-title]{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
+._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
+div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._jl2n73ad:hover{cursor:default}
+div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
+div._1v6j10s3:active{color:var(--ds-text,#42526e)}

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

@@ -1,12 +1,16 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "data-testid"],
   _excluded2 = ["children"];
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { N500 } from '@atlaskit/theme/colors';
-import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+var styles = {
+  header: "_vrjt140y _1cmd10s3 _1cg71wug _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
+};
 
 /**
  * __Container__
@@ -56,38 +60,24 @@ export var Container = function Container(_ref) {
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
 var Header = /*#__PURE__*/forwardRef(function (props, ref) {
-  var cssFn = overrideStyleFunction(function () {
-    return _defineProperty(_defineProperty(_defineProperty({
-      userSelect: 'auto'
-    }, '[data-item-title]', {
-      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-      color: "var(--ds-text, ".concat(N500, ")")
-    }), 'div&:hover', {
-      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-      cursor: 'default'
-    }), 'div&:active', {
-      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-      color: "var(--ds-text, ".concat(N500, ")")
-    });
-  }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
     ref: ref,
     component: props.component || Container
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    // @ts-expect-error
     ,
-    cssFn: cssFn
+
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-    ,
     overrides: {
       Title: {
         // eslint-disable-next-line @atlaskit/design-system/use-heading
-        render: function render(_, _ref4) {
-          var children = _ref4.children,
-            props = _objectWithoutProperties(_ref4, _excluded2);
+        render: function render(_, _ref3) {
+          var children = _ref3.children,
+            props = _objectWithoutProperties(_ref3, _excluded2);
           return /*#__PURE__*/React.createElement("h2", props, children);
         }
       }
-    }
+    },
+    className: ax([styles.header])
   }));
 });
 export default Header;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type HeaderProps } from '../Header';
-type NewFooterProps = Omit<HeaderProps, 'cssFn' | 'component' | 'onClick'>;
+type NewFooterProps = Omit<HeaderProps, 'component' | 'onClick'>;
 type FooterFacadeProps = (HeaderProps & {
     /**
      * @private
@@ -13,7 +13,6 @@ type FooterFacadeProps = (HeaderProps & {
      * @deprecated
      */
     useDeprecatedApi?: false;
-    cssFn?: never;
     component?: never;
     onClick?: never;
 });
@@ -24,5 +23,5 @@ export type FooterProps = HeaderProps | NewFooterProps;
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, cssFn, onClick, }: FooterFacadeProps) => JSX.Element;
+declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, onClick, }: FooterFacadeProps) => JSX.Element;
 export default FooterFacade;

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

@@ -1,18 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
-import { type CSSFn, type CustomItemComponentProps } from '@atlaskit/menu';
+import { type CustomItemComponentProps } from '@atlaskit/menu';
 /**
  * __Container__
  *
  * A container for Header and Footer that safely handles props to the child component
  */
-export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => React.JSX.Element;
+export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => JSX.Element;
 export type HeaderProps = {
-    /**
-     * 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.
-     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
-     */
-    cssFn?: CSSFn;
     /**
      * 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/components/Footer/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type HeaderProps } from '../Header';
-type NewFooterProps = Omit<HeaderProps, 'cssFn' | 'component' | 'onClick'>;
+type NewFooterProps = Omit<HeaderProps, 'component' | 'onClick'>;
 type FooterFacadeProps = (HeaderProps & {
     /**
      * @private
@@ -13,7 +13,6 @@ type FooterFacadeProps = (HeaderProps & {
      * @deprecated
      */
     useDeprecatedApi?: false;
-    cssFn?: never;
     component?: never;
     onClick?: never;
 });
@@ -24,5 +23,5 @@ export type FooterProps = HeaderProps | NewFooterProps;
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, cssFn, onClick, }: FooterFacadeProps) => JSX.Element;
+declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, onClick, }: FooterFacadeProps) => JSX.Element;
 export default FooterFacade;

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

@@ -1,18 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
-import { type CSSFn, type CustomItemComponentProps } from '@atlaskit/menu';
+import { type CustomItemComponentProps } from '@atlaskit/menu';
 /**
  * __Container__
  *
  * A container for Header and Footer that safely handles props to the child component
  */
-export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => React.JSX.Element;
+export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => JSX.Element;
 export type HeaderProps = {
-    /**
-     * 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.
-     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
-     */
-    cssFn?: CSSFn;
     /**
      * 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": "6.0.2",
+	"version": "7.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": "^24.1.0",
+		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/menu": "^3.1.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.2"
 	},
@@ -63,8 +63,8 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.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": "^2.2.0",
-		"@atlaskit/section-message": "^8.1.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
+		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/visual-regression": "^0.10.0",
 		"@testing-library/react": "^13.4.0",