@atlaskit/side-navigation 6.0.3 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/Footer/index.compiled.css +22 -1
  3. package/dist/cjs/components/Footer/index.js +6 -44
  4. package/dist/cjs/components/Header/index.compiled.css +7 -0
  5. package/dist/cjs/components/Header/index.js +14 -23
  6. package/dist/es2019/components/Footer/index.compiled.css +22 -1
  7. package/dist/es2019/components/Footer/index.js +6 -42
  8. package/dist/es2019/components/Header/index.compiled.css +7 -0
  9. package/dist/es2019/components/Header/index.js +10 -21
  10. package/dist/esm/components/Footer/index.compiled.css +22 -1
  11. package/dist/esm/components/Footer/index.js +6 -44
  12. package/dist/esm/components/Header/index.compiled.css +7 -0
  13. package/dist/esm/components/Header/index.js +13 -23
  14. package/dist/types/components/Footer/index.d.ts +2 -3
  15. package/dist/types/components/Header/index.d.ts +6 -8
  16. package/dist/types-ts4.5/components/Footer/index.d.ts +2 -3
  17. package/dist/types-ts4.5/components/Header/index.d.ts +6 -8
  18. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/side-navigation
2
2
 
3
+ ## 7.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#129933](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129933)
8
+ [`67ff94142c5ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/67ff94142c5ad) -
9
+ Removes the deprecated cssFn prop from the Header and Footer components.
10
+
3
11
  ## 6.0.3
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/Footer/index.compiled.css CHANGED
@@ -1,3 +1,24 @@
1
+
2
+ ._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}
3
+ ._14741h6o._14741h6o{text-align:center}
4
+ ._14bw1o8l [data-item-description]{display:inline-block}
5
+ ._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
6
+ ._16vx1h6o [data-item-title]{text-align:center}
1
7
  ._1bsb1k8s{width:1.5rem}
8
+ ._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
2
9
  ._1e0c1o8l{display:inline-block}
3
- ._4t3i1k8s{height:1.5rem}
10
+ ._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
11
+ ._1kba1h6o._1kba1h6o{align-items:center}
12
+ ._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
13
+ ._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
14
+ ._4t3i1k8s{height:1.5rem}
15
+ ._76zj1o8l [data-item-elem-before]{display:inline-block}
16
+ ._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
17
+ ._if291ule._if291ule{display:block}
18
+ ._oiqe1tcg._oiqe1tcg{min-height:24px}
19
+ ._w1ap1osq._w1ap1osq{width:100%}
20
+ ._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
21
+ div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
22
+ div._jl2n73ad:hover{cursor:default}
23
+ div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
24
+ div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}
package/dist/cjs/components/Footer/index.js CHANGED
@@ -14,14 +14,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
14
14
  var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
15
15
  var _compiled = require("@atlaskit/primitives/compiled");
16
16
  var _colors = require("@atlaskit/theme/colors");
17
- var _styles = require("../../common/styles");
18
17
  var _Header = require("../Header");
19
18
  var _Item = require("../Item");
20
19
  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); }
21
20
  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; }
22
21
  /* eslint-disable @repo/internal/react/consistent-props-definitions */
23
22
  var styles = {
24
- iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s"
23
+ iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
24
+ oldFooter: "_vrjtdcr7 _16vx1h6o _1cg71wug _if291ule _14741h6o _oiqe1tcg _1kba1h6o _w1ap1osq _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
25
25
  };
26
26
  /**
27
27
  * __Footer__
@@ -30,40 +30,6 @@ var styles = {
30
30
  * - [Code](https://atlassian.design/components/side-navigation/code)
31
31
  */
32
32
  var OldFooter = function OldFooter(props) {
33
- var cssFn = (0, _styles.overrideStyleFunction)(function () {
34
- return {
35
- userSelect: 'auto',
36
- display: 'block',
37
- textAlign: 'center',
38
- minHeight: '24px',
39
- alignItems: 'center',
40
- width: '100%',
41
- '[data-item-elem-before]': {
42
- marginRight: "var(--ds-space-0, 0px)",
43
- marginBottom: "var(--ds-space-100, 8px)",
44
- display: 'inline-block'
45
- },
46
- '[data-item-title]': {
47
- textAlign: 'center',
48
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
49
- },
50
- '[data-item-description]': {
51
- textAlign: 'center',
52
- display: 'inline-block',
53
- margin: "var(--ds-space-075, 6px)"
54
- },
55
- // Will look interactive if the `component` is anything other than a div.
56
- 'div&:hover': {
57
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
58
- cursor: 'default'
59
- },
60
- 'div&:active': {
61
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
62
- color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
63
- }
64
- };
65
- }, props.cssFn);
66
-
67
33
  // https://stackoverflow.com/a/39333479
68
34
  var safeProps = function (_ref) {
69
35
  var iconBefore = _ref.iconBefore,
@@ -81,9 +47,9 @@ var OldFooter = function OldFooter(props) {
81
47
  }(props);
82
48
  return /*#__PURE__*/React.createElement(_Item.CustomItem, (0, _extends2.default)({}, safeProps, {
83
49
  component: props.component || _Header.Container
84
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
50
+ // @ts-expect-error
85
51
  ,
86
- cssFn: cssFn
52
+ className: (0, _runtime.ax)([styles.oldFooter])
87
53
  }));
88
54
  };
89
55
 
@@ -134,7 +100,6 @@ var FooterFacade = function FooterFacade(_ref3) {
134
100
  testId = _ref3.testId,
135
101
  children = _ref3.children,
136
102
  component = _ref3.component,
137
- cssFn = _ref3.cssFn,
138
103
  onClick = _ref3.onClick;
139
104
  if (!useDeprecatedApi) {
140
105
  return /*#__PURE__*/React.createElement(Footer, {
@@ -144,14 +109,11 @@ var FooterFacade = function FooterFacade(_ref3) {
144
109
  }, children);
145
110
  }
146
111
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'CI') {
147
- (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.');
112
+ (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.');
148
113
  }
149
114
  return /*#__PURE__*/React.createElement(OldFooter, {
150
115
  onClick: onClick,
151
- component: component
152
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
153
- ,
154
- cssFn: cssFn,
116
+ component: component,
155
117
  iconBefore: iconBefore,
156
118
  description: description,
157
119
  testId: testId
package/dist/cjs/components/Header/index.compiled.css ADDED
@@ -0,0 +1,7 @@
1
+
2
+ ._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}
3
+ ._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
4
+ div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
5
+ div._jl2n73ad:hover{cursor:default}
6
+ div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
7
+ div._1v6j10s3:active{color:var(--ds-text,#42526e)}
package/dist/cjs/components/Header/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,17 +7,21 @@ Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.default = exports.Container = void 0;
9
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ require("./index.compiled.css");
11
+ var _runtime = require("@compiled/react/runtime");
10
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
13
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
14
  var _react = _interopRequireWildcard(require("react"));
13
15
  var _colors = require("@atlaskit/theme/colors");
14
- var _styles = require("../../common/styles");
15
16
  var _Item = require("../Item");
16
17
  var _excluded = ["children", "data-testid"],
17
18
  _excluded2 = ["children"];
18
19
  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); }
19
20
  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; }
21
+ var styles = {
22
+ header: "_vrjt140y _1cmd10s3 _1cg71wug _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
23
+ };
24
+
20
25
  /**
21
26
  * __Container__
22
27
  *
@@ -65,38 +70,24 @@ var Container = exports.Container = function Container(_ref) {
65
70
  * - [Code](https://atlassian.design/components/side-navigation/code)
66
71
  */
67
72
  var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
68
- var cssFn = (0, _styles.overrideStyleFunction)(function () {
69
- return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
70
- userSelect: 'auto'
71
- }, '[data-item-title]', {
72
- font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
73
- color: "var(--ds-text, ".concat(_colors.N500, ")")
74
- }), 'div&:hover', {
75
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
76
- cursor: 'default'
77
- }), 'div&:active', {
78
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
79
- color: "var(--ds-text, ".concat(_colors.N500, ")")
80
- });
81
- }, props.cssFn);
82
73
  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
83
74
  ref: ref,
84
75
  component: props.component || Container
85
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
76
+ // @ts-expect-error
86
77
  ,
87
- cssFn: cssFn
78
+
88
79
  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
89
- ,
90
80
  overrides: {
91
81
  Title: {
92
82
  // eslint-disable-next-line @atlaskit/design-system/use-heading
93
- render: function render(_, _ref4) {
94
- var children = _ref4.children,
95
- props = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
83
+ render: function render(_, _ref3) {
84
+ var children = _ref3.children,
85
+ props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
96
86
  return /*#__PURE__*/_react.default.createElement("h2", props, children);
97
87
  }
98
88
  }
99
- }
89
+ },
90
+ className: (0, _runtime.ax)([styles.header])
100
91
  }));
101
92
  });
102
93
  var _default = exports.default = Header;
package/dist/es2019/components/Footer/index.compiled.css CHANGED
@@ -1,3 +1,24 @@
1
+
2
+ ._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}
3
+ ._14741h6o._14741h6o{text-align:center}
4
+ ._14bw1o8l [data-item-description]{display:inline-block}
5
+ ._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
6
+ ._16vx1h6o [data-item-title]{text-align:center}
1
7
  ._1bsb1k8s{width:1.5rem}
8
+ ._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
2
9
  ._1e0c1o8l{display:inline-block}
3
- ._4t3i1k8s{height:1.5rem}
10
+ ._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
11
+ ._1kba1h6o._1kba1h6o{align-items:center}
12
+ ._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
13
+ ._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
14
+ ._4t3i1k8s{height:1.5rem}
15
+ ._76zj1o8l [data-item-elem-before]{display:inline-block}
16
+ ._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
17
+ ._if291ule._if291ule{display:block}
18
+ ._oiqe1tcg._oiqe1tcg{min-height:24px}
19
+ ._w1ap1osq._w1ap1osq{width:100%}
20
+ ._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
21
+ div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
22
+ div._jl2n73ad:hover{cursor:default}
23
+ div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
24
+ div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}
package/dist/es2019/components/Footer/index.js CHANGED
@@ -8,11 +8,11 @@ import { ax, ix } from "@compiled/react/runtime";
8
8
  import warnOnce from '@atlaskit/ds-lib/warn-once';
9
9
  import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
10
10
  import { N500 } from '@atlaskit/theme/colors';
11
- import { overrideStyleFunction } from '../../common/styles';
12
11
  import { Container } from '../Header';
13
12
  import { CustomItem } from '../Item';
14
13
  const styles = {
15
- iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s"
14
+ iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
15
+ oldFooter: "_vrjtdcr7 _16vx1h6o _1cg71wug _if291ule _14741h6o _oiqe1tcg _1kba1h6o _w1ap1osq _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
16
16
  };
17
17
  /**
18
18
  * __Footer__
@@ -21,38 +21,6 @@ const styles = {
21
21
  * - [Code](https://atlassian.design/components/side-navigation/code)
22
22
  */
23
23
  const OldFooter = props => {
24
- const cssFn = overrideStyleFunction(() => ({
25
- userSelect: 'auto',
26
- display: 'block',
27
- textAlign: 'center',
28
- minHeight: '24px',
29
- alignItems: 'center',
30
- width: '100%',
31
- '[data-item-elem-before]': {
32
- marginRight: "var(--ds-space-0, 0px)",
33
- marginBottom: "var(--ds-space-100, 8px)",
34
- display: 'inline-block'
35
- },
36
- '[data-item-title]': {
37
- textAlign: 'center',
38
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
39
- },
40
- '[data-item-description]': {
41
- textAlign: 'center',
42
- display: 'inline-block',
43
- margin: "var(--ds-space-075, 6px)"
44
- },
45
- // Will look interactive if the `component` is anything other than a div.
46
- 'div&:hover': {
47
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
48
- cursor: 'default'
49
- },
50
- 'div&:active': {
51
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
52
- color: `var(--ds-text-subtle, ${N500})`
53
- }
54
- }), props.cssFn);
55
-
56
24
  // https://stackoverflow.com/a/39333479
57
25
  const safeProps = (({
58
26
  iconBefore,
@@ -69,9 +37,9 @@ const OldFooter = props => {
69
37
  }))(props);
70
38
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, safeProps, {
71
39
  component: props.component || Container
72
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
40
+ // @ts-expect-error
73
41
  ,
74
- cssFn: cssFn
42
+ className: ax([styles.oldFooter])
75
43
  }));
76
44
  };
77
45
 
@@ -122,7 +90,6 @@ const FooterFacade = ({
122
90
  testId,
123
91
  children,
124
92
  component,
125
- cssFn,
126
93
  onClick
127
94
  }) => {
128
95
  if (!useDeprecatedApi) {
@@ -133,14 +100,11 @@ const FooterFacade = ({
133
100
  }, children);
134
101
  }
135
102
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'CI') {
136
- 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.');
103
+ 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.');
137
104
  }
138
105
  return /*#__PURE__*/React.createElement(OldFooter, {
139
106
  onClick: onClick,
140
- component: component
141
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
142
- ,
143
- cssFn: cssFn,
107
+ component: component,
144
108
  iconBefore: iconBefore,
145
109
  description: description,
146
110
  testId: testId
package/dist/es2019/components/Header/index.compiled.css ADDED
@@ -0,0 +1,7 @@
1
+
2
+ ._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}
3
+ ._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
4
+ div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
5
+ div._jl2n73ad:hover{cursor:default}
6
+ div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
7
+ div._1v6j10s3:active{color:var(--ds-text,#42526e)}
package/dist/es2019/components/Header/index.js CHANGED
@@ -1,8 +1,13 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
3
+ import "./index.compiled.css";
4
+ import { ax, ix } from "@compiled/react/runtime";
2
5
  import React, { forwardRef } from 'react';
3
6
  import { N500 } from '@atlaskit/theme/colors';
4
- import { overrideStyleFunction } from '../../common/styles';
5
7
  import { CustomItem } from '../Item';
8
+ const styles = {
9
+ header: "_vrjt140y _1cmd10s3 _1cg71wug _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
10
+ };
6
11
 
7
12
  /**
8
13
  * __Container__
@@ -52,30 +57,13 @@ export const Container = ({
52
57
  * - [Code](https://atlassian.design/components/side-navigation/code)
53
58
  */
54
59
  const Header = /*#__PURE__*/forwardRef((props, ref) => {
55
- const cssFn = overrideStyleFunction(() => ({
56
- userSelect: 'auto',
57
- ['[data-item-title]']: {
58
- font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
59
- color: `var(--ds-text, ${N500})`
60
- },
61
- // Will look interactive if the `component` is anything other than a div.
62
- 'div&:hover': {
63
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
64
- cursor: 'default'
65
- },
66
- 'div&:active': {
67
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
68
- color: `var(--ds-text, ${N500})`
69
- }
70
- }), props.cssFn);
71
60
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
72
61
  ref: ref,
73
62
  component: props.component || Container
74
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
63
+ // @ts-expect-error
75
64
  ,
76
- cssFn: cssFn
65
+
77
66
  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
78
- ,
79
67
  overrides: {
80
68
  Title: {
81
69
  // eslint-disable-next-line @atlaskit/design-system/use-heading
@@ -84,7 +72,8 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
84
72
  ...props
85
73
  }) => /*#__PURE__*/React.createElement("h2", props, children)
86
74
  }
87
- }
75
+ },
76
+ className: ax([styles.header])
88
77
  }));
89
78
  });
90
79
  export default Header;
package/dist/esm/components/Footer/index.compiled.css CHANGED
@@ -1,3 +1,24 @@
1
+
2
+ ._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}
3
+ ._14741h6o._14741h6o{text-align:center}
4
+ ._14bw1o8l [data-item-description]{display:inline-block}
5
+ ._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
6
+ ._16vx1h6o [data-item-title]{text-align:center}
1
7
  ._1bsb1k8s{width:1.5rem}
8
+ ._1cg71wug._1cg71wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
2
9
  ._1e0c1o8l{display:inline-block}
3
- ._4t3i1k8s{height:1.5rem}
10
+ ._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
11
+ ._1kba1h6o._1kba1h6o{align-items:center}
12
+ ._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
13
+ ._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
14
+ ._4t3i1k8s{height:1.5rem}
15
+ ._76zj1o8l [data-item-elem-before]{display:inline-block}
16
+ ._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
17
+ ._if291ule._if291ule{display:block}
18
+ ._oiqe1tcg._oiqe1tcg{min-height:24px}
19
+ ._w1ap1osq._w1ap1osq{width:100%}
20
+ ._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
21
+ div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
22
+ div._jl2n73ad:hover{cursor:default}
23
+ div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
24
+ div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}
package/dist/esm/components/Footer/index.js CHANGED
@@ -8,11 +8,11 @@ import { ax, ix } from "@compiled/react/runtime";
8
8
  import warnOnce from '@atlaskit/ds-lib/warn-once';
9
9
  import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
10
10
  import { N500 } from '@atlaskit/theme/colors';
11
- import { overrideStyleFunction } from '../../common/styles';
12
11
  import { Container } from '../Header';
13
12
  import { CustomItem } from '../Item';
14
13
  var styles = {
15
- iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s"
14
+ iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
15
+ oldFooter: "_vrjtdcr7 _16vx1h6o _1cg71wug _if291ule _14741h6o _oiqe1tcg _1kba1h6o _w1ap1osq _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
16
16
  };
17
17
  /**
18
18
  * __Footer__
@@ -21,40 +21,6 @@ var styles = {
21
21
  * - [Code](https://atlassian.design/components/side-navigation/code)
22
22
  */
23
23
  var OldFooter = function OldFooter(props) {
24
- var cssFn = overrideStyleFunction(function () {
25
- return {
26
- userSelect: 'auto',
27
- display: 'block',
28
- textAlign: 'center',
29
- minHeight: '24px',
30
- alignItems: 'center',
31
- width: '100%',
32
- '[data-item-elem-before]': {
33
- marginRight: "var(--ds-space-0, 0px)",
34
- marginBottom: "var(--ds-space-100, 8px)",
35
- display: 'inline-block'
36
- },
37
- '[data-item-title]': {
38
- textAlign: 'center',
39
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
40
- },
41
- '[data-item-description]': {
42
- textAlign: 'center',
43
- display: 'inline-block',
44
- margin: "var(--ds-space-075, 6px)"
45
- },
46
- // Will look interactive if the `component` is anything other than a div.
47
- 'div&:hover': {
48
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
49
- cursor: 'default'
50
- },
51
- 'div&:active': {
52
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
53
- color: "var(--ds-text-subtle, ".concat(N500, ")")
54
- }
55
- };
56
- }, props.cssFn);
57
-
58
24
  // https://stackoverflow.com/a/39333479
59
25
  var safeProps = function (_ref) {
60
26
  var iconBefore = _ref.iconBefore,
@@ -72,9 +38,9 @@ var OldFooter = function OldFooter(props) {
72
38
  }(props);
73
39
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, safeProps, {
74
40
  component: props.component || Container
75
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
41
+ // @ts-expect-error
76
42
  ,
77
- cssFn: cssFn
43
+ className: ax([styles.oldFooter])
78
44
  }));
79
45
  };
80
46
 
@@ -125,7 +91,6 @@ var FooterFacade = function FooterFacade(_ref3) {
125
91
  testId = _ref3.testId,
126
92
  children = _ref3.children,
127
93
  component = _ref3.component,
128
- cssFn = _ref3.cssFn,
129
94
  onClick = _ref3.onClick;
130
95
  if (!useDeprecatedApi) {
131
96
  return /*#__PURE__*/React.createElement(Footer, {
@@ -135,14 +100,11 @@ var FooterFacade = function FooterFacade(_ref3) {
135
100
  }, children);
136
101
  }
137
102
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'CI') {
138
- 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.');
103
+ 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.');
139
104
  }
140
105
  return /*#__PURE__*/React.createElement(OldFooter, {
141
106
  onClick: onClick,
142
- component: component
143
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
144
- ,
145
- cssFn: cssFn,
107
+ component: component,
146
108
  iconBefore: iconBefore,
147
109
  description: description,
148
110
  testId: testId
package/dist/esm/components/Header/index.compiled.css ADDED
@@ -0,0 +1,7 @@
1
+
2
+ ._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}
3
+ ._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
4
+ div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
5
+ div._jl2n73ad:hover{cursor:default}
6
+ div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
7
+ div._1v6j10s3:active{color:var(--ds-text,#42526e)}
package/dist/esm/components/Header/index.js CHANGED
@@ -1,12 +1,16 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
4
  var _excluded = ["children", "data-testid"],
5
5
  _excluded2 = ["children"];
6
+ import "./index.compiled.css";
7
+ import { ax, ix } from "@compiled/react/runtime";
6
8
  import React, { forwardRef } from 'react';
7
9
  import { N500 } from '@atlaskit/theme/colors';
8
- import { overrideStyleFunction } from '../../common/styles';
9
10
  import { CustomItem } from '../Item';
11
+ var styles = {
12
+ header: "_vrjt140y _1cmd10s3 _1cg71wug _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
13
+ };
10
14
 
11
15
  /**
12
16
  * __Container__
@@ -56,38 +60,24 @@ export var Container = function Container(_ref) {
56
60
  * - [Code](https://atlassian.design/components/side-navigation/code)
57
61
  */
58
62
  var Header = /*#__PURE__*/forwardRef(function (props, ref) {
59
- var cssFn = overrideStyleFunction(function () {
60
- return _defineProperty(_defineProperty(_defineProperty({
61
- userSelect: 'auto'
62
- }, '[data-item-title]', {
63
- font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
64
- color: "var(--ds-text, ".concat(N500, ")")
65
- }), 'div&:hover', {
66
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
67
- cursor: 'default'
68
- }), 'div&:active', {
69
- backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
70
- color: "var(--ds-text, ".concat(N500, ")")
71
- });
72
- }, props.cssFn);
73
63
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
74
64
  ref: ref,
75
65
  component: props.component || Container
76
- // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
66
+ // @ts-expect-error
77
67
  ,
78
- cssFn: cssFn
68
+
79
69
  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
80
- ,
81
70
  overrides: {
82
71
  Title: {
83
72
  // eslint-disable-next-line @atlaskit/design-system/use-heading
84
- render: function render(_, _ref4) {
85
- var children = _ref4.children,
86
- props = _objectWithoutProperties(_ref4, _excluded2);
73
+ render: function render(_, _ref3) {
74
+ var children = _ref3.children,
75
+ props = _objectWithoutProperties(_ref3, _excluded2);
87
76
  return /*#__PURE__*/React.createElement("h2", props, children);
88
77
  }
89
78
  }
90
- }
79
+ },
80
+ className: ax([styles.header])
91
81
  }));
92
82
  });
93
83
  export default Header;
package/dist/types/components/Footer/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { type HeaderProps } from '../Header';
3
- type NewFooterProps = Omit<HeaderProps, 'cssFn' | 'component' | 'onClick'>;
3
+ type NewFooterProps = Omit<HeaderProps, 'component' | 'onClick'>;
4
4
  type FooterFacadeProps = (HeaderProps & {
5
5
  /**
6
6
  * @private
@@ -13,7 +13,6 @@ type FooterFacadeProps = (HeaderProps & {
13
13
  * @deprecated
14
14
  */
15
15
  useDeprecatedApi?: false;
16
- cssFn?: never;
17
16
  component?: never;
18
17
  onClick?: never;
19
18
  });
@@ -24,5 +23,5 @@ export type FooterProps = HeaderProps | NewFooterProps;
24
23
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
25
24
  * - [Code](https://atlassian.design/components/side-navigation/code)
26
25
  */
27
- declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, cssFn, onClick, }: FooterFacadeProps) => JSX.Element;
26
+ declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, onClick, }: FooterFacadeProps) => JSX.Element;
28
27
  export default FooterFacade;
package/dist/types/components/Header/index.d.ts CHANGED
@@ -1,18 +1,16 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
- import { type CSSFn, type CustomItemComponentProps } from '@atlaskit/menu';
6
+ import { type CustomItemComponentProps } from '@atlaskit/menu';
3
7
  /**
4
8
  * __Container__
5
9
  *
6
10
  * A container for Header and Footer that safely handles props to the child component
7
11
  */
8
- export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => React.JSX.Element;
12
+ export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => JSX.Element;
9
13
  export type HeaderProps = {
10
- /**
11
- * A function that can be used to override the styles of the component.
12
- * It receives the current styles and state and expects a styles object.
13
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
14
- */
15
- cssFn?: CSSFn;
16
14
  /**
17
15
  * Element to render before the item text.
18
16
  * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
package/dist/types-ts4.5/components/Footer/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { type HeaderProps } from '../Header';
3
- type NewFooterProps = Omit<HeaderProps, 'cssFn' | 'component' | 'onClick'>;
3
+ type NewFooterProps = Omit<HeaderProps, 'component' | 'onClick'>;
4
4
  type FooterFacadeProps = (HeaderProps & {
5
5
  /**
6
6
  * @private
@@ -13,7 +13,6 @@ type FooterFacadeProps = (HeaderProps & {
13
13
  * @deprecated
14
14
  */
15
15
  useDeprecatedApi?: false;
16
- cssFn?: never;
17
16
  component?: never;
18
17
  onClick?: never;
19
18
  });
@@ -24,5 +23,5 @@ export type FooterProps = HeaderProps | NewFooterProps;
24
23
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
25
24
  * - [Code](https://atlassian.design/components/side-navigation/code)
26
25
  */
27
- declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, cssFn, onClick, }: FooterFacadeProps) => JSX.Element;
26
+ declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, onClick, }: FooterFacadeProps) => JSX.Element;
28
27
  export default FooterFacade;
package/dist/types-ts4.5/components/Header/index.d.ts CHANGED
@@ -1,18 +1,16 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
- import { type CSSFn, type CustomItemComponentProps } from '@atlaskit/menu';
6
+ import { type CustomItemComponentProps } from '@atlaskit/menu';
3
7
  /**
4
8
  * __Container__
5
9
  *
6
10
  * A container for Header and Footer that safely handles props to the child component
7
11
  */
8
- export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => React.JSX.Element;
12
+ export declare const Container: ({ children, "data-testid": testId, ...props }: CustomItemComponentProps) => JSX.Element;
9
13
  export type HeaderProps = {
10
- /**
11
- * A function that can be used to override the styles of the component.
12
- * It receives the current styles and state and expects a styles object.
13
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
14
- */
15
- cssFn?: CSSFn;
16
14
  /**
17
15
  * Element to render before the item text.
18
16
  * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "6.0.3",
3
+ "version": "7.0.0",
4
4
  "description": "A highly composable side navigation component that supports nested views.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -38,9 +38,9 @@
38
38
  "@atlaskit/menu": "^3.1.0",
39
39
  "@atlaskit/motion": "^5.1.0",
40
40
  "@atlaskit/platform-feature-flags": "^1.1.0",
41
- "@atlaskit/primitives": "^14.1.0",
41
+ "@atlaskit/primitives": "^14.2.0",
42
42
  "@atlaskit/theme": "^18.0.0",
43
- "@atlaskit/tokens": "^4.4.0",
43
+ "@atlaskit/tokens": "^4.5.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@compiled/react": "^0.18.2"
46
46
  },
@@ -64,7 +64,7 @@
64
64
  "@atlaskit/pragmatic-drag-and-drop-live-region": "^1.3.0",
65
65
  "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^2.0.0",
66
66
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
67
- "@atlaskit/section-message": "^8.1.0",
67
+ "@atlaskit/section-message": "^8.2.0",
68
68
  "@atlaskit/select": "^20.0.0",
69
69
  "@atlaskit/visual-regression": "^0.10.0",
70
70
  "@testing-library/react": "^13.4.0",