@atlaskit/modal-dialog 12.7.1 → 12.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.8.1
+
+### Patch Changes
+
+- [#40647](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40647) [`0de92f17021`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0de92f17021) - Bump react-focus-lock to latest version
+
+## 12.8.0
+
+### Minor Changes
+
+- [#39425](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39425) [`f0df9a3b6e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0df9a3b6e7) - [ED-19408] Add new prop to modal shouldReturnFocus - shouldReturnFocus is used to control what happens when the user exits focus lock mode. If true, focus will be returned to the element that had focus before focus lock was activated. If false, focus remains where it was when the FocusLock was deactivated
+
 ## 12.7.1
 
 ### Patch Changes

package/dist/cjs/hooks.js

@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useModal = void 0;
 var _react = require("react");
 var _context = require("./internal/context");
-var useModal = function useModal() {
+var useModal = exports.useModal = function useModal() {
   var modalContext = (0, _react.useContext)(_context.ModalContext);
   if (modalContext == null) {
     throw Error('@atlaskit/modal-dialog: Modal context unavailable – this component needs to be a child of ModalDialog.');
   }
   return modalContext;
-};
-exports.useModal = useModal;
+};

package/dist/cjs/internal/components/modal-dialog.js

@@ -135,5 +135,4 @@ var ModalDialog = function ModalDialog(props) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = ModalDialog;
-exports.default = _default;
+var _default = exports.default = ModalDialog;

package/dist/cjs/internal/components/positioner.js

@@ -84,5 +84,4 @@ var Positioner = function Positioner(props) {
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = Positioner;
-exports.default = _default;
+var _default = exports.default = Positioner;

package/dist/cjs/internal/components/scroll-container.js

@@ -120,5 +120,4 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }, children));
 });
 ScrollContainer.displayName = 'ScrollContainer';
-var _default = ScrollContainer;
-exports.default = _default;
+var _default = exports.default = ScrollContainer;

package/dist/cjs/internal/constants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.width = exports.verticalOffset = exports.titleIconMargin = exports.textColor = exports.padding = exports.keylineHeight = exports.keylineColor = exports.iconColor = exports.gutter = exports.borderRadius = void 0;
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
-var width = {
+var width = exports.width = {
   values: ['small', 'medium', 'large', 'x-large'],
   widths: {
     small: 400,
@@ -16,26 +16,16 @@ var width = {
   },
   defaultValue: 'medium'
 };
-exports.width = width;
-var gutter = 60;
-exports.gutter = gutter;
+var gutter = exports.gutter = 60;
 var gridSize = (0, _constants.gridSize)();
-var borderRadius = (0, _constants.borderRadius)();
-exports.borderRadius = borderRadius;
-var verticalOffset = gridSize * 2;
-exports.verticalOffset = verticalOffset;
-var padding = gridSize * 3;
-exports.padding = padding;
-var titleIconMargin = gridSize;
-exports.titleIconMargin = titleIconMargin;
-var keylineHeight = 2;
-exports.keylineHeight = keylineHeight;
-var keylineColor = "var(--ds-border, ".concat(_colors.N30, ")");
-exports.keylineColor = keylineColor;
-var textColor = "var(--ds-text, ".concat(_colors.N900, ")");
-exports.textColor = textColor;
-var iconColor = {
+var borderRadius = exports.borderRadius = (0, _constants.borderRadius)();
+var verticalOffset = exports.verticalOffset = gridSize * 2;
+var padding = exports.padding = gridSize * 3;
+var titleIconMargin = exports.titleIconMargin = gridSize;
+var keylineHeight = exports.keylineHeight = 2;
+var keylineColor = exports.keylineColor = "var(--ds-border, ".concat(_colors.N30, ")");
+var textColor = exports.textColor = "var(--ds-text, ".concat(_colors.N900, ")");
+var iconColor = exports.iconColor = {
   danger: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
   warning: "var(--ds-icon-warning, #D97008)"
-};
-exports.iconColor = iconColor;
+};

package/dist/cjs/internal/context.js

@@ -6,7 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.ScrollContext = exports.ModalContext = void 0;
 var _react = require("react");
 /* eslint-disable @repo/internal/react/require-jsdoc */
-var ModalContext = /*#__PURE__*/(0, _react.createContext)(null);
-exports.ModalContext = ModalContext;
-var ScrollContext = /*#__PURE__*/(0, _react.createContext)(null);
-exports.ScrollContext = ScrollContext;
+var ModalContext = exports.ModalContext = /*#__PURE__*/(0, _react.createContext)(null);
+var ScrollContext = exports.ScrollContext = /*#__PURE__*/(0, _react.createContext)(null);

package/dist/cjs/internal/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.dialogWidth = exports.dialogHeight = void 0;
 var _constants = require("./constants");
-var dialogWidth = function dialogWidth(input) {
+var dialogWidth = exports.dialogWidth = function dialogWidth(input) {
   if (!input) {
     return 'auto';
   }
@@ -16,11 +16,9 @@ var dialogWidth = function dialogWidth(input) {
   }
   return typeof input === 'number' ? "".concat(input, "px") : input;
 };
-exports.dialogWidth = dialogWidth;
-var dialogHeight = function dialogHeight(input) {
+var dialogHeight = exports.dialogHeight = function dialogHeight(input) {
   if (!input) {
     return 'auto';
   }
   return typeof input === 'number' ? "".concat(input, "px") : input;
-};
-exports.dialogHeight = dialogHeight;
+};

package/dist/cjs/modal-body.js

@@ -63,5 +63,4 @@ var ModalBody = function ModalBody(props) {
     "data-testid": testId
   }, children)));
 };
-var _default = ModalBody;
-exports.default = _default;
+var _default = exports.default = ModalBody;

package/dist/cjs/modal-footer.js

@@ -40,5 +40,4 @@ var ModalFooter = function ModalFooter(props) {
     "data-testid": testId
   }, children);
 };
-var _default = ModalFooter;
-exports.default = _default;
+var _default = exports.default = ModalFooter;

package/dist/cjs/modal-header.js

@@ -41,5 +41,4 @@ var ModalHeader = function ModalHeader(props) {
     "data-testid": testId
   }, children);
 };
-var _default = ModalHeader;
-exports.default = _default;
+var _default = exports.default = ModalHeader;

package/dist/cjs/modal-title.js

@@ -114,5 +114,4 @@ var ModalTitle = function ModalTitle(props) {
     "data-testid": testId && "".concat(testId, "-text")
   }, children));
 };
-var _default = ModalTitle;
-exports.default = _default;
+var _default = exports.default = ModalTitle;

package/dist/cjs/modal-transition.js

@@ -21,5 +21,4 @@ var ModalTransition = function ModalTransition(props) {
     appear: true
   }, props.children);
 };
-var _default = ModalTransition;
-exports.default = _default;
+var _default = exports.default = ModalTransition;

package/dist/cjs/modal-wrapper.js

@@ -58,6 +58,8 @@ var ModalWrapper = function ModalWrapper(props) {
     shouldCloseOnOverlayClick = _props$shouldCloseOnO === void 0 ? true : _props$shouldCloseOnO,
     _props$shouldScrollIn = props.shouldScrollInViewport,
     shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
+    _props$shouldReturnFo = props.shouldReturnFocus,
+    shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
     stackIndexOverride = props.stackIndex,
     _props$onClose = props.onClose,
     onClose = _props$onClose === void 0 ? _noop.default : _props$onClose,
@@ -84,7 +86,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.7.1"
+    packageVersion: "12.8.1"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -118,10 +120,9 @@ var ModalWrapper = function ModalWrapper(props) {
     }), (0, _react2.jsx)(_reactFocusLock.default, {
       autoFocus: autoFocusLock,
       disabled: !isForeground,
-      returnFocus: true,
+      returnFocus: shouldReturnFocus,
       whiteList: whiteListElements
     }, (0, _react2.jsx)(_reactScrolllock.default, null), shouldScrollInViewport ? (0, _react2.jsx)(_reactScrolllock.TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
   })));
 };
-var _default = ModalWrapper;
-exports.default = _default;
+var _default = exports.default = ModalWrapper;

package/dist/es2019/modal-wrapper.js

@@ -45,6 +45,7 @@ const ModalWrapper = props => {
     shouldCloseOnEscapePress = true,
     shouldCloseOnOverlayClick = true,
     shouldScrollInViewport = false,
+    shouldReturnFocus = true,
     stackIndex: stackIndexOverride,
     onClose = noop,
     onStackChange = noop,
@@ -70,7 +71,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.7.1"
+    packageVersion: "12.8.1"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -103,7 +104,7 @@ const ModalWrapper = props => {
   }), jsx(FocusLock, {
     autoFocus: autoFocusLock,
     disabled: !isForeground,
-    returnFocus: true,
+    returnFocus: shouldReturnFocus,
     whiteList: whiteListElements
   }, jsx(ScrollLock, null), shouldScrollInViewport ? jsx(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket)))));
 };

package/dist/esm/modal-wrapper.js

@@ -48,6 +48,8 @@ var ModalWrapper = function ModalWrapper(props) {
     shouldCloseOnOverlayClick = _props$shouldCloseOnO === void 0 ? true : _props$shouldCloseOnO,
     _props$shouldScrollIn = props.shouldScrollInViewport,
     shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
+    _props$shouldReturnFo = props.shouldReturnFocus,
+    shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
     stackIndexOverride = props.stackIndex,
     _props$onClose = props.onClose,
     onClose = _props$onClose === void 0 ? noop : _props$onClose,
@@ -74,7 +76,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.7.1"
+    packageVersion: "12.8.1"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -108,7 +110,7 @@ var ModalWrapper = function ModalWrapper(props) {
     }), jsx(FocusLock, {
       autoFocus: autoFocusLock,
       disabled: !isForeground,
-      returnFocus: true,
+      returnFocus: shouldReturnFocus,
       whiteList: whiteListElements
     }, jsx(ScrollLock, null), shouldScrollInViewport ? jsx(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
   })));

package/dist/types/types.d.ts

@@ -61,6 +61,12 @@ export interface ModalDialogProps {
      * Calls `onClose` when pressing escape.
      */
     shouldCloseOnEscapePress?: boolean;
+    /**
+     * ReturnFocus is used to control what happens when the user exists
+     * focus lock mode. If true, focus will be returned to the element that had focus before focus lock
+     * was activated. If false, focus remains where it was when the FocusLock was deactivated.
+     */
+    shouldReturnFocus?: boolean;
     /**
      * Will remove the blanket tinted background color.
      */

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

@@ -61,6 +61,12 @@ export interface ModalDialogProps {
      * Calls `onClose` when pressing escape.
      */
     shouldCloseOnEscapePress?: boolean;
+    /**
+     * ReturnFocus is used to control what happens when the user exists
+     * focus lock mode. If true, focus will be returned to the element that had focus before focus lock
+     * was activated. If false, focus remains where it was when the FocusLock was deactivated.
+     */
+    shouldReturnFocus?: boolean;
     /**
      * Will remove the blanket tinted background color.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.7.1",
+  "version": "12.8.1",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
     "raf-schd": "^4.0.3",
-    "react-focus-lock": "^2.5.2",
+    "react-focus-lock": "^2.9.5",
     "react-scrolllock": "^5.0.1",
     "react-uid": "^2.2.0"
   },

package/report.api.md

@@ -62,6 +62,7 @@ export interface ModalDialogProps {
   onStackChange?: OnStackChangeHandler;
   shouldCloseOnEscapePress?: boolean;
   shouldCloseOnOverlayClick?: boolean;
+  shouldReturnFocus?: boolean;
   shouldScrollInViewport?: boolean;
   stackIndex?: number;
   testId?: string;

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

@@ -48,6 +48,7 @@ export interface ModalDialogProps {
     onStackChange?: OnStackChangeHandler;
     shouldCloseOnEscapePress?: boolean;
     shouldCloseOnOverlayClick?: boolean;
+    shouldReturnFocus?: boolean;
     shouldScrollInViewport?: boolean;
     stackIndex?: number;
     testId?: string;