@cloudscape-design/components-themeable 3.0.858 → 3.0.859
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/lib/internal/manifest.json +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/utils/dom.d.ts +5 -0
- package/lib/internal/template/internal/utils/dom.d.ts.map +1 -1
- package/lib/internal/template/internal/utils/dom.js +33 -8
- package/lib/internal/template/internal/utils/dom.js.map +1 -1
- package/lib/internal/template/popover/use-popover-position.d.ts.map +1 -1
- package/lib/internal/template/popover/use-popover-position.js +17 -4
- package/lib/internal/template/popover/use-popover-position.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
export declare function isContainingBlock(element: HTMLElement): boolean;
|
|
1
2
|
/**
|
|
2
3
|
* Returns an element that is used to position the given element.
|
|
3
4
|
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
|
|
4
5
|
*/
|
|
5
6
|
export declare function getContainingBlock(startElement: HTMLElement): HTMLElement | null;
|
|
7
|
+
export declare function findUpUntilMultiple({ startElement, tests, }: {
|
|
8
|
+
startElement: HTMLElement;
|
|
9
|
+
tests: Record<string, (el: HTMLElement) => boolean>;
|
|
10
|
+
}): Record<string, HTMLElement>;
|
|
6
11
|
/**
|
|
7
12
|
* Parses a CSS color value that might contain CSS Custom Properties
|
|
8
13
|
* and returns a value that will be understood by the browser, no matter of support level.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../../src/internal/utils/dom.ts"],"names":[],"mappings":"AAOA;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../../src/internal/utils/dom.ts"],"names":[],"mappings":"AAOA,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAQ/D;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAMhF;AAOD,wBAAgB,mBAAmB,CAAC,EAClC,YAAY,EACZ,KAAK,GACN,EAAE;IACD,YAAY,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC;CACrD,+BAmBA;AAID;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAqB7C;AAKD,wBAAgB,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,IAAI,IAAI,CAYtD;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,IAAI,WAAW,CAUpE;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,IAAI,UAAU,CAQlE"}
|
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import balanced from 'balanced-match';
|
|
4
4
|
import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
|
|
5
|
+
export function isContainingBlock(element) {
|
|
6
|
+
var _a;
|
|
7
|
+
const computedStyle = getComputedStyle(element);
|
|
8
|
+
return ((!!computedStyle.transform && computedStyle.transform !== 'none') ||
|
|
9
|
+
(!!computedStyle.perspective && computedStyle.perspective !== 'none') ||
|
|
10
|
+
(!!computedStyle.containerType && computedStyle.containerType !== 'normal') ||
|
|
11
|
+
((_a = computedStyle.contain) === null || _a === void 0 ? void 0 : _a.split(' ').some(s => ['layout', 'paint', 'strict', 'content'].includes(s))));
|
|
12
|
+
}
|
|
5
13
|
/**
|
|
6
14
|
* Returns an element that is used to position the given element.
|
|
7
15
|
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
|
|
@@ -10,14 +18,31 @@ export function getContainingBlock(startElement) {
|
|
|
10
18
|
if (!startElement.parentElement) {
|
|
11
19
|
return null;
|
|
12
20
|
}
|
|
13
|
-
return findUpUntil(startElement.parentElement,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
return findUpUntil(startElement.parentElement, isContainingBlock);
|
|
22
|
+
}
|
|
23
|
+
/*
|
|
24
|
+
* Allows to find multiple elements in the page each according to a specific test function,
|
|
25
|
+
* but traversing the DOM only once.
|
|
26
|
+
*/
|
|
27
|
+
export function findUpUntilMultiple({ startElement, tests, }) {
|
|
28
|
+
const keys = Object.keys(tests);
|
|
29
|
+
const elements = {};
|
|
30
|
+
let current = startElement;
|
|
31
|
+
while (current && Object.keys(elements).length < keys.length) {
|
|
32
|
+
current = current.parentElement;
|
|
33
|
+
// If a component is used within an svg (i.e. as foreignObject), then it will
|
|
34
|
+
// have some ancestor nodes that are SVGElement. We want to skip those,
|
|
35
|
+
// as they have very different properties to HTMLElements.
|
|
36
|
+
while (current && !isHTMLElement(current)) {
|
|
37
|
+
current = current.parentElement;
|
|
38
|
+
}
|
|
39
|
+
for (const key of keys) {
|
|
40
|
+
if (!elements[key] && current && tests[key](current)) {
|
|
41
|
+
elements[key] = current;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
return elements;
|
|
21
46
|
}
|
|
22
47
|
const cssVariableExpression = /--.+?\s*,\s*(.+)/;
|
|
23
48
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../../src/internal/utils/dom.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE
|
|
1
|
+
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../../../src/internal/utils/dom.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport balanced from 'balanced-match';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nexport function isContainingBlock(element: HTMLElement): boolean {\n const computedStyle = getComputedStyle(element);\n return (\n (!!computedStyle.transform && computedStyle.transform !== 'none') ||\n (!!computedStyle.perspective && computedStyle.perspective !== 'none') ||\n (!!computedStyle.containerType && computedStyle.containerType !== 'normal') ||\n computedStyle.contain?.split(' ').some(s => ['layout', 'paint', 'strict', 'content'].includes(s))\n );\n}\n\n/**\n * Returns an element that is used to position the given element.\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block\n */\nexport function getContainingBlock(startElement: HTMLElement): HTMLElement | null {\n if (!startElement.parentElement) {\n return null;\n }\n\n return findUpUntil(startElement.parentElement, isContainingBlock) as HTMLElement;\n}\n\n/*\n * Allows to find multiple elements in the page each according to a specific test function,\n * but traversing the DOM only once.\n */\n\nexport function findUpUntilMultiple({\n startElement,\n tests,\n}: {\n startElement: HTMLElement;\n tests: Record<string, (el: HTMLElement) => boolean>;\n}) {\n const keys = Object.keys(tests);\n const elements: Record<string, HTMLElement> = {};\n let current: HTMLElement | null = startElement;\n while (current && Object.keys(elements).length < keys.length) {\n current = current.parentElement;\n // If a component is used within an svg (i.e. as foreignObject), then it will\n // have some ancestor nodes that are SVGElement. We want to skip those,\n // as they have very different properties to HTMLElements.\n while (current && !isHTMLElement(current)) {\n current = (current as Element).parentElement;\n }\n for (const key of keys) {\n if (!elements[key] && current && tests[key](current)) {\n elements[key] = current;\n }\n }\n }\n return elements;\n}\n\nconst cssVariableExpression = /--.+?\\s*,\\s*(.+)/;\n\n/**\n * Parses a CSS color value that might contain CSS Custom Properties\n * and returns a value that will be understood by the browser, no matter of support level.\n * If the browser support CSS Custom Properties, the value will be return as is. Otherwise,\n * the fallback value will be extracted and returned instead.\n */\nexport function parseCssVariable(value: string) {\n if (typeof window === 'undefined') {\n return value;\n }\n\n if (window.CSS?.supports?.('color', 'var(--dummy, #000)') ?? false) {\n return value;\n }\n\n const varIndex = value.lastIndexOf('var(');\n if (varIndex === -1) {\n return value;\n }\n\n const expr = balanced('(', ')', value.substr(varIndex));\n if (!expr) {\n return value;\n }\n\n const match = expr.body.match(cssVariableExpression);\n return match ? match[1] : value;\n}\n\n// The instanceof Node/HTMLElement/SVGElement checks can fail if the target element\n// belongs to a different window than the respective type.\n\nexport function isNode(target: unknown): target is Node {\n return (\n target instanceof Node ||\n (target !== null &&\n typeof target === 'object' &&\n 'nodeType' in target &&\n typeof target.nodeType === 'number' &&\n 'nodeName' in target &&\n typeof target.nodeName === 'string' &&\n 'parentNode' in target &&\n typeof target.parentNode === 'object')\n );\n}\n\nexport function isHTMLElement(target: unknown): target is HTMLElement {\n return (\n target instanceof HTMLElement ||\n (isNode(target) &&\n target.nodeType === Node.ELEMENT_NODE &&\n 'style' in target &&\n typeof target.style === 'object' &&\n typeof target.ownerDocument === 'object' &&\n !isSVGElement(target))\n );\n}\n\nexport function isSVGElement(target: unknown): target is SVGElement {\n return (\n target instanceof SVGElement ||\n (isNode(target) &&\n target.nodeType === Node.ELEMENT_NODE &&\n 'ownerSVGElement' in target &&\n typeof target.ownerSVGElement === 'object')\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover-position.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,EAAE,YAAY,EAAQ,MAAM,cAAc,CAAC;AAGzF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,GACjB,EAAE;IACD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,CAAC;IAC3D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;;qDAOyC,IAAI;;
|
|
1
|
+
{"version":3,"file":"use-popover-position.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAW7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,EAAE,YAAY,EAAQ,MAAM,cAAc,CAAC;AAGzF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,GACjB,EAAE;IACD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,CAAC;IAC3D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,EAAE,YAAY,CAAC,QAAQ,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;;qDAOyC,IAAI;;EAqK7C"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { useCallback, useRef, useState } from 'react';
|
|
4
4
|
import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
|
|
5
5
|
import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
|
|
6
|
-
import {
|
|
6
|
+
import { findUpUntilMultiple, isContainingBlock } from '../internal/utils/dom';
|
|
7
7
|
import { calculateScroll, getFirstScrollableParent, scrollRectangleIntoView, } from '../internal/utils/scrollable-containers';
|
|
8
8
|
import { calculatePosition, getDimensions, getOffsetDimensions, isCenterOutside } from './utils/positions';
|
|
9
9
|
export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trackRef, contentRef, allowScrollToFit, allowVerticalOverflow, preferredPosition, renderWithPortal, keepPosition, hideOnOverscroll, }) {
|
|
@@ -47,8 +47,17 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
|
|
|
47
47
|
const viewportRect = getViewportRect(document.defaultView);
|
|
48
48
|
const trackRect = getLogicalBoundingClientRect(track);
|
|
49
49
|
const arrowRect = getDimensions(arrow);
|
|
50
|
-
const containingBlock =
|
|
50
|
+
const { containingBlock, boundary } = findUpUntilMultiple({
|
|
51
|
+
startElement: popover,
|
|
52
|
+
tests: {
|
|
53
|
+
containingBlock: isContainingBlock,
|
|
54
|
+
boundary: (element) => isContainingBlock(element) || isBoundary(element),
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
// Rectangle for the containing block, which provides the reference frame for the popover coordinates.
|
|
51
58
|
const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;
|
|
59
|
+
// Rectangle outside of which the popover should not be positioned, because it would be clipped.
|
|
60
|
+
const boundaryRect = boundary ? getLogicalBoundingClientRect(boundary) : getDocumentRect(document);
|
|
52
61
|
const bodyBorderWidth = getBorderWidth(body);
|
|
53
62
|
const contentRect = getLogicalBoundingClientRect(contentRef.current);
|
|
54
63
|
const contentBoundingBox = {
|
|
@@ -67,12 +76,12 @@ export default function usePopoverPosition({ popoverRef, bodyRef, arrowRef, trac
|
|
|
67
76
|
trigger: trackRect,
|
|
68
77
|
arrow: arrowRect,
|
|
69
78
|
body: contentBoundingBox,
|
|
70
|
-
container:
|
|
79
|
+
container: boundaryRect,
|
|
71
80
|
viewport: viewportRect,
|
|
72
81
|
renderWithPortal,
|
|
73
82
|
allowVerticalOverflow,
|
|
74
83
|
});
|
|
75
|
-
// Get the position of the popover relative to the
|
|
84
|
+
// Get the position of the popover relative to the containing block.
|
|
76
85
|
const popoverOffset = toRelativePosition(rect, containingBlockRect);
|
|
77
86
|
// Cache the distance between the trigger and the popover (which stays the same as you scroll),
|
|
78
87
|
// and use that to recalculate the new popover position.
|
|
@@ -168,4 +177,8 @@ function getDocumentRect(document) {
|
|
|
168
177
|
blockSize: document.documentElement.scrollHeight,
|
|
169
178
|
};
|
|
170
179
|
}
|
|
180
|
+
function isBoundary(element) {
|
|
181
|
+
const computedStyle = getComputedStyle(element);
|
|
182
|
+
return !!computedStyle.clipPath && computedStyle.clipPath !== 'none';
|
|
183
|
+
}
|
|
171
184
|
//# sourceMappingURL=use-popover-position.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover-position.js","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAc,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EACL,eAAe,EACf,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE3G,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,GAajB;IACC,MAAM,2BAA2B,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IACtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACxF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,oGAAoG;IACpG,MAAM,kBAAkB,GAAG,MAAM,CAAa,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAExD,MAAM,0BAA0B,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE7D,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,eAAe,GAAG,KAAK,EAAE,EAAE;;QAC1B,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YAC5G,OAAO;SACR;QAED,yBAAyB;QACzB,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,MAAM,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC;QACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAE/B,gGAAgG;QAChG,6EAA6E;QAC7E,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACnE,IAAI,WAAW,KAAK,CAAC,IAAI,YAAY,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;YAClF,OAAO;SACR;QAED,+DAA+D;QAC/D,mEAAmE;QACnE,8DAA8D;QAC9D,MAAM,mBAAmB,GAAG,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC;QAC1D,MAAM,oBAAoB,GAAG,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC;QAE5D,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC;QACpC,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC;QACrC,iFAAiF;QACjF,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;QAE1B,sCAAsC;QACtC,8EAA8E;QAC9E,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,CAAC,WAAY,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QACvC,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,4BAA4B,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;QAE3G,MAAM,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;QAC7C,MAAM,WAAW,GAAG,4BAA4B,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACrE,MAAM,kBAAkB,GAAG;YACzB,UAAU,EAAE,WAAW,CAAC,UAAU,GAAG,CAAC,GAAG,eAAe;YACxD,SAAS,EAAE,WAAW,CAAC,SAAS,GAAG,CAAC,GAAG,eAAe;SACvD,CAAC;QAEF,oGAAoG;QACpG,wDAAwD;QACxD,mFAAmF;QACnF,MAAM,kBAAkB,GAAG,YAAY,IAAI,eAAe,IAAI,CAAC,CAAC,2BAA2B,CAAC,OAAO,CAAC;QACpG,MAAM,qBAAqB,GAAG,MAAA,CAAC,kBAAkB,IAAI,2BAA2B,CAAC,OAAO,CAAC,mCAAI,SAAS,CAAC;QAEvG,+EAA+E;QAC/E,MAAM,EACJ,UAAU,EACV,gBAAgB,EAAE,mBAAmB,EACrC,IAAI,GACL,GAAG,iBAAiB,CAAC;YACpB,iBAAiB;YACjB,qBAAqB;YACrB,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,kBAAkB;YACxB,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC;YAC5E,QAAQ,EAAE,YAAY;YACtB,gBAAgB;YAChB,qBAAqB;SACtB,CAAC,CAAC;QAEH,iEAAiE;QACjE,MAAM,aAAa,GAAG,kBAAkB,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QAEpE,+FAA+F;QAC/F,wDAAwD;QACxD,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,aAAa,EAAE,kBAAkB,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC;QAElH,6EAA6E;QAC7E,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,mBAAmB,CAAC;QACpD,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;QAEtD,+FAA+F;QAC/F,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YAChD,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;SAC/B;QAED,mEAAmE;QACnE,2BAA2B,CAAC,OAAO,GAAG,mBAAmB,CAAC;QAC1D,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;QAEzC,MAAM,YAAY,GAAG,gBAAgB,IAAI,CAAC,kBAAkB,CAAC;QAE7D,uBAAuB;QACvB,MAAM,eAAe,GAAG,YAAY;YAClC,CAAC,CAAC,aAAa,CAAC,eAAe,GAAG,eAAe,CAAC,IAAI,CAAC;YACvD,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC;QAClC,eAAe,CAAC,EAAE,eAAe,EAAE,gBAAgB,EAAE,aAAa,CAAC,gBAAgB,EAAE,CAAC,CAAC;QAEvF,sBAAsB;QACtB,IAAI,YAAY,EAAE;YAChB,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,OAAO,CAAC,CAAC;YAC3D,uBAAuB,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;SACjD;QAED,IAAI,gBAAgB,IAAI,QAAQ,CAAC,OAAO,YAAY,WAAW,EAAE;YAC/D,MAAM,mBAAmB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACvE,IAAI,mBAAmB,EAAE;gBACvB,0BAA0B,CAAC,OAAO,GAAG,4BAA4B,CAAC,mBAAmB,CAAC,CAAC;aACxF;SACF;QAED,kBAAkB,CAAC,OAAO,GAAG,GAAG,EAAE;YAChC,MAAM,SAAS,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;YAEtD,MAAM,cAAc,GAAG,kBAAkB,CACvC,SAAS,EACT,eAAe,CAAC,CAAC,CAAC,4BAA4B,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,YAAY,CAC/E,CAAC;YAEF,eAAe,CAAC;gBACd,eAAe,EAAE,cAAc,CAAC,eAAe,GAAG,mBAAmB,CAAC,eAAe;gBACrF,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB;aACzF,CAAC,CAAC;YAEH,IAAI,gBAAgB,IAAI,0BAA0B,CAAC,OAAO,EAAE;gBAC1D,2EAA2E;gBAC3E,6EAA6E;gBAC7E,yHAAyH;gBACzH,kBAAkB,CAAC,eAAe,CAAC,SAAS,EAAE,0BAA0B,CAAC,OAAO,CAAC,CAAC,CAAC;aACpF;QACH,CAAC,CAAC;IACJ,CAAC,EACD;QACE,QAAQ;QACR,UAAU;QACV,OAAO;QACP,UAAU;QACV,QAAQ;QACR,YAAY;QACZ,iBAAiB;QACjB,gBAAgB;QAChB,qBAAqB;QACrB,gBAAgB;QAChB,gBAAgB;KACjB,CACF,CAAC;IACF,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC;AACxG,CAAC;AAED,SAAS,cAAc,CAAC,OAAoB;IAC1C,OAAO,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AAC9D,CAAC;AAED;;GAEG;AACH,SAAS,kBAAkB,CAAC,OAAe,EAAE,MAAc;IACzD,OAAO;QACL,eAAe,EAAE,OAAO,CAAC,eAAe,GAAG,MAAM,CAAC,eAAe;QACjE,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,GAAG,MAAM,CAAC,gBAAgB;KACrE,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,eAAe,CAAC,MAAc;;IACrC,OAAO;QACL,eAAe,EAAE,CAAC;QAClB,gBAAgB,EAAE,CAAC;QACnB,UAAU,EAAE,MAAA,MAAA,MAAM,CAAC,cAAc,0CAAE,KAAK,mCAAI,MAAM,CAAC,UAAU;QAC7D,SAAS,EAAE,MAAA,MAAA,MAAM,CAAC,cAAc,0CAAE,MAAM,mCAAI,MAAM,CAAC,WAAW;KAC/D,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,QAAkB;IACzC,MAAM,EAAE,eAAe,EAAE,gBAAgB,EAAE,GAAG,4BAA4B,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IAErG,OAAO;QACL,eAAe;QACf,gBAAgB;QAChB,UAAU,EAAE,QAAQ,CAAC,eAAe,CAAC,WAAW;QAChD,SAAS,EAAE,QAAQ,CAAC,eAAe,CAAC,YAAY;KACjD,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getContainingBlock } from '../internal/utils/dom';\nimport {\n calculateScroll,\n getFirstScrollableParent,\n scrollRectangleIntoView,\n} from '../internal/utils/scrollable-containers';\nimport { BoundingBox, InternalPosition, Offset, PopoverProps, Rect } from './interfaces';\nimport { calculatePosition, getDimensions, getOffsetDimensions, isCenterOutside } from './utils/positions';\n\nexport default function usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition,\n renderWithPortal,\n keepPosition,\n hideOnOverscroll,\n}: {\n popoverRef: React.RefObject<HTMLDivElement | null>;\n bodyRef: React.RefObject<HTMLDivElement | null>;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n trackRef: React.RefObject<HTMLElement | SVGElement | null>;\n contentRef: React.RefObject<HTMLDivElement | null>;\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n preferredPosition: PopoverProps.Position;\n renderWithPortal?: boolean;\n keepPosition?: boolean;\n hideOnOverscroll?: boolean;\n}) {\n const previousInternalPositionRef = useRef<InternalPosition | null>(null);\n const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});\n const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n const [isOverscrolling, setIsOverscrolling] = useState(false);\n\n // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n const positionHandlerRef = useRef<() => void>(() => {});\n\n const scrollableContainerRectRef = useRef<Rect | null>(null);\n\n const updatePositionHandler = useCallback(\n (onContentResize = false) => {\n if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n return;\n }\n\n // Get important elements\n const popover = popoverRef.current;\n const body = bodyRef.current;\n const arrow = arrowRef.current;\n const document = popover.ownerDocument;\n const track = trackRef.current;\n\n // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n // or track does not belong to the document - bail on calculating dimensions.\n const { offsetWidth, offsetHeight } = getOffsetDimensions(popover);\n if (offsetWidth === 0 || offsetHeight === 0 || !nodeContains(document.body, track)) {\n return;\n }\n\n // Imperatively move body off-screen to give it room to expand.\n // Not doing this in React because this recalculation should happen\n // in the span of a single frame without rerendering anything.\n const prevInsetBlockStart = popover.style.insetBlockStart;\n const prevInsetInlineStart = popover.style.insetInlineStart;\n\n popover.style.insetBlockStart = '0';\n popover.style.insetInlineStart = '0';\n // Imperatively remove body styles that can remain from the previous computation.\n body.style.maxBlockSize = '';\n body.style.overflowX = '';\n body.style.overflowY = '';\n\n // Get rects representing key elements\n // Use getComputedStyle for arrowRect to avoid modifications made by transform\n const viewportRect = getViewportRect(document.defaultView!);\n const trackRect = getLogicalBoundingClientRect(track);\n const arrowRect = getDimensions(arrow);\n const containingBlock = getContainingBlock(popover);\n const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;\n\n const bodyBorderWidth = getBorderWidth(body);\n const contentRect = getLogicalBoundingClientRect(contentRef.current);\n const contentBoundingBox = {\n inlineSize: contentRect.inlineSize + 2 * bodyBorderWidth,\n blockSize: contentRect.blockSize + 2 * bodyBorderWidth,\n };\n\n // When keepPosition is true and the recalculation was triggered by a resize of the popover content,\n // we maintain the previously defined internal position,\n // but we still call calculatePosition to know if the popover should be scrollable.\n const shouldKeepPosition = keepPosition && onContentResize && !!previousInternalPositionRef.current;\n const fixedInternalPosition = (shouldKeepPosition && previousInternalPositionRef.current) ?? undefined;\n\n // Calculate the arrow direction and viewport-relative position of the popover.\n const {\n scrollable,\n internalPosition: newInternalPosition,\n rect,\n } = calculatePosition({\n preferredPosition,\n fixedInternalPosition,\n trigger: trackRect,\n arrow: arrowRect,\n body: contentBoundingBox,\n container: containingBlock ? containingBlockRect : getDocumentRect(document),\n viewport: viewportRect,\n renderWithPortal,\n allowVerticalOverflow,\n });\n\n // Get the position of the popover relative to the offset parent.\n const popoverOffset = toRelativePosition(rect, containingBlockRect);\n\n // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n // and use that to recalculate the new popover position.\n const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n // Bring back the container to its original position to prevent any flashing.\n popover.style.insetBlockStart = prevInsetBlockStart;\n popover.style.insetInlineStart = prevInsetInlineStart;\n\n // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n if (scrollable) {\n body.style.maxBlockSize = rect.blockSize + 'px';\n body.style.overflowX = 'hidden';\n body.style.overflowY = 'auto';\n }\n\n // Remember the internal position in case we want to keep it later.\n previousInternalPositionRef.current = newInternalPosition;\n setInternalPosition(newInternalPosition);\n\n const shouldScroll = allowScrollToFit && !shouldKeepPosition;\n\n // Position the popover\n const insetBlockStart = shouldScroll\n ? popoverOffset.insetBlockStart + calculateScroll(rect)\n : popoverOffset.insetBlockStart;\n setPopoverStyle({ insetBlockStart, insetInlineStart: popoverOffset.insetInlineStart });\n\n // Scroll if necessary\n if (shouldScroll) {\n const scrollableParent = getFirstScrollableParent(popover);\n scrollRectangleIntoView(rect, scrollableParent);\n }\n\n if (hideOnOverscroll && trackRef.current instanceof HTMLElement) {\n const scrollableContainer = getFirstScrollableParent(trackRef.current);\n if (scrollableContainer) {\n scrollableContainerRectRef.current = getLogicalBoundingClientRect(scrollableContainer);\n }\n }\n\n positionHandlerRef.current = () => {\n const trackRect = getLogicalBoundingClientRect(track);\n\n const newTrackOffset = toRelativePosition(\n trackRect,\n containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect\n );\n\n setPopoverStyle({\n insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,\n insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,\n });\n\n if (hideOnOverscroll && scrollableContainerRectRef.current) {\n // Assuming the arrow tip is at the vertical center of the popover trigger.\n // This is good enough for disabled reason tooltip in select and multiselect.\n // Can be further refined to take the exact arrow position into account if hideOnOverscroll is to be used in other cases.\n setIsOverscrolling(isCenterOutside(trackRect, scrollableContainerRectRef.current));\n }\n };\n },\n [\n trackRef,\n popoverRef,\n bodyRef,\n contentRef,\n arrowRef,\n keepPosition,\n preferredPosition,\n renderWithPortal,\n allowVerticalOverflow,\n allowScrollToFit,\n hideOnOverscroll,\n ]\n );\n return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling };\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n return {\n insetBlockStart: element.insetBlockStart - parent.insetBlockStart,\n insetInlineStart: element.insetInlineStart - parent.insetInlineStart,\n };\n}\n\n/**\n * Get a BoundingBox that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingBox {\n return {\n insetBlockStart: 0,\n insetInlineStart: 0,\n inlineSize: window.visualViewport?.width ?? window.innerWidth,\n blockSize: window.visualViewport?.height ?? window.innerHeight,\n };\n}\n\nfunction getDocumentRect(document: Document): BoundingBox {\n const { insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(document.documentElement);\n\n return {\n insetBlockStart,\n insetInlineStart,\n inlineSize: document.documentElement.scrollWidth,\n blockSize: document.documentElement.scrollHeight,\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-popover-position.js","sourceRoot":"","sources":["../../../src/popover/use-popover-position.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { findUpUntilMultiple, isContainingBlock } from '../internal/utils/dom';\nimport {\n calculateScroll,\n getFirstScrollableParent,\n scrollRectangleIntoView,\n} from '../internal/utils/scrollable-containers';\nimport { BoundingBox, InternalPosition, Offset, PopoverProps, Rect } from './interfaces';\nimport { calculatePosition, getDimensions, getOffsetDimensions, isCenterOutside } from './utils/positions';\n\nexport default function usePopoverPosition({\n popoverRef,\n bodyRef,\n arrowRef,\n trackRef,\n contentRef,\n allowScrollToFit,\n allowVerticalOverflow,\n preferredPosition,\n renderWithPortal,\n keepPosition,\n hideOnOverscroll,\n}: {\n popoverRef: React.RefObject<HTMLDivElement | null>;\n bodyRef: React.RefObject<HTMLDivElement | null>;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n trackRef: React.RefObject<HTMLElement | SVGElement | null>;\n contentRef: React.RefObject<HTMLDivElement | null>;\n allowScrollToFit?: boolean;\n allowVerticalOverflow?: boolean;\n preferredPosition: PopoverProps.Position;\n renderWithPortal?: boolean;\n keepPosition?: boolean;\n hideOnOverscroll?: boolean;\n}) {\n const previousInternalPositionRef = useRef<InternalPosition | null>(null);\n const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});\n const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);\n const [isOverscrolling, setIsOverscrolling] = useState(false);\n\n // Store the handler in a ref so that it can still be replaced from outside of the listener closure.\n const positionHandlerRef = useRef<() => void>(() => {});\n\n const scrollableContainerRectRef = useRef<Rect | null>(null);\n\n const updatePositionHandler = useCallback(\n (onContentResize = false) => {\n if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {\n return;\n }\n\n // Get important elements\n const popover = popoverRef.current;\n const body = bodyRef.current;\n const arrow = arrowRef.current;\n const document = popover.ownerDocument;\n const track = trackRef.current;\n\n // If the popover body isn't being rendered for whatever reason (e.g. \"display: none\" or JSDOM),\n // or track does not belong to the document - bail on calculating dimensions.\n const { offsetWidth, offsetHeight } = getOffsetDimensions(popover);\n if (offsetWidth === 0 || offsetHeight === 0 || !nodeContains(document.body, track)) {\n return;\n }\n\n // Imperatively move body off-screen to give it room to expand.\n // Not doing this in React because this recalculation should happen\n // in the span of a single frame without rerendering anything.\n const prevInsetBlockStart = popover.style.insetBlockStart;\n const prevInsetInlineStart = popover.style.insetInlineStart;\n\n popover.style.insetBlockStart = '0';\n popover.style.insetInlineStart = '0';\n // Imperatively remove body styles that can remain from the previous computation.\n body.style.maxBlockSize = '';\n body.style.overflowX = '';\n body.style.overflowY = '';\n\n // Get rects representing key elements\n // Use getComputedStyle for arrowRect to avoid modifications made by transform\n const viewportRect = getViewportRect(document.defaultView!);\n const trackRect = getLogicalBoundingClientRect(track);\n const arrowRect = getDimensions(arrow);\n const { containingBlock, boundary } = findUpUntilMultiple({\n startElement: popover,\n tests: {\n containingBlock: isContainingBlock,\n boundary: (element: HTMLElement) => isContainingBlock(element) || isBoundary(element),\n },\n });\n\n // Rectangle for the containing block, which provides the reference frame for the popover coordinates.\n const containingBlockRect = containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect;\n\n // Rectangle outside of which the popover should not be positioned, because it would be clipped.\n const boundaryRect = boundary ? getLogicalBoundingClientRect(boundary) : getDocumentRect(document);\n\n const bodyBorderWidth = getBorderWidth(body);\n const contentRect = getLogicalBoundingClientRect(contentRef.current);\n const contentBoundingBox = {\n inlineSize: contentRect.inlineSize + 2 * bodyBorderWidth,\n blockSize: contentRect.blockSize + 2 * bodyBorderWidth,\n };\n\n // When keepPosition is true and the recalculation was triggered by a resize of the popover content,\n // we maintain the previously defined internal position,\n // but we still call calculatePosition to know if the popover should be scrollable.\n const shouldKeepPosition = keepPosition && onContentResize && !!previousInternalPositionRef.current;\n const fixedInternalPosition = (shouldKeepPosition && previousInternalPositionRef.current) ?? undefined;\n\n // Calculate the arrow direction and viewport-relative position of the popover.\n const {\n scrollable,\n internalPosition: newInternalPosition,\n rect,\n } = calculatePosition({\n preferredPosition,\n fixedInternalPosition,\n trigger: trackRect,\n arrow: arrowRect,\n body: contentBoundingBox,\n container: boundaryRect,\n viewport: viewportRect,\n renderWithPortal,\n allowVerticalOverflow,\n });\n\n // Get the position of the popover relative to the containing block.\n const popoverOffset = toRelativePosition(rect, containingBlockRect);\n\n // Cache the distance between the trigger and the popover (which stays the same as you scroll),\n // and use that to recalculate the new popover position.\n const trackRelativeOffset = toRelativePosition(popoverOffset, toRelativePosition(trackRect, containingBlockRect));\n\n // Bring back the container to its original position to prevent any flashing.\n popover.style.insetBlockStart = prevInsetBlockStart;\n popover.style.insetInlineStart = prevInsetInlineStart;\n\n // Allow popover body to scroll if can't fit the popover into the container/viewport otherwise.\n if (scrollable) {\n body.style.maxBlockSize = rect.blockSize + 'px';\n body.style.overflowX = 'hidden';\n body.style.overflowY = 'auto';\n }\n\n // Remember the internal position in case we want to keep it later.\n previousInternalPositionRef.current = newInternalPosition;\n setInternalPosition(newInternalPosition);\n\n const shouldScroll = allowScrollToFit && !shouldKeepPosition;\n\n // Position the popover\n const insetBlockStart = shouldScroll\n ? popoverOffset.insetBlockStart + calculateScroll(rect)\n : popoverOffset.insetBlockStart;\n setPopoverStyle({ insetBlockStart, insetInlineStart: popoverOffset.insetInlineStart });\n\n // Scroll if necessary\n if (shouldScroll) {\n const scrollableParent = getFirstScrollableParent(popover);\n scrollRectangleIntoView(rect, scrollableParent);\n }\n\n if (hideOnOverscroll && trackRef.current instanceof HTMLElement) {\n const scrollableContainer = getFirstScrollableParent(trackRef.current);\n if (scrollableContainer) {\n scrollableContainerRectRef.current = getLogicalBoundingClientRect(scrollableContainer);\n }\n }\n\n positionHandlerRef.current = () => {\n const trackRect = getLogicalBoundingClientRect(track);\n\n const newTrackOffset = toRelativePosition(\n trackRect,\n containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect\n );\n\n setPopoverStyle({\n insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,\n insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,\n });\n\n if (hideOnOverscroll && scrollableContainerRectRef.current) {\n // Assuming the arrow tip is at the vertical center of the popover trigger.\n // This is good enough for disabled reason tooltip in select and multiselect.\n // Can be further refined to take the exact arrow position into account if hideOnOverscroll is to be used in other cases.\n setIsOverscrolling(isCenterOutside(trackRect, scrollableContainerRectRef.current));\n }\n };\n },\n [\n trackRef,\n popoverRef,\n bodyRef,\n contentRef,\n arrowRef,\n keepPosition,\n preferredPosition,\n renderWithPortal,\n allowVerticalOverflow,\n allowScrollToFit,\n hideOnOverscroll,\n ]\n );\n return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling };\n}\n\nfunction getBorderWidth(element: HTMLElement) {\n return parseInt(getComputedStyle(element).borderWidth) || 0;\n}\n\n/**\n * Convert a viewport-relative offset to an element-relative offset.\n */\nfunction toRelativePosition(element: Offset, parent: Offset): Offset {\n return {\n insetBlockStart: element.insetBlockStart - parent.insetBlockStart,\n insetInlineStart: element.insetInlineStart - parent.insetInlineStart,\n };\n}\n\n/**\n * Get a BoundingBox that represents the visible viewport.\n */\nfunction getViewportRect(window: Window): BoundingBox {\n return {\n insetBlockStart: 0,\n insetInlineStart: 0,\n inlineSize: window.visualViewport?.width ?? window.innerWidth,\n blockSize: window.visualViewport?.height ?? window.innerHeight,\n };\n}\n\nfunction getDocumentRect(document: Document): BoundingBox {\n const { insetBlockStart, insetInlineStart } = getLogicalBoundingClientRect(document.documentElement);\n\n return {\n insetBlockStart,\n insetInlineStart,\n inlineSize: document.documentElement.scrollWidth,\n blockSize: document.documentElement.scrollHeight,\n };\n}\n\nfunction isBoundary(element: HTMLElement) {\n const computedStyle = getComputedStyle(element);\n return !!computedStyle.clipPath && computedStyle.clipPath !== 'none';\n}\n"]}
|