@primer/behaviors 1.1.2 → 1.2.0-rc.5aa5da2

package/CHANGELOG.md

@@ -0,0 +1,51 @@
+# @primer/behaviors
+
+## 1.2.0
+
+### Minor Changes
+
+- [#134](https://github.com/primer/behaviors/pull/134) [`cc5bf8e`](https://github.com/primer/behaviors/commit/cc5bf8e8404594bc6b3ff1493f253b171bfb03c0) Thanks [@jonrohan](https://github.com/jonrohan)! - Add Dimensions behavior
+
+## 1.1.3
+
+### Patch Changes
+
+- [#93](https://github.com/primer/behaviors/pull/93) [`e5aaf68`](https://github.com/primer/behaviors/commit/e5aaf688b084bf6e425c6bdb0963aa50aacf8fa4) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Anchored position: Add check for boundary collision on left side
+
+## 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.js

@@ -233,6 +233,7 @@ function shouldRecalculateAlignment(align, currentPos, containerDimensions, elem
         return currentPos.left < containerDimensions.left;
     }
     else if (align === 'start' || align === 'center') {
-        return currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width;
+        return (currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width ||
+            currentPos.left < containerDimensions.left);
     }
 }

package/dist/cjs/dimensions.d.ts

@@ -0,0 +1,19 @@
+declare type Dimensions = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    height?: number;
+    width?: number;
+};
+declare type Offset = {
+    top: number;
+    left: number;
+};
+export declare function offset(element: HTMLElement): Offset;
+export declare function overflowParent(targetElement: HTMLElement): HTMLElement | null | undefined;
+export declare function overflowOffset(element: HTMLElement, targetContainer: Document | HTMLElement | null): Dimensions | undefined;
+export declare function positionedOffset(targetElement: HTMLElement, container: HTMLElement | Document | Window | null): (Dimensions & {
+    _container: HTMLElement;
+}) | undefined;
+export {};

package/dist/cjs/dimensions.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positionedOffset = exports.overflowOffset = exports.overflowParent = exports.offset = void 0;
+function offset(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        top: rect.top + window.pageYOffset,
+        left: rect.left + window.pageXOffset
+    };
+}
+exports.offset = offset;
+function overflowParent(targetElement) {
+    let element = targetElement;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    if (!element.offsetParent) {
+        return;
+    }
+    const HTMLElement = document.defaultView.HTMLElement;
+    if (element === document.body) {
+        return;
+    }
+    while (element !== document.body) {
+        if (element.parentElement instanceof HTMLElement) {
+            element = element.parentElement;
+        }
+        else {
+            return;
+        }
+        const { position, overflowY, overflowX } = getComputedStyle(element);
+        if (position === 'fixed' ||
+            overflowY === 'auto' ||
+            overflowX === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowX === 'scroll') {
+            break;
+        }
+    }
+    return element instanceof Document ? null : element;
+}
+exports.overflowParent = overflowParent;
+function overflowOffset(element, targetContainer) {
+    let container = targetContainer;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    const documentElement = document.documentElement;
+    if (!documentElement) {
+        return;
+    }
+    if (element === documentElement) {
+        return;
+    }
+    const elementOffset = positionedOffset(element, container);
+    if (!elementOffset) {
+        return;
+    }
+    container = elementOffset._container;
+    const scroll = container === document.documentElement && document.defaultView
+        ? {
+            top: document.defaultView.pageYOffset,
+            left: document.defaultView.pageXOffset
+        }
+        : {
+            top: container.scrollTop,
+            left: container.scrollLeft
+        };
+    const top = elementOffset.top - scroll.top;
+    const left = elementOffset.left - scroll.left;
+    const height = container.clientHeight;
+    const width = container.clientWidth;
+    const bottom = height - (top + element.offsetHeight);
+    const right = width - (left + element.offsetWidth);
+    return { top, left, bottom, right, height, width };
+}
+exports.overflowOffset = overflowOffset;
+function positionedOffset(targetElement, container) {
+    let element = targetElement;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    const documentElement = document.documentElement;
+    if (!documentElement) {
+        return;
+    }
+    const HTMLElement = document.defaultView.HTMLElement;
+    let top = 0;
+    let left = 0;
+    const height = element.offsetHeight;
+    const width = element.offsetWidth;
+    while (!(element === document.body || element === container)) {
+        top += element.offsetTop || 0;
+        left += element.offsetLeft || 0;
+        if (element.offsetParent instanceof HTMLElement) {
+            element = element.offsetParent;
+        }
+        else {
+            return;
+        }
+    }
+    let scrollHeight;
+    let scrollWidth;
+    let measuredContainer;
+    if (!container ||
+        container === document ||
+        container === document.defaultView ||
+        container === document.documentElement ||
+        container === document.body) {
+        measuredContainer = documentElement;
+        scrollHeight = getDocumentHeight(document.body, documentElement);
+        scrollWidth = getDocumentWidth(document.body, documentElement);
+    }
+    else if (container instanceof HTMLElement) {
+        measuredContainer = container;
+        scrollHeight = container.scrollHeight;
+        scrollWidth = container.scrollWidth;
+    }
+    else {
+        return;
+    }
+    const bottom = scrollHeight - (top + height);
+    const right = scrollWidth - (left + width);
+    return { top, left, bottom, right, _container: measuredContainer };
+}
+exports.positionedOffset = positionedOffset;
+function getDocumentHeight(documentBody, documentElement) {
+    return Math.max(documentBody.scrollHeight, documentElement.scrollHeight, documentBody.offsetHeight, documentElement.offsetHeight, documentElement.clientHeight);
+}
+function getDocumentWidth(documentBody, documentElement) {
+    return Math.max(documentBody.scrollWidth, documentElement.scrollWidth, documentBody.offsetWidth, documentElement.offsetWidth, documentElement.clientWidth);
+}

package/dist/cjs/index.d.ts

@@ -2,3 +2,4 @@ export * from './anchored-position.js';
 export * from './focus-trap.js';
 export * from './focus-zone.js';
 export * from './scroll-into-view.js';
+export * from './dimensions.js';

package/dist/cjs/index.js

@@ -14,3 +14,4 @@ __exportStar(require("./anchored-position.js"), exports);
 __exportStar(require("./focus-trap.js"), exports);
 __exportStar(require("./focus-zone.js"), exports);
 __exportStar(require("./scroll-into-view.js"), exports);
+__exportStar(require("./dimensions.js"), exports);

package/dist/esm/anchored-position.js

@@ -229,6 +229,7 @@ function shouldRecalculateAlignment(align, currentPos, containerDimensions, elem
         return currentPos.left < containerDimensions.left;
     }
     else if (align === 'start' || align === 'center') {
-        return currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width;
+        return (currentPos.left + elementDimensions.width > containerDimensions.left + containerDimensions.width ||
+            currentPos.left < containerDimensions.left);
     }
 }

package/dist/esm/dimensions.d.ts

@@ -0,0 +1,19 @@
+declare type Dimensions = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    height?: number;
+    width?: number;
+};
+declare type Offset = {
+    top: number;
+    left: number;
+};
+export declare function offset(element: HTMLElement): Offset;
+export declare function overflowParent(targetElement: HTMLElement): HTMLElement | null | undefined;
+export declare function overflowOffset(element: HTMLElement, targetContainer: Document | HTMLElement | null): Dimensions | undefined;
+export declare function positionedOffset(targetElement: HTMLElement, container: HTMLElement | Document | Window | null): (Dimensions & {
+    _container: HTMLElement;
+}) | undefined;
+export {};

package/dist/esm/dimensions.js

@@ -0,0 +1,128 @@
+export function offset(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        top: rect.top + window.pageYOffset,
+        left: rect.left + window.pageXOffset
+    };
+}
+export function overflowParent(targetElement) {
+    let element = targetElement;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    if (!element.offsetParent) {
+        return;
+    }
+    const HTMLElement = document.defaultView.HTMLElement;
+    if (element === document.body) {
+        return;
+    }
+    while (element !== document.body) {
+        if (element.parentElement instanceof HTMLElement) {
+            element = element.parentElement;
+        }
+        else {
+            return;
+        }
+        const { position, overflowY, overflowX } = getComputedStyle(element);
+        if (position === 'fixed' ||
+            overflowY === 'auto' ||
+            overflowX === 'auto' ||
+            overflowY === 'scroll' ||
+            overflowX === 'scroll') {
+            break;
+        }
+    }
+    return element instanceof Document ? null : element;
+}
+export function overflowOffset(element, targetContainer) {
+    let container = targetContainer;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    const documentElement = document.documentElement;
+    if (!documentElement) {
+        return;
+    }
+    if (element === documentElement) {
+        return;
+    }
+    const elementOffset = positionedOffset(element, container);
+    if (!elementOffset) {
+        return;
+    }
+    container = elementOffset._container;
+    const scroll = container === document.documentElement && document.defaultView
+        ? {
+            top: document.defaultView.pageYOffset,
+            left: document.defaultView.pageXOffset
+        }
+        : {
+            top: container.scrollTop,
+            left: container.scrollLeft
+        };
+    const top = elementOffset.top - scroll.top;
+    const left = elementOffset.left - scroll.left;
+    const height = container.clientHeight;
+    const width = container.clientWidth;
+    const bottom = height - (top + element.offsetHeight);
+    const right = width - (left + element.offsetWidth);
+    return { top, left, bottom, right, height, width };
+}
+export function positionedOffset(targetElement, container) {
+    let element = targetElement;
+    const document = element.ownerDocument;
+    if (!document) {
+        return;
+    }
+    const documentElement = document.documentElement;
+    if (!documentElement) {
+        return;
+    }
+    const HTMLElement = document.defaultView.HTMLElement;
+    let top = 0;
+    let left = 0;
+    const height = element.offsetHeight;
+    const width = element.offsetWidth;
+    while (!(element === document.body || element === container)) {
+        top += element.offsetTop || 0;
+        left += element.offsetLeft || 0;
+        if (element.offsetParent instanceof HTMLElement) {
+            element = element.offsetParent;
+        }
+        else {
+            return;
+        }
+    }
+    let scrollHeight;
+    let scrollWidth;
+    let measuredContainer;
+    if (!container ||
+        container === document ||
+        container === document.defaultView ||
+        container === document.documentElement ||
+        container === document.body) {
+        measuredContainer = documentElement;
+        scrollHeight = getDocumentHeight(document.body, documentElement);
+        scrollWidth = getDocumentWidth(document.body, documentElement);
+    }
+    else if (container instanceof HTMLElement) {
+        measuredContainer = container;
+        scrollHeight = container.scrollHeight;
+        scrollWidth = container.scrollWidth;
+    }
+    else {
+        return;
+    }
+    const bottom = scrollHeight - (top + height);
+    const right = scrollWidth - (left + width);
+    return { top, left, bottom, right, _container: measuredContainer };
+}
+function getDocumentHeight(documentBody, documentElement) {
+    return Math.max(documentBody.scrollHeight, documentElement.scrollHeight, documentBody.offsetHeight, documentElement.offsetHeight, documentElement.clientHeight);
+}
+function getDocumentWidth(documentBody, documentElement) {
+    return Math.max(documentBody.scrollWidth, documentElement.scrollWidth, documentBody.offsetWidth, documentElement.offsetWidth, documentElement.clientWidth);
+}

package/dist/esm/index.d.ts

@@ -2,3 +2,4 @@ export * from './anchored-position.js';
 export * from './focus-trap.js';
 export * from './focus-zone.js';
 export * from './scroll-into-view.js';
+export * from './dimensions.js';

package/dist/esm/index.js

@@ -2,3 +2,4 @@ export * from './anchored-position.js';
 export * from './focus-trap.js';
 export * from './focus-zone.js';
 export * from './scroll-into-view.js';
+export * from './dimensions.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "1.1.2",
+  "version": "1.2.0-rc.5aa5da2",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",