@atlaskit/side-navigation 3.2.0 → 3.3.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 (56) hide show
  1. package/CHANGELOG.md +20 -1
  2. package/README.md +7 -3
  3. package/afm-jira/tsconfig.json +3 -0
  4. package/codemods/0.8.0-change-css-fn-prop.tsx +136 -164
  5. package/codemods/__tests__/0.8.0-change-css-fn-prop.tsx +77 -77
  6. package/codemods/helpers/generic.tsx +528 -564
  7. package/constellation/index/examples.mdx +20 -20
  8. package/constellation/index/props.mdx +8 -8
  9. package/constellation/index/usage.mdx +27 -11
  10. package/dist/cjs/components/Header/index.js +4 -0
  11. package/dist/cjs/components/Item/link-item.js +3 -1
  12. package/dist/cjs/components/LoadingItems/index.js +7 -3
  13. package/dist/cjs/components/NavigationContent/index.js +8 -1
  14. package/dist/cjs/components/NavigationHeader/index.js +4 -0
  15. package/dist/cjs/components/NestableNavigationContent/index.js +5 -0
  16. package/dist/cjs/components/NestableNavigationContent/nesting-motion.js +3 -1
  17. package/dist/cjs/components/NestingItem/index.js +4 -0
  18. package/dist/cjs/components/SideNavigation/index.js +5 -0
  19. package/dist/es2019/components/Header/index.js +5 -0
  20. package/dist/es2019/components/Item/link-item.js +3 -1
  21. package/dist/es2019/components/LoadingItems/index.js +7 -3
  22. package/dist/es2019/components/NavigationContent/index.js +8 -1
  23. package/dist/es2019/components/NavigationHeader/index.js +4 -0
  24. package/dist/es2019/components/NestableNavigationContent/index.js +5 -0
  25. package/dist/es2019/components/NestableNavigationContent/nesting-motion.js +4 -0
  26. package/dist/es2019/components/NestingItem/index.js +5 -0
  27. package/dist/es2019/components/SideNavigation/index.js +5 -0
  28. package/dist/esm/components/Header/index.js +5 -0
  29. package/dist/esm/components/Item/link-item.js +3 -1
  30. package/dist/esm/components/LoadingItems/index.js +7 -3
  31. package/dist/esm/components/NavigationContent/index.js +8 -1
  32. package/dist/esm/components/NavigationHeader/index.js +4 -0
  33. package/dist/esm/components/NestableNavigationContent/index.js +5 -0
  34. package/dist/esm/components/NestableNavigationContent/nesting-motion.js +4 -0
  35. package/dist/esm/components/NestingItem/index.js +5 -0
  36. package/dist/esm/components/SideNavigation/index.js +5 -0
  37. package/dist/types/components/LoadingItems/index.d.ts +1 -1
  38. package/dist/types/components/NavigationContent/index.d.ts +3 -0
  39. package/dist/types/components/NavigationHeader/index.d.ts +3 -0
  40. package/dist/types/components/NestableNavigationContent/index.d.ts +0 -1
  41. package/dist/types/components/NestableNavigationContent/nesting-motion.d.ts +3 -0
  42. package/dist/types/components/NestingItem/index.d.ts +3 -0
  43. package/dist/types/components/index.d.ts +2 -2
  44. package/dist/types/index.d.ts +1 -1
  45. package/dist/types-ts4.5/components/LoadingItems/index.d.ts +1 -1
  46. package/dist/types-ts4.5/components/NavigationContent/index.d.ts +3 -0
  47. package/dist/types-ts4.5/components/NavigationHeader/index.d.ts +3 -0
  48. package/dist/types-ts4.5/components/NestableNavigationContent/index.d.ts +0 -1
  49. package/dist/types-ts4.5/components/NestableNavigationContent/nesting-motion.d.ts +3 -0
  50. package/dist/types-ts4.5/components/NestingItem/index.d.ts +3 -0
  51. package/dist/types-ts4.5/components/index.d.ts +2 -2
  52. package/dist/types-ts4.5/index.d.ts +1 -1
  53. package/docs/00-intro.tsx +4 -6
  54. package/docs/ert/footer.tsx +6 -6
  55. package/package.json +97 -97
  56. package/report.api.md +102 -123
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  import React from 'react';
3
6
  import { type CSSFn, type CustomItemComponentProps, type Overrides } from '@atlaskit/menu';
@@ -1,12 +1,12 @@
1
1
  export { default as SideNavigation } from './SideNavigation';
2
2
  export type { SideNavigationProps } from './SideNavigation';
3
3
  export { Section, HeadingItem, SkeletonHeadingItem } from './Section';
4
- export type { HeadingItemProps, SectionProps, SkeletonHeadingItemProps, } from './Section';
4
+ export type { HeadingItemProps, SectionProps, SkeletonHeadingItemProps } from './Section';
5
5
  export { default as NestingItem } from './NestingItem';
6
6
  export type { NestingItemProps } from './NestingItem';
7
7
  export { default as NavigationContent } from './NavigationContent';
8
8
  export type { NavigationContentProps } from './NavigationContent';
9
- export { ButtonItem, GoBackItem, LinkItem, CustomItem, SkeletonItem, } from './Item';
9
+ export { ButtonItem, GoBackItem, LinkItem, CustomItem, SkeletonItem } from './Item';
10
10
  export type { CustomItemComponentProps, CustomItemProps, ButtonItemProps, GoBackItemProps, LinkItemProps, SkeletonItemProps, } from './Item';
11
11
  export { default as Footer } from './Footer';
12
12
  export type { FooterProps } from './Footer';
@@ -1,4 +1,4 @@
1
1
  export { SideNavigation, Header, NavigationHeader, NavigationContent, Section, HeadingItem, SkeletonHeadingItem, NestableNavigationContent, NestingItem, ButtonItem, LinkItem, GoBackItem, CustomItem, SkeletonItem, Footer, NavigationFooter, LoadingItems, } from './components';
2
2
  export type { CustomItemComponentProps, CustomItemProps, LoadingItemsProps, ButtonItemProps, FooterProps, GoBackItemProps, HeaderProps, HeadingItemProps, LinkItemProps, NavigationContentProps, NavigationFooterProps, NavigationHeaderProps, NestableNavigationContentProps, NestingItemProps, SectionProps, SideNavigationProps, SkeletonHeadingItemProps, SkeletonItemProps, } from './components';
3
3
  export { useShouldNestedElementRender } from './components/NestableNavigationContent/context';
4
- export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR, } from './common/constants';
4
+ export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from './common/constants';
@@ -31,5 +31,5 @@ export interface LoadingItemsProps {
31
31
  *
32
32
  * Loading items conditionally render based on the useShouldNestedElementRender() hook.
33
33
  */
34
- declare const LoadingItems: ({ children, isLoading, fallback, testId, }: LoadingItemsProps) => JSX.Element;
34
+ declare const LoadingItems: ({ children, isLoading, fallback, testId }: LoadingItemsProps) => JSX.Element;
35
35
  export default LoadingItems;
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  import { type HTMLAttributes } from 'react';
3
6
  export interface NavigationContentProps {
@@ -1,4 +1,7 @@
1
1
  /// <reference types="react" />
2
+ /**
3
+ * @jsxRuntime classic
4
+ */
2
5
  /** @jsx jsx */
3
6
  import { jsx } from '@emotion/react';
4
7
  export interface NavigationHeaderProps {
@@ -12,7 +12,6 @@ export interface NestableNavigationContentProps {
12
12
  * A `testId` prop is provided for specified elements,
13
13
  * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
14
14
  * serving as a hook for automated tests.
15
- *
16
15
  * Will set these elements when defined:
17
16
  * - This wrapper - `{testId}`
18
17
  * - The back item (displayed when inside a nested view) - `{testId}--go-back-item`
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  import { type Ref } from 'react';
3
6
  import { jsx } from '@emotion/react';
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  import React from 'react';
3
6
  import { type CSSFn, type CustomItemComponentProps, type Overrides } from '@atlaskit/menu';
@@ -1,12 +1,12 @@
1
1
  export { default as SideNavigation } from './SideNavigation';
2
2
  export type { SideNavigationProps } from './SideNavigation';
3
3
  export { Section, HeadingItem, SkeletonHeadingItem } from './Section';
4
- export type { HeadingItemProps, SectionProps, SkeletonHeadingItemProps, } from './Section';
4
+ export type { HeadingItemProps, SectionProps, SkeletonHeadingItemProps } from './Section';
5
5
  export { default as NestingItem } from './NestingItem';
6
6
  export type { NestingItemProps } from './NestingItem';
7
7
  export { default as NavigationContent } from './NavigationContent';
8
8
  export type { NavigationContentProps } from './NavigationContent';
9
- export { ButtonItem, GoBackItem, LinkItem, CustomItem, SkeletonItem, } from './Item';
9
+ export { ButtonItem, GoBackItem, LinkItem, CustomItem, SkeletonItem } from './Item';
10
10
  export type { CustomItemComponentProps, CustomItemProps, ButtonItemProps, GoBackItemProps, LinkItemProps, SkeletonItemProps, } from './Item';
11
11
  export { default as Footer } from './Footer';
12
12
  export type { FooterProps } from './Footer';
@@ -1,4 +1,4 @@
1
1
  export { SideNavigation, Header, NavigationHeader, NavigationContent, Section, HeadingItem, SkeletonHeadingItem, NestableNavigationContent, NestingItem, ButtonItem, LinkItem, GoBackItem, CustomItem, SkeletonItem, Footer, NavigationFooter, LoadingItems, } from './components';
2
2
  export type { CustomItemComponentProps, CustomItemProps, LoadingItemsProps, ButtonItemProps, FooterProps, GoBackItemProps, HeaderProps, HeadingItemProps, LinkItemProps, NavigationContentProps, NavigationFooterProps, NavigationHeaderProps, NestableNavigationContentProps, NestingItemProps, SectionProps, SideNavigationProps, SkeletonHeadingItemProps, SkeletonItemProps, } from './components';
3
3
  export { useShouldNestedElementRender } from './components/NestableNavigationContent/context';
4
- export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR, } from './common/constants';
4
+ export { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from './common/constants';
package/docs/00-intro.tsx CHANGED
@@ -5,11 +5,9 @@ import SectionMessage from '@atlaskit/section-message';
5
5
 
6
6
  export default md`
7
7
  ${(
8
- <SectionMessage appearance="information">
9
- This component is now documented on{' '}
10
- <a href="https://atlassian.design/components/side-navigation">
11
- atlassian.design
12
- </a>
13
- </SectionMessage>
8
+ <SectionMessage appearance="information">
9
+ This component is now documented on{' '}
10
+ <a href="https://atlassian.design/components/side-navigation">atlassian.design</a>
11
+ </SectionMessage>
14
12
  )}
15
13
  `;
@@ -5,12 +5,12 @@
5
5
  import { type HeaderProps } from '../../src/components/Header';
6
6
 
7
7
  interface FooterProps extends HeaderProps {
8
- /**
9
- * @deprecated
10
- * Enables use of deprecated `cssFn`, `onClick` and `component` props.
11
- * If this prop is not set to true, you will see a deprecation warning.
12
- */
13
- useDeprecatedApi?: boolean;
8
+ /**
9
+ * @deprecated
10
+ * Enables use of deprecated `cssFn`, `onClick` and `component` props.
11
+ * If this prop is not set to true, you will see a deprecation warning.
12
+ */
13
+ useDeprecatedApi?: boolean;
14
14
  }
15
15
 
16
16
  export default (props: FooterProps) => null;
package/package.json CHANGED
@@ -1,98 +1,98 @@
1
1
  {
2
- "name": "@atlaskit/side-navigation",
3
- "version": "3.2.0",
4
- "description": "A highly composable side navigation component that supports nested views.",
5
- "publishConfig": {
6
- "registry": "https://registry.npmjs.org/"
7
- },
8
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
- "author": "Atlassian Pty Ltd",
10
- "license": "Apache-2.0",
11
- "main": "dist/cjs/index.js",
12
- "module": "dist/esm/index.js",
13
- "module:es2019": "dist/es2019/index.js",
14
- "types": "dist/types/index.d.ts",
15
- "sideEffects": false,
16
- "atlaskit:src": "src/index.tsx",
17
- "af:exports": {
18
- ".": "./src/index.tsx"
19
- },
20
- "atlassian": {
21
- "team": "Design System Team",
22
- "releaseModel": "continuous",
23
- "productPushConsumption": [
24
- "jira"
25
- ],
26
- "website": {
27
- "name": "Side navigation",
28
- "category": "Components"
29
- },
30
- "runReact18": true
31
- },
32
- "dependencies": {
33
- "@atlaskit/ds-lib": "^2.3.0",
34
- "@atlaskit/icon": "^22.3.0",
35
- "@atlaskit/menu": "^2.3.0",
36
- "@atlaskit/motion": "^1.6.0",
37
- "@atlaskit/platform-feature-flags": "^0.2.5",
38
- "@atlaskit/primitives": "^6.4.0",
39
- "@atlaskit/theme": "^12.8.0",
40
- "@atlaskit/tokens": "^1.49.0",
41
- "@babel/runtime": "^7.0.0",
42
- "@emotion/react": "^11.7.1"
43
- },
44
- "peerDependencies": {
45
- "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
46
- },
47
- "devDependencies": {
48
- "@af/accessibility-testing": "*",
49
- "@af/integration-testing": "*",
50
- "@af/visual-regression": "*",
51
- "@atlaskit/visual-regression": "*",
52
- "@atlassian/feature-flags-test-utils": "*",
53
- "@testing-library/react": "^12.1.5",
54
- "@types/jest-axe": "^3.5.5",
55
- "ast-types": "^0.13.3",
56
- "jest-axe": "^8.0.0",
57
- "jest-emotion": "^10.0.32",
58
- "jscodeshift": "^0.13.0",
59
- "raf-stub": "^2.0.1",
60
- "react-beautiful-dnd": "^12.1.1",
61
- "typescript": "~5.4.2"
62
- },
63
- "techstack": {
64
- "@atlassian/frontend": {
65
- "import-structure": "atlassian-conventions"
66
- },
67
- "@repo/internal": {
68
- "design-system": "v1",
69
- "dom-events": "use-bind-event-listener",
70
- "ui-components": [
71
- "lite-mode"
72
- ],
73
- "design-tokens": [
74
- "color",
75
- "spacing"
76
- ],
77
- "analytics": "analytics-next",
78
- "deprecation": "no-deprecated-imports",
79
- "styling": [
80
- "emotion"
81
- ]
82
- }
83
- },
84
- "typesVersions": {
85
- ">=4.5 <4.9": {
86
- "*": [
87
- "dist/types-ts4.5/*",
88
- "dist/types-ts4.5/index.d.ts"
89
- ]
90
- }
91
- },
92
- "homepage": "https://atlassian.design/components/side-navigation/",
93
- "platform-feature-flags": {
94
- "platform.design-system-team.side-navigation-tokenised-typography-styles": {
95
- "type": "boolean"
96
- }
97
- }
98
- }
2
+ "name": "@atlaskit/side-navigation",
3
+ "version": "3.3.0",
4
+ "description": "A highly composable side navigation component that supports nested views.",
5
+ "publishConfig": {
6
+ "registry": "https://registry.npmjs.org/"
7
+ },
8
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
+ "author": "Atlassian Pty Ltd",
10
+ "license": "Apache-2.0",
11
+ "main": "dist/cjs/index.js",
12
+ "module": "dist/esm/index.js",
13
+ "module:es2019": "dist/es2019/index.js",
14
+ "types": "dist/types/index.d.ts",
15
+ "sideEffects": false,
16
+ "atlaskit:src": "src/index.tsx",
17
+ "af:exports": {
18
+ ".": "./src/index.tsx"
19
+ },
20
+ "atlassian": {
21
+ "team": "Design System Team",
22
+ "releaseModel": "continuous",
23
+ "productPushConsumption": [
24
+ "jira"
25
+ ],
26
+ "website": {
27
+ "name": "Side navigation",
28
+ "category": "Components"
29
+ },
30
+ "runReact18": true
31
+ },
32
+ "dependencies": {
33
+ "@atlaskit/ds-lib": "^2.3.0",
34
+ "@atlaskit/icon": "^22.4.0",
35
+ "@atlaskit/menu": "^2.5.0",
36
+ "@atlaskit/motion": "^1.7.0",
37
+ "@atlaskit/platform-feature-flags": "^0.2.5",
38
+ "@atlaskit/primitives": "^7.4.0",
39
+ "@atlaskit/theme": "^12.10.0",
40
+ "@atlaskit/tokens": "^1.51.0",
41
+ "@babel/runtime": "^7.0.0",
42
+ "@emotion/react": "^11.7.1"
43
+ },
44
+ "peerDependencies": {
45
+ "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
46
+ },
47
+ "devDependencies": {
48
+ "@af/accessibility-testing": "*",
49
+ "@af/integration-testing": "*",
50
+ "@af/visual-regression": "*",
51
+ "@atlaskit/visual-regression": "*",
52
+ "@atlassian/feature-flags-test-utils": "*",
53
+ "@testing-library/react": "^12.1.5",
54
+ "@types/jest-axe": "^3.5.5",
55
+ "ast-types": "^0.13.3",
56
+ "jest-axe": "^8.0.0",
57
+ "jest-emotion": "^10.0.32",
58
+ "jscodeshift": "^0.13.0",
59
+ "raf-stub": "^2.0.1",
60
+ "react-beautiful-dnd": "^12.1.1",
61
+ "typescript": "~5.4.2"
62
+ },
63
+ "techstack": {
64
+ "@atlassian/frontend": {
65
+ "import-structure": "atlassian-conventions"
66
+ },
67
+ "@repo/internal": {
68
+ "design-system": "v1",
69
+ "dom-events": "use-bind-event-listener",
70
+ "ui-components": [
71
+ "lite-mode"
72
+ ],
73
+ "design-tokens": [
74
+ "color",
75
+ "spacing"
76
+ ],
77
+ "analytics": "analytics-next",
78
+ "deprecation": "no-deprecated-imports",
79
+ "styling": [
80
+ "emotion"
81
+ ]
82
+ }
83
+ },
84
+ "typesVersions": {
85
+ ">=4.5 <4.9": {
86
+ "*": [
87
+ "dist/types-ts4.5/*",
88
+ "dist/types-ts4.5/index.d.ts"
89
+ ]
90
+ }
91
+ },
92
+ "homepage": "https://atlassian.design/components/side-navigation/",
93
+ "platform-feature-flags": {
94
+ "platform.design-system-team.side-navigation-tokenised-typography-styles": {
95
+ "type": "boolean"
96
+ }
97
+ }
98
+ }