@atlaskit/panel 2.5.1 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/panel
 
+## 2.7.0
+
+### Minor Changes
+
+- [`bd2c5b0112185`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd2c5b0112185) -
+  Remove stale API report artifacts from published Platform packages.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.6.0
+
+### Minor Changes
+
+- [`d83cb6c1f23f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d83cb6c1f23f8) -
+  Add support for aria-label
+
 ## 2.5.1
 
 ### Patch Changes

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

@@ -14,7 +14,8 @@ var PanelState = function PanelState(_ref) {
   var _ref$isDefaultExpande = _ref.isDefaultExpanded,
     isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
     children = _ref.children,
-    header = _ref.header;
+    header = _ref.header,
+    ariaLabel = _ref.ariaLabel;
   var _useState = (0, _react.useState)(isDefaultExpanded),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isExpanded = _useState2[0],
@@ -25,7 +26,8 @@ var PanelState = function PanelState(_ref) {
   return /*#__PURE__*/_react.default.createElement(_PanelStateless.default, {
     header: header,
     isExpanded: isExpanded,
-    onChange: handleChange
+    onChange: handleChange,
+    ariaLabel: ariaLabel
   }, children);
 };
 var _default = exports.default = PanelState;

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
 var _reactIntl = require("react-intl");
-var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _button = _interopRequireDefault(require("@atlaskit/button/button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -32,7 +32,8 @@ var PanelStateless = function PanelStateless(_ref) {
     header = _ref.header,
     _ref$isExpanded = _ref.isExpanded,
     isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    ariaLabel = _ref.ariaLabel;
   var intl = (0, _reactIntl.useIntl)();
   var i18nExpandText = intl.formatMessage(i18n.expand);
   var i18nCollapseText = intl.formatMessage(i18n.collapse);
@@ -45,6 +46,7 @@ var PanelStateless = function PanelStateless(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "subtle",
     "aria-expanded": isExpanded,
+    "aria-label": ariaLabel,
     spacing: "none",
     iconBefore: isExpanded ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       as: "span",

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

@@ -41,7 +41,7 @@ transition, {
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/ban-types -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/no-restricted-types -- Ignored via go/DSP-18766
 var PanelHeader = exports.PanelHeader = (0, _reactFocusWithin.withFocusWithin)(_styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\talign-items: center;\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\tdisplay: flex;\n\tleft: ", ";\n\tmargin-bottom: ", ";\n\tmargin-top: ", ";\n\tpadding: ", " ", " ", " ", ";\n\tposition: relative;\n\t", ";\n\twidth: 100%;\n\n\t", " {\n\t\topacity: ", ";\n\t}\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcursor: pointer;\n\n\t\t", " {\n\t\t\topacity: 1;\n\t\t}\n\t}\n"])), function (props) {
   return props.isFocused && "var(--ds-surface-hovered, #F0F1F2)";
 }, "var(--ds-radius-small, 3px)", "var(--ds-space-negative-300, -24px)", "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {

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

@@ -3,7 +3,8 @@ import PanelStateless from './PanelStateless';
 const PanelState = ({
   isDefaultExpanded = false,
   children,
-  header
+  header,
+  ariaLabel
 }) => {
   const [isExpanded, setisExpanded] = useState(isDefaultExpanded);
   const handleChange = () => {
@@ -12,7 +13,8 @@ const PanelState = ({
   return /*#__PURE__*/React.createElement(PanelStateless, {
     header: header,
     isExpanded: isExpanded,
-    onChange: handleChange
+    onChange: handleChange,
+    ariaLabel: ariaLabel
   }, children);
 };
 export default PanelState;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import AnimateHeight from 'react-animate-height';
 import { defineMessages, useIntl } from 'react-intl';
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/button';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -22,7 +22,8 @@ const PanelStateless = ({
   children,
   header,
   isExpanded = false,
-  onChange
+  onChange,
+  ariaLabel
 }) => {
   const intl = useIntl();
   const i18nExpandText = intl.formatMessage(i18n.expand);
@@ -34,6 +35,7 @@ const PanelStateless = ({
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     "aria-expanded": isExpanded,
+    "aria-label": ariaLabel,
     spacing: "none",
     iconBefore: isExpanded ? /*#__PURE__*/React.createElement(Box, {
       as: "span",

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

@@ -33,7 +33,7 @@ transition, {
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/ban-types -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/no-restricted-types -- Ignored via go/DSP-18766
 export const PanelHeader = withFocusWithin(styled.div`
 	align-items: center;
 	background-color: ${props => props.isFocused && "var(--ds-surface-hovered, #F0F1F2)"};

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

@@ -5,7 +5,8 @@ var PanelState = function PanelState(_ref) {
   var _ref$isDefaultExpande = _ref.isDefaultExpanded,
     isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande,
     children = _ref.children,
-    header = _ref.header;
+    header = _ref.header,
+    ariaLabel = _ref.ariaLabel;
   var _useState = useState(isDefaultExpanded),
     _useState2 = _slicedToArray(_useState, 2),
     isExpanded = _useState2[0],
@@ -16,7 +17,8 @@ var PanelState = function PanelState(_ref) {
   return /*#__PURE__*/React.createElement(PanelStateless, {
     header: header,
     isExpanded: isExpanded,
-    onChange: handleChange
+    onChange: handleChange,
+    ariaLabel: ariaLabel
   }, children);
 };
 export default PanelState;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import AnimateHeight from 'react-animate-height';
 import { defineMessages, useIntl } from 'react-intl';
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/button';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -23,7 +23,8 @@ var PanelStateless = function PanelStateless(_ref) {
     header = _ref.header,
     _ref$isExpanded = _ref.isExpanded,
     isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    ariaLabel = _ref.ariaLabel;
   var intl = useIntl();
   var i18nExpandText = intl.formatMessage(i18n.expand);
   var i18nCollapseText = intl.formatMessage(i18n.collapse);
@@ -36,6 +37,7 @@ var PanelStateless = function PanelStateless(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     "aria-expanded": isExpanded,
+    "aria-label": ariaLabel,
     spacing: "none",
     iconBefore: isExpanded ? /*#__PURE__*/React.createElement(Box, {
       as: "span",

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

@@ -33,7 +33,7 @@ transition, {
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/ban-types -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/no-restricted-types -- Ignored via go/DSP-18766
 export var PanelHeader = withFocusWithin(styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\talign-items: center;\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\tdisplay: flex;\n\tleft: ", ";\n\tmargin-bottom: ", ";\n\tmargin-top: ", ";\n\tpadding: ", " ", " ", " ", ";\n\tposition: relative;\n\t", ";\n\twidth: 100%;\n\n\t", " {\n\t\topacity: ", ";\n\t}\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcursor: pointer;\n\n\t\t", " {\n\t\t\topacity: 1;\n\t\t}\n\t}\n"])), function (props) {
   return props.isFocused && "var(--ds-surface-hovered, #F0F1F2)";
 }, "var(--ds-radius-small, 3px)", "var(--ds-space-negative-300, -24px)", "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {

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

@@ -1,5 +1,8 @@
 import { type FC, type ReactNode } from 'react';
 export type BasePanelProps = {
+    /** Accessible label for the expand/collapse button. Use this when the header is a non-text
+     * React node so screen readers announce a meaningful name instead of the icon label. */
+    ariaLabel?: string;
     /** Content to be shown inside the panel. */
     children?: ReactNode;
     /** Header to render on the panel. Clicking the header expands and collapses the panel */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/panel",
-	"version": "2.5.1",
+	"version": "2.7.0",
 	"description": "A React component rendering a collapsible panel",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,13 +21,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-bitbucket-panel": "2.209.0",
-		"@atlaskit/button": "^25.0.0",
-		"@atlaskit/icon": "^37.3.0",
-		"@atlaskit/link": "^5.0.0",
-		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/primitives": "^22.2.0",
-		"@atlaskit/theme": "^28.0.0",
-		"@atlaskit/tokens": "^16.4.0",
+		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/icon": "^37.6.0",
+		"@atlaskit/link": "^5.1.0",
+		"@atlaskit/platform-feature-flags": "^2.2.0",
+		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/theme": "^28.2.0",
+		"@atlaskit/tokens": "^16.10.0",
 		"@babel/runtime": "^7.0.0",
 		"react-animate-height": "^2.1.0",
 		"react-focus-within": "^2.0.1"
@@ -38,6 +38,7 @@
 		"styled-components": "^3.2.6"
 	},
 	"devDependencies": {
+		"@atlaskit/page": "^15.3.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"react": "^18.2.0",

package/report.api.md

@@ -1,62 +0,0 @@
-<!-- API Report Version: 2.3 -->
-
-## API Report File for "@atlaskit/panel"
-
-> 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)
-- [Peer Dependencies](#peer-dependencies)
-
-### Main Entry Types
-
-<!--SECTION START: Main Entry Types-->
-
-```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)
-```
-
-<!--SECTION END: Main Entry Types-->
-
-### Peer Dependencies
-
-<!--SECTION START: Peer Dependencies-->
-
-```json
-{
-	"react": "^16.8.0",
-	"styled-components": "^3.2.6"
-}
-```
-
-<!--SECTION END: Peer Dependencies-->