@atlaskit/side-navigation 11.2.2 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/side-navigation
 
+## 12.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.2.2
 
 ### Patch Changes

package/button-item/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/button-item.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/button-item.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/button-item.d.ts"
 }

package/constants/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/constants.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/constants.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/constants.d.ts"
 }

package/custom-item/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/custom-item.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/custom-item.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/custom-item.d.ts"
 }

package/footer/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/footer.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/footer.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/footer.d.ts"
 }

package/go-back-item/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/go-back-item.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/go-back-item.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/go-back-item.d.ts"
 }

package/header/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/header.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/header.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/header.d.ts"
 }

package/heading-item/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/heading-item.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/heading-item.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/heading-item.d.ts"
 }

package/link-item/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/link-item.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/link-item.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/link-item.d.ts"
 }

package/loading-items/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/loading-items.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/loading-items.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/loading-items.d.ts"
 }

package/navigation-content/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/navigation-content.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/navigation-content.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/navigation-content.d.ts"
 }

package/navigation-footer/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/navigation-footer.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/navigation-footer.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/navigation-footer.d.ts"
 }

package/navigation-header/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/navigation-header.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/navigation-header.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/navigation-header.d.ts"
 }

package/nestable-navigation-content/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/nestable-navigation-content.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/nestable-navigation-content.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/nestable-navigation-content.d.ts"
 }

package/nesting-item/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/nesting-item.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/nesting-item.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/nesting-item.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "11.2.2",
+	"version": "12.0.0",
 	"description": "A highly composable side navigation component that supports nested views.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,14 +35,14 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^35.0.0",
-		"@atlaskit/menu": "^8.5.0",
-		"@atlaskit/motion": "^6.2.0",
-		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
+		"@atlaskit/icon": "^36.0.0",
+		"@atlaskit/menu": "^9.0.0",
+		"@atlaskit/motion": "^7.0.0",
+		"@atlaskit/platform-feature-flags": "^2.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -53,24 +53,25 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/atlassian-navigation": "^5.7.0",
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/dropdown-menu": "^16.8.0",
-		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/image": "^3.0.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/logo": "^20.1.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
-		"@atlaskit/pragmatic-drag-and-drop-live-region": "^1.3.0",
-		"@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^2.2.0",
-		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/select": "^21.12.0",
-		"@atlaskit/spotlight": "^0.14.0",
+		"@atlaskit/atlassian-navigation": "^6.0.0",
+		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/dropdown-menu": "^17.0.0",
+		"@atlaskit/form": "^16.0.0",
+		"@atlaskit/image": "^4.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/logo": "^21.0.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
+		"@atlaskit/pragmatic-drag-and-drop-live-region": "^2.0.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^3.0.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.0.0",
+		"@atlaskit/section-message": "^9.0.0",
+		"@atlaskit/select": "^22.0.0",
+		"@atlaskit/spotlight": "^1.0.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"raf-stub": "^2.0.1",
+		"react": "^18.2.0",
 		"tiny-invariant": "^1.2.0"
 	},
 	"techstack": {
@@ -94,14 +95,6 @@
 			]
 		}
 	},
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"platform-feature-flags": {
 		"platform-side-navigation-keyboard-focus": {
 			"type": "boolean"

package/section/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/section.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/section.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/section.d.ts"
 }

package/side-navigation/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/side-navigation.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/side-navigation.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/side-navigation.d.ts"
 }

package/skeleton-heading-item/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/skeleton-heading-item.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/skeleton-heading-item.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/skeleton-heading-item.d.ts"
 }

package/skeleton-item/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/skeleton-item.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/skeleton-item.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/skeleton-item.d.ts"
 }

package/use-should-nested-element-render/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-should-nested-element-render.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-should-nested-element-render.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-should-nested-element-render.d.ts"
 }

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

@@ -1,8 +0,0 @@
-/**
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-export declare const VAR_SEPARATOR_COLOR = "--ds-menu-seperator-color";
-/**
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-export declare const VAR_SCROLL_INDICATOR_COLOR = "--ds-menu-scroll-indicator-color";

package/dist/types-ts4.5/common/use-child-ids-effect.d.ts

@@ -1,3 +0,0 @@
-import { type MutableRefObject } from 'react';
-declare const useChildIdsEffect: (childIds: MutableRefObject<Set<string>>, id: string) => void;
-export default useChildIdsEffect;

package/dist/types-ts4.5/common/use-child-ids.d.ts

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

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

@@ -1,31 +0,0 @@
-import { type HeaderProps } from '../Header';
-type NewFooterProps = Omit<HeaderProps, 'component' | 'onClick'>;
-type FooterFacadeProps = (HeaderProps & {
-    /**
-     * @private
-     * @deprecated
-     */
-    useDeprecatedApi?: true;
-}) | (NewFooterProps & {
-    /**
-     * @private
-     * @deprecated
-     */
-    useDeprecatedApi?: false;
-    component?: never;
-    onClick?: never;
-});
-/**
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-export type FooterProps = HeaderProps | NewFooterProps;
-/**
- * __Footer__
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- *
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-declare const FooterFacade: ({ useDeprecatedApi, description, iconBefore, testId, children, component, onClick, }: FooterFacadeProps) => JSX.Element;
-export default FooterFacade;

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

@@ -1,8 +0,0 @@
-import { type CustomItemComponentProps } from '@atlaskit/menu';
-/**
- * __Container__
- *
- * A container for Header and Footer that safely handles props to the child component
- */
-declare const HeaderContainer: (props: CustomItemComponentProps) => JSX.Element;
-export default HeaderContainer;

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

@@ -1,52 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { type CustomItemComponentProps } from '@atlaskit/menu';
-/**
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-export type HeaderProps = {
-    /**
-     * Element to render before the item text.
-     * Generally should be an [icon](https://atlassian.design/components/icon/icon-explorer) component.
-     */
-    iconBefore?: React.ReactNode;
-    /**
-     * Event that is triggered when the element is clicked.
-     */
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    /**
-     * Description of the item.
-     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
-     */
-    description?: string | JSX.Element;
-    /**
-     * Primary content for the item.
-     */
-    children?: React.ReactNode;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * Custom component to render as an item.
-     * This can be both a functional component or a class component.
-     * __Will return `null` if no component is defined.__
-     * __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
-     */
-    component?: React.ComponentType<CustomItemComponentProps>;
-};
-/**
- * __Header__
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- *
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-declare const Header: React.ForwardRefExoticComponent<React.PropsWithoutRef<HeaderProps> & React.RefAttributes<HTMLElement>>;
-export default Header;

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

@@ -1,14 +0,0 @@
-import { type ButtonItemProps } from '@atlaskit/menu';
-/**
- * __Button item__
- *
- * A button item renders an item wrapped in a button tag, used primarily when an
- * action does something other than changing routes.
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- *
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-declare const ButtonItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonItemProps> & React.RefAttributes<HTMLElement>>;
-export default ButtonItem;

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

@@ -1,16 +0,0 @@
-import { type CustomItemProps, type CustomItemComponentProps as MenuCustomItemComponentProps } from '@atlaskit/menu';
-export interface CustomItemComponentProps extends MenuCustomItemComponentProps {
-}
-interface CustomItemPropsHack {
-    <TComponentProps extends {}>(props: CustomItemProps<TComponentProps> & {
-        ref?: any;
-    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
-}
-/**
- * Used to support any custom items needed by products alongside the Header and Footer patterns.
- * Specific implementation of headers and footers are provided in the examples folder.
- *
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-declare const CustomItem: CustomItemPropsHack;
-export default CustomItem;

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { ButtonItemProps } from '@atlaskit/menu';
-/**
- * __Go back item__
- *
- * A go back item is used to provide a customized "go back" button in nested
- * navigations.
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#go-back-item)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- *
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-declare const GoBackItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonItemProps> & React.RefAttributes<HTMLElement>>;
-export default GoBackItem;

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

@@ -1,16 +0,0 @@
-import { type LinkItemProps } from '@atlaskit/menu';
-/**
- * __Link item__
- *
- * Renders an item wrapped in an anchor tag, useful when you have an item that
- * should change routes using native browser navigation. For SPA transitions use
- * a [custom item](https://atlassian.design/components/side-navigation/examples#custom-item)
- * with the respective router logic.
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- *
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-declare const LinkItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<LinkItemProps> & React.RefAttributes<HTMLElement>>;
-export default LinkItem;

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { type SkeletonItemProps } from '@atlaskit/menu';
-/**
- * __Skeleton item__
- *
- * A skeleton item can be used to reduce the perceived loading time.
- *
- * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
- * - [Code](https://atlassian.design/components/side-navigation/code)
- *
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-declare const SkeletonItem: (props: SkeletonItemProps) => React.JSX.Element | null;
-export default SkeletonItem;

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

@@ -1,44 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-/**
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-export interface LoadingItemsProps {
-    /**
-     * Child items that will be loaded asynchronously.
-     */
-    children: React.ReactNode;
-    /**
-     * Fallback you want to show when loading.
-     * You'll want to use the supplied [skeleton item](/packages/navigation/side-navigation/docs/skeleton-item)
-     * or [skeleton heading item](/packages/navigation/side-navigation/docs/skeleton-heading-item) components.
-     */
-    fallback: React.ReactNode;
-    /**
-     * Use this to show either the loading fallback or the loaded contents.
-     * It will cross fade between children and fallback when the value is flipped.
-     */
-    isLoading?: boolean;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     *
-     * Will set these elements when defined:
-     * - The entering container - `{testId}--entering`
-     * - The exiting container - `{testId}--exiting`
-     */
-    testId?: string;
-}
-/**
- * __Loading items__
- *
- * Loading items conditionally render based on the useShouldNestedElementRender() hook.
- *
- * @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
- */
-declare const LoadingItems: ({ children, isLoading, fallback, testId, }: LoadingItemsProps) => JSX.Element;
-export default LoadingItems;