@atlaskit/side-nav-items 1.11.0 → 1.12.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/side-nav-items
 
+## 1.12.1
+
+### Patch Changes
+
+- [`a7ccccca79cb9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a7ccccca79cb9) -
+  Clean up feature gate navx-4169-improve-gsn-code
+
+## 1.12.0
+
+### Minor Changes
+
+- [`f48c03e011b92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f48c03e011b92) -
+  Updated usage of `SideNavContent` to `SideNavBody` due to rename in `@atlaskit/navigation-system`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.11.0
 
 ### Minor Changes

package/dist/cjs/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -1,23 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LazyDragHandle = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+exports.LazyDragHandle = LazyDragHandle;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var LazyDragHandleComponent = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
-    './drag-handle'));
-  });
-});
-var LazyDragHandle = exports.LazyDragHandle = (0, _platformFeatureFlagsReact.componentWithFG)('navx-4169-improve-gsn-code', LazyDragHandleNEW, LazyDragHandleComponent);
-
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
  *
@@ -34,7 +25,7 @@ var LazyDragHandle = exports.LazyDragHandle = (0, _platformFeatureFlagsReact.com
  * By deferring to after mount, both server and initial client render agree on `null`,
  * and the lazy import + Suspense only kicks in after hydration is complete.
  */
-function LazyDragHandleNEW() {
+function LazyDragHandle() {
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     Component = _useState2[0],
@@ -52,4 +43,10 @@ function LazyDragHandleNEW() {
   return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(Component, null));
-}
+}
+var LazyDragHandleComponent = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+    './drag-handle'));
+  });
+});

package/dist/cjs/ui/menu-item/menu-item.js

@@ -303,9 +303,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     size: "small",
     maxLines: 1,
     ref: descriptionRef
-  }, description)), hasDragIndicator ? (0, _platformFeatureFlags.fg)('navx-4169-improve-gsn-code') ? /*#__PURE__*/_react.default.createElement(_lazyDragHandle.LazyDragHandle, null) : /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: null
-  }, /*#__PURE__*/_react.default.createElement(_lazyDragHandle.LazyDragHandle, null)) : null, dropIndicator);
+  }, description)), hasDragIndicator ? /*#__PURE__*/_react.default.createElement(_lazyDragHandle.LazyDragHandle, null) : null, dropIndicator);
 
   /**
    *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.

package/dist/es2019/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -1,10 +1,4 @@
 import React, { lazy, Suspense, useEffect, useState } from 'react';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-const LazyDragHandleComponent = /*#__PURE__*/lazy(() => {
-  return import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
-  './drag-handle');
-});
-export const LazyDragHandle = componentWithFG('navx-4169-improve-gsn-code', LazyDragHandleNEW, LazyDragHandleComponent);
 
 /**
  * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
@@ -22,7 +16,7 @@ export const LazyDragHandle = componentWithFG('navx-4169-improve-gsn-code', Lazy
  * By deferring to after mount, both server and initial client render agree on `null`,
  * and the lazy import + Suspense only kicks in after hydration is complete.
  */
-function LazyDragHandleNEW() {
+export function LazyDragHandle() {
   const [Component, setComponent] = useState(null);
   useEffect(() => {
     // Using a function updater to store the component reference itself
@@ -35,4 +29,8 @@ function LazyDragHandleNEW() {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
   }, /*#__PURE__*/React.createElement(Component, null));
-}
+}
+const LazyDragHandleComponent = /*#__PURE__*/lazy(() => {
+  return import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+  './drag-handle');
+});

package/dist/es2019/ui/menu-item/menu-item.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu-item.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { Suspense, useCallback, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { AvatarContext } from '@atlaskit/avatar';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
@@ -293,9 +293,7 @@ const MenuItemBaseNoRef = ({
     size: "small",
     maxLines: 1,
     ref: descriptionRef
-  }, description)), hasDragIndicator ? fg('navx-4169-improve-gsn-code') ? /*#__PURE__*/React.createElement(LazyDragHandle, null) : /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(LazyDragHandle, null)) : null, dropIndicator);
+  }, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(LazyDragHandle, null) : null, dropIndicator);
 
   /**
    *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.

package/dist/esm/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -1,11 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { lazy, Suspense, useEffect, useState } from 'react';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-var LazyDragHandleComponent = /*#__PURE__*/lazy(function () {
-  return import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
-  './drag-handle');
-});
-export var LazyDragHandle = componentWithFG('navx-4169-improve-gsn-code', LazyDragHandleNEW, LazyDragHandleComponent);
 
 /**
  * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
@@ -23,7 +17,7 @@ export var LazyDragHandle = componentWithFG('navx-4169-improve-gsn-code', LazyDr
  * By deferring to after mount, both server and initial client render agree on `null`,
  * and the lazy import + Suspense only kicks in after hydration is complete.
  */
-function LazyDragHandleNEW() {
+export function LazyDragHandle() {
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     Component = _useState2[0],
@@ -41,4 +35,8 @@ function LazyDragHandleNEW() {
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
   }, /*#__PURE__*/React.createElement(Component, null));
-}
+}
+var LazyDragHandleComponent = /*#__PURE__*/lazy(function () {
+  return import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
+  './drag-handle');
+});

package/dist/esm/ui/menu-item/menu-item.js

@@ -5,7 +5,7 @@ import "./menu-item.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; }
-import React, { Suspense, useCallback, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { AvatarContext } from '@atlaskit/avatar';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
@@ -294,9 +294,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     size: "small",
     maxLines: 1,
     ref: descriptionRef
-  }, description)), hasDragIndicator ? fg('navx-4169-improve-gsn-code') ? /*#__PURE__*/React.createElement(LazyDragHandle, null) : /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(LazyDragHandle, null)) : null, dropIndicator);
+  }, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(LazyDragHandle, null) : null, dropIndicator);
 
   /**
    *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.

package/dist/types/ui/menu-item/drag-handle/lazy-drag-handle.d.ts

@@ -1,2 +1,18 @@
 import React from 'react';
-export declare const LazyDragHandle: React.FC<React.RefAttributes<unknown>>;
+/**
+ * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
+ *
+ * This avoids hydration errors because:
+ * - On the server: `Component` is `null`, so nothing is rendered.
+ * - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
+ * - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
+ *   that is scoped to this component only.
+ *
+ * This is preferable to using `<Suspense>` around `React.lazy` directly in the parent,
+ * because `<Suspense fallback={null}>` on the server renders nothing, but after hydration
+ * the lazy component will resolve and produce DOM that doesn't match the server HTML.
+ *
+ * By deferring to after mount, both server and initial client render agree on `null`,
+ * and the lazy import + Suspense only kicks in after hydration is complete.
+ */
+export declare function LazyDragHandle(): React.JSX.Element | null;

package/dist/types-ts4.5/ui/menu-item/drag-handle/lazy-drag-handle.d.ts

@@ -1,2 +1,18 @@
 import React from 'react';
-export declare const LazyDragHandle: React.FC<React.RefAttributes<unknown>>;
+/**
+ * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
+ *
+ * This avoids hydration errors because:
+ * - On the server: `Component` is `null`, so nothing is rendered.
+ * - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
+ * - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
+ *   that is scoped to this component only.
+ *
+ * This is preferable to using `<Suspense>` around `React.lazy` directly in the parent,
+ * because `<Suspense fallback={null}>` on the server renders nothing, but after hydration
+ * the lazy component will resolve and produce DOM that doesn't match the server HTML.
+ *
+ * By deferring to after mount, both server and initial client render agree on `null`,
+ * and the lazy import + Suspense only kicks in after hydration is complete.
+ */
+export declare function LazyDragHandle(): React.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-nav-items",
-	"version": "1.11.0",
+	"version": "1.12.1",
 	"description": "Menu items and elements for the side nav area.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,21 +29,20 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.10.0",
+		"@atlaskit/analytics-next": "^11.2.0",
+		"@atlaskit/avatar": "^25.11.0",
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^33.0.0",
+		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popup": "^4.14.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -57,13 +56,13 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/app-provider": "^4.1.0",
+		"@atlaskit/app-provider": "^4.2.0",
 		"@atlaskit/lozenge": "^13.5.0",
-		"@atlaskit/navigation-system": "^6.4.0",
+		"@atlaskit/navigation-system": "^7.1.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
-		"@atlassian/testing-library": "^0.4.0",
+		"@atlassian/testing-library": "^0.5.0",
 		"@testing-library/react": "^16.3.0",
 		"bind-event-listener": "^3.0.0",
 		"react-dom": "^18.2.0"
@@ -109,9 +108,6 @@
 		},
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
-		},
-		"navx-4169-improve-gsn-code": {
-			"type": "boolean"
 		}
 	}
 }