@primer/behaviors 1.0.1-rc.fc715af → 1.0.2
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/README.md +10 -23
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/scroll-into-view.d.ts +7 -0
- package/dist/{scroll-into-viewing-area.js → scroll-into-view.js} +6 -6
- package/package.json +6 -5
- package/utils/package.json +7 -0
- package/CHANGELOG.md +0 -8
- package/dist/scroll-into-viewing-area.d.ts +0 -1
package/README.md
CHANGED
|
@@ -1,29 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<img alt="" src="https://img.shields.io/npm/v/@primer/behaviors.svg">
|
|
8
|
-
</a>
|
|
9
|
-
<a aria-label="contributors graph" href="https://github.com/primer/behaviors/graphs/contributors">
|
|
10
|
-
<img src="https://img.shields.io/github/contributors/primer/behaviors.svg">
|
|
11
|
-
</a>
|
|
12
|
-
<a aria-label="last commit" href="https://github.com/primer/behaviors/commits/main">
|
|
13
|
-
<img alt="" src=
|
|
14
|
-
"https://img.shields.io/github/last-commit/primer/behaviors.svg">
|
|
15
|
-
</a>
|
|
16
|
-
<a aria-label="license" href="https://github.com/primer/behaviors/blob/main/LICENSE">
|
|
17
|
-
<img src="https://img.shields.io/github/license/primer/behaviors.svg" alt="">
|
|
18
|
-
</a>
|
|
19
|
-
</p>
|
|
1
|
+
# Primer Behaviors
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@primer/behaviors)
|
|
4
|
+
[](https://github.com/primer/behaviors/actions/workflows/ci.yml)
|
|
5
|
+
|
|
6
|
+
Shared behaviors for JavaScript components
|
|
20
7
|
|
|
21
8
|
## Documentation
|
|
22
9
|
|
|
23
|
-
* [Anchored Position](
|
|
24
|
-
* [Focus Trap](
|
|
25
|
-
* [Focus Zone](
|
|
26
|
-
* Scroll Into
|
|
10
|
+
* [Anchored Position](/docs/anchored-position.md)
|
|
11
|
+
* [Focus Trap](/docs/focus-trap.md)
|
|
12
|
+
* [Focus Zone](/docs/focus-zone.md)
|
|
13
|
+
* [Scroll Into View](/docs/scroll-into-view.md)
|
|
27
14
|
|
|
28
15
|
## Installation
|
|
29
16
|
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export interface ScrollIntoViewOptions {
|
|
2
|
+
direction?: 'horizontal' | 'vertical';
|
|
3
|
+
startMargin?: number;
|
|
4
|
+
endMargin?: number;
|
|
5
|
+
behavior?: ScrollBehavior;
|
|
6
|
+
}
|
|
7
|
+
export declare function scrollIntoView(child: HTMLElement, viewingArea: HTMLElement, { direction, startMargin, endMargin, behavior }?: ScrollIntoViewOptions): void;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
export
|
|
1
|
+
export function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargin = 0, endMargin = 0, behavior = 'smooth' } = {}) {
|
|
2
2
|
const startSide = direction === 'vertical' ? 'top' : 'left';
|
|
3
3
|
const endSide = direction === 'vertical' ? 'bottom' : 'right';
|
|
4
4
|
const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
|
|
5
5
|
const { [startSide]: childStart, [endSide]: childEnd } = child.getBoundingClientRect();
|
|
6
6
|
const { [startSide]: viewingAreaStart, [endSide]: viewingAreaEnd } = viewingArea.getBoundingClientRect();
|
|
7
|
-
const isChildStartAboveViewingArea = childStart < viewingAreaStart +
|
|
8
|
-
const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd -
|
|
7
|
+
const isChildStartAboveViewingArea = childStart < viewingAreaStart + startMargin;
|
|
8
|
+
const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - endMargin;
|
|
9
9
|
if (isChildStartAboveViewingArea) {
|
|
10
10
|
const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
|
|
11
|
-
viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildStart -
|
|
11
|
+
viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildStart - startMargin });
|
|
12
12
|
}
|
|
13
13
|
else if (isChildBottomBelowViewingArea) {
|
|
14
14
|
const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
|
|
15
|
-
viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom +
|
|
15
|
+
viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + endMargin });
|
|
16
16
|
}
|
|
17
|
-
}
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/behaviors",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Shared behaviors for JavaScript components",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"files": [
|
|
9
|
-
"dist"
|
|
9
|
+
"dist",
|
|
10
|
+
"utils"
|
|
10
11
|
],
|
|
11
12
|
"sideEffects": [
|
|
12
13
|
"dist/focus-zone.js",
|
|
@@ -57,13 +58,13 @@
|
|
|
57
58
|
"@types/react": "^17.0.37",
|
|
58
59
|
"esbuild": "^0.14.1",
|
|
59
60
|
"esbuild-jest": "^0.5.0",
|
|
60
|
-
"eslint": "^8.
|
|
61
|
+
"eslint": "^8.3.0",
|
|
61
62
|
"eslint-plugin-github": "^4.3.5",
|
|
62
63
|
"jest": "^27.4.3",
|
|
63
|
-
"prettier": "^2.
|
|
64
|
+
"prettier": "^2.5.0",
|
|
64
65
|
"react": "^17.0.2",
|
|
65
66
|
"react-dom": "^17.0.2",
|
|
66
67
|
"size-limit": "^7.0.3",
|
|
67
|
-
"typescript": "^4.
|
|
68
|
+
"typescript": "^4.5.2"
|
|
68
69
|
}
|
|
69
70
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
# @primer/behaviors
|
|
2
|
-
|
|
3
|
-
## 1.0.1
|
|
4
|
-
### Patch Changes
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
- [#10](https://github.com/primer/behaviors/pull/10) [`88b6f34`](https://github.com/primer/behaviors/commit/88b6f34bf4874f3c81473020a01a58b197dd6e16) Thanks [@dgreif](https://github.com/dgreif)! - Set up changesets
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const scrollIntoViewingArea: (child: HTMLElement, viewingArea: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;
|