@atlaskit/right-side-panel 3.0.15 → 3.0.17

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 (22) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/afm-cc/tsconfig.json +0 -3
  3. package/afm-jira/tsconfig.json +0 -3
  4. package/afm-products/tsconfig.json +0 -3
  5. package/dist/cjs/components/RightSidePanel/index.js +3 -0
  6. package/dist/cjs/components/RightSidePanel/styled.compiled.css +1 -1
  7. package/dist/cjs/components/RightSidePanel/styled.js +6 -6
  8. package/dist/cjs/components/styled.js +1 -1
  9. package/dist/es2019/components/RightSidePanel/index.js +4 -2
  10. package/dist/es2019/components/RightSidePanel/styled.compiled.css +1 -1
  11. package/dist/es2019/components/RightSidePanel/styled.js +7 -6
  12. package/dist/es2019/components/styled.js +1 -1
  13. package/dist/esm/components/RightSidePanel/index.js +4 -2
  14. package/dist/esm/components/RightSidePanel/styled.compiled.css +1 -1
  15. package/dist/esm/components/RightSidePanel/styled.js +6 -6
  16. package/dist/esm/components/styled.js +1 -1
  17. package/dist/types/components/RightSidePanel/index.d.ts +2 -2
  18. package/dist/types/components/RightSidePanel/styled.d.ts +4 -2
  19. package/dist/types-ts4.5/components/RightSidePanel/index.d.ts +2 -2
  20. package/dist/types-ts4.5/components/RightSidePanel/styled.d.ts +4 -2
  21. package/docs/0-intro.tsx +2 -2
  22. package/package.json +5 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/right-side-panel
2
2
 
3
+ ## 3.0.17
4
+
5
+ ### Patch Changes
6
+
7
+ - [`379cf9c4c25f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/379cf9c4c25f0) -
8
+ Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
9
+
10
+ ## 3.0.16
11
+
12
+ ### Patch Changes
13
+
14
+ - [`d8333dbe8ad56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d8333dbe8ad56) -
15
+ Upgrade help packages for React 19 compatibility (react-next wrapper)
16
+ - Upgraded `react` and `react-dom` peer dependencies to support `^18.2.0 || ^19.0.0`
17
+ - Added `react-intl` as a peer dependency where needed for internationalization
18
+ - Integrated `useRef` for transition handling in BackButton, SearchResults, and RightSidePanel
19
+ - Updated transition components to use `nodeRef` for better performance and animation control
20
+ - Refactored components to use forward refs for improved flexibility with animations
21
+
3
22
  ## 3.0.15
4
23
 
5
24
  ### Patch Changes
package/afm-cc/tsconfig.json CHANGED
@@ -23,9 +23,6 @@
23
23
  "../src/**/stories/**/*"
24
24
  ],
25
25
  "references": [
26
- {
27
- "path": "../../../design-system/theme/afm-cc/tsconfig.json"
28
- },
29
26
  {
30
27
  "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
31
28
  }
package/afm-jira/tsconfig.json CHANGED
@@ -23,9 +23,6 @@
23
23
  "../src/**/stories/**/*"
24
24
  ],
25
25
  "references": [
26
- {
27
- "path": "../../../design-system/theme/afm-jira/tsconfig.json"
28
- },
29
26
  {
30
27
  "path": "../../../design-system/tokens/afm-jira/tsconfig.json"
31
28
  }
package/afm-products/tsconfig.json CHANGED
@@ -23,9 +23,6 @@
23
23
  "../src/**/stories/**/*"
24
24
  ],
25
25
  "references": [
26
- {
27
- "path": "../../../design-system/theme/afm-products/tsconfig.json"
28
- },
29
26
  {
30
27
  "path": "../../../design-system/tokens/afm-products/tsconfig.json"
31
28
  }
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.compiled.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- ._1kl75djz{border-left:var(--_1na4za0)}._16jlkb7n{flex-grow:1}
2
+ ._1kl71o0q{border-left:3px solid var(--ds-border,#0b120e24)}._16jlkb7n{flex-grow:1}
3
3
  ._18m915vq{overflow-y:hidden}
4
4
  ._1bsb1xdr{width:var(--_h7eijm)}
5
5
  ._1o9zkb7n{flex-shrink:1}
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");
@@ -10,7 +10,6 @@ require("./styled.compiled.css");
10
10
  var _runtime = require("@compiled/react/runtime");
11
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
12
  var _react = _interopRequireDefault(require("react"));
13
- var _colors = require("@atlaskit/theme/colors");
14
13
  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; }
15
14
  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) { (0, _defineProperty2.default)(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; }
16
15
  var PANEL_WIDTH = 368;
@@ -32,12 +31,13 @@ var rightSidePanelDrawerTransitionStyles = function rightSidePanelDrawerTransiti
32
31
  }
33
32
  };
34
33
  };
35
- var RightSidePanelDrawer = exports.RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
34
+ var RightSidePanelDrawer = exports.RightSidePanelDrawer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
36
35
  var transitionState = _ref.transitionState,
37
36
  children = _ref.children,
38
37
  _ref$width = _ref.width,
39
38
  width = _ref$width === void 0 ? PANEL_WIDTH : _ref$width;
40
39
  return /*#__PURE__*/_react.default.createElement("div", {
40
+ ref: ref,
41
41
  style: _objectSpread({
42
42
  width: "".concat(width, "px"),
43
43
  flex: "0 0 ".concat(width, "px"),
@@ -45,17 +45,17 @@ var RightSidePanelDrawer = exports.RightSidePanelDrawer = function RightSidePane
45
45
  }, rightSidePanelDrawerTransitionStyles(width)[transitionState]),
46
46
  className: (0, _runtime.ax)(["_1reo15vq _18m915vq _kqswh2mm"])
47
47
  }, children);
48
- };
48
+ });
49
+ RightSidePanelDrawer.displayName = 'RightSidePanelDrawer';
49
50
  var rightSidePanelDrawerContentStyles = null;
50
51
  var RightSidePanelDrawerContent = exports.RightSidePanelDrawerContent = function RightSidePanelDrawerContent(_ref2) {
51
52
  var children = _ref2.children,
52
53
  _ref2$width = _ref2.width,
53
54
  width = _ref2$width === void 0 ? PANEL_WIDTH : _ref2$width;
54
55
  return /*#__PURE__*/_react.default.createElement("div", {
55
- className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl75djz _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1xdr _4t3i1osq _kqsw1n9t"]),
56
+ className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl71o0q _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1xdr _4t3i1osq _kqsw1n9t"]),
56
57
  style: {
57
58
  width: "".concat(width, "px"),
58
- "--_1na4za0": (0, _runtime.ix)("3px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))),
59
59
  "--_h7eijm": (0, _runtime.ix)("".concat(PANEL_WIDTH, "px"))
60
60
  }
61
61
  }, 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.compiled.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- ._1kl71osx{border-left:3px solid var(--ds-border,#ebecf0)}._16jlkb7n{flex-grow:1}
2
+ ._1kl71o0q{border-left:3px solid var(--ds-border,#0b120e24)}._16jlkb7n{flex-grow:1}
3
3
  ._18m915vq{overflow-y:hidden}
4
4
  ._1bsb1feq{width:23pc}
5
5
  ._1o9zkb7n{flex-shrink:1}
package/dist/es2019/components/RightSidePanel/styled.js CHANGED
@@ -1,8 +1,7 @@
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';
5
- import { N30 } from '@atlaskit/theme/colors';
6
5
  const PANEL_WIDTH = 368;
7
6
  export const transitionDurationMs = 220;
8
7
  const rightSidePanelDrawerStyles = null;
@@ -20,11 +19,12 @@ const rightSidePanelDrawerTransitionStyles = width => ({
20
19
  flex: `0 0 0`
21
20
  }
22
21
  });
23
- export const RightSidePanelDrawer = ({
22
+ export const RightSidePanelDrawer = /*#__PURE__*/React.forwardRef(({
24
23
  transitionState,
25
24
  children,
26
25
  width = PANEL_WIDTH
27
- }) => /*#__PURE__*/React.createElement("div", {
26
+ }, ref) => /*#__PURE__*/React.createElement("div", {
27
+ ref: ref,
28
28
  style: {
29
29
  width: `${width}px`,
30
30
  flex: `0 0 ${width}px`,
@@ -33,7 +33,8 @@ export const RightSidePanelDrawer = ({
33
33
  ...rightSidePanelDrawerTransitionStyles(width)[transitionState]
34
34
  },
35
35
  className: ax(["_1reo15vq _18m915vq _kqswh2mm"])
36
- }, children);
36
+ }, children));
37
+ RightSidePanelDrawer.displayName = 'RightSidePanelDrawer';
37
38
  const rightSidePanelDrawerContentStyles = null;
38
39
  export const RightSidePanelDrawerContent = ({
39
40
  children,
@@ -42,5 +43,5 @@ export const RightSidePanelDrawerContent = ({
42
43
  style: {
43
44
  width: `${width}px`
44
45
  },
45
- className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl71osx _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1feq _4t3i1osq _kqsw1n9t"])
46
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl71o0q _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1feq _4t3i1osq _kqsw1n9t"])
46
47
  }, 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.compiled.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- ._1kl75djz{border-left:var(--_1na4za0)}._16jlkb7n{flex-grow:1}
2
+ ._1kl71o0q{border-left:3px solid var(--ds-border,#0b120e24)}._16jlkb7n{flex-grow:1}
3
3
  ._18m915vq{overflow-y:hidden}
4
4
  ._1bsb1xdr{width:var(--_h7eijm)}
5
5
  ._1o9zkb7n{flex-shrink:1}
package/dist/esm/components/RightSidePanel/styled.js CHANGED
@@ -1,11 +1,10 @@
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";
5
5
  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; }
6
6
  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; }
7
7
  import React from 'react';
8
- import { N30 } from '@atlaskit/theme/colors';
9
8
  var PANEL_WIDTH = 368;
10
9
  export var transitionDurationMs = 220;
11
10
  var rightSidePanelDrawerStyles = null;
@@ -25,12 +24,13 @@ var rightSidePanelDrawerTransitionStyles = function rightSidePanelDrawerTransiti
25
24
  }
26
25
  };
27
26
  };
28
- export var RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
27
+ export var RightSidePanelDrawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
29
28
  var transitionState = _ref.transitionState,
30
29
  children = _ref.children,
31
30
  _ref$width = _ref.width,
32
31
  width = _ref$width === void 0 ? PANEL_WIDTH : _ref$width;
33
32
  return /*#__PURE__*/React.createElement("div", {
33
+ ref: ref,
34
34
  style: _objectSpread({
35
35
  width: "".concat(width, "px"),
36
36
  flex: "0 0 ".concat(width, "px"),
@@ -38,17 +38,17 @@ export var RightSidePanelDrawer = function RightSidePanelDrawer(_ref) {
38
38
  }, rightSidePanelDrawerTransitionStyles(width)[transitionState]),
39
39
  className: ax(["_1reo15vq _18m915vq _kqswh2mm"])
40
40
  }, children);
41
- };
41
+ });
42
+ RightSidePanelDrawer.displayName = 'RightSidePanelDrawer';
42
43
  var rightSidePanelDrawerContentStyles = null;
43
44
  export var RightSidePanelDrawerContent = function RightSidePanelDrawerContent(_ref2) {
44
45
  var children = _ref2.children,
45
46
  _ref2$width = _ref2.width,
46
47
  width = _ref2$width === void 0 ? PANEL_WIDTH : _ref2$width;
47
48
  return /*#__PURE__*/React.createElement("div", {
48
- className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl75djz _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1xdr _4t3i1osq _kqsw1n9t"]),
49
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1kl71o0q _bfhk1bhr _vchhusvi _2lx21bp4 _1bsb1xdr _4t3i1osq _kqsw1n9t"]),
49
50
  style: {
50
51
  width: "".concat(width, "px"),
51
- "--_1na4za0": ix("3px solid ".concat("var(--ds-border, ".concat(N30, ")"))),
52
52
  "--_h7eijm": ix("".concat(PANEL_WIDTH, "px"))
53
53
  }
54
54
  }, 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/docs/0-intro.tsx CHANGED
@@ -7,7 +7,7 @@ const intro: React.ReactElement = md`
7
7
  ${(
8
8
  <>
9
9
  {/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
10
- <div style={{ marginBottom: token('space.100', '0.5rem') }}>
10
+ <div style={{ marginBottom: token('space.100') }}>
11
11
  <AtlassianInternalWarning />
12
12
  </div>
13
13
  </>
@@ -73,7 +73,7 @@ const intro: React.ReactElement = md`
73
73
  ${
74
74
  (
75
75
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
76
- <div style={{ paddingTop: token('space.200', '16px') }}>
76
+ <div style={{ paddingTop: token('space.200') }}>
77
77
  <Button
78
78
  onClick={() => window.open('/examples/help/right-side-panel/0-Right-Side-Panel', '_self')}
79
79
  >
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.17",
4
4
  "description": "A cross-product right-side-panel component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -31,16 +31,15 @@
31
31
  }
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/theme": "^22.0.0",
35
- "@atlaskit/tokens": "^11.0.0",
34
+ "@atlaskit/tokens": "^11.4.0",
36
35
  "@babel/runtime": "^7.0.0",
37
- "@compiled/react": "^0.18.6",
36
+ "@compiled/react": "^0.20.0",
38
37
  "exenv": "^1.2.2",
39
38
  "react-transition-group": "^4.4.1"
40
39
  },
41
40
  "peerDependencies": {
42
- "react": "^18.2.0",
43
- "react-dom": "^18.2.0",
41
+ "react": "^18.2.0 || ^19.0.0",
42
+ "react-dom": "^18.2.0 || ^19.0.0",
44
43
  "react-intl-next": "npm:react-intl@^5.18.1"
45
44
  },
46
45
  "devDependencies": {