@instructure/ui-position 11.7.9-snapshot-0 → 11.7.9-snapshot-1
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 +1 -1
- package/lib/Position/index.js +17 -23
- package/lib/calculateElementPosition.js +24 -30
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
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
|
-
## [11.7.9-snapshot-
|
|
6
|
+
## [11.7.9-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-position
|
|
9
9
|
|
package/lib/Position/index.js
CHANGED
|
@@ -6,17 +6,11 @@ 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");
|
|
17
|
-
var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
10
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
11
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
18
12
|
var _debounce = require("@instructure/debounce");
|
|
19
|
-
var
|
|
13
|
+
var _uiPortal = require("@instructure/ui-portal");
|
|
20
14
|
var _emotion = require("@instructure/emotion");
|
|
21
15
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
22
16
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -52,7 +46,7 @@ var _dec, _dec2, _class;
|
|
|
52
46
|
category: components/Util Components
|
|
53
47
|
---
|
|
54
48
|
**/
|
|
55
|
-
let Position = exports.Position = (_dec = (0,
|
|
49
|
+
let Position = exports.Position = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Position extends _react.Component {
|
|
56
50
|
static displayName = 'Position';
|
|
57
51
|
static componentId = 'Position';
|
|
58
52
|
static allowedProps = _props.allowedProps;
|
|
@@ -104,7 +98,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
104
98
|
}
|
|
105
99
|
};
|
|
106
100
|
shouldComponentUpdate(nextProps, nextState, nextContext) {
|
|
107
|
-
return !(0,
|
|
101
|
+
return !(0, _uiUtils.deepEqual)(this.state, nextState) || !(0, _uiUtils.shallowEqual)(this.props, nextProps) || !(0, _uiUtils.shallowEqual)(this.context, nextContext);
|
|
108
102
|
}
|
|
109
103
|
componentDidMount() {
|
|
110
104
|
this.toggleLocatorAttributes(true);
|
|
@@ -140,8 +134,8 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
140
134
|
// We have to find the actual DOM nodes and append the attributes
|
|
141
135
|
// directly, as we can't be sure when safe cloning the child that
|
|
142
136
|
// it will accept the data attribute as a prop
|
|
143
|
-
this.toggleLocatorAttribute((0,
|
|
144
|
-
this.toggleLocatorAttribute((0,
|
|
137
|
+
this.toggleLocatorAttribute((0, _uiDomUtils.findDOMNode)(this._content), Position.contentLocatorAttribute, set);
|
|
138
|
+
this.toggleLocatorAttribute((0, _uiDomUtils.findDOMNode)(this._target), Position.targetLocatorAttribute, set);
|
|
145
139
|
}
|
|
146
140
|
toggleLocatorAttribute(node, locator, set) {
|
|
147
141
|
if (node && node.hasAttribute) {
|
|
@@ -174,7 +168,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
174
168
|
// Write `--ui-position-available-{height,width}` directly on the content
|
|
175
169
|
// node's inline style
|
|
176
170
|
applyAvailableSpaceCustomProperties() {
|
|
177
|
-
const node = (0,
|
|
171
|
+
const node = (0, _uiDomUtils.findDOMNode)(this._content);
|
|
178
172
|
if (!node?.style) return;
|
|
179
173
|
const set = (name, value) => {
|
|
180
174
|
if (typeof value === 'number' && Number.isFinite(value)) {
|
|
@@ -213,7 +207,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
213
207
|
});
|
|
214
208
|
};
|
|
215
209
|
startTracking() {
|
|
216
|
-
this._listener = this._listener || (0,
|
|
210
|
+
this._listener = this._listener || (0, _uiDomUtils.addPositionChangeListener)(this._target, this.position);
|
|
217
211
|
}
|
|
218
212
|
stopTracking() {
|
|
219
213
|
if (this._listener) {
|
|
@@ -224,9 +218,9 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
224
218
|
|
|
225
219
|
// content that needs to be positioned relative to the target
|
|
226
220
|
renderContent() {
|
|
227
|
-
let content = (0,
|
|
221
|
+
let content = (0, _uiReactUtils.ensureSingleChild)(this.props.children);
|
|
228
222
|
if (content) {
|
|
229
|
-
content = (0,
|
|
223
|
+
content = (0, _uiReactUtils.safeCloneElement)(content, {
|
|
230
224
|
ref: el => {
|
|
231
225
|
this._content = el;
|
|
232
226
|
},
|
|
@@ -241,7 +235,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
241
235
|
}),
|
|
242
236
|
[Position.contentLocatorAttribute]: this._id
|
|
243
237
|
});
|
|
244
|
-
content = (0, _jsxRuntime.jsx)(
|
|
238
|
+
content = (0, _jsxRuntime.jsx)(_uiPortal.Portal, {
|
|
245
239
|
open: true,
|
|
246
240
|
onOpen: this.handlePortalOpen,
|
|
247
241
|
mountNode: this.props.mountNode,
|
|
@@ -252,16 +246,16 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
252
246
|
return content;
|
|
253
247
|
}
|
|
254
248
|
renderTarget() {
|
|
255
|
-
const target = (0,
|
|
249
|
+
const target = (0, _uiReactUtils.callRenderProp)(this.props.renderTarget);
|
|
256
250
|
if (target) {
|
|
257
|
-
return (0,
|
|
251
|
+
return (0, _uiReactUtils.safeCloneElement)(target, {
|
|
258
252
|
ref: el => {
|
|
259
253
|
this._target = el;
|
|
260
254
|
},
|
|
261
255
|
[Position.targetLocatorAttribute]: this._id
|
|
262
256
|
});
|
|
263
257
|
} else if (this.props.target) {
|
|
264
|
-
this._target = (0,
|
|
258
|
+
this._target = (0, _uiReactUtils.callRenderProp)(this.props.target);
|
|
265
259
|
}
|
|
266
260
|
return null;
|
|
267
261
|
}
|
|
@@ -273,7 +267,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
273
267
|
...props,
|
|
274
268
|
css: this.props.styles?.position,
|
|
275
269
|
ref: this.handleRef,
|
|
276
|
-
"data-cid": (0,
|
|
270
|
+
"data-cid": (0, _uiUtils.combineDataCid)('Position', this.props),
|
|
277
271
|
children: [this.renderTarget(), this.renderContent()]
|
|
278
272
|
});
|
|
279
273
|
}
|
|
@@ -6,15 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.calculateElementPosition = calculateElementPosition;
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
exports.parsePlacement = parsePlacement;
|
|
9
|
-
var
|
|
10
|
-
var _getScrollParents = require("@instructure/ui-dom-utils/lib/getScrollParents.js");
|
|
11
|
-
var _getOffsetParents = require("@instructure/ui-dom-utils/lib/getOffsetParents.js");
|
|
12
|
-
var _canUseDOM = require("@instructure/ui-dom-utils/lib/canUseDOM.js");
|
|
13
|
-
var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
|
|
14
|
-
var _ownerDocument = require("@instructure/ui-dom-utils/lib/ownerDocument.js");
|
|
15
|
-
var _ownerWindow = require("@instructure/ui-dom-utils/lib/ownerWindow.js");
|
|
9
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
16
10
|
var _mirrorPlacement = require("./mirrorPlacement.js");
|
|
17
|
-
var
|
|
11
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
18
12
|
/*
|
|
19
13
|
* The MIT License (MIT)
|
|
20
14
|
*
|
|
@@ -94,7 +88,7 @@ class PositionedElement {
|
|
|
94
88
|
top: 0,
|
|
95
89
|
left: 0
|
|
96
90
|
}) {
|
|
97
|
-
this.node = (0,
|
|
91
|
+
this.node = (0, _uiDomUtils.findDOMNode)(element);
|
|
98
92
|
if (typeof placement === 'string') {
|
|
99
93
|
this.placement = parsePlacement(placement);
|
|
100
94
|
} else if (Array.isArray(placement)) {
|
|
@@ -102,7 +96,7 @@ class PositionedElement {
|
|
|
102
96
|
} else {
|
|
103
97
|
this.placement = ['bottom', 'center'];
|
|
104
98
|
}
|
|
105
|
-
this.rect = (0,
|
|
99
|
+
this.rect = (0, _uiDomUtils.getBoundingClientRect)(this.node);
|
|
106
100
|
this._offset = offsetToPx(offset, this.size, this.node);
|
|
107
101
|
}
|
|
108
102
|
node;
|
|
@@ -170,7 +164,7 @@ class PositionedElement {
|
|
|
170
164
|
}, this.size, this.node), parseOffset(this._offset, this.placement)]);
|
|
171
165
|
}
|
|
172
166
|
get scrollParentsOffset() {
|
|
173
|
-
const parents = (0,
|
|
167
|
+
const parents = (0, _uiDomUtils.getScrollParents)(this.node);
|
|
174
168
|
let offsetY = 0;
|
|
175
169
|
let offsetX = 0;
|
|
176
170
|
for (let i = 1; i < parents.length; i++) {
|
|
@@ -191,18 +185,18 @@ class PositionedElement {
|
|
|
191
185
|
// element, it will position absolutely with respect to that
|
|
192
186
|
// ancestor. We calculate the offset between the child and
|
|
193
187
|
// positioned parent so we can negate that distance
|
|
194
|
-
const parents = (0,
|
|
195
|
-
const doc = (0,
|
|
188
|
+
const parents = (0, _uiDomUtils.getOffsetParents)(this.node);
|
|
189
|
+
const doc = (0, _uiDomUtils.ownerDocument)(this.node);
|
|
196
190
|
|
|
197
191
|
// If there is more than one parent, the offset on the
|
|
198
192
|
// documentElement should be calculated appropriately.
|
|
199
193
|
// Otherwise we need to explictly account for that offset
|
|
200
|
-
let offsetY = parents.length > 1 ? 0 : (0,
|
|
194
|
+
let offsetY = parents.length > 1 ? 0 : (0, _uiDomUtils.getBoundingClientRect)(doc?.documentElement).top;
|
|
201
195
|
let offsetX = 0;
|
|
202
196
|
let scrollY = 0;
|
|
203
197
|
for (let i = 1; i < parents.length; i++) {
|
|
204
|
-
const parent = (0,
|
|
205
|
-
const child = (0,
|
|
198
|
+
const parent = (0, _uiDomUtils.getBoundingClientRect)(parents[i]);
|
|
199
|
+
const child = (0, _uiDomUtils.getBoundingClientRect)(parents[i - 1]);
|
|
206
200
|
offsetY = offsetY + (child.top - parent.top);
|
|
207
201
|
offsetX = offsetX + (child.left - parent.left);
|
|
208
202
|
if (parents[i] === doc?.body) {
|
|
@@ -224,7 +218,7 @@ class PositionedElement {
|
|
|
224
218
|
normalizeScrollTop(element) {
|
|
225
219
|
// Account for cross browser differences with scrollTop attribute on the
|
|
226
220
|
// body element https://bugs.chromium.org/p/chromium/issues/detail?id=766938
|
|
227
|
-
return (0,
|
|
221
|
+
return (0, _uiDomUtils.ownerDocument)(this.node)?.body === element ? 0 : element.scrollTop;
|
|
228
222
|
}
|
|
229
223
|
}
|
|
230
224
|
class PositionData {
|
|
@@ -236,7 +230,7 @@ class PositionData {
|
|
|
236
230
|
over
|
|
237
231
|
} = this.options;
|
|
238
232
|
if (!element || placement === 'offscreen') return;
|
|
239
|
-
this.container = container || (0,
|
|
233
|
+
this.container = container || (0, _uiDomUtils.ownerDocument)(element)?.body;
|
|
240
234
|
this.element = new PositionedElement(element, placement, {
|
|
241
235
|
top: this.options.offsetY,
|
|
242
236
|
left: this.options.offsetX
|
|
@@ -272,12 +266,12 @@ class PositionData {
|
|
|
272
266
|
return this.element.shouldStretchHorizontally ? this.target.height : null;
|
|
273
267
|
}
|
|
274
268
|
get position() {
|
|
275
|
-
const win = (0,
|
|
269
|
+
const win = (0, _uiDomUtils.ownerWindow)(this.target.node);
|
|
276
270
|
let {
|
|
277
271
|
left,
|
|
278
272
|
top
|
|
279
273
|
} = addOffsets([this.target.position, this.offset]);
|
|
280
|
-
if (
|
|
274
|
+
if (_uiDomUtils.canUseDOM && win?.matchMedia) {
|
|
281
275
|
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;
|
|
282
276
|
if (!retina) {
|
|
283
277
|
left = Math.round(left);
|
|
@@ -307,9 +301,9 @@ class PositionData {
|
|
|
307
301
|
};
|
|
308
302
|
}
|
|
309
303
|
overflow(element) {
|
|
310
|
-
const parentWindow = (0,
|
|
311
|
-
const elementBounds = (0,
|
|
312
|
-
const windowBounds = (0,
|
|
304
|
+
const parentWindow = (0, _uiDomUtils.ownerWindow)(element);
|
|
305
|
+
const elementBounds = (0, _uiDomUtils.getBoundingClientRect)(element);
|
|
306
|
+
const windowBounds = (0, _uiDomUtils.getBoundingClientRect)(parentWindow);
|
|
313
307
|
const offsets = addOffsets([this.target.position, this.offset]);
|
|
314
308
|
const parentOffset = {
|
|
315
309
|
top: this.element.positionedParentsOffset.top + this.element.scrollParentsOffset.top,
|
|
@@ -440,16 +434,16 @@ class PositionData {
|
|
|
440
434
|
} = this.options;
|
|
441
435
|
const elementNode = this.element?.node;
|
|
442
436
|
if (!elementNode) return null;
|
|
443
|
-
if (constrain === 'window') return (0,
|
|
437
|
+
if (constrain === 'window') return (0, _uiDomUtils.ownerWindow)(elementNode) ?? null;
|
|
444
438
|
if (constrain === 'scroll-parent') {
|
|
445
|
-
return (0,
|
|
439
|
+
return (0, _uiDomUtils.getScrollParents)(this.target?.node)[0] ?? null;
|
|
446
440
|
}
|
|
447
|
-
if (constrain === 'parent') return (0,
|
|
441
|
+
if (constrain === 'parent') return (0, _uiDomUtils.findDOMNode)(this.container) ?? null;
|
|
448
442
|
if (typeof constrain === 'function') {
|
|
449
|
-
return (0,
|
|
443
|
+
return (0, _uiDomUtils.findDOMNode)(constrain.call(null)) ?? null;
|
|
450
444
|
}
|
|
451
445
|
if (typeof constrain === 'object' && constrain) {
|
|
452
|
-
return (0,
|
|
446
|
+
return (0, _uiDomUtils.findDOMNode)(constrain) ?? null;
|
|
453
447
|
}
|
|
454
448
|
return null;
|
|
455
449
|
}
|
|
@@ -491,8 +485,8 @@ class PositionData {
|
|
|
491
485
|
// `offsetX` / `offsetY` always push the popover *away* from the trigger
|
|
492
486
|
// so on the primary axis they consume available space.
|
|
493
487
|
const elementNode = this.element.node;
|
|
494
|
-
const offsetY = (0,
|
|
495
|
-
const offsetX = (0,
|
|
488
|
+
const offsetY = (0, _uiUtils.px)(this.element._offset.top, elementNode);
|
|
489
|
+
const offsetX = (0, _uiUtils.px)(this.element._offset.left, elementNode);
|
|
496
490
|
const [primary] = this.element.placement;
|
|
497
491
|
let height;
|
|
498
492
|
if (primary === 'bottom') {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-position",
|
|
3
|
-
"version": "11.7.9-snapshot-
|
|
3
|
+
"version": "11.7.9-snapshot-1",
|
|
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",
|
|
@@ -15,20 +15,20 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "^7.29.7",
|
|
18
|
-
"@instructure/debounce": "11.7.9-snapshot-
|
|
19
|
-
"@instructure/emotion": "11.7.9-snapshot-
|
|
20
|
-
"@instructure/
|
|
21
|
-
"@instructure/
|
|
22
|
-
"@instructure/ui-
|
|
23
|
-
"@instructure/ui-react-utils": "11.7.9-snapshot-
|
|
24
|
-
"@instructure/ui-
|
|
25
|
-
"@instructure/uid": "11.7.9-snapshot-
|
|
26
|
-
"@instructure/ui-
|
|
18
|
+
"@instructure/debounce": "11.7.9-snapshot-1",
|
|
19
|
+
"@instructure/emotion": "11.7.9-snapshot-1",
|
|
20
|
+
"@instructure/shared-types": "11.7.9-snapshot-1",
|
|
21
|
+
"@instructure/ui-dom-utils": "11.7.9-snapshot-1",
|
|
22
|
+
"@instructure/ui-portal": "11.7.9-snapshot-1",
|
|
23
|
+
"@instructure/ui-react-utils": "11.7.9-snapshot-1",
|
|
24
|
+
"@instructure/ui-utils": "11.7.9-snapshot-1",
|
|
25
|
+
"@instructure/uid": "11.7.9-snapshot-1",
|
|
26
|
+
"@instructure/ui-themes": "11.7.9-snapshot-1"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"vitest": "^5.0.0",
|
|
30
|
-
"@instructure/ui-babel-preset": "11.7.9-snapshot-
|
|
31
|
-
"@instructure/ui-color-utils": "11.7.9-snapshot-
|
|
30
|
+
"@instructure/ui-babel-preset": "11.7.9-snapshot-1",
|
|
31
|
+
"@instructure/ui-color-utils": "11.7.9-snapshot-1"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=18 <=19"
|