@instructure/ui-position 10.13.0 → 10.13.1-pr-snapshot-1741357986437
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 +8 -0
- package/lib/Position/PositionContentLocator.js +2 -2
- package/lib/Position/PositionLocator.js +4 -4
- package/lib/Position/PositionTargetLocator.js +2 -2
- package/lib/Position/__new-tests__/Position.test.js +10 -10
- package/lib/Position/index.js +16 -21
- package/lib/Position/props.js +2 -2
- package/lib/PositionPropTypes.js +3 -3
- package/lib/calculateElementPosition.js +20 -26
- package/package.json +16 -16
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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
|
+
## [10.13.1-pr-snapshot-1741357986437](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.13.1-pr-snapshot-1741357986437) (2025-03-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-position
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [10.13.0](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.13.0) (2025-03-06)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @instructure/ui-position
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.PositionContentLocator = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _uiTestLocator = require("@instructure/ui-test-locator");
|
|
8
8
|
var _index = require("./index");
|
|
9
9
|
/*
|
|
10
10
|
* The MIT License (MIT)
|
|
@@ -30,4 +30,4 @@ var _index = require("./index");
|
|
|
30
30
|
* SOFTWARE.
|
|
31
31
|
*/
|
|
32
32
|
|
|
33
|
-
const PositionContentLocator = exports.PositionContentLocator = (0,
|
|
33
|
+
const PositionContentLocator = exports.PositionContentLocator = (0, _uiTestLocator.locator)(`[${_index.Position.contentLocatorAttribute}]`);
|
|
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "PositionTargetLocator", {
|
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
exports.customMethods = void 0;
|
|
20
|
-
var
|
|
20
|
+
var _uiTestLocator = require("@instructure/ui-test-locator");
|
|
21
21
|
var _index = require("./index");
|
|
22
22
|
var _PositionContentLocator = require("./PositionContentLocator");
|
|
23
23
|
var _PositionTargetLocator = require("./PositionTargetLocator");
|
|
@@ -49,17 +49,17 @@ const customMethods = exports.customMethods = {
|
|
|
49
49
|
findTarget: (element, ...args) => {
|
|
50
50
|
if (element && element.getAttribute) {
|
|
51
51
|
const id = element.getAttribute(_index.Position.locatorAttribute);
|
|
52
|
-
return (0,
|
|
52
|
+
return (0, _uiTestLocator.locator)(`[${_index.Position.targetLocatorAttribute}="${id}"]`).find(...args);
|
|
53
53
|
}
|
|
54
54
|
throw new Error('Element ' + element + ' not found');
|
|
55
55
|
},
|
|
56
56
|
findContent: (element, ...args) => {
|
|
57
57
|
if (element && element.getAttribute) {
|
|
58
58
|
const id = element.getAttribute(_index.Position.locatorAttribute);
|
|
59
|
-
return (0,
|
|
59
|
+
return (0, _uiTestLocator.locator)(`[${_index.Position.contentLocatorAttribute}="${id}"]`).find(...args);
|
|
60
60
|
}
|
|
61
61
|
throw new Error('Element ' + element + ' not found');
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
64
|
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
65
|
-
const PositionLocator = exports.PositionLocator = (0,
|
|
65
|
+
const PositionLocator = exports.PositionLocator = (0, _uiTestLocator.locator)(_index.Position.selector, customMethods);
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.PositionTargetLocator = void 0;
|
|
7
7
|
var _index = require("./index");
|
|
8
|
-
var
|
|
8
|
+
var _uiTestLocator = require("@instructure/ui-test-locator");
|
|
9
9
|
/*
|
|
10
10
|
* The MIT License (MIT)
|
|
11
11
|
*
|
|
@@ -30,4 +30,4 @@ var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
|
30
30
|
* SOFTWARE.
|
|
31
31
|
*/
|
|
32
32
|
|
|
33
|
-
const PositionTargetLocator = exports.PositionTargetLocator = (0,
|
|
33
|
+
const PositionTargetLocator = exports.PositionTargetLocator = (0, _uiTestLocator.locator)(`[${_index.Position.targetLocatorAttribute}]`);
|
|
@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
5
5
|
var _react2 = require("@testing-library/react");
|
|
6
6
|
var _vitest = require("vitest");
|
|
7
7
|
require("@testing-library/jest-dom");
|
|
8
|
-
var
|
|
8
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
9
9
|
var _index = require("../index");
|
|
10
10
|
var _Position, _Position2, _button, _div, _button2, _div2, _button3, _div3, _button4, _div4, _button5, _div5, _button6, _div6, _div7, _button7, _div8, _div9, _button8, _div10, _div11, _button9, _div12, _div13, _button10, _div14, _Position3, _div15, _button11, _div16, _Position4, _Position5;
|
|
11
11
|
/*
|
|
@@ -109,7 +109,7 @@ describe('<Position />', () => {
|
|
|
109
109
|
});
|
|
110
110
|
const targetRect = target.getBoundingClientRect();
|
|
111
111
|
const contentRect = content.getBoundingClientRect();
|
|
112
|
-
expect((0,
|
|
112
|
+
expect((0, _uiUtils.within)(Math.floor(contentRect.left), Math.floor(targetRect.right))).toBe(true);
|
|
113
113
|
});
|
|
114
114
|
it('should render below target', async () => {
|
|
115
115
|
const onPositionChanged = _vitest.vi.fn();
|
|
@@ -137,7 +137,7 @@ describe('<Position />', () => {
|
|
|
137
137
|
});
|
|
138
138
|
const targetRect = target.getBoundingClientRect();
|
|
139
139
|
const contentRect = content.getBoundingClientRect();
|
|
140
|
-
expect((0,
|
|
140
|
+
expect((0, _uiUtils.within)(Math.floor(contentRect.top), Math.floor(targetRect.bottom), 1)).toBe(true);
|
|
141
141
|
});
|
|
142
142
|
it('should render left of target', async () => {
|
|
143
143
|
const onPositionChanged = _vitest.vi.fn();
|
|
@@ -165,7 +165,7 @@ describe('<Position />', () => {
|
|
|
165
165
|
});
|
|
166
166
|
const targetRect = target.getBoundingClientRect();
|
|
167
167
|
const contentRect = content.getBoundingClientRect();
|
|
168
|
-
expect((0,
|
|
168
|
+
expect((0, _uiUtils.within)(Math.floor(contentRect.right), Math.floor(targetRect.left))).toBe(true);
|
|
169
169
|
});
|
|
170
170
|
it('should render above target', async () => {
|
|
171
171
|
const onPositionChanged = _vitest.vi.fn();
|
|
@@ -223,7 +223,7 @@ describe('<Position />', () => {
|
|
|
223
223
|
const contentRect = content.getBoundingClientRect();
|
|
224
224
|
const top = Math.floor(contentRect.top);
|
|
225
225
|
const center = Math.floor(targetRect.top + (targetRect.height / 2 - contentRect.height / 2));
|
|
226
|
-
expect((0,
|
|
226
|
+
expect((0, _uiUtils.within)(top, center)).toBe(true);
|
|
227
227
|
});
|
|
228
228
|
it('should center horizontally', async () => {
|
|
229
229
|
const onPositionChanged = _vitest.vi.fn();
|
|
@@ -255,7 +255,7 @@ describe('<Position />', () => {
|
|
|
255
255
|
const targetCenter = targetRect.width / 2;
|
|
256
256
|
const contentCenter = contentRect.width / 2;
|
|
257
257
|
const center = Math.floor(targetRect.left + (targetCenter - contentCenter));
|
|
258
|
-
expect((0,
|
|
258
|
+
expect((0, _uiUtils.within)(left, center)).toBe(true);
|
|
259
259
|
});
|
|
260
260
|
describe('when constrained to scroll-parent', () => {
|
|
261
261
|
it('should re-position below target', async () => {
|
|
@@ -291,7 +291,7 @@ describe('<Position />', () => {
|
|
|
291
291
|
});
|
|
292
292
|
const targetRect = target.getBoundingClientRect();
|
|
293
293
|
const contentRect = content.getBoundingClientRect();
|
|
294
|
-
expect((0,
|
|
294
|
+
expect((0, _uiUtils.within)(Math.floor(contentRect.top), Math.floor(targetRect.bottom), 1)).toBe(true);
|
|
295
295
|
});
|
|
296
296
|
it('should re-position above target', async () => {
|
|
297
297
|
const onPositionChanged = _vitest.vi.fn();
|
|
@@ -326,7 +326,7 @@ describe('<Position />', () => {
|
|
|
326
326
|
});
|
|
327
327
|
const targetRect = target.getBoundingClientRect();
|
|
328
328
|
const contentRect = content.getBoundingClientRect();
|
|
329
|
-
expect((0,
|
|
329
|
+
expect((0, _uiUtils.within)(Math.floor(contentRect.bottom), Math.floor(targetRect.top), 1)).toBe(true);
|
|
330
330
|
});
|
|
331
331
|
it('should re-position after target', async () => {
|
|
332
332
|
const onPositionChanged = _vitest.vi.fn();
|
|
@@ -361,7 +361,7 @@ describe('<Position />', () => {
|
|
|
361
361
|
});
|
|
362
362
|
const targetRect = target.getBoundingClientRect();
|
|
363
363
|
const contentRect = content.getBoundingClientRect();
|
|
364
|
-
expect((0,
|
|
364
|
+
expect((0, _uiUtils.within)(Math.floor(contentRect.left), Math.floor(targetRect.right), 1)).toBe(true);
|
|
365
365
|
});
|
|
366
366
|
it('should re-position before target', async () => {
|
|
367
367
|
const onPositionChanged = _vitest.vi.fn();
|
|
@@ -396,7 +396,7 @@ describe('<Position />', () => {
|
|
|
396
396
|
});
|
|
397
397
|
const targetRect = target.getBoundingClientRect();
|
|
398
398
|
const contentRect = content.getBoundingClientRect();
|
|
399
|
-
expect((0,
|
|
399
|
+
expect((0, _uiUtils.within)(Math.floor(contentRect.right), Math.floor(targetRect.left), 1)).toBe(true);
|
|
400
400
|
});
|
|
401
401
|
});
|
|
402
402
|
describe('when the documentElement is offset', () => {
|
package/lib/Position/index.js
CHANGED
|
@@ -6,17 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Position = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
13
|
-
var _addPositionChangeListener = require("@instructure/ui-dom-utils/lib/addPositionChangeListener.js");
|
|
14
|
-
var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
|
|
15
|
-
var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
|
|
16
|
-
var _shallowEqual = require("@instructure/ui-utils/lib/shallowEqual.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
10
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
11
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
17
12
|
var _debounce = require("@instructure/debounce");
|
|
18
|
-
var
|
|
19
|
-
var
|
|
13
|
+
var _uiTestable = require("@instructure/ui-testable");
|
|
14
|
+
var _uiPortal = require("@instructure/ui-portal");
|
|
20
15
|
var _emotion = require("@instructure/emotion");
|
|
21
16
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
22
17
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
@@ -52,7 +47,7 @@ var _dec, _dec2, _dec3, _class, _Position;
|
|
|
52
47
|
category: components/utilities
|
|
53
48
|
---
|
|
54
49
|
**/
|
|
55
|
-
let Position = exports.Position = (_dec = (0,
|
|
50
|
+
let Position = exports.Position = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Position = class Position extends _react.Component {
|
|
56
51
|
constructor(props) {
|
|
57
52
|
super(props);
|
|
58
53
|
this.ref = null;
|
|
@@ -100,7 +95,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
100
95
|
this._id = this.props.id || props.deterministicId();
|
|
101
96
|
}
|
|
102
97
|
shouldComponentUpdate(nextProps, nextState, nextContext) {
|
|
103
|
-
return !(0,
|
|
98
|
+
return !(0, _uiUtils.deepEqual)(this.state, nextState) || !(0, _uiUtils.shallowEqual)(this.props, nextProps) || !(0, _uiUtils.shallowEqual)(this.context, nextContext);
|
|
104
99
|
}
|
|
105
100
|
componentDidMount() {
|
|
106
101
|
var _this$props$makeStyle, _this$props;
|
|
@@ -137,8 +132,8 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
137
132
|
// We have to find the actual DOM nodes and append the attributes
|
|
138
133
|
// directly, as we can't be sure when safe cloning the child that
|
|
139
134
|
// it will accept the data attribute as a prop
|
|
140
|
-
this.toggleLocatorAttribute((0,
|
|
141
|
-
this.toggleLocatorAttribute((0,
|
|
135
|
+
this.toggleLocatorAttribute((0, _uiDomUtils.findDOMNode)(this._content), Position.contentLocatorAttribute, set);
|
|
136
|
+
this.toggleLocatorAttribute((0, _uiDomUtils.findDOMNode)(this._target), Position.targetLocatorAttribute, set);
|
|
142
137
|
}
|
|
143
138
|
toggleLocatorAttribute(node, locator, set) {
|
|
144
139
|
if (node && node.hasAttribute) {
|
|
@@ -163,7 +158,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
163
158
|
});
|
|
164
159
|
}
|
|
165
160
|
startTracking() {
|
|
166
|
-
this._listener = this._listener || (0,
|
|
161
|
+
this._listener = this._listener || (0, _uiDomUtils.addPositionChangeListener)(this._target, this.position);
|
|
167
162
|
}
|
|
168
163
|
stopTracking() {
|
|
169
164
|
if (this._listener) {
|
|
@@ -174,10 +169,10 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
174
169
|
|
|
175
170
|
// content that needs to be positioned relative to the target
|
|
176
171
|
renderContent() {
|
|
177
|
-
let content = (0,
|
|
172
|
+
let content = (0, _uiReactUtils.ensureSingleChild)(this.props.children);
|
|
178
173
|
if (content) {
|
|
179
174
|
var _this$props$styles;
|
|
180
|
-
content = (0,
|
|
175
|
+
content = (0, _uiReactUtils.safeCloneElement)(content, {
|
|
181
176
|
ref: el => {
|
|
182
177
|
this._content = el;
|
|
183
178
|
},
|
|
@@ -192,7 +187,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
192
187
|
}),
|
|
193
188
|
[Position.contentLocatorAttribute]: this._id
|
|
194
189
|
});
|
|
195
|
-
content = (0, _emotion.jsx)(
|
|
190
|
+
content = (0, _emotion.jsx)(_uiPortal.Portal, {
|
|
196
191
|
open: true,
|
|
197
192
|
onOpen: this.handlePortalOpen,
|
|
198
193
|
mountNode: this.props.mountNode,
|
|
@@ -202,16 +197,16 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
202
197
|
return content;
|
|
203
198
|
}
|
|
204
199
|
renderTarget() {
|
|
205
|
-
const target = (0,
|
|
200
|
+
const target = (0, _uiReactUtils.callRenderProp)(this.props.renderTarget);
|
|
206
201
|
if (target) {
|
|
207
|
-
return (0,
|
|
202
|
+
return (0, _uiReactUtils.safeCloneElement)(target, {
|
|
208
203
|
ref: el => {
|
|
209
204
|
this._target = el;
|
|
210
205
|
},
|
|
211
206
|
[Position.targetLocatorAttribute]: this._id
|
|
212
207
|
});
|
|
213
208
|
} else if (this.props.target) {
|
|
214
|
-
this._target = (0,
|
|
209
|
+
this._target = (0, _uiReactUtils.callRenderProp)(this.props.target);
|
|
215
210
|
}
|
|
216
211
|
return null;
|
|
217
212
|
}
|
package/lib/Position/props.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var
|
|
9
|
+
var _uiPropTypes = require("@instructure/ui-prop-types");
|
|
10
10
|
var _PositionPropTypes = require("../PositionPropTypes");
|
|
11
11
|
/*
|
|
12
12
|
* The MIT License (MIT)
|
|
@@ -34,7 +34,7 @@ var _PositionPropTypes = require("../PositionPropTypes");
|
|
|
34
34
|
|
|
35
35
|
const propTypes = exports.propTypes = {
|
|
36
36
|
renderTarget: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
37
|
-
target: _propTypes.default.oneOfType([
|
|
37
|
+
target: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.func]),
|
|
38
38
|
placement: _PositionPropTypes.PositionPropTypes.placement,
|
|
39
39
|
mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
|
|
40
40
|
insertAt: _propTypes.default.oneOf(['bottom', 'top']),
|
package/lib/PositionPropTypes.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.placementPropValues = exports.mirrorMap = exports.default = exports.PositionPropTypes = void 0;
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var
|
|
9
|
+
var _uiPropTypes = require("@instructure/ui-prop-types");
|
|
10
10
|
/*
|
|
11
11
|
* The MIT License (MIT)
|
|
12
12
|
*
|
|
@@ -40,11 +40,11 @@ const PositionPropTypes = exports.PositionPropTypes = {
|
|
|
40
40
|
/**
|
|
41
41
|
* An element or a function returning an element to use as the mount node
|
|
42
42
|
*/
|
|
43
|
-
mountNode: _propTypes.default.oneOfType([
|
|
43
|
+
mountNode: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.func]),
|
|
44
44
|
/**
|
|
45
45
|
* The parent in which to constrain a placement
|
|
46
46
|
*/
|
|
47
|
-
constrain: _propTypes.default.oneOfType([
|
|
47
|
+
constrain: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.func, _propTypes.default.oneOf(['window', 'scroll-parent', 'parent', 'none'])])
|
|
48
48
|
};
|
|
49
49
|
|
|
50
50
|
/**
|
|
@@ -8,13 +8,7 @@ exports.calculateElementPosition = calculateElementPosition;
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
exports.parsePlacement = parsePlacement;
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
var
|
|
12
|
-
var _getScrollParents = require("@instructure/ui-dom-utils/lib/getScrollParents.js");
|
|
13
|
-
var _getOffsetParents = require("@instructure/ui-dom-utils/lib/getOffsetParents.js");
|
|
14
|
-
var _canUseDOM = require("@instructure/ui-dom-utils/lib/canUseDOM.js");
|
|
15
|
-
var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
|
|
16
|
-
var _ownerDocument3 = require("@instructure/ui-dom-utils/lib/ownerDocument.js");
|
|
17
|
-
var _ownerWindow = require("@instructure/ui-dom-utils/lib/ownerWindow.js");
|
|
11
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
18
12
|
var _mirrorPlacement = require("./mirrorPlacement");
|
|
19
13
|
/*
|
|
20
14
|
* The MIT License (MIT)
|
|
@@ -73,7 +67,7 @@ class PositionedElement {
|
|
|
73
67
|
this.placement = void 0;
|
|
74
68
|
this.rect = void 0;
|
|
75
69
|
this._offset = void 0;
|
|
76
|
-
this.node = (0,
|
|
70
|
+
this.node = (0, _uiDomUtils.findDOMNode)(element);
|
|
77
71
|
if (typeof placement === 'string') {
|
|
78
72
|
this.placement = parsePlacement(placement);
|
|
79
73
|
} else if (Array.isArray(placement)) {
|
|
@@ -81,7 +75,7 @@ class PositionedElement {
|
|
|
81
75
|
} else {
|
|
82
76
|
this.placement = ['bottom', 'center'];
|
|
83
77
|
}
|
|
84
|
-
this.rect = (0,
|
|
78
|
+
this.rect = (0, _uiDomUtils.getBoundingClientRect)(this.node);
|
|
85
79
|
this._offset = offsetToPx(offset, this.size, this.node);
|
|
86
80
|
}
|
|
87
81
|
get width() {
|
|
@@ -149,7 +143,7 @@ class PositionedElement {
|
|
|
149
143
|
}, this.size, this.node), parseOffset(this._offset, this.placement)]);
|
|
150
144
|
}
|
|
151
145
|
get scrollParentsOffset() {
|
|
152
|
-
const parents = (0,
|
|
146
|
+
const parents = (0, _uiDomUtils.getScrollParents)(this.node);
|
|
153
147
|
let offsetY = 0;
|
|
154
148
|
let offsetX = 0;
|
|
155
149
|
for (let i = 1; i < parents.length; i++) {
|
|
@@ -170,18 +164,18 @@ class PositionedElement {
|
|
|
170
164
|
// element, it will position absolutely with respect to that
|
|
171
165
|
// ancestor. We calculate the offset between the child and
|
|
172
166
|
// positioned parent so we can negate that distance
|
|
173
|
-
const parents = (0,
|
|
174
|
-
const doc = (0,
|
|
167
|
+
const parents = (0, _uiDomUtils.getOffsetParents)(this.node);
|
|
168
|
+
const doc = (0, _uiDomUtils.ownerDocument)(this.node);
|
|
175
169
|
|
|
176
170
|
// If there is more than one parent, the offset on the
|
|
177
171
|
// documentElement should be calculated appropriately.
|
|
178
172
|
// Otherwise we need to explictly account for that offset
|
|
179
|
-
let offsetY = parents.length > 1 ? 0 : (0,
|
|
173
|
+
let offsetY = parents.length > 1 ? 0 : (0, _uiDomUtils.getBoundingClientRect)(doc === null || doc === void 0 ? void 0 : doc.documentElement).top;
|
|
180
174
|
let offsetX = 0;
|
|
181
175
|
let scrollY = 0;
|
|
182
176
|
for (let i = 1; i < parents.length; i++) {
|
|
183
|
-
const parent = (0,
|
|
184
|
-
const child = (0,
|
|
177
|
+
const parent = (0, _uiDomUtils.getBoundingClientRect)(parents[i]);
|
|
178
|
+
const child = (0, _uiDomUtils.getBoundingClientRect)(parents[i - 1]);
|
|
185
179
|
offsetY = offsetY + (child.top - parent.top);
|
|
186
180
|
offsetX = offsetX + (child.left - parent.left);
|
|
187
181
|
if (parents[i] === (doc === null || doc === void 0 ? void 0 : doc.body)) {
|
|
@@ -204,7 +198,7 @@ class PositionedElement {
|
|
|
204
198
|
var _ownerDocument;
|
|
205
199
|
// Account for cross browser differences with scrollTop attribute on the
|
|
206
200
|
// body element https://bugs.chromium.org/p/chromium/issues/detail?id=766938
|
|
207
|
-
return ((_ownerDocument = (0,
|
|
201
|
+
return ((_ownerDocument = (0, _uiDomUtils.ownerDocument)(this.node)) === null || _ownerDocument === void 0 ? void 0 : _ownerDocument.body) === element ? 0 : element.scrollTop;
|
|
208
202
|
}
|
|
209
203
|
}
|
|
210
204
|
class PositionData {
|
|
@@ -221,22 +215,22 @@ class PositionData {
|
|
|
221
215
|
placement = _this$options.placement,
|
|
222
216
|
over = _this$options.over;
|
|
223
217
|
if (!element || placement === 'offscreen') return;
|
|
224
|
-
this.container = container || ((_ownerDocument2 = (0,
|
|
218
|
+
this.container = container || ((_ownerDocument2 = (0, _uiDomUtils.ownerDocument)(element)) === null || _ownerDocument2 === void 0 ? void 0 : _ownerDocument2.body);
|
|
225
219
|
this.element = new PositionedElement(element, placement, {
|
|
226
220
|
top: this.options.offsetY,
|
|
227
221
|
left: this.options.offsetX
|
|
228
222
|
});
|
|
229
223
|
this.target = new PositionedElement(target || this.container, over ? this.element.placement : this.element.mirroredPlacement);
|
|
230
224
|
if (constrain === 'window') {
|
|
231
|
-
this.constrainTo((0,
|
|
225
|
+
this.constrainTo((0, _uiDomUtils.ownerWindow)(element));
|
|
232
226
|
} else if (constrain === 'scroll-parent') {
|
|
233
|
-
this.constrainTo((0,
|
|
227
|
+
this.constrainTo((0, _uiDomUtils.getScrollParents)(this.target.node)[0]);
|
|
234
228
|
} else if (constrain === 'parent') {
|
|
235
229
|
this.constrainTo(this.container);
|
|
236
230
|
} else if (typeof constrain === 'function') {
|
|
237
|
-
this.constrainTo((0,
|
|
231
|
+
this.constrainTo((0, _uiDomUtils.findDOMNode)(constrain.call(null)));
|
|
238
232
|
} else if (typeof constrain === 'object') {
|
|
239
|
-
this.constrainTo((0,
|
|
233
|
+
this.constrainTo((0, _uiDomUtils.findDOMNode)(constrain));
|
|
240
234
|
}
|
|
241
235
|
}
|
|
242
236
|
get offset() {
|
|
@@ -259,11 +253,11 @@ class PositionData {
|
|
|
259
253
|
return this.element.shouldStretchHorizontally ? this.target.height : null;
|
|
260
254
|
}
|
|
261
255
|
get position() {
|
|
262
|
-
const win = (0,
|
|
256
|
+
const win = (0, _uiDomUtils.ownerWindow)(this.target.node);
|
|
263
257
|
let _addOffsets = addOffsets([this.target.position, this.offset]),
|
|
264
258
|
left = _addOffsets.left,
|
|
265
259
|
top = _addOffsets.top;
|
|
266
|
-
if (
|
|
260
|
+
if (_uiDomUtils.canUseDOM && win !== null && win !== void 0 && win.matchMedia) {
|
|
267
261
|
const retina = win.matchMedia('only screen and (min-resolution: 1.3dppx)').matches || win.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3)').matches;
|
|
268
262
|
if (!retina) {
|
|
269
263
|
left = Math.round(left);
|
|
@@ -292,9 +286,9 @@ class PositionData {
|
|
|
292
286
|
};
|
|
293
287
|
}
|
|
294
288
|
overflow(element) {
|
|
295
|
-
const parentWindow = (0,
|
|
296
|
-
const elementBounds = (0,
|
|
297
|
-
const windowBounds = (0,
|
|
289
|
+
const parentWindow = (0, _uiDomUtils.ownerWindow)(element);
|
|
290
|
+
const elementBounds = (0, _uiDomUtils.getBoundingClientRect)(element);
|
|
291
|
+
const windowBounds = (0, _uiDomUtils.getBoundingClientRect)(parentWindow);
|
|
298
292
|
const offsets = addOffsets([this.target.position, this.offset]);
|
|
299
293
|
const parentOffset = {
|
|
300
294
|
top: this.element.positionedParentsOffset.top + this.element.scrollParentsOffset.top,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-position",
|
|
3
|
-
"version": "10.13.
|
|
3
|
+
"version": "10.13.1-pr-snapshot-1741357986437",
|
|
4
4
|
"description": "A component for positioning content with respect to a designated target.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,24 +24,24 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.26.0",
|
|
27
|
-
"@instructure/debounce": "10.13.
|
|
28
|
-
"@instructure/emotion": "10.13.
|
|
29
|
-
"@instructure/shared-types": "10.13.
|
|
30
|
-
"@instructure/ui-dom-utils": "10.13.
|
|
31
|
-
"@instructure/ui-portal": "10.13.
|
|
32
|
-
"@instructure/ui-prop-types": "10.13.
|
|
33
|
-
"@instructure/ui-react-utils": "10.13.
|
|
34
|
-
"@instructure/ui-testable": "10.13.
|
|
35
|
-
"@instructure/ui-utils": "10.13.
|
|
36
|
-
"@instructure/uid": "10.13.
|
|
27
|
+
"@instructure/debounce": "10.13.1-pr-snapshot-1741357986437",
|
|
28
|
+
"@instructure/emotion": "10.13.1-pr-snapshot-1741357986437",
|
|
29
|
+
"@instructure/shared-types": "10.13.1-pr-snapshot-1741357986437",
|
|
30
|
+
"@instructure/ui-dom-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
31
|
+
"@instructure/ui-portal": "10.13.1-pr-snapshot-1741357986437",
|
|
32
|
+
"@instructure/ui-prop-types": "10.13.1-pr-snapshot-1741357986437",
|
|
33
|
+
"@instructure/ui-react-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
34
|
+
"@instructure/ui-testable": "10.13.1-pr-snapshot-1741357986437",
|
|
35
|
+
"@instructure/ui-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
36
|
+
"@instructure/uid": "10.13.1-pr-snapshot-1741357986437",
|
|
37
37
|
"prop-types": "^15.8.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@instructure/ui-babel-preset": "10.13.
|
|
41
|
-
"@instructure/ui-color-utils": "10.13.
|
|
42
|
-
"@instructure/ui-test-locator": "10.13.
|
|
43
|
-
"@instructure/ui-test-utils": "10.13.
|
|
44
|
-
"@instructure/ui-themes": "10.13.
|
|
40
|
+
"@instructure/ui-babel-preset": "10.13.1-pr-snapshot-1741357986437",
|
|
41
|
+
"@instructure/ui-color-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
42
|
+
"@instructure/ui-test-locator": "10.13.1-pr-snapshot-1741357986437",
|
|
43
|
+
"@instructure/ui-test-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
44
|
+
"@instructure/ui-themes": "10.13.1-pr-snapshot-1741357986437",
|
|
45
45
|
"@testing-library/jest-dom": "^6.6.3",
|
|
46
46
|
"@testing-library/react": "^16.0.1",
|
|
47
47
|
"vitest": "^2.1.8"
|