@atlaskit/navigation-system 4.5.0 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlassian/navigation-system
 
+## 4.5.1
+
+### Patch Changes
+
+- [`f5e53b7b1e130`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f5e53b7b1e130) -
+  Use IconRenderer for Themed IconButtons to mitigate their DOM be recreated during SSR -> SPA
+  hydration, which delays TTVC. This is an experiment behind
+  platform_themed_button_use_icon_renderer.
+
 ## 4.5.0
 
 ### Minor Changes

package/dist/cjs/ui/top-nav-items/icon-renderer.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ * 
+ * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element 
+ * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
+ * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
+ * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.
+ *
+ */
+var IconRenderer = function IconRenderer(_ref) {
+  var Icon = _ref.icon;
+  var isRenderProp = isIconRenderProp(Icon);
+  var iconProps = {
+    label: '',
+    color: 'currentColor',
+    size: (0, _platformFeatureFlags.fg)('platform_dst_button_chevron_sizing') ? function (iconName) {
+      return iconName.startsWith('Chevron') ? 'small' : 'medium';
+    } : undefined
+  };
+
+  // @ts-ignore - TS2322 TypeScript 5.9.2 upgrade
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isRenderProp ? Icon(iconProps) : /*#__PURE__*/_react.default.createElement(Icon, iconProps));
+};
+var _default = exports.default = IconRenderer;

package/dist/cjs/ui/top-nav-items/themed/button.js

@@ -15,9 +15,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _iconRenderer = _interopRequireDefault(require("../icon-renderer"));
 var _excluded = ["style", "xcss", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"],
   _excluded2 = ["appearance", "shape", "isSelected", "isDisabled"],
   _excluded3 = ["appearance", "shape", "isSelected", "isDisabled"],
@@ -185,7 +187,9 @@ var ThemedButton = exports.ThemedButton = /*#__PURE__*/(0, _react.forwardRef)(fu
     ref: ref
   }), IconBefore && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)([textButtonStyles.iconBefore])
-  }, /*#__PURE__*/_react.default.createElement(IconBefore, {
+  }, (0, _platformFeatureFlags.fg)('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+    icon: IconBefore
+  }) : /*#__PURE__*/_react.default.createElement(IconBefore, {
     label: "",
     color: "currentColor"
   })), /*#__PURE__*/_react.default.createElement("span", {
@@ -278,7 +282,9 @@ var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwar
           (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
           (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
         }
-      }), /*#__PURE__*/_react.default.createElement(Icon, {
+      }), (0, _platformFeatureFlags.fg)('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+        icon: Icon
+      }) : /*#__PURE__*/_react.default.createElement(Icon, {
         label: "",
         color: "currentColor"
       }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))

package/dist/es2019/ui/top-nav-items/icon-renderer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ * 
+ * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element 
+ * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
+ * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
+ * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.
+ *
+ */
+const IconRenderer = ({
+  icon: Icon
+}) => {
+  const isRenderProp = isIconRenderProp(Icon);
+  let iconProps = {
+    label: '',
+    color: 'currentColor',
+    size: fg('platform_dst_button_chevron_sizing') ? iconName => iconName.startsWith('Chevron') ? 'small' : 'medium' : undefined
+  };
+
+  // @ts-ignore - TS2322 TypeScript 5.9.2 upgrade
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderProp ? Icon(iconProps) : /*#__PURE__*/React.createElement(Icon, iconProps));
+};
+export default IconRenderer;

package/dist/es2019/ui/top-nav-items/themed/button.js

@@ -6,9 +6,11 @@ import React, { forwardRef } from 'react';
 import { cx } from '@compiled/react';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import IconRenderer from '../icon-renderer';
 
 /**
  * Props from primitives that we explicitly ignore and remove from spread props,
@@ -169,7 +171,9 @@ export const ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton({
     ref: ref
   }), IconBefore && /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.iconBefore])
-  }, /*#__PURE__*/React.createElement(IconBefore, {
+  }, fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+    icon: IconBefore
+  }) : /*#__PURE__*/React.createElement(IconBefore, {
     label: "",
     color: "currentColor"
   })), /*#__PURE__*/React.createElement("span", {
@@ -263,7 +267,9 @@ export const ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButto
       (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
       (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, e);
     }
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+    icon: Icon
+  }) : /*#__PURE__*/React.createElement(Icon, {
     label: "",
     color: "currentColor"
   }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));

package/dist/esm/ui/top-nav-items/icon-renderer.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ * 
+ * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element 
+ * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
+ * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
+ * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.
+ *
+ */
+var IconRenderer = function IconRenderer(_ref) {
+  var Icon = _ref.icon;
+  var isRenderProp = isIconRenderProp(Icon);
+  var iconProps = {
+    label: '',
+    color: 'currentColor',
+    size: fg('platform_dst_button_chevron_sizing') ? function (iconName) {
+      return iconName.startsWith('Chevron') ? 'small' : 'medium';
+    } : undefined
+  };
+
+  // @ts-ignore - TS2322 TypeScript 5.9.2 upgrade
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderProp ? Icon(iconProps) : /*#__PURE__*/React.createElement(Icon, iconProps));
+};
+export default IconRenderer;

package/dist/esm/ui/top-nav-items/themed/button.js

@@ -14,9 +14,11 @@ import React, { forwardRef } from 'react';
 import { cx } from '@compiled/react';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import IconRenderer from '../icon-renderer';
 
 /**
  * Props from primitives that we explicitly ignore and remove from spread props,
@@ -177,7 +179,9 @@ export var ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton(_ref4, r
     ref: ref
   }), IconBefore && /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.iconBefore])
-  }, /*#__PURE__*/React.createElement(IconBefore, {
+  }, fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+    icon: IconBefore
+  }) : /*#__PURE__*/React.createElement(IconBefore, {
     label: "",
     color: "currentColor"
   })), /*#__PURE__*/React.createElement("span", {
@@ -270,7 +274,9 @@ export var ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton(
           (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
           (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
         }
-      }), /*#__PURE__*/React.createElement(Icon, {
+      }), fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+        icon: Icon
+      }) : /*#__PURE__*/React.createElement(Icon, {
         label: "",
         color: "currentColor"
       }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label))

package/dist/types/ui/top-nav-items/icon-renderer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type IconProp } from '@atlaskit/button/new';
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element
+ * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
+ * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
+ * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.
+ *
+ */
+declare const IconRenderer: ({ icon: Icon }: {
+    icon: IconProp;
+}) => React.JSX.Element;
+export default IconRenderer;

package/dist/types/ui/top-nav-items/themed/button.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-import type { IconButtonProps } from '@atlaskit/button/new';
+import { type IconButtonProps } from '@atlaskit/button/new';
 import { type AnchorProps, type PressableProps } from '@atlaskit/primitives/compiled';
 type ButtonAppearance = 'default' | 'primary' | 'subtle';
 interface CommonProps {

package/dist/types-ts4.5/ui/top-nav-items/icon-renderer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type IconProp } from '@atlaskit/button/new';
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ * This is copied from @atlaskit/button to render IconButtons. Some IconButton's DOM element
+ * will be re-created during SSR -> SPA hydration without using this, which delays TTVC. As
+ * IconRenderer is already used in @atlaskit/button to mitigate this issue, add it here to
+ * mitigate the same issue for IconButtons in navigation-system, especially for ThemedIconButton.
+ *
+ */
+declare const IconRenderer: ({ icon: Icon }: {
+    icon: IconProp;
+}) => React.JSX.Element;
+export default IconRenderer;

package/dist/types-ts4.5/ui/top-nav-items/themed/button.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-import type { IconButtonProps } from '@atlaskit/button/new';
+import { type IconButtonProps } from '@atlaskit/button/new';
 import { type AnchorProps, type PressableProps } from '@atlaskit/primitives/compiled';
 type ButtonAppearance = 'default' | 'primary' | 'subtle';
 interface CommonProps {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "4.5.0",
+	"version": "4.5.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -189,6 +189,12 @@
 		},
 		"platform-dst-open-layer-observer-layer-type": {
 			"type": "boolean"
+		},
+		"platform_themed_button_use_icon_renderer": {
+			"type": "boolean"
+		},
+		"platform_dst_button_chevron_sizing": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"