@atlaskit/help-layout 6.3.34 → 6.3.35

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/help-layout
 
+## 6.3.35
+
+### Patch Changes
+
+- [`d8333dbe8ad56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d8333dbe8ad56) -
+  Upgrade help packages for React 19 compatibility (react-next wrapper)
+  - Upgraded `react` and `react-dom` peer dependencies to support `^18.2.0 || ^19.0.0`
+  - Added `react-intl` as a peer dependency where needed for internationalization
+  - Integrated `useRef` for transition handling in BackButton, SearchResults, and RightSidePanel
+  - Updated transition components to use `nodeRef` for better performance and animation control
+  - Refactored components to use forward refs for improved flexibility with animations
+
+- Updated dependencies
+
 ## 6.3.34
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -13,5 +13,5 @@ var createAndFire = exports.createAndFire = x.createAndFireEvent('atlaskit');
 var defaultAnalyticsAttributes = exports.defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "6.3.33"
+  packageVersion: "0.0.0-development"
 };

package/dist/cjs/components/DynamicHeader/NewChatButton.js

@@ -1,4 +1,4 @@
-/* NewChatButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* NewChatButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/DynamicHeader/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/Header/BackButton.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BackButton = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _reactTransitionGroup = require("react-transition-group");
@@ -13,6 +14,7 @@ var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _messages = require("../../messages");
 var _styled = require("./styled");
+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); }
 var BackButton = exports.BackButton = function BackButton(_ref) {
   var onClick = _ref.onClick,
     _ref$isVisible = _ref.isVisible,
@@ -20,6 +22,7 @@ var BackButton = exports.BackButton = function BackButton(_ref) {
     formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var transitionRef = (0, _react.useRef)(null);
   var handleOnClick = function handleOnClick(event) {
     if (onClick) {
       var _analyticsEvent = createAnalyticsEvent({
@@ -31,10 +34,12 @@ var BackButton = exports.BackButton = function BackButton(_ref) {
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isVisible,
     timeout: _styled.TRANSITION_DURATION_MS,
+    nodeRef: transitionRef,
     mountOnEnter: true,
     unmountOnExit: true
   }, function (state) {
     return /*#__PURE__*/_react.default.createElement(_styled.BackButtonContainer, {
+      ref: transitionRef,
       transitionState: state
     }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       onClick: function onClick(event) {
@@ -55,7 +60,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.3.33"
+      packageVersion: "0.0.0-development"
     }
   }, /*#__PURE__*/_react.default.createElement(BackButton, props));
 };

package/dist/cjs/components/Header/CloseButton.js

@@ -54,7 +54,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.3.33"
+      packageVersion: "0.0.0-development"
     }
   }, /*#__PURE__*/_react.default.createElement(CloseButton, props));
 };

package/dist/cjs/components/Header/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -47,16 +47,18 @@ var backButtonContainerTransitionStyles = {
     opacity: 0
   }
 };
-var BackButtonContainer = exports.BackButtonContainer = function BackButtonContainer(_ref3) {
+var BackButtonContainer = exports.BackButtonContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref3, ref) {
   var transitionState = _ref3.transitionState,
     children = _ref3.children;
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
     className: (0, _runtime.ax)(["_v5641kw6 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"]),
     style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
       "--_ejvfk7": (0, _runtime.ix)("left ".concat(TRANSITION_DURATION_MS, "ms, opacity ").concat(TRANSITION_DURATION_MS, "ms"))
     })
   }, children);
-};
+});
+BackButtonContainer.displayName = 'BackButtonContainer';
 var headerTitleStyles = null;
 var HeaderTitle = exports.HeaderTitle = function HeaderTitle(_ref4) {
   var children = _ref4.children;

package/dist/cjs/components/MessagesIntlProvider.js

@@ -6,15 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.MessagesIntlProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
 var _reactIntlNext = require("react-intl-next");
 var MessagesIntlProvider = exports.MessagesIntlProvider = function MessagesIntlProvider(_ref) {
   var _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale,
     children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
-    key: locale,
+  return /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+    key: "v6-".concat(locale),
     locale: locale
-  }, children);
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+    key: "v5-".concat(locale),
+    locale: locale
+  }, children));
 };
 var _default_1 = (0, _reactIntlNext.injectIntl)(MessagesIntlProvider);
 var _default = exports.default = _default_1;

package/dist/cjs/components/SideNav/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/analytics.js

@@ -5,5 +5,5 @@ export const createAndFire = x.createAndFireEvent('atlaskit');
 export const defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "6.3.33"
+  packageVersion: "0.0.0-development"
 };

package/dist/es2019/components/DynamicHeader/NewChatButton.js

@@ -1,4 +1,4 @@
-/* NewChatButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* NewChatButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Inline } from '@atlaskit/primitives/compiled';

package/dist/es2019/components/DynamicHeader/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/Header/BackButton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import { Transition } from 'react-transition-group';
@@ -16,6 +16,7 @@ export const BackButton = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const transitionRef = useRef(null);
   const handleOnClick = event => {
     if (onClick) {
       const analyticsEvent = createAnalyticsEvent({
@@ -27,9 +28,11 @@ export const BackButton = ({
   return /*#__PURE__*/React.createElement(Transition, {
     in: isVisible,
     timeout: TRANSITION_DURATION_MS,
+    nodeRef: transitionRef,
     mountOnEnter: true,
     unmountOnExit: true
   }, state => /*#__PURE__*/React.createElement(BackButtonContainer, {
+    ref: transitionRef,
     transitionState: state
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: event => {
@@ -49,7 +52,7 @@ const BackButtonWithContext = props => {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.3.33"
+      packageVersion: "0.0.0-development"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

package/dist/es2019/components/Header/CloseButton.js

@@ -50,7 +50,7 @@ const CloseButtonWithContext = props => {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.3.33"
+      packageVersion: "0.0.0-development"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

package/dist/es2019/components/Header/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./styled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import { Box } from '@atlaskit/primitives/compiled';
@@ -31,13 +31,16 @@ const backButtonContainerTransitionStyles = {
     opacity: 0
   }
 };
-export const BackButtonContainer = ({
+export const BackButtonContainer = /*#__PURE__*/React.forwardRef(({
   transitionState,
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}, ref) => /*#__PURE__*/React.createElement("div", {
+  ref: ref,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   style: backButtonContainerTransitionStyles[transitionState],
   className: ax(["_v5641kd4 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"])
-}, children);
+}, children));
+BackButtonContainer.displayName = 'BackButtonContainer';
 const headerTitleStyles = null;
 export const HeaderTitle = ({
   children

package/dist/es2019/components/MessagesIntlProvider.js

@@ -1,11 +1,15 @@
 import React from 'react';
-import { IntlProvider, injectIntl } from 'react-intl-next';
+import { IntlProvider as ReactIntlProvider } from 'react-intl';
+import { IntlProvider as ReactIntlNextProvider, injectIntl } from 'react-intl-next';
 export const MessagesIntlProvider = ({
   locale = 'en',
   children
-}) => /*#__PURE__*/React.createElement(IntlProvider, {
-  key: locale,
+}) => /*#__PURE__*/React.createElement(ReactIntlProvider, {
+  key: `v6-${locale}`,
   locale: locale
-}, children);
+}, /*#__PURE__*/React.createElement(ReactIntlNextProvider, {
+  key: `v5-${locale}`,
+  locale: locale
+}, children));
 const _default_1 = injectIntl(MessagesIntlProvider);
 export default _default_1;

package/dist/es2019/components/SideNav/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./styled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/analytics.js

@@ -5,5 +5,5 @@ export var createAndFire = x.createAndFireEvent('atlaskit');
 export var defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "6.3.33"
+  packageVersion: "0.0.0-development"
 };

package/dist/esm/components/DynamicHeader/NewChatButton.js

@@ -1,4 +1,4 @@
-/* NewChatButton.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* NewChatButton.tsx generated by @compiled/babel-plugin v0.39.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Inline } from '@atlaskit/primitives/compiled';

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';

package/dist/esm/components/Header/BackButton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import { Transition } from 'react-transition-group';
@@ -13,6 +13,7 @@ export var BackButton = function BackButton(_ref) {
     formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var transitionRef = useRef(null);
   var handleOnClick = function handleOnClick(event) {
     if (onClick) {
       var _analyticsEvent = createAnalyticsEvent({
@@ -24,10 +25,12 @@ export var BackButton = function BackButton(_ref) {
   return /*#__PURE__*/React.createElement(Transition, {
     in: isVisible,
     timeout: TRANSITION_DURATION_MS,
+    nodeRef: transitionRef,
     mountOnEnter: true,
     unmountOnExit: true
   }, function (state) {
     return /*#__PURE__*/React.createElement(BackButtonContainer, {
+      ref: transitionRef,
       transitionState: state
     }, /*#__PURE__*/React.createElement(Button, {
       onClick: function onClick(event) {
@@ -48,7 +51,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.3.33"
+      packageVersion: "0.0.0-development"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

package/dist/esm/components/Header/CloseButton.js

@@ -47,7 +47,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.3.33"
+      packageVersion: "0.0.0-development"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

package/dist/esm/components/Header/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./styled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -40,16 +40,18 @@ var backButtonContainerTransitionStyles = {
     opacity: 0
   }
 };
-export var BackButtonContainer = function BackButtonContainer(_ref3) {
+export var BackButtonContainer = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var transitionState = _ref3.transitionState,
     children = _ref3.children;
   return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
     className: ax(["_v5641kw6 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"]),
     style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
       "--_ejvfk7": ix("left ".concat(TRANSITION_DURATION_MS, "ms, opacity ").concat(TRANSITION_DURATION_MS, "ms"))
     })
   }, children);
-};
+});
+BackButtonContainer.displayName = 'BackButtonContainer';
 var headerTitleStyles = null;
 export var HeaderTitle = function HeaderTitle(_ref4) {
   var children = _ref4.children;

package/dist/esm/components/MessagesIntlProvider.js

@@ -1,13 +1,17 @@
 import React from 'react';
-import { IntlProvider, injectIntl } from 'react-intl-next';
+import { IntlProvider as ReactIntlProvider } from 'react-intl';
+import { IntlProvider as ReactIntlNextProvider, injectIntl } from 'react-intl-next';
 export var MessagesIntlProvider = function MessagesIntlProvider(_ref) {
   var _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(IntlProvider, {
-    key: locale,
+  return /*#__PURE__*/React.createElement(ReactIntlProvider, {
+    key: "v6-".concat(locale),
     locale: locale
-  }, children);
+  }, /*#__PURE__*/React.createElement(ReactIntlNextProvider, {
+    key: "v5-".concat(locale),
+    locale: locale
+  }, children));
 };
 var _default_1 = injectIntl(MessagesIntlProvider);
 export default _default_1;

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./index.compiled.css";
 import * as React from 'react';

package/dist/esm/components/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];

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

@@ -12,13 +12,15 @@ export declare const CloseButtonContainer: ({ inDynamicHeader, children, }: {
     inDynamicHeader: boolean;
 }) => JSX.Element;
 export declare const TRANSITION_DURATION_MS = 220;
-export declare const BackButtonContainer: ({ transitionState, children, }: {
+type BackButtonContainerProps = {
     children: React.ReactNode;
     transitionState: TransitionStatus;
-}) => JSX.Element;
+};
+export declare const BackButtonContainer: React.ForwardRefExoticComponent<BackButtonContainerProps & React.RefAttributes<HTMLDivElement>>;
 export declare const HeaderTitle: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const HeaderContent: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
+export {};

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

@@ -12,13 +12,15 @@ export declare const CloseButtonContainer: ({ inDynamicHeader, children, }: {
     inDynamicHeader: boolean;
 }) => JSX.Element;
 export declare const TRANSITION_DURATION_MS = 220;
-export declare const BackButtonContainer: ({ transitionState, children, }: {
+type BackButtonContainerProps = {
     children: React.ReactNode;
     transitionState: TransitionStatus;
-}) => JSX.Element;
+};
+export declare const BackButtonContainer: React.ForwardRefExoticComponent<BackButtonContainerProps & React.RefAttributes<HTMLDivElement>>;
 export declare const HeaderTitle: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const HeaderContent: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "6.3.34",
+	"version": "6.3.35",
 	"description": "Layout for the atlaskit/help component.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,18 +35,19 @@
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/icon": "^32.0.0",
+		"@atlaskit/icon": "^32.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6",
+		"@compiled/react": "^0.20.0",
 		"react-transition-group": "^4.4.1"
 	},
 	"peerDependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
+		"react": "^18.2.0 || ^19.0.0",
+		"react-dom": "^18.2.0 || ^19.0.0",
+		"react-intl": "^6.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {