chore: focus trap pkg

.changeset/pretty-rabbits-suffer.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/focus-trap": patch
+---
+
+Initial release

examples/lit-ts/package.json

@@ -41,6 +41,7 @@
     "@zag-js/file-upload": "workspace:*",
     "@zag-js/file-utils": "workspace:*",
     "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/focus-trap": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/highlight-word": "workspace:*",

examples/next-ts/package.json

@@ -41,6 +41,7 @@
     "@zag-js/file-upload": "workspace:*",
     "@zag-js/file-utils": "workspace:*",
     "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/focus-trap": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/highlight-word": "workspace:*",

examples/nuxt-ts/package.json

@@ -38,6 +38,7 @@
     "@zag-js/file-upload": "workspace:*",
     "@zag-js/file-utils": "workspace:*",
     "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/focus-trap": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/highlight-word": "workspace:*",

examples/preact-ts/package.json

@@ -37,6 +37,7 @@
     "@zag-js/file-upload": "workspace:*",
     "@zag-js/file-utils": "workspace:*",
     "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/focus-trap": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/highlight-word": "workspace:*",

examples/react-19/package.json

@@ -38,6 +38,7 @@
     "@zag-js/file-upload": "workspace:*",
     "@zag-js/file-utils": "workspace:*",
     "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/focus-trap": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/highlight-word": "workspace:*",

examples/solid-ts/package.json

@@ -41,6 +41,7 @@
     "@zag-js/file-upload": "workspace:*",
     "@zag-js/file-utils": "workspace:*",
     "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/focus-trap": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/highlight-word": "workspace:*",
@@ -94,4 +95,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

examples/svelte-ts/package.json

@@ -39,6 +39,7 @@
     "@zag-js/file-upload": "workspace:*",
     "@zag-js/file-utils": "workspace:*",
     "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/focus-trap": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/highlight-word": "workspace:*",

examples/vanilla-ts/package.json

@@ -42,6 +42,7 @@
     "@zag-js/file-upload": "workspace:*",
     "@zag-js/file-utils": "workspace:*",
     "@zag-js/floating-panel": "workspace:*",
+    "@zag-js/focus-trap": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/highlight-word": "workspace:*",

packages/utilities/focus-trap/README.md

@@ -0,0 +1,22 @@
+# @zag-js/focus-trap
+
+Focus trap utility
+
+## Installation
+
+```sh
+yarn add @zag-js/focus-trap
+# or
+npm i @zag-js/focus-trap
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

packages/utilities/focus-trap/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@zag-js/focus-trap",
+  "version": "0.0.0",
+  "description": "Focus trap utility",
+  "keywords": [
+    "js",
+    "utils",
+    "focus-trap"
+  ],
+  "author": "Segun Adebayo <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/focus-trap",
+  "sideEffects": false,
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "dependencies": {
+    "@zag-js/dom-query": "workspace:*",
+    "focus-trap": "7.5.4"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0"
+  }
+}

packages/utilities/focus-trap/src/index.ts

@@ -0,0 +1,31 @@
+import { nextTick, getDocument } from "@zag-js/dom-query"
+import { createFocusTrap, type FocusTrap, type Options } from "focus-trap"
+
+type ElementOrGetter = HTMLElement | null | (() => HTMLElement | null)
+
+export interface TrapFocusOptions extends Omit<Options, "document"> {}
+
+export function trapFocus(el: ElementOrGetter, options: TrapFocusOptions = {}) {
+  let trap: FocusTrap | undefined
+  nextTick(() => {
+    const contentEl = typeof el === "function" ? el() : el
+    if (!contentEl) return
+    trap = createFocusTrap(contentEl, {
+      escapeDeactivates: false,
+      allowOutsideClick: true,
+      preventScroll: true,
+      returnFocusOnDeactivate: true,
+      document: getDocument(contentEl),
+      fallbackFocus: contentEl,
+      ...options,
+    })
+
+    try {
+      trap.activate()
+    } catch {}
+  })
+
+  return function destroy() {
+    trap?.deactivate()
+  }
+}

packages/utilities/focus-trap/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo"
+  }
+}