@atlaskit/onboarding 11.2.5 → 11.2.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 11.2.7
+
+### Patch Changes
+
+- [#85076](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85076) [`3032fb024382`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3032fb024382) - Associates the heading prop with the accessible label for the benefits modal.
+
+## 11.2.6
+
+### Patch Changes
+
+- [#83188](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83188) [`cd5d06cd3329`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cd5d06cd3329) - Minor adjustments to improve compatibility with React 18
+
 ## 11.2.5
 
 ### Patch Changes

package/dist/cjs/components/modal.js

@@ -95,12 +95,19 @@ var BenefitsModal = exports.default = /*#__PURE__*/function (_Component) {
         props = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
+      var CustomHeader = function CustomHeader() {
+        var _useModal = (0, _modalDialog.useModal)(),
+          titleId = _useModal.titleId;
+        return (0, _react2.jsx)(_modal.ModalHeading, {
+          id: titleId
+        }, heading);
+      };
       return (0, _react2.jsx)(_modalDialog.default, (0, _extends2.default)({
         autoFocus: true,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), (0, _react2.jsx)(Header, null), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_modal.ModalBody, null, heading && (0, _react2.jsx)(_modal.ModalHeading, null, heading), children)), (0, _react2.jsx)(Footer, null));
+      }, props), (0, _react2.jsx)(Header, null), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_modal.ModalBody, null, heading && (0, _react2.jsx)(CustomHeader, null), children)), (0, _react2.jsx)(Footer, null));
     }
   }]);
   return BenefitsModal;

package/dist/cjs/components/spotlight-dialog.js

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.2.5";
+var packageVersion = "11.2.7";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/components/spotlight-transition.js

@@ -26,9 +26,10 @@ var SpotlightTransitionContext = /*#__PURE__*/(0, _react.createContext)({
 
 // checks if children exist and are truthy
 var hasChildren = function hasChildren(children) {
-  return _react.default.Children.count(children) > 0 && _react.default.Children.map(children || false, function (child) {
+  var _React$Children$map;
+  return _react.default.Children.count(children) > 0 && (((_React$Children$map = _react.default.Children.map(children || false, function (child) {
     return !!child;
-  }).filter(Boolean).length > 0;
+  })) === null || _React$Children$map === void 0 || (_React$Children$map = _React$Children$map.filter(Boolean)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.length) || 0) > 0;
 };
 
 /**

package/dist/cjs/styled/modal.js

@@ -64,9 +64,11 @@ var ModalBody = exports.ModalBody = function ModalBody(_ref) {
  * @internal
  */
 var ModalHeading = exports.ModalHeading = function ModalHeading(_ref2) {
-  var children = _ref2.children;
-  return (0, _react.jsx)("h4", {
-    css: modalHeadingStyles
+  var children = _ref2.children,
+    id = _ref2.id;
+  return (0, _react.jsx)("h1", {
+    css: modalHeadingStyles,
+    id: id
   }, children);
 };
 

package/dist/es2019/components/modal.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
-import Modal, { ModalBody } from '@atlaskit/modal-dialog';
+import Modal, { ModalBody, useModal } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';
 import { modalButtonTheme } from './theme';
 
@@ -68,11 +68,19 @@ export default class BenefitsModal extends Component {
     } = this.props;
     const Header = this.headerComponent(this.props);
     const Footer = this.footerComponent(this.props);
+    const CustomHeader = () => {
+      const {
+        titleId
+      } = useModal();
+      return jsx(Heading, {
+        id: titleId
+      }, heading);
+    };
     return jsx(Modal, _extends({
       autoFocus: true,
       shouldScrollInViewport: true,
       shouldCloseOnOverlayClick: false,
       shouldCloseOnEscapePress: false
-    }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
+    }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(CustomHeader, null), children)), jsx(Footer, null));
   }
 }

package/dist/es2019/components/spotlight-dialog.js

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "11.2.5";
+const packageVersion = "11.2.7";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/spotlight-transition.js

@@ -7,7 +7,10 @@ const SpotlightTransitionContext = /*#__PURE__*/createContext({
 });
 
 // checks if children exist and are truthy
-const hasChildren = children => React.Children.count(children) > 0 && React.Children.map(children || false, child => !!child).filter(Boolean).length > 0;
+const hasChildren = children => {
+  var _React$Children$map, _React$Children$map$f;
+  return React.Children.count(children) > 0 && (((_React$Children$map = React.Children.map(children || false, child => !!child)) === null || _React$Children$map === void 0 ? void 0 : (_React$Children$map$f = _React$Children$map.filter(Boolean)) === null || _React$Children$map$f === void 0 ? void 0 : _React$Children$map$f.length) || 0) > 0;
+};
 
 /**
  * __Spotlight transition__

package/dist/es2019/styled/modal.js

@@ -57,10 +57,12 @@ export const ModalBody = ({
  * @internal
  */
 export const ModalHeading = ({
-  children
+  children,
+  id
 }) => {
-  return jsx("h4", {
-    css: modalHeadingStyles
+  return jsx("h1", {
+    css: modalHeadingStyles,
+    id: id
   }, children);
 };
 

package/dist/esm/components/modal.js

@@ -15,7 +15,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
-import Modal, { ModalBody } from '@atlaskit/modal-dialog';
+import Modal, { ModalBody, useModal } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';
 import { modalButtonTheme } from './theme';
 
@@ -87,12 +87,19 @@ var BenefitsModal = /*#__PURE__*/function (_Component) {
         props = _objectWithoutProperties(_this$props, _excluded2);
       var Header = this.headerComponent(this.props);
       var Footer = this.footerComponent(this.props);
+      var CustomHeader = function CustomHeader() {
+        var _useModal = useModal(),
+          titleId = _useModal.titleId;
+        return jsx(Heading, {
+          id: titleId
+        }, heading);
+      };
       return jsx(Modal, _extends({
         autoFocus: true,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
+      }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(CustomHeader, null), children)), jsx(Footer, null));
     }
   }]);
   return BenefitsModal;

package/dist/esm/components/spotlight-dialog.js

@@ -17,7 +17,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.2.5";
+var packageVersion = "11.2.7";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/components/spotlight-transition.js

@@ -16,9 +16,10 @@ var SpotlightTransitionContext = /*#__PURE__*/createContext({
 
 // checks if children exist and are truthy
 var hasChildren = function hasChildren(children) {
-  return React.Children.count(children) > 0 && React.Children.map(children || false, function (child) {
+  var _React$Children$map;
+  return React.Children.count(children) > 0 && (((_React$Children$map = React.Children.map(children || false, function (child) {
     return !!child;
-  }).filter(Boolean).length > 0;
+  })) === null || _React$Children$map === void 0 || (_React$Children$map = _React$Children$map.filter(Boolean)) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.length) || 0) > 0;
 };
 
 /**

package/dist/esm/styled/modal.js

@@ -58,9 +58,11 @@ export var ModalBody = function ModalBody(_ref) {
  * @internal
  */
 export var ModalHeading = function ModalHeading(_ref2) {
-  var children = _ref2.children;
-  return jsx("h4", {
-    css: modalHeadingStyles
+  var children = _ref2.children,
+    id = _ref2.id;
+  return jsx("h1", {
+    css: modalHeadingStyles,
+    id: id
   }, children);
 };
 

package/dist/types/styled/modal.d.ts

@@ -22,8 +22,9 @@ export declare const ModalBody: ({ children }: {
  *
  * @internal
  */
-export declare const ModalHeading: ({ children }: {
+export declare const ModalHeading: ({ children, id, }: {
     children: ReactNode;
+    id: string;
 }) => jsx.JSX.Element;
 /**
  * __Modal image__

package/dist/types-ts4.5/styled/modal.d.ts

@@ -22,8 +22,9 @@ export declare const ModalBody: ({ children }: {
  *
  * @internal
  */
-export declare const ModalHeading: ({ children }: {
+export declare const ModalHeading: ({ children, id, }: {
     children: ReactNode;
+    id: string;
 }) => jsx.JSX.Element;
 /**
  * __Modal image__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "11.2.5",
+  "version": "11.2.7",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,13 +40,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.8.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^2.1.0",
     "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.42.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",