@primer/behaviors 1.1.0 → 1.1.2-rc.83d1cfb

package/CHANGELOG.md

@@ -0,0 +1,39 @@
+# @primer/behaviors
+
+## 1.1.2
+
+### Patch Changes
+
+- [#78](https://github.com/primer/behaviors/pull/78) [`62e5459`](https://github.com/primer/behaviors/commit/62e545913dae8ca42f88fd6184f190cdf3df9c4c) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Anchored Position: Add alternative alignments to flip to if there isn't enough space
+
+## 1.1.1
+
+### Patch Changes
+
+- [#73](https://github.com/primer/behaviors/pull/73) [`a96d60f`](https://github.com/primer/behaviors/commit/a96d60fdb2a2ffdde71a22ea29fa2c788bf4c6aa) Thanks [@dgreif](https://github.com/dgreif)! - Add `import` conditional export type to the package for better NodeJS ESM compatibility
+
+## 1.1.0
+
+### Minor Changes
+
+- [#52](https://github.com/primer/behaviors/pull/52) [`1aa3027`](https://github.com/primer/behaviors/commit/1aa302782e3c833f9d9c27f602a046e81f05c3e5) Thanks [@owenniblock](https://github.com/owenniblock)! - Update focusTrap to use new methodology after accessibility discussions
+
+## 1.0.3
+
+### Patch Changes
+
+- [#42](https://github.com/primer/behaviors/pull/42) [`41945a3`](https://github.com/primer/behaviors/commit/41945a37ef07da82ce5a29feb03d7a7d96ec76ea) Thanks [@dgreif](https://github.com/dgreif)! - Build both esm and cjs output for the package
+
+## 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`
+
+* [#18](https://github.com/primer/behaviors/pull/18) [`3b4dd41`](https://github.com/primer/behaviors/commit/3b4dd414175417f83bd144939fe74b2a01bc7136) Thanks [@dgreif](https://github.com/dgreif)! - Export utils as submodule
+
+## 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/dist/cjs/anchored-position.d.ts

@@ -11,5 +11,6 @@ export interface AnchorPosition {
     top: number;
     left: number;
     anchorSide: AnchorSide;
+    anchorAlign: AnchorAlignment;
 }
 export declare function getAnchoredPosition(floatingElement: Element, anchorElement: Element | DOMRect, settings?: Partial<PositionSettings>): AnchorPosition;

package/dist/cjs/anchored-position.js

@@ -7,6 +7,11 @@ const alternateOrders = {
     'outside-left': ['outside-right', 'outside-bottom', 'outside-top', 'outside-bottom'],
     'outside-right': ['outside-left', 'outside-bottom', 'outside-top', 'outside-bottom']
 };
+const alternateAlignments = {
+    start: ['end', 'center'],
+    end: ['start', 'center'],
+    center: ['end', 'start']
+};
 function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
     const parentElement = getPositionedParent(floatingElement);
     const clippingRect = getClippingRect(parentElement);
@@ -86,6 +91,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
     };
     let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset);
     let anchorSide = side;
+    let anchorAlign = align;
     pos.top -= relativePosition.top;
     pos.left -= relativePosition.left;
     if (!allowOutOfBounds) {
@@ -103,6 +109,20 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
                 anchorSide = nextSide;
             }
         }
+        const alternateAlignment = alternateAlignments[align];
+        let alignmentAttempt = 0;
+        if (alternateAlignment) {
+            let prevAlign = align;
+            while (alignmentAttempt < alternateAlignment.length &&
+                shouldRecalculateAlignment(prevAlign, pos, relativeViewportRect, floatingRect)) {
+                const nextAlign = alternateAlignment[alignmentAttempt++];
+                prevAlign = nextAlign;
+                pos = calculatePosition(floatingRect, anchorRect, anchorSide, nextAlign, anchorOffset, alignmentOffset);
+                pos.top -= relativePosition.top;
+                pos.left -= relativePosition.left;
+                anchorAlign = nextAlign;
+            }
+        }
         if (pos.top < relativeViewportRect.top) {
             pos.top = relativeViewportRect.top;
         }
@@ -118,7 +138,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
             }
         }
     }
-    return Object.assign(Object.assign({}, pos), { anchorSide });
+    return Object.assign(Object.assign({}, pos), { anchorSide, anchorAlign });
 }
 function calculatePosition(elementDimensions, anchorPosition, side, align, anchorOffset, alignmentOffset) {
     const anchorRight = anchorPosition.left + anchorPosition.width;
@@ -208,3 +228,11 @@ function shouldRecalculatePosition(side, currentPos, containerDimensions, elemen
             currentPos.left + elementDimensions.width > containerDimensions.width + containerDimensions.left);
     }
 }
+function shouldRecalculateAlignment(align, currentPos, containerDimensions, elementDimensions) {
+    if (align === 'end') {
+        return currentPos.left < containerDimensions.left;
+    }
+    else if (align === 'start' || align === 'center') {
+        return currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width;
+    }
+}

package/dist/esm/anchored-position.d.ts

@@ -11,5 +11,6 @@ export interface AnchorPosition {
     top: number;
     left: number;
     anchorSide: AnchorSide;
+    anchorAlign: AnchorAlignment;
 }
 export declare function getAnchoredPosition(floatingElement: Element, anchorElement: Element | DOMRect, settings?: Partial<PositionSettings>): AnchorPosition;

package/dist/esm/anchored-position.js

@@ -4,6 +4,11 @@ const alternateOrders = {
     'outside-left': ['outside-right', 'outside-bottom', 'outside-top', 'outside-bottom'],
     'outside-right': ['outside-left', 'outside-bottom', 'outside-top', 'outside-bottom']
 };
+const alternateAlignments = {
+    start: ['end', 'center'],
+    end: ['start', 'center'],
+    center: ['end', 'start']
+};
 export function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
     const parentElement = getPositionedParent(floatingElement);
     const clippingRect = getClippingRect(parentElement);
@@ -82,6 +87,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
     };
     let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset);
     let anchorSide = side;
+    let anchorAlign = align;
     pos.top -= relativePosition.top;
     pos.left -= relativePosition.left;
     if (!allowOutOfBounds) {
@@ -99,6 +105,20 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
                 anchorSide = nextSide;
             }
         }
+        const alternateAlignment = alternateAlignments[align];
+        let alignmentAttempt = 0;
+        if (alternateAlignment) {
+            let prevAlign = align;
+            while (alignmentAttempt < alternateAlignment.length &&
+                shouldRecalculateAlignment(prevAlign, pos, relativeViewportRect, floatingRect)) {
+                const nextAlign = alternateAlignment[alignmentAttempt++];
+                prevAlign = nextAlign;
+                pos = calculatePosition(floatingRect, anchorRect, anchorSide, nextAlign, anchorOffset, alignmentOffset);
+                pos.top -= relativePosition.top;
+                pos.left -= relativePosition.left;
+                anchorAlign = nextAlign;
+            }
+        }
         if (pos.top < relativeViewportRect.top) {
             pos.top = relativeViewportRect.top;
         }
@@ -114,7 +134,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
             }
         }
     }
-    return Object.assign(Object.assign({}, pos), { anchorSide });
+    return Object.assign(Object.assign({}, pos), { anchorSide, anchorAlign });
 }
 function calculatePosition(elementDimensions, anchorPosition, side, align, anchorOffset, alignmentOffset) {
     const anchorRight = anchorPosition.left + anchorPosition.width;
@@ -204,3 +224,11 @@ function shouldRecalculatePosition(side, currentPos, containerDimensions, elemen
             currentPos.left + elementDimensions.width > containerDimensions.width + containerDimensions.left);
     }
 }
+function shouldRecalculateAlignment(align, currentPos, containerDimensions, elementDimensions) {
+    if (align === 'end') {
+        return currentPos.left < containerDimensions.left;
+    }
+    else if (align === 'start' || align === 'center') {
+        return currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width;
+    }
+}

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@primer/behaviors",
-  "version": "1.1.0",
+  "version": "1.1.2-rc.83d1cfb",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "module": "./dist/esm/index.js",
+      "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js",
-      "module": "./dist/esm/index.js"
+      "types": "./dist/esm/index.d.ts"
     },
     "./utils": {
-      "types": "./dist/utils/index.d.ts",
+      "module": "./dist/esm/utils/index.js",
+      "import": "./dist/esm/utils/index.js",
       "require": "./dist/cjs/utils/index.js",
-      "module": "./dist/esm/utils/index.js"
+      "types": "./dist/esm/utils/index.d.ts"
     }
   },
-  "types": "dist/cjs/index.d.ts",
+  "types": "dist/esm/index.d.ts",
   "files": [
     "dist",
     "utils"

package/utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/behaviors/utils",
   "types": "../dist/esm/utils/index.d.ts",
-  "main": "../dist/esm/utils/index.js",
-  "type": "module",
+  "main": "../dist/cjs/utils/index.js",
+  "module": "../dist/esm/utils/index.js",
   "sideEffects": false
 }