@atlaskit/modal-dialog 15.2.0 → 15.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/cjs/internal/components/modal-wrapper.js +11 -6
  3. package/dist/es2019/internal/components/modal-wrapper.js +11 -6
  4. package/dist/esm/internal/components/modal-wrapper.js +11 -6
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 15.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`dec4f3444bce8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dec4f3444bce8) -
8
+ Hardens Popup, Popover, and Dialog through stricter typed contracts, focus-management fixes, and
9
+ clearer entry points.
10
+ - **Stricter API contracts.** Popup, Popover, and Dialog props are now discriminated unions, so
11
+ misuse (manual mode with `onClose`, dialogs without a label, popovers without an accessible name
12
+ for their role) fails at compile time.
13
+ - **Better defaults.** `Popup`'s `placement` prop now defaults to "below trigger, centered, with
14
+ `space.100` gap", removing the awkward `placement={{}}` boilerplate.
15
+ - **Focus-management fixes.** Empty/loading dialogs no longer trap Tab on `<body>`; rapid
16
+ open/close/open sequences no longer focus a torn-down popover; nested top-layer popovers stay in
17
+ their own focus scope.
18
+ - **Cleaner entry points.** `createCloseEvent` is now available as per-primitive subpaths
19
+ (`@atlaskit/top-layer/dialog/create-close-event` and
20
+ `@atlaskit/top-layer/popover/create-close-event`); the combined entry point is deprecated. The
21
+ placement-map entry point now exposes a public `LEGACY_PLACEMENTS` const for migration
22
+ consumers.
23
+ - **Per-primitive data attributes.** Animation hooks now emit `data-ds-popover-*` for Popover and
24
+ `data-ds-dialog-*` for Dialog, preventing cross-primitive selector collisions.
25
+ - **Performance and internal correctness.** `setStyle` snapshots and restores prior inline values;
26
+ CSS-length resolution is memoised and probes inside the popover for correct token scope;
27
+ placement resolution is stable across renders.
28
+
29
+ - Updated dependencies
30
+
31
+ ## 15.2.1
32
+
33
+ ### Patch Changes
34
+
35
+ - Updated dependencies
36
+
3
37
  ## 15.2.0
4
38
 
5
39
  ### Minor Changes
package/dist/cjs/internal/components/modal-wrapper.js CHANGED
@@ -113,7 +113,7 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
113
113
  action: 'closed',
114
114
  componentName: 'modalDialog',
115
115
  packageName: "@atlaskit/modal-dialog",
116
- packageVersion: "15.1.3"
116
+ packageVersion: "15.2.1"
117
117
  });
118
118
  var onBlanketClicked = (0, _react.useCallback)(function (e) {
119
119
  if (shouldCloseOnOverlayClick) {
@@ -311,21 +311,26 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
311
311
  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
312
312
  var dialogPositionStyles = isFullScreen ? '' : // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
313
313
  "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
314
- return /*#__PURE__*/React.createElement(_dialog.Dialog, {
314
+ return /*#__PURE__*/React.createElement(_dialog.Dialog, (0, _extends2.default)({
315
315
  ref: dialogRef,
316
316
  id: dialogId,
317
317
  onClose: onDialogClose,
318
318
  onExitFinish: handleDialogExitFinish,
319
319
  animate: isFullScreen ? false : modalAnimation,
320
320
  isOpen: !isExiting,
321
- shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden),
322
- label: label,
323
- labelledBy: label ? undefined : titleId,
321
+ shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden)
322
+ // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
323
+ // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.
324
+ }, label ? {
325
+ label: label
326
+ } : {
327
+ labelledBy: titleId
328
+ }, {
324
329
  testId: defaultTestId
325
330
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
326
331
  ,
327
332
  style: dialogStyle
328
- }, /*#__PURE__*/React.createElement(_dialogScrollLock.DialogScrollLock, null), dialogPositionStyles &&
333
+ }), /*#__PURE__*/React.createElement(_dialogScrollLock.DialogScrollLock, null), dialogPositionStyles &&
329
334
  /*#__PURE__*/
330
335
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
331
336
  React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
package/dist/es2019/internal/components/modal-wrapper.js CHANGED
@@ -99,7 +99,7 @@ const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
99
99
  action: 'closed',
100
100
  componentName: 'modalDialog',
101
101
  packageName: "@atlaskit/modal-dialog",
102
- packageVersion: "15.1.3"
102
+ packageVersion: "15.2.1"
103
103
  });
104
104
  const onBlanketClicked = useCallback(e => {
105
105
  if (shouldCloseOnOverlayClick) {
@@ -296,21 +296,26 @@ const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
296
296
  const dialogPositionStyles = isFullScreen ? '' :
297
297
  // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
298
298
  `#${escapedDialogId}#${escapedDialogId}{margin:0;height:100vh}#${escapedDialogId}#${escapedDialogId}>div{height:100%}@media(min-width:30rem){#${escapedDialogId}#${escapedDialogId}{margin:${desktopMargin};height:auto;${desktopDialogMinHeight}max-width:calc(100vw - 120px)}#${escapedDialogId}#${escapedDialogId}>div{height:${desktopContentHeight};min-height:${desktopContentMinHeight}}}`;
299
- return /*#__PURE__*/React.createElement(Dialog, {
299
+ return /*#__PURE__*/React.createElement(Dialog, _extends({
300
300
  ref: dialogRef,
301
301
  id: dialogId,
302
302
  onClose: onDialogClose,
303
303
  onExitFinish: handleDialogExitFinish,
304
304
  animate: isFullScreen ? false : modalAnimation,
305
305
  isOpen: !isExiting,
306
- shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden),
307
- label: label,
308
- labelledBy: label ? undefined : titleId,
306
+ shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden)
307
+ // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
308
+ // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.
309
+ }, label ? {
310
+ label
311
+ } : {
312
+ labelledBy: titleId
313
+ }, {
309
314
  testId: defaultTestId
310
315
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
311
316
  ,
312
317
  style: dialogStyle
313
- }, /*#__PURE__*/React.createElement(DialogScrollLock, null), dialogPositionStyles &&
318
+ }), /*#__PURE__*/React.createElement(DialogScrollLock, null), dialogPositionStyles &&
314
319
  /*#__PURE__*/
315
320
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
316
321
  React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
package/dist/esm/internal/components/modal-wrapper.js CHANGED
@@ -104,7 +104,7 @@ var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
104
104
  action: 'closed',
105
105
  componentName: 'modalDialog',
106
106
  packageName: "@atlaskit/modal-dialog",
107
- packageVersion: "15.1.3"
107
+ packageVersion: "15.2.1"
108
108
  });
109
109
  var onBlanketClicked = useCallback(function (e) {
110
110
  if (shouldCloseOnOverlayClick) {
@@ -302,21 +302,26 @@ var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
302
302
  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
303
303
  var dialogPositionStyles = isFullScreen ? '' : // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
304
304
  "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
305
- return /*#__PURE__*/React.createElement(Dialog, {
305
+ return /*#__PURE__*/React.createElement(Dialog, _extends({
306
306
  ref: dialogRef,
307
307
  id: dialogId,
308
308
  onClose: onDialogClose,
309
309
  onExitFinish: handleDialogExitFinish,
310
310
  animate: isFullScreen ? false : modalAnimation,
311
311
  isOpen: !isExiting,
312
- shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden),
313
- label: label,
314
- labelledBy: label ? undefined : titleId,
312
+ shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden)
313
+ // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
314
+ // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.
315
+ }, label ? {
316
+ label: label
317
+ } : {
318
+ labelledBy: titleId
319
+ }, {
315
320
  testId: defaultTestId
316
321
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
317
322
  ,
318
323
  style: dialogStyle
319
- }, /*#__PURE__*/React.createElement(DialogScrollLock, null), dialogPositionStyles &&
324
+ }), /*#__PURE__*/React.createElement(DialogScrollLock, null), dialogPositionStyles &&
320
325
  /*#__PURE__*/
321
326
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
322
327
  React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/modal-dialog",
3
- "version": "15.2.0",
3
+ "version": "15.2.2",
4
4
  "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -39,16 +39,16 @@
39
39
  "@atlaskit/button": "^23.11.0",
40
40
  "@atlaskit/css": "^0.19.0",
41
41
  "@atlaskit/ds-lib": "^7.0.0",
42
- "@atlaskit/icon": "^35.0.0",
42
+ "@atlaskit/icon": "^35.1.0",
43
43
  "@atlaskit/layering": "^3.7.0",
44
44
  "@atlaskit/motion": "^6.2.0",
45
45
  "@atlaskit/platform-feature-flags": "^1.1.0",
46
46
  "@atlaskit/portal": "^5.5.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
48
48
  "@atlaskit/primitives": "^19.0.0",
49
- "@atlaskit/theme": "^24.0.0",
49
+ "@atlaskit/theme": "^25.0.0",
50
50
  "@atlaskit/tokens": "^13.0.0",
51
- "@atlaskit/top-layer": "^0.9.0",
51
+ "@atlaskit/top-layer": "^0.10.0",
52
52
  "@babel/runtime": "^7.0.0",
53
53
  "@compiled/react": "^0.20.0",
54
54
  "bind-event-listener": "^3.0.0",