@atlaskit/onboarding 14.3.7 → 14.4.0
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.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/components/spotlight-card.compiled.css +1 -1
- package/dist/cjs/components/spotlight-card.js +1 -1
- package/dist/cjs/components/use-spotlight.js +9 -2
- package/dist/cjs/styled/modal.compiled.css +2 -2
- package/dist/cjs/styled/modal.js +1 -1
- package/dist/es2019/components/spotlight-card.compiled.css +1 -1
- package/dist/es2019/components/spotlight-card.js +1 -1
- package/dist/es2019/components/use-spotlight.js +7 -2
- package/dist/es2019/styled/modal.compiled.css +2 -2
- package/dist/es2019/styled/modal.js +1 -1
- package/dist/esm/components/spotlight-card.compiled.css +1 -1
- package/dist/esm/components/spotlight-card.js +1 -1
- package/dist/esm/components/use-spotlight.js +9 -2
- package/dist/esm/styled/modal.compiled.css +2 -2
- package/dist/esm/styled/modal.js +1 -1
- package/dist/types/components/use-spotlight.d.ts +1 -0
- package/dist/types-ts4.5/components/use-spotlight.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/onboarding
|
|
2
2
|
|
|
3
|
+
## 14.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`098c92cc2bdcd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/098c92cc2bdcd) -
|
|
8
|
+
Add `checkVisibility` to `useSpotlight` return value, allowing consumers to determine whether a
|
|
9
|
+
spotlight target is visible as determined by `checkVisibility`
|
|
10
|
+
|
|
11
|
+
## 14.3.8
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`255837cfba315`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/255837cfba315) -
|
|
16
|
+
Internal changes to how border radius is applied.
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 14.3.7
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.
|
|
2
|
+
._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qszucj{box-shadow:var(--ds-shadow-raised,0 1px 1px #091e4240,0 0 1px #091e424f)}
|
|
3
3
|
._18m91wug{overflow-y:auto}
|
|
4
4
|
._1bah1yb4{justify-content:space-between}
|
|
5
5
|
._1e0c1txw{display:flex}
|
|
@@ -39,7 +39,7 @@ var DefaultFooter = function DefaultFooter(_ref2) {
|
|
|
39
39
|
}, children);
|
|
40
40
|
};
|
|
41
41
|
var containerStyles = {
|
|
42
|
-
root: "
|
|
42
|
+
root: "_2rko12b0 _1reo1wug _18m91wug _4t3i1ns9 _syaz15cr _1ul91lit _p12f1ogm"
|
|
43
43
|
};
|
|
44
44
|
var containerShadowStyles = {
|
|
45
45
|
root: "_16qszucj"
|
|
@@ -19,9 +19,16 @@ function useSpotlight() {
|
|
|
19
19
|
var isTargetRendered = (0, _react.useCallback)(function (target) {
|
|
20
20
|
return !!targetRef.current[target];
|
|
21
21
|
}, []);
|
|
22
|
+
var checkVisibility = (0, _react.useCallback)(function (target) {
|
|
23
|
+
var _targetRef$current$ta;
|
|
24
|
+
return ((_targetRef$current$ta = targetRef.current[target]) === null || _targetRef$current$ta === void 0 ? void 0 : _targetRef$current$ta.checkVisibility) || function () {
|
|
25
|
+
return false;
|
|
26
|
+
};
|
|
27
|
+
}, []);
|
|
22
28
|
return (0, _react.useMemo)(function () {
|
|
23
29
|
return {
|
|
24
|
-
isTargetRendered: isTargetRendered
|
|
30
|
+
isTargetRendered: isTargetRendered,
|
|
31
|
+
checkVisibility: checkVisibility
|
|
25
32
|
};
|
|
26
|
-
}, [isTargetRendered]);
|
|
33
|
+
}, [isTargetRendered, checkVisibility]);
|
|
27
34
|
}
|
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
|
|
8
8
|
._1q511jfw{padding-block-start:var(--ds-space-500,40px)}
|
|
9
9
|
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
10
|
-
.
|
|
10
|
+
._1s1gfajl{border-start-start-radius:var(--ds-radius-small,3px)}
|
|
11
11
|
._2lx21sbv{flex-direction:row-reverse}
|
|
12
12
|
._2lx2vrvc{flex-direction:row}
|
|
13
13
|
._4t3i1wug{height:auto}
|
|
14
|
-
.
|
|
14
|
+
._5fbcfajl{border-start-end-radius:var(--ds-radius-small,3px)}
|
|
15
15
|
._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
|
|
16
16
|
._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
|
|
17
17
|
._85i514no{padding-block-end:36px}
|
package/dist/cjs/styled/modal.js
CHANGED
|
@@ -57,7 +57,7 @@ var ModalImage = exports.ModalImage = function ModalImage(_ref3) {
|
|
|
57
57
|
return /*#__PURE__*/React.createElement("img", {
|
|
58
58
|
alt: alt,
|
|
59
59
|
src: src,
|
|
60
|
-
className: (0, _runtime.ax)(["_1bsb1osq _4t3i1wug
|
|
60
|
+
className: (0, _runtime.ax)(["_1bsb1osq _4t3i1wug _5fbcfajl _1s1gfajl _j722idpf"])
|
|
61
61
|
});
|
|
62
62
|
};
|
|
63
63
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.
|
|
2
|
+
._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qszucj{box-shadow:var(--ds-shadow-raised,0 1px 1px #091e4240,0 0 1px #091e424f)}
|
|
3
3
|
._18m91wug{overflow-y:auto}
|
|
4
4
|
._1bah1yb4{justify-content:space-between}
|
|
5
5
|
._1e0c1txw{display:flex}
|
|
@@ -26,7 +26,7 @@ const DefaultFooter = ({
|
|
|
26
26
|
className: ax(["_1e0c1txw _4cvr1h6o _1bah1yb4 _1q51u2gc"])
|
|
27
27
|
}, children);
|
|
28
28
|
const containerStyles = {
|
|
29
|
-
root: "
|
|
29
|
+
root: "_2rko12b0 _1reo1wug _18m91wug _4t3i1ns9 _syaz15cr _1ul91lit _p12f1ogm"
|
|
30
30
|
};
|
|
31
31
|
const containerShadowStyles = {
|
|
32
32
|
root: "_16qszucj"
|
|
@@ -13,7 +13,12 @@ export default function useSpotlight() {
|
|
|
13
13
|
targetRef.current = targets;
|
|
14
14
|
}, [targets]);
|
|
15
15
|
const isTargetRendered = useCallback(target => !!targetRef.current[target], []);
|
|
16
|
+
const checkVisibility = useCallback(target => {
|
|
17
|
+
var _targetRef$current$ta;
|
|
18
|
+
return ((_targetRef$current$ta = targetRef.current[target]) === null || _targetRef$current$ta === void 0 ? void 0 : _targetRef$current$ta.checkVisibility) || (() => false);
|
|
19
|
+
}, []);
|
|
16
20
|
return useMemo(() => ({
|
|
17
|
-
isTargetRendered
|
|
18
|
-
|
|
21
|
+
isTargetRendered,
|
|
22
|
+
checkVisibility
|
|
23
|
+
}), [isTargetRendered, checkVisibility]);
|
|
19
24
|
}
|
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
|
|
8
8
|
._1q511jfw{padding-block-start:var(--ds-space-500,40px)}
|
|
9
9
|
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
10
|
-
.
|
|
10
|
+
._1s1gfajl{border-start-start-radius:var(--ds-radius-small,3px)}
|
|
11
11
|
._2lx21sbv{flex-direction:row-reverse}
|
|
12
12
|
._2lx2vrvc{flex-direction:row}
|
|
13
13
|
._4t3i1wug{height:auto}
|
|
14
|
-
.
|
|
14
|
+
._5fbcfajl{border-start-end-radius:var(--ds-radius-small,3px)}
|
|
15
15
|
._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
|
|
16
16
|
._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
|
|
17
17
|
._85i514no{padding-block-end:36px}
|
|
@@ -49,7 +49,7 @@ export const ModalImage = ({
|
|
|
49
49
|
}) => /*#__PURE__*/React.createElement("img", {
|
|
50
50
|
alt: alt,
|
|
51
51
|
src: src,
|
|
52
|
-
className: ax(["_1bsb1osq _4t3i1wug
|
|
52
|
+
className: ax(["_1bsb1osq _4t3i1wug _5fbcfajl _1s1gfajl _j722idpf"])
|
|
53
53
|
});
|
|
54
54
|
|
|
55
55
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.
|
|
2
|
+
._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qszucj{box-shadow:var(--ds-shadow-raised,0 1px 1px #091e4240,0 0 1px #091e424f)}
|
|
3
3
|
._18m91wug{overflow-y:auto}
|
|
4
4
|
._1bah1yb4{justify-content:space-between}
|
|
5
5
|
._1e0c1txw{display:flex}
|
|
@@ -30,7 +30,7 @@ var DefaultFooter = function DefaultFooter(_ref2) {
|
|
|
30
30
|
}, children);
|
|
31
31
|
};
|
|
32
32
|
var containerStyles = {
|
|
33
|
-
root: "
|
|
33
|
+
root: "_2rko12b0 _1reo1wug _18m91wug _4t3i1ns9 _syaz15cr _1ul91lit _p12f1ogm"
|
|
34
34
|
};
|
|
35
35
|
var containerShadowStyles = {
|
|
36
36
|
root: "_16qszucj"
|
|
@@ -14,9 +14,16 @@ export default function useSpotlight() {
|
|
|
14
14
|
var isTargetRendered = useCallback(function (target) {
|
|
15
15
|
return !!targetRef.current[target];
|
|
16
16
|
}, []);
|
|
17
|
+
var checkVisibility = useCallback(function (target) {
|
|
18
|
+
var _targetRef$current$ta;
|
|
19
|
+
return ((_targetRef$current$ta = targetRef.current[target]) === null || _targetRef$current$ta === void 0 ? void 0 : _targetRef$current$ta.checkVisibility) || function () {
|
|
20
|
+
return false;
|
|
21
|
+
};
|
|
22
|
+
}, []);
|
|
17
23
|
return useMemo(function () {
|
|
18
24
|
return {
|
|
19
|
-
isTargetRendered: isTargetRendered
|
|
25
|
+
isTargetRendered: isTargetRendered,
|
|
26
|
+
checkVisibility: checkVisibility
|
|
20
27
|
};
|
|
21
|
-
}, [isTargetRendered]);
|
|
28
|
+
}, [isTargetRendered, checkVisibility]);
|
|
22
29
|
}
|
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
|
|
8
8
|
._1q511jfw{padding-block-start:var(--ds-space-500,40px)}
|
|
9
9
|
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
10
|
-
.
|
|
10
|
+
._1s1gfajl{border-start-start-radius:var(--ds-radius-small,3px)}
|
|
11
11
|
._2lx21sbv{flex-direction:row-reverse}
|
|
12
12
|
._2lx2vrvc{flex-direction:row}
|
|
13
13
|
._4t3i1wug{height:auto}
|
|
14
|
-
.
|
|
14
|
+
._5fbcfajl{border-start-end-radius:var(--ds-radius-small,3px)}
|
|
15
15
|
._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
|
|
16
16
|
._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
|
|
17
17
|
._85i514no{padding-block-end:36px}
|
package/dist/esm/styled/modal.js
CHANGED
|
@@ -49,7 +49,7 @@ export var ModalImage = function ModalImage(_ref3) {
|
|
|
49
49
|
return /*#__PURE__*/React.createElement("img", {
|
|
50
50
|
alt: alt,
|
|
51
51
|
src: src,
|
|
52
|
-
className: ax(["_1bsb1osq _4t3i1wug
|
|
52
|
+
className: ax(["_1bsb1osq _4t3i1wug _5fbcfajl _1s1gfajl _j722idpf"])
|
|
53
53
|
});
|
|
54
54
|
};
|
|
55
55
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/onboarding",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.4.0",
|
|
4
4
|
"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|