@primer/behaviors 1.0.1-rc.c3f87ba → 1.0.2-rc.6a46764

package/CHANGELOG.md

@@ -1,8 +1,13 @@
 # @primer/behaviors
 
-## 1.0.1
+## 1.0.2
+
 ### Patch Changes
 
+- [#17](https://github.com/primer/behaviors/pull/17) [`9194ba4`](https://github.com/primer/behaviors/commit/9194ba403502b4acba0be03bed1a765c1ba81340) Thanks [@dgreif](https://github.com/dgreif)! - Correct margin orientation for `scrollIntoView`
 
+## 1.0.1
+
+### Patch Changes
 
 - [#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

package/README.md

@@ -10,7 +10,7 @@ Shared behaviors for JavaScript components
 * [Anchored Position](/docs/anchored-position.md)
 * [Focus Trap](/docs/focus-trap.md)
 * [Focus Zone](/docs/focus-zone.md)
-* [Scroll Into Viewing Area](/docs/scroll-into-viewing-area.md)
+* [Scroll Into View](/docs/scroll-into-view.md)
 
 ## Installation
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './anchored-position.js';
 export * from './focus-trap.js';
 export * from './focus-zone.js';
-export * from './scroll-into-viewing-area.js';
+export * from './scroll-into-view.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 export * from './anchored-position.js';
 export * from './focus-trap.js';
 export * from './focus-zone.js';
-export * from './scroll-into-viewing-area.js';
+export * from './scroll-into-view.js';

package/dist/scroll-into-view.d.ts

@@ -0,0 +1,7 @@
+export interface ScrollIntoViewOptions {
+    direction?: 'horizontal' | 'vertical';
+    startMargin?: number;
+    endMargin?: number;
+    behavior?: ScrollBehavior;
+}
+export declare function scrollIntoView(child: HTMLElement, viewingArea: HTMLElement, { direction, startMargin, endMargin, behavior }?: ScrollIntoViewOptions): void;

package/dist/{scroll-into-viewing-area.js → scroll-into-view.js}

@@ -1,17 +1,17 @@
-export const scrollIntoViewingArea = (child, viewingArea, direction = 'vertical', startMargin = 8, endMargin = 0, behavior = 'smooth') => {
+export function scrollIntoView(child, viewingArea, { direction = 'vertical', startMargin = 0, endMargin = 0, behavior = 'smooth' } = {}) {
     const startSide = direction === 'vertical' ? 'top' : 'left';
     const endSide = direction === 'vertical' ? 'bottom' : 'right';
     const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
     const { [startSide]: childStart, [endSide]: childEnd } = child.getBoundingClientRect();
     const { [startSide]: viewingAreaStart, [endSide]: viewingAreaEnd } = viewingArea.getBoundingClientRect();
-    const isChildStartAboveViewingArea = childStart < viewingAreaStart + endMargin;
-    const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - startMargin;
+    const isChildStartAboveViewingArea = childStart < viewingAreaStart + startMargin;
+    const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - endMargin;
     if (isChildStartAboveViewingArea) {
         const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
-        viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildStart - endMargin });
+        viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildStart - startMargin });
     }
     else if (isChildBottomBelowViewingArea) {
         const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
-        viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + startMargin });
+        viewingArea.scrollTo({ behavior, [startSide]: scrollHeightToChildBottom + endMargin });
     }
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "1.0.1-rc.c3f87ba",
+  "version": "1.0.2-rc.6a46764",
   "description": "Shared behaviors for JavaScript components",
   "main": "./dist/index.js",
   "type": "module",

package/dist/scroll-into-viewing-area.d.ts

@@ -1 +0,0 @@
-export declare const scrollIntoViewingArea: (child: HTMLElement, viewingArea: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;