@instructure/ui-responsive 8.56.0 → 8.56.2-pr-snapshot-1721749364069
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
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [8.56.2-pr-snapshot-1721749364069](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2-pr-snapshot-1721749364069) (2024-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-responsive
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [8.56.1](https://github.com/instructure/instructure-ui/compare/v8.56.0...v8.56.1) (2024-06-13)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @instructure/ui-responsive
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
# [8.56.0](https://github.com/instructure/instructure-ui/compare/v8.55.1...v8.56.0) (2024-05-06)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @instructure/ui-responsive
|
package/lib/Responsive/index.js
CHANGED
|
@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Responsive = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var
|
|
9
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
10
10
|
var _console = require("@instructure/console");
|
|
11
11
|
var _addElementQueryMatchListener = require("../addElementQueryMatchListener");
|
|
12
12
|
var _addMediaQueryMatchListener = require("../addMediaQueryMatchListener");
|
|
13
|
-
var
|
|
13
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
14
14
|
var _props = require("./props");
|
|
15
15
|
/*
|
|
16
16
|
* The MIT License (MIT)
|
|
@@ -93,14 +93,14 @@ class Responsive extends _react.Component {
|
|
|
93
93
|
const _this$props = this.props,
|
|
94
94
|
match = _this$props.match,
|
|
95
95
|
query = _this$props.query;
|
|
96
|
-
if (match !== prevProps.match || !(0,
|
|
96
|
+
if (match !== prevProps.match || !(0, _uiUtils.deepEqual)(query, prevProps.query)) {
|
|
97
97
|
this.removeMatchListener();
|
|
98
98
|
this._matchListener = this.addMatchListener(query, this.updateMatches, match);
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
addMatchListener(query, updateMatches, match = this.props.match) {
|
|
102
102
|
const matchListener = match === 'element' ? _addElementQueryMatchListener.addElementQueryMatchListener : _addMediaQueryMatchListener.addMediaQueryMatchListener;
|
|
103
|
-
return matchListener(query, () => (0,
|
|
103
|
+
return matchListener(query, () => (0, _uiDomUtils.findDOMNode)(this), updateMatches);
|
|
104
104
|
}
|
|
105
105
|
removeMatchListener() {
|
|
106
106
|
if (this._matchListener) {
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.addElementQueryMatchListener = void 0;
|
|
7
7
|
exports.updateElementMatches = updateElementMatches;
|
|
8
8
|
var _parseQuery = require("./parseQuery");
|
|
9
|
-
var
|
|
10
|
-
var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
|
|
9
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
11
10
|
var _debounce = require("@instructure/debounce");
|
|
12
11
|
/*
|
|
13
12
|
* The MIT License (MIT)
|
|
@@ -90,7 +89,7 @@ var _debounce = require("@instructure/debounce");
|
|
|
90
89
|
*/
|
|
91
90
|
const addElementQueryMatchListener = (query, el, cb) => {
|
|
92
91
|
const node = typeof el === 'function' ? el() : el;
|
|
93
|
-
const _getBoundingClientRec = (0,
|
|
92
|
+
const _getBoundingClientRec = (0, _uiDomUtils.getBoundingClientRect)(node),
|
|
94
93
|
width = _getBoundingClientRec.width,
|
|
95
94
|
height = _getBoundingClientRec.height;
|
|
96
95
|
let matches = [];
|
|
@@ -137,8 +136,8 @@ const addElementQueryMatchListener = (query, el, cb) => {
|
|
|
137
136
|
};
|
|
138
137
|
exports.addElementQueryMatchListener = addElementQueryMatchListener;
|
|
139
138
|
function updateElementMatches(query, el, matches = [], size) {
|
|
140
|
-
const node = (0,
|
|
141
|
-
let _ref = size || (0,
|
|
139
|
+
const node = (0, _uiDomUtils.findDOMNode)(el);
|
|
140
|
+
let _ref = size || (0, _uiDomUtils.getBoundingClientRect)(node),
|
|
142
141
|
width = _ref.width,
|
|
143
142
|
height = _ref.height;
|
|
144
143
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.addMediaQueryMatchListener = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
8
8
|
var _jsonToMediaQuery = require("./jsonToMediaQuery");
|
|
9
9
|
/*
|
|
10
10
|
* The MIT License (MIT)
|
|
@@ -82,7 +82,7 @@ var _jsonToMediaQuery = require("./jsonToMediaQuery");
|
|
|
82
82
|
* @param {object} matchMedia - called with an array of the names of the currently matching queries whenever a matching query changes
|
|
83
83
|
* @returns {function} remove() function to call to remove the listener
|
|
84
84
|
*/
|
|
85
|
-
const addMediaQueryMatchListener = (query, el, cb, matchMedia =
|
|
85
|
+
const addMediaQueryMatchListener = (query, el, cb, matchMedia = _uiDomUtils.matchMedia) => {
|
|
86
86
|
const node = typeof el === 'function' ? el() : el;
|
|
87
87
|
const updateMediaMatches = mediaQueryLists => {
|
|
88
88
|
const matches = Object.keys(mediaQueryLists).filter(key => mediaQueryLists[key].matches).map(key => key);
|
package/lib/jsonToMediaQuery.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
exports.jsonToMediaQuery = jsonToMediaQuery;
|
|
8
|
-
var
|
|
8
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
9
9
|
/*
|
|
10
10
|
* The MIT License (MIT)
|
|
11
11
|
*
|
|
@@ -75,7 +75,7 @@ function jsonToMediaQuery(query, el) {
|
|
|
75
75
|
if (!value) {
|
|
76
76
|
throw new Error('No value supplied for query object');
|
|
77
77
|
}
|
|
78
|
-
mediaQuery += `(${hyphenateQueryKey(key)}: ${(0,
|
|
78
|
+
mediaQuery += `(${hyphenateQueryKey(key)}: ${(0, _uiUtils.px)(value, el)}px) ${QUERY_SEPARATOR} `;
|
|
79
79
|
}
|
|
80
80
|
return mediaQuery.slice(0, -QUERY_SEPARATOR.length - 2);
|
|
81
81
|
}
|
package/lib/parseQuery.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
exports.parseQuery = parseQuery;
|
|
8
|
-
var
|
|
8
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
9
9
|
/*
|
|
10
10
|
* The MIT License (MIT)
|
|
11
11
|
*
|
|
@@ -61,10 +61,10 @@ function parseQuery(query, el) {
|
|
|
61
61
|
minHeight = _query$selectorName.minHeight,
|
|
62
62
|
maxHeight = _query$selectorName.maxHeight;
|
|
63
63
|
rules[selectorName] = {
|
|
64
|
-
minWidth: minWidth && (0,
|
|
65
|
-
maxWidth: maxWidth && (0,
|
|
66
|
-
minHeight: minHeight && (0,
|
|
67
|
-
maxHeight: maxHeight && (0,
|
|
64
|
+
minWidth: minWidth && (0, _uiUtils.px)(minWidth, el) || 0,
|
|
65
|
+
maxWidth: maxWidth && (0, _uiUtils.px)(maxWidth, el) || Infinity,
|
|
66
|
+
minHeight: minHeight && (0, _uiUtils.px)(minHeight, el) || 0,
|
|
67
|
+
maxHeight: maxHeight && (0, _uiUtils.px)(maxHeight, el) || Infinity
|
|
68
68
|
};
|
|
69
69
|
});
|
|
70
70
|
return function ({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-responsive",
|
|
3
|
-
"version": "8.56.
|
|
3
|
+
"version": "8.56.2-pr-snapshot-1721749364069",
|
|
4
4
|
"description": "A component that allows for rendering a component differently based on either the element or the viewport size",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,19 +24,19 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.23.2",
|
|
27
|
-
"@instructure/console": "8.56.
|
|
28
|
-
"@instructure/debounce": "8.56.
|
|
29
|
-
"@instructure/shared-types": "8.56.
|
|
30
|
-
"@instructure/ui-dom-utils": "8.56.
|
|
31
|
-
"@instructure/ui-react-utils": "8.56.
|
|
32
|
-
"@instructure/ui-testable": "8.56.
|
|
33
|
-
"@instructure/ui-utils": "8.56.
|
|
27
|
+
"@instructure/console": "8.56.2-pr-snapshot-1721749364069",
|
|
28
|
+
"@instructure/debounce": "8.56.2-pr-snapshot-1721749364069",
|
|
29
|
+
"@instructure/shared-types": "8.56.2-pr-snapshot-1721749364069",
|
|
30
|
+
"@instructure/ui-dom-utils": "8.56.2-pr-snapshot-1721749364069",
|
|
31
|
+
"@instructure/ui-react-utils": "8.56.2-pr-snapshot-1721749364069",
|
|
32
|
+
"@instructure/ui-testable": "8.56.2-pr-snapshot-1721749364069",
|
|
33
|
+
"@instructure/ui-utils": "8.56.2-pr-snapshot-1721749364069",
|
|
34
34
|
"prop-types": "^15.8.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@instructure/ui-babel-preset": "8.56.
|
|
38
|
-
"@instructure/ui-color-utils": "8.56.
|
|
39
|
-
"@instructure/ui-test-utils": "8.56.
|
|
37
|
+
"@instructure/ui-babel-preset": "8.56.2-pr-snapshot-1721749364069",
|
|
38
|
+
"@instructure/ui-color-utils": "8.56.2-pr-snapshot-1721749364069",
|
|
39
|
+
"@instructure/ui-test-utils": "8.56.2-pr-snapshot-1721749364069"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": ">=16.8 <=18"
|