@atlaskit/side-navigation 3.6.7 → 4.0.0

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

@@ -1,22 +1,18 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import ArrowRightIcon from '@atlaskit/icon/core/migration/arrow-right--arrow-right-circle';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
@@ -24,9 +20,9 @@ import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
-var iconContainerStyles = xcss({
-  display: 'inline'
-});
+var styles = {
+  iconContainer: "_1e0c1nu9"
+};
 
 // Doesn't extend from ButtonItemProps because it blows ERT up.
 
@@ -134,12 +130,12 @@ var NestingItem = function NestingItem(props) {
     onClick && onClick(e);
   }, [isInteracted, onClick, onNest, id]);
   if (currentStackId === id) {
-    return jsx(NestedContext.Provider, {
+    return /*#__PURE__*/React.createElement(NestedContext.Provider, {
       value: context
-    }, stack.length >= 1 && jsx(Box, {
+    }, stack.length >= 1 && /*#__PURE__*/React.createElement(Box, {
       paddingBlock: "space.075",
       paddingInline: "space.100"
-    }, backButton), jsx(NavigationContent, {
+    }, backButton), /*#__PURE__*/React.createElement(NavigationContent, {
       testId: testId,
       showTopScrollIndicator: forceShowTopScrollIndicator || stack.length >= 1
     }, children));
@@ -148,15 +144,15 @@ var NestingItem = function NestingItem(props) {
     return children;
   }
   var componentProps = _objectSpread(_objectSpread({
-    iconAfter: jsx(Fragment, null, iconAfter ? jsx(Box, {
-      xcss: iconContainerStyles,
+    iconAfter: /*#__PURE__*/React.createElement(Fragment, null, iconAfter ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.iconContainer,
       "data-custom-icon": true,
       as: "span"
-    }, iconAfter) : null, jsx(Box, {
+    }, iconAfter) : null, /*#__PURE__*/React.createElement(Box, {
       "data-right-arrow": true,
-      xcss: iconContainerStyles,
+      xcss: styles.iconContainer,
       as: "span"
-    }, jsx(ArrowRightIcon, {
+    }, /*#__PURE__*/React.createElement(ArrowRightIcon, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
       color: "currentColor",
       LEGACY_secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
@@ -170,14 +166,14 @@ var NestingItem = function NestingItem(props) {
     cssFn: mergedStyles
   });
   if (component) {
-    return jsx(CustomItem, _extends({
+    return /*#__PURE__*/React.createElement(CustomItem, _extends({
       ref: isForwardRefCheck(component) ? parentItemRef : null
     }, componentProps, {
       //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
       component: component
     }));
   }
-  return jsx(ButtonItem, _extends({
+  return /*#__PURE__*/React.createElement(ButtonItem, _extends({
     ref: activeParentRef
   }, componentProps));
 };

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

@@ -0,0 +1,10 @@
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._1ul9p3fh{min-width:15pc}
+._2lx21bp4{flex-direction:column}
+._4t3i1osq{height:100%}
+._bfhkxkvu{background-color:var(--_4p0s90)}
+._kqswh2mm{position:relative}
+._syaz1425{color:var(--_13a5t4u)}

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

@@ -1,26 +1,13 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import { N10, N500 } from '@atlaskit/theme/colors';
 var sidebarMinWidth = '240px';
-var sideNavStyles = css({
-  display: 'flex',
-  width: '100%',
-  minWidth: sidebarMinWidth,
-  height: '100%',
-  position: 'relative',
-  flexDirection: 'column',
-  backgroundColor: "var(--ds-surface, ".concat(N10, ")"),
-  color: "var(--ds-text-subtle, ".concat(N500, ")"),
-  overflow: 'hidden'
-});
+var sideNavStyles = null;
 
 /**
  * __Side navigation__
@@ -39,17 +26,22 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
     isServer = _props$isServer === void 0 ? false : _props$isServer,
     _props$isSSRPlacehold = props.isSSRPlaceholderEnabled,
     isSSRPlaceholderEnabled = _props$isSSRPlacehold === void 0 ? false : _props$isSSRPlacehold;
-  return jsx("nav", _extends({
+  return /*#__PURE__*/React.createElement("nav", _extends({
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
-    css: sideNavStyles,
     "data-vc": "side-navigation".concat(isServer ? '-ssr' : '')
   }, isServer && isSSRPlaceholderEnabled && {
     'data-ssr-placeholder': 'side-navigation-placeholder'
   }, !isServer && isSSRPlaceholderEnabled && {
     'data-ssr-placeholder-replace': 'side-navigation-placeholder'
-  }), jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+  }, {
+    className: ax(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _1ul9p3fh _4t3i1osq _kqswh2mm _2lx21bp4 _bfhkxkvu _syaz1425"]),
+    style: {
+      "--_4p0s90": ix("var(--ds-surface, ".concat(N10, ")")),
+      "--_13a5t4u": ix("var(--ds-text-subtle, ".concat(N500, ")"))
+    }
+  }), /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "notch"
   }, children));
 });

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

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { type CSSFn, 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) => jsx.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.
@@ -52,5 +51,5 @@ export type HeaderProps = {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
 export default Header;

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

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 export interface LoadingItemsProps {
     /**
      * Child items that will be loaded asynchronously.

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type HTMLAttributes } from 'react';
+import React from 'react';
 export interface NavigationContentProps {
     children: React.ReactNode;
     /**
@@ -24,5 +24,5 @@ export interface NavigationContentProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#content)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NavigationContent: import("react").ForwardRefExoticComponent<NavigationContentProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+declare const NavigationContent: React.ForwardRefExoticComponent<NavigationContentProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 export default NavigationContent;

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

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactNode } from 'react';
 export interface NavigationFooterProps {
     children: ReactNode;

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

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
 export interface NavigationHeaderProps {
     children: JSX.Element | JSX.Element[];
 }
@@ -15,5 +10,5 @@ export interface NavigationHeaderProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NavigationHeader: (props: NavigationHeaderProps) => jsx.JSX.Element;
+declare const NavigationHeader: (props: NavigationHeaderProps) => JSX.Element;
 export default NavigationHeader;

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import React from 'react';
-import { jsx } from '@emotion/react';
 export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
 export interface NestableNavigationContentProps {
     /**
@@ -86,5 +85,5 @@ export interface NestableNavigationContentProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NestableNavigationContent: (props: NestableNavigationContentProps) => jsx.JSX.Element;
+declare const NestableNavigationContent: (props: NestableNavigationContentProps) => JSX.Element;
 export default NestableNavigationContent;

package/dist/types/components/NestableNavigationContent/nesting-motion.d.ts

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type Ref } from 'react';
-import { jsx } from '@emotion/react';
+import React, { type Ref } from 'react';
 import { type Direction } from '@atlaskit/motion';
 interface ChildrenAsFunctionProps {
     'data-enter-from': string;
@@ -21,5 +16,5 @@ interface NestingMotionProps {
 /**
  * @internal
  */
-export declare const NestingMotion: (props: NestingMotionProps) => jsx.JSX.Element;
+export declare const NestingMotion: (props: NestingMotionProps) => JSX.Element;
 export {};

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

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { type CSSFn, 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) => jsx.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.
@@ -52,5 +51,5 @@ export type HeaderProps = {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
 export default Header;

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

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 export interface LoadingItemsProps {
     /**
      * Child items that will be loaded asynchronously.

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type HTMLAttributes } from 'react';
+import React from 'react';
 export interface NavigationContentProps {
     children: React.ReactNode;
     /**
@@ -24,5 +24,5 @@ export interface NavigationContentProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#content)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NavigationContent: import("react").ForwardRefExoticComponent<NavigationContentProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+declare const NavigationContent: React.ForwardRefExoticComponent<NavigationContentProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 export default NavigationContent;

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

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactNode } from 'react';
 export interface NavigationFooterProps {
     children: ReactNode;

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

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
 export interface NavigationHeaderProps {
     children: JSX.Element | JSX.Element[];
 }
@@ -15,5 +10,5 @@ export interface NavigationHeaderProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NavigationHeader: (props: NavigationHeaderProps) => jsx.JSX.Element;
+declare const NavigationHeader: (props: NavigationHeaderProps) => JSX.Element;
 export default NavigationHeader;

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import React from 'react';
-import { jsx } from '@emotion/react';
 export declare const ROOT_ID = "ATLASKIT_NESTED_ROOT";
 export interface NestableNavigationContentProps {
     /**
@@ -86,5 +85,5 @@ export interface NestableNavigationContentProps {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const NestableNavigationContent: (props: NestableNavigationContentProps) => jsx.JSX.Element;
+declare const NestableNavigationContent: (props: NestableNavigationContentProps) => JSX.Element;
 export default NestableNavigationContent;

package/dist/types-ts4.5/components/NestableNavigationContent/nesting-motion.d.ts

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type Ref } from 'react';
-import { jsx } from '@emotion/react';
+import React, { type Ref } from 'react';
 import { type Direction } from '@atlaskit/motion';
 interface ChildrenAsFunctionProps {
     'data-enter-from': string;
@@ -21,5 +16,5 @@ interface NestingMotionProps {
 /**
  * @internal
  */
-export declare const NestingMotion: (props: NestingMotionProps) => jsx.JSX.Element;
+export declare const NestingMotion: (props: NestingMotionProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "3.6.7",
+	"version": "4.0.0",
 	"description": "A highly composable side navigation component that supports nested views.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,16 +32,17 @@
 		"runReact18": true
 	},
 	"dependencies": {
+		"@atlaskit/css": "^0.7.0",
 		"@atlaskit/ds-lib": "^3.3.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/icon": "^23.4.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.5.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package/tsconfig.json

@@ -10,6 +10,5 @@
     "node_modules"
   ],
   "compilerOptions": {
-    "baseUrl": "./"
   }
 }