@telus-uds/components-community.sticky 1.1.31 → 1.1.33
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 +22 -2
- package/lib/Sticky.js +2 -24
- package/lib/index.js +0 -3
- package/lib/styles.js +0 -4
- package/lib-module/Sticky.js +2 -16
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @telus-uds/components-community.sticky
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 10 Nov 2023 22:28:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 1.1.33
|
|
8
|
+
|
|
9
|
+
Fri, 10 Nov 2023 22:28:25 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @telus-uds/components-base to v1.67.1
|
|
14
|
+
- Bump @telus-uds/system-theme-tokens to v2.44.1
|
|
15
|
+
- Bump @telus-uds/components-web to v2.23.0
|
|
16
|
+
|
|
17
|
+
## 1.1.32
|
|
18
|
+
|
|
19
|
+
Tue, 07 Nov 2023 16:32:21 GMT
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- Bump @telus-uds/components-base to v1.67.0
|
|
24
|
+
- Bump @telus-uds/system-theme-tokens to v2.44.0
|
|
25
|
+
- Bump @telus-uds/components-web to v2.22.0
|
|
26
|
+
|
|
7
27
|
## 1.1.31
|
|
8
28
|
|
|
9
|
-
Wed, 01 Nov 2023
|
|
29
|
+
Wed, 01 Nov 2023 01:05:43 GMT
|
|
10
30
|
|
|
11
31
|
### Patches
|
|
12
32
|
|
package/lib/Sticky.js
CHANGED
|
@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _componentsBase = require("@telus-uds/components-base");
|
|
13
|
-
|
|
14
10
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
15
|
-
|
|
16
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
|
|
18
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
13
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
-
|
|
22
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
-
|
|
24
15
|
function createObserver(ref, callback) {
|
|
25
16
|
let workWithViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
26
17
|
const options = {
|
|
@@ -30,20 +21,17 @@ function createObserver(ref, callback) {
|
|
|
30
21
|
let [e] = _ref;
|
|
31
22
|
const isNotVisibleInViewport = e.intersectionRatio < 1;
|
|
32
23
|
let correctYPosition = true;
|
|
33
|
-
|
|
34
24
|
if (workWithViewport) {
|
|
35
25
|
const {
|
|
36
26
|
y
|
|
37
27
|
} = e.boundingClientRect;
|
|
38
28
|
correctYPosition = y < 0;
|
|
39
29
|
}
|
|
40
|
-
|
|
41
30
|
callback(isNotVisibleInViewport && correctYPosition);
|
|
42
31
|
}, options);
|
|
43
32
|
observer.observe(ref.current);
|
|
44
33
|
return observer;
|
|
45
34
|
}
|
|
46
|
-
|
|
47
35
|
const Sticky = _ref2 => {
|
|
48
36
|
let {
|
|
49
37
|
children,
|
|
@@ -70,31 +58,25 @@ const Sticky = _ref2 => {
|
|
|
70
58
|
if (observer) {
|
|
71
59
|
observer.disconnect();
|
|
72
60
|
}
|
|
73
|
-
|
|
74
61
|
if (variant === 'default' || variant === 'hidden') {
|
|
75
62
|
setObserver(createObserver(sentinelTopRef, intersected => {
|
|
76
63
|
var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
|
|
77
|
-
|
|
78
64
|
(_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 ? void 0 : _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
|
|
79
65
|
(_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle('top', intersected);
|
|
80
|
-
|
|
81
66
|
if (intersected) {
|
|
82
67
|
var _stickyWrapperRef$cur3;
|
|
83
|
-
|
|
84
68
|
(_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
|
|
85
69
|
}
|
|
86
70
|
}, workWithViewport));
|
|
87
71
|
}
|
|
88
|
-
|
|
89
72
|
if (variant === 'alternate') {
|
|
90
73
|
setObserver(createObserver(sentinelBottomRef, intersected => {
|
|
91
74
|
var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
|
|
92
|
-
|
|
93
75
|
(_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
|
|
94
76
|
(_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 ? void 0 : _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
|
|
95
77
|
}, workWithViewport));
|
|
96
|
-
}
|
|
97
|
-
|
|
78
|
+
}
|
|
79
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
98
80
|
}, [variant]);
|
|
99
81
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
100
82
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -117,26 +99,22 @@ const Sticky = _ref2 => {
|
|
|
117
99
|
})]
|
|
118
100
|
});
|
|
119
101
|
};
|
|
120
|
-
|
|
121
102
|
Sticky.propTypes = {
|
|
122
103
|
/**
|
|
123
104
|
* Sets top and bottom padding using the theme's spacing scale.
|
|
124
105
|
*
|
|
125
106
|
*/
|
|
126
107
|
vertical: _componentsBase.spacingProps.types.spacingValue,
|
|
127
|
-
|
|
128
108
|
/**
|
|
129
109
|
* Sets left and right padding using the theme's spacing scale.
|
|
130
110
|
*
|
|
131
111
|
*/
|
|
132
112
|
horizontal: _componentsBase.spacingProps.types.spacingValue,
|
|
133
|
-
|
|
134
113
|
/**
|
|
135
114
|
* Whether the sticky should wait to cross the viewport to stick or not
|
|
136
115
|
* Defaults to true. Set to false for nested container (using overflow)
|
|
137
116
|
*/
|
|
138
117
|
workWithViewport: _propTypes.default.bool,
|
|
139
|
-
|
|
140
118
|
/**
|
|
141
119
|
* Sticky accepts any content as children.
|
|
142
120
|
*/
|
package/lib/index.js
CHANGED
|
@@ -10,10 +10,7 @@ Object.defineProperty(exports, "Sticky", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
exports.default = void 0;
|
|
13
|
-
|
|
14
13
|
var _Sticky = _interopRequireDefault(require("./Sticky"));
|
|
15
|
-
|
|
16
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
15
|
var _default = _Sticky.default;
|
|
19
16
|
exports.default = _default;
|
package/lib/styles.js
CHANGED
|
@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
const StickyWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
|
|
13
10
|
displayName: "styles__StickyWrapper",
|
|
14
11
|
componentId: "[object Object]__sc-160gk65-0"
|
|
15
12
|
})(["top:0;&.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;top:0px;z-index:1;box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}&.hidden{animation:0.3s animateIn forwards;.sticky-element{animation:0.3s shadowIn forwards;}}}&.alternate{}&.hidden{position:sticky;pointerevents:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;animation:0.6s shadowOut forwards;}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointerevents:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointerevents:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"]);
|
|
16
|
-
|
|
17
13
|
var _default = StickyWrapper;
|
|
18
14
|
exports.default = _default;
|
package/lib-module/Sticky.js
CHANGED
|
@@ -5,7 +5,6 @@ import StickyWrapper from './styles';
|
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
-
|
|
9
8
|
function createObserver(ref, callback) {
|
|
10
9
|
let workWithViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
11
10
|
const options = {
|
|
@@ -15,20 +14,17 @@ function createObserver(ref, callback) {
|
|
|
15
14
|
let [e] = _ref;
|
|
16
15
|
const isNotVisibleInViewport = e.intersectionRatio < 1;
|
|
17
16
|
let correctYPosition = true;
|
|
18
|
-
|
|
19
17
|
if (workWithViewport) {
|
|
20
18
|
const {
|
|
21
19
|
y
|
|
22
20
|
} = e.boundingClientRect;
|
|
23
21
|
correctYPosition = y < 0;
|
|
24
22
|
}
|
|
25
|
-
|
|
26
23
|
callback(isNotVisibleInViewport && correctYPosition);
|
|
27
24
|
}, options);
|
|
28
25
|
observer.observe(ref.current);
|
|
29
26
|
return observer;
|
|
30
27
|
}
|
|
31
|
-
|
|
32
28
|
const Sticky = _ref2 => {
|
|
33
29
|
let {
|
|
34
30
|
children,
|
|
@@ -55,31 +51,25 @@ const Sticky = _ref2 => {
|
|
|
55
51
|
if (observer) {
|
|
56
52
|
observer.disconnect();
|
|
57
53
|
}
|
|
58
|
-
|
|
59
54
|
if (variant === 'default' || variant === 'hidden') {
|
|
60
55
|
setObserver(createObserver(sentinelTopRef, intersected => {
|
|
61
56
|
var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
|
|
62
|
-
|
|
63
57
|
(_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 ? void 0 : _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
|
|
64
58
|
(_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle('top', intersected);
|
|
65
|
-
|
|
66
59
|
if (intersected) {
|
|
67
60
|
var _stickyWrapperRef$cur3;
|
|
68
|
-
|
|
69
61
|
(_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
|
|
70
62
|
}
|
|
71
63
|
}, workWithViewport));
|
|
72
64
|
}
|
|
73
|
-
|
|
74
65
|
if (variant === 'alternate') {
|
|
75
66
|
setObserver(createObserver(sentinelBottomRef, intersected => {
|
|
76
67
|
var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
|
|
77
|
-
|
|
78
68
|
(_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
|
|
79
69
|
(_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 ? void 0 : _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
|
|
80
70
|
}, workWithViewport));
|
|
81
|
-
}
|
|
82
|
-
|
|
71
|
+
}
|
|
72
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
83
73
|
}, [variant]);
|
|
84
74
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
85
75
|
children: [/*#__PURE__*/_jsx("div", {
|
|
@@ -102,26 +92,22 @@ const Sticky = _ref2 => {
|
|
|
102
92
|
})]
|
|
103
93
|
});
|
|
104
94
|
};
|
|
105
|
-
|
|
106
95
|
Sticky.propTypes = {
|
|
107
96
|
/**
|
|
108
97
|
* Sets top and bottom padding using the theme's spacing scale.
|
|
109
98
|
*
|
|
110
99
|
*/
|
|
111
100
|
vertical: spacingProps.types.spacingValue,
|
|
112
|
-
|
|
113
101
|
/**
|
|
114
102
|
* Sets left and right padding using the theme's spacing scale.
|
|
115
103
|
*
|
|
116
104
|
*/
|
|
117
105
|
horizontal: spacingProps.types.spacingValue,
|
|
118
|
-
|
|
119
106
|
/**
|
|
120
107
|
* Whether the sticky should wait to cross the viewport to stick or not
|
|
121
108
|
* Defaults to true. Set to false for nested container (using overflow)
|
|
122
109
|
*/
|
|
123
110
|
workWithViewport: PropTypes.bool,
|
|
124
|
-
|
|
125
111
|
/**
|
|
126
112
|
* Sticky accepts any content as children.
|
|
127
113
|
*/
|
package/package.json
CHANGED
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
"extends @telus-uds/browserslist-config"
|
|
5
5
|
],
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@telus-uds/components-base": "1.
|
|
7
|
+
"@telus-uds/components-base": "1.67.1",
|
|
8
8
|
"@telus-uds/system-constants": "^1.3.0",
|
|
9
|
-
"@telus-uds/system-theme-tokens": "^2.
|
|
9
|
+
"@telus-uds/system-theme-tokens": "^2.44.1",
|
|
10
10
|
"prop-types": "^15.7.2",
|
|
11
11
|
"styled-components": "^5.3.10"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
14
|
-
"@telus-uds/components-web": "^2.
|
|
14
|
+
"@telus-uds/components-web": "^2.23.0",
|
|
15
15
|
"@telus-uds/browserslist-config": "^1.0.5",
|
|
16
16
|
"@testing-library/jest-dom": "^5.16.1",
|
|
17
17
|
"@testing-library/react": "^13.3.0",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"standard-engine": {
|
|
46
46
|
"skip": true
|
|
47
47
|
},
|
|
48
|
-
"version": "1.1.
|
|
48
|
+
"version": "1.1.33"
|
|
49
49
|
}
|