@atlaskit/panel 0.4.9 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/panel
 
+## 0.6.0
+
+### Minor Changes
+
+- [`303da7ab728`](https://bitbucket.org/atlassian/atlassian-frontend/commits/303da7ab728) - Update class components for the bitbucket panel to be functional components and internationalize the labels for A11Y.
+
+## 0.4.10
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 0.4.9
 
 ### Patch Changes

package/dist/cjs/components/Panel/Panel.js

@@ -9,19 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -31,56 +19,27 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Panel = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(Panel, _PureComponent);
-
-  var _super = _createSuper(Panel);
-
-  function Panel() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Panel);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isExpanded: !!_this.props.isDefaultExpanded
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function () {
-      _this.setState(function (prevState) {
-        return {
-          isExpanded: !prevState.isExpanded
-        };
-      });
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(Panel, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          header = _this$props.header;
-      var isExpanded = this.state.isExpanded;
-      return /*#__PURE__*/_react.default.createElement(_PanelStateless.default, {
-        header: header,
-        isExpanded: isExpanded,
-        onChange: this.handleChange
-      }, children);
-    }
-  }]);
-  return Panel;
-}(_react.PureComponent);
-
-exports.default = Panel;
-(0, _defineProperty2.default)(Panel, "defaultProps", {
-  isDefaultExpanded: false
-});
+var PanelState = function PanelState(_ref) {
+  var _ref$isDefaultExpande = _ref.isDefaultExpanded,
+      isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
+      children = _ref.children,
+      header = _ref.header;
+
+  var _useState = (0, _react.useState)(isDefaultExpanded),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isExpanded = _useState2[0],
+      setisExpanded = _useState2[1];
+
+  var handleChange = function handleChange() {
+    setisExpanded(!isExpanded);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_PanelStateless.default, {
+    header: header,
+    isExpanded: isExpanded,
+    onChange: handleChange
+  }, children);
+};
+
+var _default = PanelState;
+exports.default = _default;

package/dist/cjs/components/Panel/PanelStateless.js

@@ -9,22 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
@@ -37,54 +27,50 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var PanelStateless = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(PanelStateless, _PureComponent);
-
-  var _super = _createSuper(PanelStateless);
-
-  function PanelStateless() {
-    (0, _classCallCheck2.default)(this, PanelStateless);
-    return _super.apply(this, arguments);
+var i18n = (0, _reactIntlNext.defineMessages)({
+  collapse: {
+    id: 'bitbucket.panel-collapse.message',
+    defaultMessage: 'collapse',
+    description: 'Label on the panel to signal that the user can collapse the panel.'
+  },
+  expand: {
+    id: 'bitbucket.panel-expand.message',
+    defaultMessage: 'expand',
+    description: 'Label on the panel to signal that the user can expand the panel.'
   }
+});
 
-  (0, _createClass2.default)(PanelStateless, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          header = _this$props.header,
-          isExpanded = _this$props.isExpanded,
-          onChange = _this$props.onChange;
-      return /*#__PURE__*/_react.default.createElement(styles.PanelWrapper, null, /*#__PURE__*/_react.default.createElement(styles.PanelHeader, {
-        onClick: function onClick() {
-          return onChange(!isExpanded);
-        }
-      }, /*#__PURE__*/_react.default.createElement(styles.ButtonWrapper, {
-        isHidden: isExpanded
-      }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
-        appearance: "subtle",
-        "aria-expanded": isExpanded,
-        spacing: "none",
-        iconBefore: isExpanded ? /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-          label: "collapse"
-        }) : /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
-          label: "expand"
-        })
-      })), /*#__PURE__*/_react.default.createElement("span", null, header)), /*#__PURE__*/_react.default.createElement(_reactAnimateHeight.default, {
-        duration: 200,
-        easing: "linear",
-        height: isExpanded ? 'auto' : 0
-      }, children));
+var PanelStateless = function PanelStateless(_ref) {
+  var children = _ref.children,
+      header = _ref.header,
+      _ref$isExpanded = _ref.isExpanded,
+      isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+      onChange = _ref.onChange;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var i18nExpandText = intl.formatMessage(i18n.expand);
+  var i18nCollapseText = intl.formatMessage(i18n.collapse);
+  return /*#__PURE__*/_react.default.createElement(styles.PanelWrapper, null, /*#__PURE__*/_react.default.createElement(styles.PanelHeader, {
+    onClick: function onClick() {
+      return onChange(!isExpanded);
     }
-  }]);
-  return PanelStateless;
-}(_react.PureComponent);
-
-exports.default = PanelStateless;
-(0, _defineProperty2.default)(PanelStateless, "defaultProps", {
-  isExpanded: false
-});
+  }, /*#__PURE__*/_react.default.createElement(styles.ButtonWrapper, {
+    isHidden: isExpanded
+  }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    appearance: "subtle",
+    "aria-expanded": isExpanded,
+    spacing: "none",
+    iconBefore: isExpanded ? /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+      label: i18nCollapseText
+    }) : /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+      label: i18nExpandText
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", null, header)), /*#__PURE__*/_react.default.createElement(_reactAnimateHeight.default, {
+    duration: 200,
+    easing: "linear",
+    height: isExpanded ? 'auto' : 0,
+    className: "panel-content"
+  }, children));
+};
+
+var _default = PanelStateless;
+exports.default = _default;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/panel",
-	"version": "0.4.9"
+	"version": "0.6.0"
 }

package/dist/es2019/components/Panel/Panel.js

@@ -1,38 +1,22 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 import PanelStateless from './PanelStateless';
-export default class Panel extends PureComponent {
-  constructor(...args) {
-    super(...args);
 
-    _defineProperty(this, "state", {
-      isExpanded: !!this.props.isDefaultExpanded
-    });
+const PanelState = ({
+  isDefaultExpanded = false,
+  children,
+  header
+}) => {
+  const [isExpanded, setisExpanded] = useState(isDefaultExpanded);
 
-    _defineProperty(this, "handleChange", () => {
-      this.setState(prevState => ({
-        isExpanded: !prevState.isExpanded
-      }));
-    });
-  }
+  const handleChange = () => {
+    setisExpanded(!isExpanded);
+  };
 
-  render() {
-    const {
-      children,
-      header
-    } = this.props;
-    const {
-      isExpanded
-    } = this.state;
-    return /*#__PURE__*/React.createElement(PanelStateless, {
-      header: header,
-      isExpanded: isExpanded,
-      onChange: this.handleChange
-    }, children);
-  }
+  return /*#__PURE__*/React.createElement(PanelStateless, {
+    header: header,
+    isExpanded: isExpanded,
+    onChange: handleChange
+  }, children);
+};
 
-}
-
-_defineProperty(Panel, "defaultProps", {
-  isDefaultExpanded: false
-});
+export default PanelState;

package/dist/es2019/components/Panel/PanelStateless.js

@@ -1,40 +1,51 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import AnimateHeight from 'react-animate-height';
+import { defineMessages, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import * as styles from './styledPanel';
-export default class PanelStateless extends PureComponent {
-  render() {
-    const {
-      children,
-      header,
-      isExpanded,
-      onChange
-    } = this.props;
-    return /*#__PURE__*/React.createElement(styles.PanelWrapper, null, /*#__PURE__*/React.createElement(styles.PanelHeader, {
-      onClick: () => onChange(!isExpanded)
-    }, /*#__PURE__*/React.createElement(styles.ButtonWrapper, {
-      isHidden: isExpanded
-    }, /*#__PURE__*/React.createElement(Button, {
-      appearance: "subtle",
-      "aria-expanded": isExpanded,
-      spacing: "none",
-      iconBefore: isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
-        label: "collapse"
-      }) : /*#__PURE__*/React.createElement(ChevronRightIcon, {
-        label: "expand"
-      })
-    })), /*#__PURE__*/React.createElement("span", null, header)), /*#__PURE__*/React.createElement(AnimateHeight, {
-      duration: 200,
-      easing: "linear",
-      height: isExpanded ? 'auto' : 0
-    }, children));
+const i18n = defineMessages({
+  collapse: {
+    id: 'bitbucket.panel-collapse.message',
+    defaultMessage: 'collapse',
+    description: 'Label on the panel to signal that the user can collapse the panel.'
+  },
+  expand: {
+    id: 'bitbucket.panel-expand.message',
+    defaultMessage: 'expand',
+    description: 'Label on the panel to signal that the user can expand the panel.'
   }
+});
 
-}
+const PanelStateless = ({
+  children,
+  header,
+  isExpanded = false,
+  onChange
+}) => {
+  const intl = useIntl();
+  const i18nExpandText = intl.formatMessage(i18n.expand);
+  const i18nCollapseText = intl.formatMessage(i18n.collapse);
+  return /*#__PURE__*/React.createElement(styles.PanelWrapper, null, /*#__PURE__*/React.createElement(styles.PanelHeader, {
+    onClick: () => onChange(!isExpanded)
+  }, /*#__PURE__*/React.createElement(styles.ButtonWrapper, {
+    isHidden: isExpanded
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    "aria-expanded": isExpanded,
+    spacing: "none",
+    iconBefore: isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: i18nCollapseText
+    }) : /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: i18nExpandText
+    })
+  })), /*#__PURE__*/React.createElement("span", null, header)), /*#__PURE__*/React.createElement(AnimateHeight, {
+    duration: 200,
+    easing: "linear",
+    height: isExpanded ? 'auto' : 0,
+    className: "panel-content"
+  }, children));
+};
 
-_defineProperty(PanelStateless, "defaultProps", {
-  isExpanded: false
-});
+export default PanelStateless;

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/panel",
-	"version": "0.4.9"
+	"version": "0.6.0"
 }

package/dist/esm/components/Panel/Panel.js

@@ -1,69 +1,27 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { PureComponent } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
 import PanelStateless from './PanelStateless';
 
-var Panel = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Panel, _PureComponent);
-
-  var _super = _createSuper(Panel);
-
-  function Panel() {
-    var _this;
-
-    _classCallCheck(this, Panel);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      isExpanded: !!_this.props.isDefaultExpanded
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function () {
-      _this.setState(function (prevState) {
-        return {
-          isExpanded: !prevState.isExpanded
-        };
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(Panel, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          header = _this$props.header;
-      var isExpanded = this.state.isExpanded;
-      return /*#__PURE__*/React.createElement(PanelStateless, {
-        header: header,
-        isExpanded: isExpanded,
-        onChange: this.handleChange
-      }, children);
-    }
-  }]);
-
-  return Panel;
-}(PureComponent);
-
-_defineProperty(Panel, "defaultProps", {
-  isDefaultExpanded: false
-});
-
-export { Panel as default };
+var PanelState = function PanelState(_ref) {
+  var _ref$isDefaultExpande = _ref.isDefaultExpanded,
+      isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
+      children = _ref.children,
+      header = _ref.header;
+
+  var _useState = useState(isDefaultExpanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      isExpanded = _useState2[0],
+      setisExpanded = _useState2[1];
+
+  var handleChange = function handleChange() {
+    setisExpanded(!isExpanded);
+  };
+
+  return /*#__PURE__*/React.createElement(PanelStateless, {
+    header: header,
+    isExpanded: isExpanded,
+    onChange: handleChange
+  }, children);
+};
+
+export default PanelState;

package/dist/esm/components/Panel/PanelStateless.js

@@ -1,68 +1,53 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { PureComponent } from 'react';
+import React from 'react';
 import AnimateHeight from 'react-animate-height';
+import { defineMessages, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import * as styles from './styledPanel';
-
-var PanelStateless = /*#__PURE__*/function (_PureComponent) {
-  _inherits(PanelStateless, _PureComponent);
-
-  var _super = _createSuper(PanelStateless);
-
-  function PanelStateless() {
-    _classCallCheck(this, PanelStateless);
-
-    return _super.apply(this, arguments);
+var i18n = defineMessages({
+  collapse: {
+    id: 'bitbucket.panel-collapse.message',
+    defaultMessage: 'collapse',
+    description: 'Label on the panel to signal that the user can collapse the panel.'
+  },
+  expand: {
+    id: 'bitbucket.panel-expand.message',
+    defaultMessage: 'expand',
+    description: 'Label on the panel to signal that the user can expand the panel.'
   }
-
-  _createClass(PanelStateless, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          header = _this$props.header,
-          isExpanded = _this$props.isExpanded,
-          onChange = _this$props.onChange;
-      return /*#__PURE__*/React.createElement(styles.PanelWrapper, null, /*#__PURE__*/React.createElement(styles.PanelHeader, {
-        onClick: function onClick() {
-          return onChange(!isExpanded);
-        }
-      }, /*#__PURE__*/React.createElement(styles.ButtonWrapper, {
-        isHidden: isExpanded
-      }, /*#__PURE__*/React.createElement(Button, {
-        appearance: "subtle",
-        "aria-expanded": isExpanded,
-        spacing: "none",
-        iconBefore: isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
-          label: "collapse"
-        }) : /*#__PURE__*/React.createElement(ChevronRightIcon, {
-          label: "expand"
-        })
-      })), /*#__PURE__*/React.createElement("span", null, header)), /*#__PURE__*/React.createElement(AnimateHeight, {
-        duration: 200,
-        easing: "linear",
-        height: isExpanded ? 'auto' : 0
-      }, children));
-    }
-  }]);
-
-  return PanelStateless;
-}(PureComponent);
-
-_defineProperty(PanelStateless, "defaultProps", {
-  isExpanded: false
 });
 
-export { PanelStateless as default };
+var PanelStateless = function PanelStateless(_ref) {
+  var children = _ref.children,
+      header = _ref.header,
+      _ref$isExpanded = _ref.isExpanded,
+      isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+      onChange = _ref.onChange;
+  var intl = useIntl();
+  var i18nExpandText = intl.formatMessage(i18n.expand);
+  var i18nCollapseText = intl.formatMessage(i18n.collapse);
+  return /*#__PURE__*/React.createElement(styles.PanelWrapper, null, /*#__PURE__*/React.createElement(styles.PanelHeader, {
+    onClick: function onClick() {
+      return onChange(!isExpanded);
+    }
+  }, /*#__PURE__*/React.createElement(styles.ButtonWrapper, {
+    isHidden: isExpanded
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    "aria-expanded": isExpanded,
+    spacing: "none",
+    iconBefore: isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: i18nCollapseText
+    }) : /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: i18nExpandText
+    })
+  })), /*#__PURE__*/React.createElement("span", null, header)), /*#__PURE__*/React.createElement(AnimateHeight, {
+    duration: 200,
+    easing: "linear",
+    height: isExpanded ? 'auto' : 0,
+    className: "panel-content"
+  }, children));
+};
+
+export default PanelStateless;

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/panel",
-	"version": "0.4.9"
+	"version": "0.6.0"
 }

package/dist/types/components/Panel/Panel.d.ts

@@ -1,20 +1,8 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { BasePanelProps } from './PanelStateless';
 declare type Props = BasePanelProps & {
     /** Defines whether the panel is expanded by default. */
     isDefaultExpanded?: boolean;
 };
-declare type State = {
-    isExpanded: boolean;
-};
-export default class Panel extends PureComponent<Props, State> {
-    static defaultProps: {
-        isDefaultExpanded: boolean;
-    };
-    state: {
-        isExpanded: boolean;
-    };
-    handleChange: () => void;
-    render(): JSX.Element;
-}
-export {};
+declare const PanelState: FC<Props>;
+export default PanelState;

package/dist/types/components/Panel/PanelStateless.d.ts

@@ -1,19 +1,15 @@
-import { PureComponent, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 export declare type BasePanelProps = {
     /** Content to be shown inside the panel. */
     children?: ReactNode;
     /** Header to render on the panel. Clicking the header expands and collapses the panel */
     header?: ReactNode;
 };
-export declare type Props = BasePanelProps & {
+declare type PanelState = BasePanelProps & {
     /** Defines whether the panel is expanded by default. */
     isExpanded: boolean;
     /** This callback is called when panel is expanded/collapsed */
     onChange: (isExpanded: boolean) => void;
 };
-export default class PanelStateless extends PureComponent<Props> {
-    static defaultProps: {
-        isExpanded: boolean;
-    };
-    render(): JSX.Element;
-}
+declare const PanelStateless: FC<PanelState>;
+export default PanelStateless;

package/dist/types-ts4.0/components/Panel/Panel.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { BasePanelProps } from './PanelStateless';
+declare type Props = BasePanelProps & {
+    /** Defines whether the panel is expanded by default. */
+    isDefaultExpanded?: boolean;
+};
+declare const PanelState: FC<Props>;
+export default PanelState;

package/dist/types-ts4.0/components/Panel/PanelStateless.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+export declare type BasePanelProps = {
+    /** Content to be shown inside the panel. */
+    children?: ReactNode;
+    /** Header to render on the panel. Clicking the header expands and collapses the panel */
+    header?: ReactNode;
+};
+declare type PanelState = BasePanelProps & {
+    /** Defines whether the panel is expanded by default. */
+    isExpanded: boolean;
+    /** This callback is called when panel is expanded/collapsed */
+    onChange: (isExpanded: boolean) => void;
+};
+declare const PanelStateless: FC<PanelState>;
+export default PanelStateless;

package/dist/types-ts4.0/components/Panel/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Panel';
+export { default as PanelStateless } from './PanelStateless';

package/dist/types-ts4.0/components/Panel/styledPanel.d.ts

@@ -0,0 +1,10 @@
+import type { FC, HTMLProps } from 'react';
+export declare const PanelWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ButtonWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    isHidden: boolean;
+}, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    isHidden: boolean;
+}>;
+export declare const PanelHeader: FC<HTMLProps<HTMLDivElement> & {
+    isFocused?: boolean;
+}>;

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1 @@
+export { default, PanelStateless } from './components/Panel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/panel",
-  "version": "0.4.9",
+  "version": "0.6.0",
   "description": "A React component rendering a collapsible panel",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
+      ]
+    }
+  },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Bitbucket: CoreX",
@@ -23,11 +31,12 @@
   },
   "dependencies": {
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/theme": "^12.2.0",
     "@babel/runtime": "^7.0.0",
     "react-animate-height": "^2.0.5",
-    "react-focus-within": "^2.0.1"
+    "react-focus-within": "^2.0.1",
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -35,10 +44,12 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/page": "^12.1.0",
+    "@atlaskit/page": "^12.2.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "enzyme": "^3.10.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "techstack": {
     "@atlassian/frontend": {

package/report.api.md

@@ -1,54 +1,47 @@
-## API Report File for "@atlaskit/panel".
+<!-- API Report Version: 2.3 -->
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+## API Report File for "@atlaskit/panel"
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { ReactNode } from 'react';
 
-declare type BasePanelProps = {
-  /** Content to be shown inside the panel. */
+// @public (undocumented)
+type BasePanelProps = {
   children?: ReactNode;
-  /** Header to render on the panel. Clicking the header expands and collapses the panel */
   header?: ReactNode;
 };
 
-declare class Panel extends PureComponent<Props, State> {
-  static defaultProps: {
-    isDefaultExpanded: boolean;
-  };
-  state: {
-    isExpanded: boolean;
-  };
-  handleChange: () => void;
-  render(): JSX.Element;
-}
-export default Panel;
-
-export declare class PanelStateless extends PureComponent<Props_2> {
-  static defaultProps: {
-    isExpanded: boolean;
-  };
-  render(): JSX.Element;
-}
-
-declare type Props = BasePanelProps & {
-  /** Defines whether the panel is expanded by default. */
-  isDefaultExpanded?: boolean;
-};
+// @public (undocumented)
+const PanelState: FC<Props>;
+export default PanelState;
 
-declare type Props_2 = BasePanelProps & {
-  /** Defines whether the panel is expanded by default. */
+// @public (undocumented)
+type PanelState_2 = BasePanelProps & {
   isExpanded: boolean;
-  /** This callback is called when panel is expanded/collapsed */
   onChange: (isExpanded: boolean) => void;
 };
 
-declare type State = {
-  isExpanded: boolean;
+// @public (undocumented)
+export const PanelStateless: FC<PanelState_2>;
+
+// @public (undocumented)
+type Props = BasePanelProps & {
+  isDefaultExpanded?: boolean;
 };
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,36 @@
+## API Report File for "@atlaskit/panel"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+// @public (undocumented)
+type BasePanelProps = {
+    children?: ReactNode;
+    header?: ReactNode;
+};
+
+// @public (undocumented)
+const PanelState: FC<Props>;
+export default PanelState;
+
+// @public (undocumented)
+type PanelState_2 = BasePanelProps & {
+    isExpanded: boolean;
+    onChange: (isExpanded: boolean) => void;
+};
+
+// @public (undocumented)
+export const PanelStateless: FC<PanelState_2>;
+
+// @public (undocumented)
+type Props = BasePanelProps & {
+    isDefaultExpanded?: boolean;
+};
+
+// (No @packageDocumentation comment for this package)
+
+```