@atlaskit/modal-dialog 14.2.8 → 14.2.10

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 (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/internal/components/scroll-container.compiled.css +2 -2
  3. package/dist/cjs/internal/components/scroll-container.js +13 -12
  4. package/dist/cjs/modal-wrapper.js +1 -1
  5. package/dist/es2019/internal/components/scroll-container.js +13 -9
  6. package/dist/es2019/modal-wrapper.js +1 -1
  7. package/dist/esm/internal/components/scroll-container.compiled.css +2 -2
  8. package/dist/esm/internal/components/scroll-container.js +13 -12
  9. package/dist/esm/modal-wrapper.js +1 -1
  10. package/package.json +9 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 14.2.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [#182316](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/182316)
8
+ [`3e3e11916be69`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e3e11916be69) -
9
+ Migrated the internal usage of @atlaskit/focus-ring which uses Emotion for styling, to the new
10
+ version built with Compiled CSS-in-JS.
11
+ - Updated dependencies
12
+
13
+ ## 14.2.9
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 14.2.8
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/internal/components/scroll-container.compiled.css CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
- ._179r1h1c{border-block-end:var(--_1veqrdx)}
3
- ._mqm21h1c{border-block-start:var(--_1veqrdx)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
2
+ ._179rv2xi{border-block-end:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}
3
+ ._mqm2v2xi{border-block-start:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
4
4
  ._16jlkb7n{flex-grow:1}
5
5
  ._18m91wug{overflow-y:auto}
6
6
  ._1e0c1kw7{display:inherit}
package/dist/cjs/internal/components/scroll-container.js CHANGED
@@ -13,16 +13,19 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
13
13
  var _react = _interopRequireWildcard(require("react"));
14
14
  var _bindEventListener = require("bind-event-listener");
15
15
  var _rafSchd = _interopRequireDefault(require("raf-schd"));
16
+ var _css = require("@atlaskit/css");
16
17
  var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
17
18
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
18
19
  var _useLazyCallback = _interopRequireDefault(require("@atlaskit/ds-lib/use-lazy-callback"));
19
- var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
20
+ var _compiled = require("@atlaskit/primitives/compiled");
20
21
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
22
  var keylineColor = "var(--ds-border, #091E4224)";
22
- var baseStyles = null;
23
+ var styles = {
24
+ base: "_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
25
+ topKeyline: "_mqm2v2xi",
26
+ bottomKeyline: "_179rv2xi"
27
+ };
23
28
  var keylineHeight = 2;
24
- var topKeylineStyles = null;
25
- var bottomKeylineStyles = null;
26
29
  /**
27
30
  * A container that shows top and bottom keylines when the
28
31
  * content overflows into the scrollable element.
@@ -84,21 +87,19 @@ var ScrollContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
84
87
  unbindTargetEvent();
85
88
  };
86
89
  }, [setLazyKeylines]);
87
- return /*#__PURE__*/_react.default.createElement(_focusRing.default, {
90
+ return /*#__PURE__*/_react.default.createElement(_compiled.Focusable, {
91
+ as: "div",
88
92
  isInset: true
89
- }, /*#__PURE__*/_react.default.createElement("div", {
90
93
  // tabindex is allowed here so that keyboard users can scroll content
91
94
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
95
+ ,
92
96
  tabIndex: showContentFocus ? 0 : undefined,
93
97
  role: showContentFocus ? 'region' : undefined,
94
98
  "aria-label": showContentFocus ? 'Scrollable content' : undefined,
95
- "data-testid": testId && "".concat(testId, "--scrollable"),
99
+ testId: testId && "".concat(testId, "--scrollable"),
96
100
  ref: (0, _mergeRefs.default)([ref, scrollableRef]),
97
- className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug", showTopKeyline && "_mqm21h1c", showBottomKeyline && "_179r1h1c"]),
98
- style: {
99
- "--_1veqrdx": (0, _runtime.ix)("var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor))
100
- }
101
- }, children));
101
+ xcss: (0, _css.cx)(styles.base, showTopKeyline && styles.topKeyline, showBottomKeyline && styles.bottomKeyline)
102
+ }, children);
102
103
  });
103
104
  ScrollContainer.displayName = 'ScrollContainer';
104
105
  var _default = exports.default = ScrollContainer;
package/dist/cjs/modal-wrapper.js CHANGED
@@ -86,7 +86,7 @@ var ModalWrapper = function ModalWrapper(props) {
86
86
  action: 'closed',
87
87
  componentName: 'modalDialog',
88
88
  packageName: "@atlaskit/modal-dialog",
89
- packageVersion: "14.2.7"
89
+ packageVersion: "14.2.9"
90
90
  });
91
91
  var onBlanketClicked = (0, _react.useCallback)(function (e) {
92
92
  if (shouldCloseOnOverlayClick) {
package/dist/es2019/internal/components/scroll-container.js CHANGED
@@ -4,15 +4,18 @@ import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { forwardRef, useEffect, useRef, useState } from 'react';
5
5
  import { bind } from 'bind-event-listener';
6
6
  import rafSchedule from 'raf-schd';
7
+ import { cx } from '@atlaskit/css';
7
8
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
8
9
  import noop from '@atlaskit/ds-lib/noop';
9
10
  import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
10
- import FocusRing from '@atlaskit/focus-ring';
11
+ import { Focusable } from '@atlaskit/primitives/compiled';
11
12
  const keylineColor = "var(--ds-border, #091E4224)";
12
- const baseStyles = null;
13
+ const styles = {
14
+ base: "_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
15
+ topKeyline: "_mqm2v2xi",
16
+ bottomKeyline: "_179rv2xi"
17
+ };
13
18
  const keylineHeight = 2;
14
- const topKeylineStyles = null;
15
- const bottomKeylineStyles = null;
16
19
  /**
17
20
  * A container that shows top and bottom keylines when the
18
21
  * content overflows into the scrollable element.
@@ -66,18 +69,19 @@ const ScrollContainer = /*#__PURE__*/forwardRef(({
66
69
  unbindTargetEvent();
67
70
  };
68
71
  }, [setLazyKeylines]);
69
- return /*#__PURE__*/React.createElement(FocusRing, {
72
+ return /*#__PURE__*/React.createElement(Focusable, {
73
+ as: "div",
70
74
  isInset: true
71
- }, /*#__PURE__*/React.createElement("div", {
72
75
  // tabindex is allowed here so that keyboard users can scroll content
73
76
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
77
+ ,
74
78
  tabIndex: showContentFocus ? 0 : undefined,
75
79
  role: showContentFocus ? 'region' : undefined,
76
80
  "aria-label": showContentFocus ? 'Scrollable content' : undefined,
77
- "data-testid": testId && `${testId}--scrollable`,
81
+ testId: testId && `${testId}--scrollable`,
78
82
  ref: mergeRefs([ref, scrollableRef]),
79
- className: ax(["_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug", showTopKeyline && "_mqm2v2xi", showBottomKeyline && "_179rv2xi"])
80
- }, children));
83
+ xcss: cx(styles.base, showTopKeyline && styles.topKeyline, showBottomKeyline && styles.bottomKeyline)
84
+ }, children);
81
85
  });
82
86
  ScrollContainer.displayName = 'ScrollContainer';
83
87
  export default ScrollContainer;
package/dist/es2019/modal-wrapper.js CHANGED
@@ -73,7 +73,7 @@ const ModalWrapper = props => {
73
73
  action: 'closed',
74
74
  componentName: 'modalDialog',
75
75
  packageName: "@atlaskit/modal-dialog",
76
- packageVersion: "14.2.7"
76
+ packageVersion: "14.2.9"
77
77
  });
78
78
  const onBlanketClicked = useCallback(e => {
79
79
  if (shouldCloseOnOverlayClick) {
package/dist/esm/internal/components/scroll-container.compiled.css CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
- ._179r1h1c{border-block-end:var(--_1veqrdx)}
3
- ._mqm21h1c{border-block-start:var(--_1veqrdx)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
2
+ ._179rv2xi{border-block-end:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}
3
+ ._mqm2v2xi{border-block-start:var(--ds-border-width-outline,2px) solid var(--ds-border,#091e4224)}._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
4
4
  ._16jlkb7n{flex-grow:1}
5
5
  ._18m91wug{overflow-y:auto}
6
6
  ._1e0c1kw7{display:inherit}
package/dist/esm/internal/components/scroll-container.js CHANGED
@@ -5,15 +5,18 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import React, { forwardRef, useEffect, useRef, useState } from 'react';
6
6
  import { bind } from 'bind-event-listener';
7
7
  import rafSchedule from 'raf-schd';
8
+ import { cx } from '@atlaskit/css';
8
9
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
9
10
  import noop from '@atlaskit/ds-lib/noop';
10
11
  import useLazyCallback from '@atlaskit/ds-lib/use-lazy-callback';
11
- import FocusRing from '@atlaskit/focus-ring';
12
+ import { Focusable } from '@atlaskit/primitives/compiled';
12
13
  var keylineColor = "var(--ds-border, #091E4224)";
13
- var baseStyles = null;
14
+ var styles = {
15
+ base: "_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug",
16
+ topKeyline: "_mqm2v2xi",
17
+ bottomKeyline: "_179rv2xi"
18
+ };
14
19
  var keylineHeight = 2;
15
- var topKeylineStyles = null;
16
- var bottomKeylineStyles = null;
17
20
  /**
18
21
  * A container that shows top and bottom keylines when the
19
22
  * content overflows into the scrollable element.
@@ -75,21 +78,19 @@ var ScrollContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
75
78
  unbindTargetEvent();
76
79
  };
77
80
  }, [setLazyKeylines]);
78
- return /*#__PURE__*/React.createElement(FocusRing, {
81
+ return /*#__PURE__*/React.createElement(Focusable, {
82
+ as: "div",
79
83
  isInset: true
80
- }, /*#__PURE__*/React.createElement("div", {
81
84
  // tabindex is allowed here so that keyboard users can scroll content
82
85
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
86
+ ,
83
87
  tabIndex: showContentFocus ? 0 : undefined,
84
88
  role: showContentFocus ? 'region' : undefined,
85
89
  "aria-label": showContentFocus ? 'Scrollable content' : undefined,
86
- "data-testid": testId && "".concat(testId, "--scrollable"),
90
+ testId: testId && "".concat(testId, "--scrollable"),
87
91
  ref: mergeRefs([ref, scrollableRef]),
88
- className: ax(["_16jlkb7n _1o9zkb7n _i0dl1kw7 _1e0c1kw7 _2lx21kw7 _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1reo15vq _18m91wug _1jykn7od _wzg61wug", showTopKeyline && "_mqm21h1c", showBottomKeyline && "_179r1h1c"]),
89
- style: {
90
- "--_1veqrdx": ix("var(--ds-border-width-outline, 2px)".concat(" solid ", keylineColor))
91
- }
92
- }, children));
92
+ xcss: cx(styles.base, showTopKeyline && styles.topKeyline, showBottomKeyline && styles.bottomKeyline)
93
+ }, children);
93
94
  });
94
95
  ScrollContainer.displayName = 'ScrollContainer';
95
96
  export default ScrollContainer;
package/dist/esm/modal-wrapper.js CHANGED
@@ -77,7 +77,7 @@ var ModalWrapper = function ModalWrapper(props) {
77
77
  action: 'closed',
78
78
  componentName: 'modalDialog',
79
79
  packageName: "@atlaskit/modal-dialog",
80
- packageVersion: "14.2.7"
80
+ packageVersion: "14.2.9"
81
81
  });
82
82
  var onBlanketClicked = useCallback(function (e) {
83
83
  if (shouldCloseOnOverlayClick) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/modal-dialog",
3
- "version": "14.2.8",
3
+ "version": "14.2.10",
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/"
@@ -21,8 +21,7 @@
21
21
  "website": {
22
22
  "name": "Modal dialog",
23
23
  "category": "Messaging"
24
- },
25
- "runReact18": true
24
+ }
26
25
  },
27
26
  "scripts": {
28
27
  "watch": "tsc --watch --noEmit --project './tsconfig.json'"
@@ -31,18 +30,18 @@
31
30
  "@atlaskit/analytics-next": "^11.1.0",
32
31
  "@atlaskit/blanket": "^15.0.0",
33
32
  "@atlaskit/button": "^23.2.0",
34
- "@atlaskit/css": "^0.11.0",
33
+ "@atlaskit/css": "^0.12.0",
35
34
  "@atlaskit/ds-lib": "^4.0.0",
36
35
  "@atlaskit/focus-ring": "^3.0.0",
37
- "@atlaskit/icon": "^27.0.0",
36
+ "@atlaskit/icon": "^27.3.0",
38
37
  "@atlaskit/layering": "^3.0.0",
39
38
  "@atlaskit/motion": "^5.1.0",
40
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
41
40
  "@atlaskit/portal": "^5.1.0",
42
41
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
43
- "@atlaskit/primitives": "^14.9.0",
42
+ "@atlaskit/primitives": "^14.10.0",
44
43
  "@atlaskit/theme": "^18.0.0",
45
- "@atlaskit/tokens": "^5.3.0",
44
+ "@atlaskit/tokens": "^5.4.0",
46
45
  "@babel/runtime": "^7.0.0",
47
46
  "@compiled/react": "^0.18.3",
48
47
  "bind-event-listener": "^3.0.0",
@@ -58,7 +57,7 @@
58
57
  "@af/integration-testing": "workspace:^",
59
58
  "@af/visual-regression": "workspace:^",
60
59
  "@atlaskit/avatar": "^25.1.0",
61
- "@atlaskit/avatar-group": "^12.0.0",
60
+ "@atlaskit/avatar-group": "^12.1.0",
62
61
  "@atlaskit/banner": "^14.0.0",
63
62
  "@atlaskit/breadcrumbs": "^15.1.0",
64
63
  "@atlaskit/checkbox": "^17.1.0",
@@ -66,14 +65,14 @@
66
65
  "@atlaskit/datetime-picker": "^17.0.0",
67
66
  "@atlaskit/docs": "^11.0.0",
68
67
  "@atlaskit/dropdown-menu": "^16.1.0",
69
- "@atlaskit/flag": "^17.1.0",
68
+ "@atlaskit/flag": "^17.2.0",
70
69
  "@atlaskit/form": "^12.0.0",
71
70
  "@atlaskit/heading": "^5.2.0",
72
71
  "@atlaskit/link": "^3.2.0",
73
72
  "@atlaskit/popup": "^4.3.0",
74
73
  "@atlaskit/radio": "^8.1.0",
75
74
  "@atlaskit/section-message": "^8.2.0",
76
- "@atlaskit/select": "^20.7.0",
75
+ "@atlaskit/select": "^21.1.0",
77
76
  "@atlaskit/ssr": "workspace:^",
78
77
  "@atlaskit/textfield": "^8.0.0",
79
78
  "@atlaskit/tooltip": "^20.3.0",