@atlaskit/top-layer 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/top-layer
 
+## 1.3.0
+
+### Minor Changes
+
+- [`e297058763bc0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e297058763bc0) -
+  Add an `onEnterFinish` lifecycle callback to `Dialog`, and scope its Escape (cancel) handling to
+  the dialog the event targets.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

package/compass.yml

@@ -0,0 +1,38 @@
+configVersion: 1
+id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/680f1177-ac84-4787-a7d1-258dd657dc9f
+name: '@atlaskit/top-layer'
+ownerId: ari:cloud:identity::team/be19136e-6275-419f-be0c-fcee844b8684 # Design System Engineers
+labels:
+  - platform-code
+  - platform-afm
+typeId: OTHER
+fields:
+  tier: 4
+  lifecycle: Active
+  isMonorepoProject: true
+links:
+  - name: Root Repository
+    type: REPOSITORY
+    url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
+  - name: Slack Channel
+    type: CHAT_CHANNEL
+    url: https://atlassian.enterprise.slack.com/archives/CFJ9DU39U # #help-design-system
+  - name: Top Layer
+    type: REPOSITORY
+    url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/design-system/top-layer
+customFields:
+  - name: Department
+    type: text
+    value: Eng - Design System Fundamentals
+  - name: Technical Owner
+    type: user
+    value: ari:cloud:identity::user/557058:86a9b692-7997-49cb-9984-080801b1de91 # Jared Crowe
+  - name: Required Reviewers Opt In
+    type: boolean
+    value: true
+  - name: Reviewer Selection Mechanism
+    type: text
+    value: random(3)
+  - name: Required Reviewer Approvals
+    type: number
+    value: 1

package/dist/cjs/dialog/dialog-content.js

@@ -45,6 +45,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var children = _ref.children,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
+    onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     animate = _ref.animate,
     style = _ref.style,
@@ -61,6 +62,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
       isOpen: isOpen,
       animate: animate,
       elementRef: ownRef,
+      onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
     phase = _useAnimatedVisibilit.phase,
@@ -111,6 +113,14 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
 
   // Handle native Escape (cancel event)
   var handleCancel = (0, _react.useCallback)(function (event) {
+    // Only handle a cancel targeting THIS dialog. Native `cancel` does not
+    // bubble, but React's synthetic event bubbles up the component tree, so
+    // for nested dialogs (one rendered inside another's DOM subtree) the
+    // inner dialog's Escape would otherwise also fire an ancestor dialog's
+    // handler and close it too. Mirrors the backdrop-click target guard below.
+    if (event.target !== event.currentTarget) {
+      return;
+    }
     event.preventDefault();
     onClose({
       reason: 'escape'

package/dist/es2019/dialog/dialog-content.js

@@ -35,6 +35,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   children,
   isOpen,
   onClose,
+  onEnterFinish,
   onExitFinish,
   animate,
   style,
@@ -55,6 +56,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     isOpen,
     animate,
     elementRef: ownRef,
+    onEnterFinish,
     onExitFinish
   });
 
@@ -103,6 +105,14 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
 
   // Handle native Escape (cancel event)
   const handleCancel = useCallback(event => {
+    // Only handle a cancel targeting THIS dialog. Native `cancel` does not
+    // bubble, but React's synthetic event bubbles up the component tree, so
+    // for nested dialogs (one rendered inside another's DOM subtree) the
+    // inner dialog's Escape would otherwise also fire an ancestor dialog's
+    // handler and close it too. Mirrors the backdrop-click target guard below.
+    if (event.target !== event.currentTarget) {
+      return;
+    }
     event.preventDefault();
     onClose({
       reason: 'escape'

package/dist/esm/dialog/dialog-content.js

@@ -36,6 +36,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var children = _ref.children,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
+    onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     animate = _ref.animate,
     style = _ref.style,
@@ -52,6 +53,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
       isOpen: isOpen,
       animate: animate,
       elementRef: ownRef,
+      onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
     phase = _useAnimatedVisibilit.phase,
@@ -102,6 +104,14 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
 
   // Handle native Escape (cancel event)
   var handleCancel = useCallback(function (event) {
+    // Only handle a cancel targeting THIS dialog. Native `cancel` does not
+    // bubble, but React's synthetic event bubbles up the component tree, so
+    // for nested dialogs (one rendered inside another's DOM subtree) the
+    // inner dialog's Escape would otherwise also fire an ancestor dialog's
+    // handler and close it too. Mirrors the backdrop-click target guard below.
+    if (event.target !== event.currentTarget) {
+      return;
+    }
     event.preventDefault();
     onClose({
       reason: 'escape'

package/dist/types/dialog/types.d.ts

@@ -74,6 +74,15 @@ type TDialogBaseProps = {
      * show a visible backdrop, or when the consumer wants no overlay.
      */
     shouldHideBackdrop?: boolean;
+    /**
+     * Called after the entry animation completes (or immediately on open when
+     * there is no animation or reduced motion is active). Also fires on initial
+     * mount with `isOpen={true}`.
+     *
+     * Use this for external lifecycle coordination, e.g. firing an
+     * `onOpenComplete` callback once the dialog has finished animating in.
+     */
+    onEnterFinish?: () => void;
     /**
      * Called after the exit animation completes (or immediately on close when
      * there is no animation or reduced motion is active).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -39,7 +39,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^15.1.0",
+		"@atlaskit/tokens": "^15.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -52,10 +52,10 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^24.2.0",
+		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/heading": "^6.1.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/primitives": "^20.1.0",
+		"@atlaskit/primitives": "^20.3.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",