@primer/behaviors 1.0.2-rc.b89e9b4 → 1.1.0-rc.e605114

package/dist/{focus-trap.js → esm/focus-trap.js}

@@ -1,4 +1,4 @@
-import { isTabbable, iterateFocusableElements } from './utils/iterate-focusable-elements.js';
+import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
 import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
 eventListenerSignalPolyfill();
 const suspendedTrapStack = [];
@@ -16,13 +16,28 @@ function followSignal(signal) {
     });
     return controller;
 }
-function getFocusableChild(container, lastChild = false) {
-    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
-}
 export function focusTrap(container, initialFocus, abortSignal) {
     const controller = new AbortController();
     const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
     container.setAttribute('data-focus-trap', 'active');
+    const sentinelStart = document.createElement('span');
+    sentinelStart.setAttribute('class', 'sentinel');
+    sentinelStart.setAttribute('tabindex', '0');
+    sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.onfocus = () => {
+        const lastFocusableChild = getFocusableChild(container, true);
+        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+    };
+    const sentinelEnd = document.createElement('span');
+    sentinelEnd.setAttribute('class', 'sentinel');
+    sentinelEnd.setAttribute('tabindex', '0');
+    sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.onfocus = () => {
+        const firstFocusableChild = getFocusableChild(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    };
+    container.prepend(sentinelStart);
+    container.append(sentinelEnd);
     let lastFocusedChild = undefined;
     function ensureTrapZoneHasFocus(focusedElement) {
         if (focusedElement instanceof HTMLElement && document.contains(container)) {
@@ -40,36 +55,14 @@ export function focusTrap(container, initialFocus, abortSignal) {
                     return;
                 }
                 else {
-                    const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.setAttribute('tabindex', '-1');
-                    }
-                    container.focus();
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
-                    }
+                    const firstFocusableChild = getFocusableChild(container);
+                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
                     return;
                 }
             }
         }
     }
     const wrappingController = followSignal(signal);
-    container.addEventListener('keydown', event => {
-        if (event.key !== 'Tab' || event.defaultPrevented) {
-            return;
-        }
-        const { target } = event;
-        const firstFocusableChild = getFocusableChild(container);
-        const lastFocusableChild = getFocusableChild(container, true);
-        if (target === firstFocusableChild && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-        }
-        else if (target === lastFocusableChild && !event.shiftKey) {
-            event.preventDefault();
-            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-        }
-    }, { signal: wrappingController.signal });
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -81,6 +74,9 @@ export function focusTrap(container, initialFocus, abortSignal) {
     });
     signal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
+        const sentinels = container.getElementsByClassName('sentinel');
+        while (sentinels.length > 0)
+            sentinels[0].remove();
         const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
         if (suspendedTrapIndex >= 0) {
             suspendedTrapStack.splice(suspendedTrapIndex, 1);

package/dist/esm/focus-zone.d.ts

@@ -0,0 +1,32 @@
+export declare type Direction = 'previous' | 'next' | 'start' | 'end';
+export declare type FocusMovementKeys = 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'ArrowRight' | 'h' | 'j' | 'k' | 'l' | 'a' | 's' | 'w' | 'd' | 'Tab' | 'Home' | 'End' | 'PageUp' | 'PageDown';
+export declare enum FocusKeys {
+    ArrowHorizontal = 1,
+    ArrowVertical = 2,
+    JK = 4,
+    HL = 8,
+    HomeAndEnd = 16,
+    PageUpDown = 256,
+    WS = 32,
+    AD = 64,
+    Tab = 128,
+    ArrowAll = 3,
+    HJKL = 12,
+    WASD = 96,
+    All = 511
+}
+export interface FocusZoneSettings {
+    focusOutBehavior?: 'stop' | 'wrap';
+    getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
+    focusableElementFilter?: (element: HTMLElement) => boolean;
+    bindKeys?: FocusKeys;
+    abortSignal?: AbortSignal;
+    activeDescendantControl?: HTMLElement;
+    onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
+    focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
+}
+export declare const isActiveDescendantAttribute = "data-is-active-descendant";
+export declare const activeDescendantActivatedDirectly = "activated-directly";
+export declare const activeDescendantActivatedIndirectly = "activated-indirectly";
+export declare const hasActiveDescendantAttribute = "data-has-active-descendant";
+export declare function focusZone(container: HTMLElement, settings?: FocusZoneSettings): AbortController;

package/dist/esm/index.js

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

package/dist/esm/polyfills/event-listener-signal.d.ts

@@ -0,0 +1,6 @@
+export declare function polyfill(): void;
+declare global {
+    interface AddEventListenerOptions {
+        signal?: AbortSignal;
+    }
+}

package/dist/esm/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/esm/utils/index.js

@@ -0,0 +1,3 @@
+export * from './iterate-focusable-elements.js';
+export * from './unique-id.js';
+export * from './user-agent.js';

package/dist/esm/utils/iterate-focusable-elements.d.ts

@@ -0,0 +1,9 @@
+export interface IterateFocusableElements {
+    reverse?: boolean;
+    strict?: boolean;
+    onlyTabbable?: boolean;
+}
+export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
+export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
+export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

package/dist/{utils → esm/utils}/iterate-focusable-elements.js

@@ -28,12 +28,16 @@ export function* iterateFocusableElements(container, options = {}) {
     }
     return undefined;
 }
+export function getFocusableChild(container, lastChild = false) {
+    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
+}
 export function isFocusable(elem, strict = false) {
     const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
         elem.disabled;
     const hiddenInert = elem.hidden;
     const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
-    if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    const sentinelInert = elem.classList.contains('sentinel');
+    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
         return false;
     }
     if (strict) {

package/dist/esm/utils/unique-id.d.ts

@@ -0,0 +1 @@
+export declare function uniqueId(): string;

package/dist/esm/utils/user-agent.d.ts

@@ -0,0 +1 @@
+export declare function isMacOS(): boolean;

package/package.json

@@ -1,17 +1,31 @@
 {
   "name": "@primer/behaviors",
-  "version": "1.0.2-rc.b89e9b4",
+  "version": "1.1.0-rc.e605114",
   "description": "Shared behaviors for JavaScript components",
-  "main": "./dist/index.js",
-  "type": "module",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "module": "./dist/esm/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "require": "./dist/cjs/utils/index.js",
+      "module": "./dist/esm/utils/index.js"
+    }
+  },
+  "types": "dist/cjs/index.d.ts",
   "files": [
     "dist",
     "utils"
   ],
   "sideEffects": [
-    "dist/focus-zone.js",
-    "dist/focus-trap.js"
+    "dist/esm/focus-zone.js",
+    "dist/esm/focus-trap.js",
+    "dist/cjs/focus-zone.js",
+    "dist/cjs/focus-trap.js"
   ],
   "scripts": {
     "lint": "eslint src/",
@@ -20,7 +34,9 @@
     "jest": "jest",
     "clean": "rm -rf dist",
     "prebuild": "npm run clean",
-    "build": "tsc",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
     "size-limit": "npm run build && size-limit",
     "release": "npm run build && changeset publish"
   },
@@ -44,7 +60,7 @@
   "size-limit": [
     {
       "limit": "10kb",
-      "path": "dist/index.js"
+      "path": "dist/esm/index.js"
     }
   ],
   "devDependencies": {

package/utils/package.json

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

package/dist/focus-trap.d.ts

@@ -1,2 +0,0 @@
-export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement): AbortController;
-export declare function focusTrap(container: HTMLElement, initialFocus: HTMLElement | undefined, abortSignal: AbortSignal): void;