@atlaskit/right-side-panel 3.0.15 → 3.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/components/RightSidePanel/index.js +3 -0
  3. package/dist/cjs/components/RightSidePanel/styled.js +5 -3
  4. package/dist/cjs/components/styled.js +1 -1
  5. package/dist/es2019/components/RightSidePanel/index.js +4 -2
  6. package/dist/es2019/components/RightSidePanel/styled.js +6 -4
  7. package/dist/es2019/components/styled.js +1 -1
  8. package/dist/esm/components/RightSidePanel/index.js +4 -2
  9. package/dist/esm/components/RightSidePanel/styled.js +5 -3
  10. package/dist/esm/components/styled.js +1 -1
  11. package/dist/types/components/RightSidePanel/index.d.ts +2 -2
  12. package/dist/types/components/RightSidePanel/styled.d.ts +4 -2
  13. package/dist/types-ts4.5/components/RightSidePanel/index.d.ts +2 -2
  14. package/dist/types-ts4.5/components/RightSidePanel/styled.d.ts +4 -2
  15. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/right-side-panel
2
2
 
3
+ ## 3.0.16
4
+
5
+ ### Patch Changes
6
+
7
+ - [`d8333dbe8ad56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d8333dbe8ad56) -
8
+ Upgrade help packages for React 19 compatibility (react-next wrapper)
9
+ - Upgraded `react` and `react-dom` peer dependencies to support `^18.2.0 || ^19.0.0`
10
+ - Added `react-intl` as a peer dependency where needed for internationalization
11
+ - Integrated `useRef` for transition handling in BackButton, SearchResults, and RightSidePanel
12
+ - Updated transition components to use `nodeRef` for better performance and animation control
13
+ - Refactored components to use forward refs for improved flexibility with animations
14
+
3
15
  ## 3.0.15
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/components/RightSidePanel/index.js CHANGED
@@ -29,6 +29,7 @@ var RightSidePanel = exports.RightSidePanel = /*#__PURE__*/function (_Component)
29
29
  }
30
30
  _this = _callSuper(this, RightSidePanel, [].concat(args));
31
31
  (0, _defineProperty2.default)(_this, "attachPanelTo", _this.props.attachPanelTo);
32
+ (0, _defineProperty2.default)(_this, "drawerRef", /*#__PURE__*/_react.default.createRef());
32
33
  (0, _defineProperty2.default)(_this, "state", {
33
34
  entered: false,
34
35
  container: undefined
@@ -65,6 +66,7 @@ var RightSidePanel = exports.RightSidePanel = /*#__PURE__*/function (_Component)
65
66
  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
66
67
  in: isOpen,
67
68
  timeout: _styled.transitionDurationMs,
69
+ nodeRef: this.drawerRef,
68
70
  mountOnEnter: mountOnEnter,
69
71
  unmountOnExit: unmountOnExit,
70
72
  appear: !skipAnimationOnMount,
@@ -74,6 +76,7 @@ var RightSidePanel = exports.RightSidePanel = /*#__PURE__*/function (_Component)
74
76
  onExited: onCloseAnimationFinished
75
77
  }, function (state) {
76
78
  return /*#__PURE__*/_react.default.createElement(_styled.RightSidePanelDrawer, {
79
+ ref: _this2.drawerRef,
77
80
  transitionState: state,
78
81
  width: _this2.props.width
79
82
  }, /*#__PURE__*/_react.default.createElement(_styled.RightSidePanelDrawerContent, {
package/dist/cjs/components/RightSidePanel/styled.js CHANGED
@@ -1,4 +1,4 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -32,12 +32,13 @@ var rightSidePanelDrawerTransitionStyles = function rightSidePanelDrawerTransiti
32
32
  }
33
33
  };
34
34
  };
35
- var RightSidePanelDrawer = exports.RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
35
+ var RightSidePanelDrawer = exports.RightSidePanelDrawer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
36
36
  var transitionState = _ref.transitionState,
37
37
  children = _ref.children,
38
38
  _ref$width = _ref.width,
39
39
  width = _ref$width === void 0 ? PANEL_WIDTH : _ref$width;
40
40
  return /*#__PURE__*/_react.default.createElement("div", {
41
+ ref: ref,
41
42
  style: _objectSpread({
42
43
  width: "".concat(width, "px"),
43
44
  flex: "0 0 ".concat(width, "px"),
@@ -45,7 +46,8 @@ var RightSidePanelDrawer = exports.RightSidePanelDrawer = function RightSidePane
45
46
  }, rightSidePanelDrawerTransitionStyles(width)[transitionState]),
46
47
  className: (0, _runtime.ax)(["_1reo15vq _18m915vq _kqswh2mm"])
47
48
  }, children);
48
- };
49
+ });
50
+ RightSidePanelDrawer.displayName = 'RightSidePanelDrawer';
49
51
  var rightSidePanelDrawerContentStyles = null;
50
52
  var RightSidePanelDrawerContent = exports.RightSidePanelDrawerContent = function RightSidePanelDrawerContent(_ref2) {
51
53
  var children = _ref2.children,
package/dist/cjs/components/styled.js CHANGED
@@ -1,4 +1,4 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
package/dist/es2019/components/RightSidePanel/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import React from 'react';
3
- import { Component } from 'react';
2
+ import React, { Component } from 'react';
4
3
  import { canUseDOM } from 'exenv';
5
4
  import { createPortal } from 'react-dom';
6
5
  import { Transition } from 'react-transition-group';
@@ -9,6 +8,7 @@ export class RightSidePanel extends Component {
9
8
  constructor(...args) {
10
9
  super(...args);
11
10
  _defineProperty(this, "attachPanelTo", this.props.attachPanelTo);
11
+ _defineProperty(this, "drawerRef", /*#__PURE__*/React.createRef());
12
12
  _defineProperty(this, "state", {
13
13
  entered: false,
14
14
  container: undefined
@@ -34,6 +34,7 @@ export class RightSidePanel extends Component {
34
34
  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
35
35
  in: isOpen,
36
36
  timeout: transitionDurationMs,
37
+ nodeRef: this.drawerRef,
37
38
  mountOnEnter: mountOnEnter,
38
39
  unmountOnExit: unmountOnExit,
39
40
  appear: !skipAnimationOnMount,
@@ -42,6 +43,7 @@ export class RightSidePanel extends Component {
42
43
  onEntered: onOpenAnimationFinished,
43
44
  onExited: onCloseAnimationFinished
44
45
  }, state => /*#__PURE__*/React.createElement(RightSidePanelDrawer, {
46
+ ref: this.drawerRef,
45
47
  transitionState: state,
46
48
  width: this.props.width
47
49
  }, /*#__PURE__*/React.createElement(RightSidePanelDrawerContent, {
package/dist/es2019/components/RightSidePanel/styled.js CHANGED
@@ -1,4 +1,4 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./styled.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
@@ -20,11 +20,12 @@ const rightSidePanelDrawerTransitionStyles = width => ({
20
20
  flex: `0 0 0`
21
21
  }
22
22
  });
23
- export const RightSidePanelDrawer = ({
23
+ export const RightSidePanelDrawer = /*#__PURE__*/React.forwardRef(({
24
24
  transitionState,
25
25
  children,
26
26
  width = PANEL_WIDTH
27
- }) => /*#__PURE__*/React.createElement("div", {
27
+ }, ref) => /*#__PURE__*/React.createElement("div", {
28
+ ref: ref,
28
29
  style: {
29
30
  width: `${width}px`,
30
31
  flex: `0 0 ${width}px`,
@@ -33,7 +34,8 @@ export const RightSidePanelDrawer = ({
33
34
  ...rightSidePanelDrawerTransitionStyles(width)[transitionState]
34
35
  },
35
36
  className: ax(["_1reo15vq _18m915vq _kqswh2mm"])
36
- }, children);
37
+ }, children));
38
+ RightSidePanelDrawer.displayName = 'RightSidePanelDrawer';
37
39
  const rightSidePanelDrawerContentStyles = null;
38
40
  export const RightSidePanelDrawerContent = ({
39
41
  children,
package/dist/es2019/components/styled.js CHANGED
@@ -1,4 +1,4 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./styled.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
package/dist/esm/components/RightSidePanel/index.js CHANGED
@@ -6,8 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
6
6
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
7
7
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
8
8
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
9
- import React from 'react';
10
- import { Component } from 'react';
9
+ import React, { Component } from 'react';
11
10
  import { canUseDOM } from 'exenv';
12
11
  import { createPortal } from 'react-dom';
13
12
  import { Transition } from 'react-transition-group';
@@ -21,6 +20,7 @@ export var RightSidePanel = /*#__PURE__*/function (_Component) {
21
20
  }
22
21
  _this = _callSuper(this, RightSidePanel, [].concat(args));
23
22
  _defineProperty(_this, "attachPanelTo", _this.props.attachPanelTo);
23
+ _defineProperty(_this, "drawerRef", /*#__PURE__*/React.createRef());
24
24
  _defineProperty(_this, "state", {
25
25
  entered: false,
26
26
  container: undefined
@@ -57,6 +57,7 @@ export var RightSidePanel = /*#__PURE__*/function (_Component) {
57
57
  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
58
58
  in: isOpen,
59
59
  timeout: transitionDurationMs,
60
+ nodeRef: this.drawerRef,
60
61
  mountOnEnter: mountOnEnter,
61
62
  unmountOnExit: unmountOnExit,
62
63
  appear: !skipAnimationOnMount,
@@ -66,6 +67,7 @@ export var RightSidePanel = /*#__PURE__*/function (_Component) {
66
67
  onExited: onCloseAnimationFinished
67
68
  }, function (state) {
68
69
  return /*#__PURE__*/React.createElement(RightSidePanelDrawer, {
70
+ ref: _this2.drawerRef,
69
71
  transitionState: state,
70
72
  width: _this2.props.width
71
73
  }, /*#__PURE__*/React.createElement(RightSidePanelDrawerContent, {
package/dist/esm/components/RightSidePanel/styled.js CHANGED
@@ -1,4 +1,4 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import "./styled.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -25,12 +25,13 @@ var rightSidePanelDrawerTransitionStyles = function rightSidePanelDrawerTransiti
25
25
  }
26
26
  };
27
27
  };
28
- export var RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
28
+ export var RightSidePanelDrawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
29
29
  var transitionState = _ref.transitionState,
30
30
  children = _ref.children,
31
31
  _ref$width = _ref.width,
32
32
  width = _ref$width === void 0 ? PANEL_WIDTH : _ref$width;
33
33
  return /*#__PURE__*/React.createElement("div", {
34
+ ref: ref,
34
35
  style: _objectSpread({
35
36
  width: "".concat(width, "px"),
36
37
  flex: "0 0 ".concat(width, "px"),
@@ -38,7 +39,8 @@ export var RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
38
39
  }, rightSidePanelDrawerTransitionStyles(width)[transitionState]),
39
40
  className: ax(["_1reo15vq _18m915vq _kqswh2mm"])
40
41
  }, children);
41
- };
42
+ });
43
+ RightSidePanelDrawer.displayName = 'RightSidePanelDrawer';
42
44
  var rightSidePanelDrawerContentStyles = null;
43
45
  export var RightSidePanelDrawerContent = function RightSidePanelDrawerContent(_ref2) {
44
46
  var children = _ref2.children,
package/dist/esm/components/styled.js CHANGED
@@ -1,4 +1,4 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./styled.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
package/dist/types/components/RightSidePanel/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import React from 'react';
2
- import { Component, type ReactNode } from 'react';
1
+ import React, { Component, type ReactNode } from 'react';
3
2
  export type TransitionStatus = 'unmounted' | 'exiting' | 'entering' | 'entered' | 'exited';
4
3
  export interface Props {
5
4
  attachPanelTo: string;
@@ -20,6 +19,7 @@ export interface State {
20
19
  }
21
20
  export declare class RightSidePanel extends Component<Props, State> {
22
21
  attachPanelTo: string;
22
+ private drawerRef;
23
23
  state: {
24
24
  entered: boolean;
25
25
  container: undefined;
package/dist/types/components/RightSidePanel/styled.d.ts CHANGED
@@ -5,12 +5,14 @@
5
5
  import React from 'react';
6
6
  import { type TransitionStatus } from '.';
7
7
  export declare const transitionDurationMs = 220;
8
- export declare const RightSidePanelDrawer: ({ transitionState, children, width, }: {
8
+ type RightSidePanelDrawerProps = {
9
9
  children: React.ReactNode;
10
10
  transitionState: TransitionStatus;
11
11
  width?: number;
12
- }) => JSX.Element;
12
+ };
13
+ export declare const RightSidePanelDrawer: React.ForwardRefExoticComponent<RightSidePanelDrawerProps & React.RefAttributes<HTMLDivElement>>;
13
14
  export declare const RightSidePanelDrawerContent: ({ children, width, }: {
14
15
  children: React.ReactNode;
15
16
  width?: number;
16
17
  }) => JSX.Element;
18
+ export {};
package/dist/types-ts4.5/components/RightSidePanel/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import React from 'react';
2
- import { Component, type ReactNode } from 'react';
1
+ import React, { Component, type ReactNode } from 'react';
3
2
  export type TransitionStatus = 'unmounted' | 'exiting' | 'entering' | 'entered' | 'exited';
4
3
  export interface Props {
5
4
  attachPanelTo: string;
@@ -20,6 +19,7 @@ export interface State {
20
19
  }
21
20
  export declare class RightSidePanel extends Component<Props, State> {
22
21
  attachPanelTo: string;
22
+ private drawerRef;
23
23
  state: {
24
24
  entered: boolean;
25
25
  container: undefined;
package/dist/types-ts4.5/components/RightSidePanel/styled.d.ts CHANGED
@@ -5,12 +5,14 @@
5
5
  import React from 'react';
6
6
  import { type TransitionStatus } from '.';
7
7
  export declare const transitionDurationMs = 220;
8
- export declare const RightSidePanelDrawer: ({ transitionState, children, width, }: {
8
+ type RightSidePanelDrawerProps = {
9
9
  children: React.ReactNode;
10
10
  transitionState: TransitionStatus;
11
11
  width?: number;
12
- }) => JSX.Element;
12
+ };
13
+ export declare const RightSidePanelDrawer: React.ForwardRefExoticComponent<RightSidePanelDrawerProps & React.RefAttributes<HTMLDivElement>>;
13
14
  export declare const RightSidePanelDrawerContent: ({ children, width, }: {
14
15
  children: React.ReactNode;
15
16
  width?: number;
16
17
  }) => JSX.Element;
18
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/right-side-panel",
3
- "version": "3.0.15",
3
+ "version": "3.0.16",
4
4
  "description": "A cross-product right-side-panel component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,15 +32,15 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/theme": "^22.0.0",
35
- "@atlaskit/tokens": "^11.0.0",
35
+ "@atlaskit/tokens": "^11.1.0",
36
36
  "@babel/runtime": "^7.0.0",
37
- "@compiled/react": "^0.18.6",
37
+ "@compiled/react": "^0.20.0",
38
38
  "exenv": "^1.2.2",
39
39
  "react-transition-group": "^4.4.1"
40
40
  },
41
41
  "peerDependencies": {
42
- "react": "^18.2.0",
43
- "react-dom": "^18.2.0",
42
+ "react": "^18.2.0 || ^19.0.0",
43
+ "react-dom": "^18.2.0 || ^19.0.0",
44
44
  "react-intl-next": "npm:react-intl@^5.18.1"
45
45
  },
46
46
  "devDependencies": {