@radix-solid-js/focus-guards 0.1.0

package/dist/index.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var solidJs = require('solid-js');
+
+// src/focus-guards.tsx
+var count = 0;
+function FocusGuards(props) {
+  useFocusGuards();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+}
+function useFocusGuards() {
+  solidJs.onMount(() => {
+    const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
+    document.body.insertAdjacentElement(
+      "afterbegin",
+      edgeGuards[0] ?? createFocusGuard()
+    );
+    document.body.insertAdjacentElement(
+      "beforeend",
+      edgeGuards[1] ?? createFocusGuard()
+    );
+    count++;
+  });
+  solidJs.onCleanup(() => {
+    if (count === 1) {
+      document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
+    }
+    count--;
+  });
+}
+function createFocusGuard() {
+  const element = document.createElement("span");
+  element.setAttribute("data-radix-focus-guard", "");
+  element.tabIndex = 0;
+  element.style.outline = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+
+exports.FocusGuards = FocusGuards;
+exports.Root = FocusGuards;
+exports.useFocusGuards = useFocusGuards;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/focus-guards.tsx"],"names":["onMount","onCleanup"],"mappings":";;;;;AAGA,IAAI,KAAA,GAAQ,CAAA;AAMZ,SAAS,YAAY,KAAA,EAAyB;AAC5C,EAAA,cAAA,EAAe;AACf,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAG,MAAM,QAAS,CAAA;AAC3B;AAMA,SAAS,cAAA,GAAiB;AACxB,EAAAA,eAAA,CAAQ,MAAM;AACZ,IAAA,MAAM,UAAA,GAAa,QAAA,CAAS,gBAAA,CAAiB,0BAA0B,CAAA;AACvE,IAAA,QAAA,CAAS,IAAA,CAAK,qBAAA;AAAA,MACZ,YAAA;AAAA,MACA,UAAA,CAAW,CAAC,CAAA,IAAK,gBAAA;AAAiB,KACpC;AACA,IAAA,QAAA,CAAS,IAAA,CAAK,qBAAA;AAAA,MACZ,WAAA;AAAA,MACA,UAAA,CAAW,CAAC,CAAA,IAAK,gBAAA;AAAiB,KACpC;AACA,IAAA,KAAA,EAAA;AAAA,EACF,CAAC,CAAA;AAED,EAAAC,iBAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAU,CAAA,EAAG;AACf,MAAA,QAAA,CACG,gBAAA,CAAiB,0BAA0B,CAAA,CAC3C,OAAA,CAAQ,CAAC,IAAA,KAAS,IAAA,CAAK,QAAQ,CAAA;AAAA,IACpC;AACA,IAAA,KAAA,EAAA;AAAA,EACF,CAAC,CAAA;AACH;AAEA,SAAS,gBAAA,GAAmB;AAC1B,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC7C,EAAA,OAAA,CAAQ,YAAA,CAAa,0BAA0B,EAAE,CAAA;AACjD,EAAA,OAAA,CAAQ,QAAA,GAAW,CAAA;AACnB,EAAA,OAAA,CAAQ,MAAM,OAAA,GAAU,MAAA;AACxB,EAAA,OAAA,CAAQ,MAAM,OAAA,GAAU,GAAA;AACxB,EAAA,OAAA,CAAQ,MAAM,QAAA,GAAW,OAAA;AACzB,EAAA,OAAA,CAAQ,MAAM,aAAA,GAAgB,MAAA;AAC9B,EAAA,OAAO,OAAA;AACT","file":"index.cjs","sourcesContent":["import { onMount, onCleanup, type JSX } from 'solid-js';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\ninterface FocusGuardsProps {\n  children?: JSX.Element;\n}\n\nfunction FocusGuards(props: FocusGuardsProps) {\n  useFocusGuards();\n  return <>{props.children}</>;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n  onMount(() => {\n    const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');\n    document.body.insertAdjacentElement(\n      'afterbegin',\n      edgeGuards[0] ?? createFocusGuard()\n    );\n    document.body.insertAdjacentElement(\n      'beforeend',\n      edgeGuards[1] ?? createFocusGuard()\n    );\n    count++;\n  });\n\n  onCleanup(() => {\n    if (count === 1) {\n      document\n        .querySelectorAll('[data-radix-focus-guard]')\n        .forEach((node) => node.remove());\n    }\n    count--;\n  });\n}\n\nfunction createFocusGuard() {\n  const element = document.createElement('span');\n  element.setAttribute('data-radix-focus-guard', '');\n  element.tabIndex = 0;\n  element.style.outline = 'none';\n  element.style.opacity = '0';\n  element.style.position = 'fixed';\n  element.style.pointerEvents = 'none';\n  return element;\n}\n\nexport { FocusGuards, useFocusGuards };\n"]}

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import { JSX } from 'solid-js';
+
+interface FocusGuardsProps {
+    children?: JSX.Element;
+}
+declare function FocusGuards(props: FocusGuardsProps): JSX.Element;
+/**
+ * Injects a pair of focus guards at the edges of the whole DOM tree
+ * to ensure `focusin` & `focusout` events can be caught consistently.
+ */
+declare function useFocusGuards(): void;
+
+export { FocusGuards, FocusGuards as Root, useFocusGuards };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'solid-js';
+
+interface FocusGuardsProps {
+    children?: JSX.Element;
+}
+declare function FocusGuards(props: FocusGuardsProps): JSX.Element;
+/**
+ * Injects a pair of focus guards at the edges of the whole DOM tree
+ * to ensure `focusin` & `focusout` events can be caught consistently.
+ */
+declare function useFocusGuards(): void;
+
+export { FocusGuards, FocusGuards as Root, useFocusGuards };

package/dist/index.js

@@ -0,0 +1,42 @@
+import { onMount, onCleanup } from 'solid-js';
+
+// src/focus-guards.tsx
+var count = 0;
+function FocusGuards(props) {
+  useFocusGuards();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+}
+function useFocusGuards() {
+  onMount(() => {
+    const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
+    document.body.insertAdjacentElement(
+      "afterbegin",
+      edgeGuards[0] ?? createFocusGuard()
+    );
+    document.body.insertAdjacentElement(
+      "beforeend",
+      edgeGuards[1] ?? createFocusGuard()
+    );
+    count++;
+  });
+  onCleanup(() => {
+    if (count === 1) {
+      document.querySelectorAll("[data-radix-focus-guard]").forEach((node) => node.remove());
+    }
+    count--;
+  });
+}
+function createFocusGuard() {
+  const element = document.createElement("span");
+  element.setAttribute("data-radix-focus-guard", "");
+  element.tabIndex = 0;
+  element.style.outline = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+
+export { FocusGuards, FocusGuards as Root, useFocusGuards };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/focus-guards.tsx"],"names":[],"mappings":";;;AAGA,IAAI,KAAA,GAAQ,CAAA;AAMZ,SAAS,YAAY,KAAA,EAAyB;AAC5C,EAAA,cAAA,EAAe;AACf,EAAA,uBAAO,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAG,MAAM,QAAS,CAAA;AAC3B;AAMA,SAAS,cAAA,GAAiB;AACxB,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,MAAM,UAAA,GAAa,QAAA,CAAS,gBAAA,CAAiB,0BAA0B,CAAA;AACvE,IAAA,QAAA,CAAS,IAAA,CAAK,qBAAA;AAAA,MACZ,YAAA;AAAA,MACA,UAAA,CAAW,CAAC,CAAA,IAAK,gBAAA;AAAiB,KACpC;AACA,IAAA,QAAA,CAAS,IAAA,CAAK,qBAAA;AAAA,MACZ,WAAA;AAAA,MACA,UAAA,CAAW,CAAC,CAAA,IAAK,gBAAA;AAAiB,KACpC;AACA,IAAA,KAAA,EAAA;AAAA,EACF,CAAC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAU,CAAA,EAAG;AACf,MAAA,QAAA,CACG,gBAAA,CAAiB,0BAA0B,CAAA,CAC3C,OAAA,CAAQ,CAAC,IAAA,KAAS,IAAA,CAAK,QAAQ,CAAA;AAAA,IACpC;AACA,IAAA,KAAA,EAAA;AAAA,EACF,CAAC,CAAA;AACH;AAEA,SAAS,gBAAA,GAAmB;AAC1B,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC7C,EAAA,OAAA,CAAQ,YAAA,CAAa,0BAA0B,EAAE,CAAA;AACjD,EAAA,OAAA,CAAQ,QAAA,GAAW,CAAA;AACnB,EAAA,OAAA,CAAQ,MAAM,OAAA,GAAU,MAAA;AACxB,EAAA,OAAA,CAAQ,MAAM,OAAA,GAAU,GAAA;AACxB,EAAA,OAAA,CAAQ,MAAM,QAAA,GAAW,OAAA;AACzB,EAAA,OAAA,CAAQ,MAAM,aAAA,GAAgB,MAAA;AAC9B,EAAA,OAAO,OAAA;AACT","file":"index.js","sourcesContent":["import { onMount, onCleanup, type JSX } from 'solid-js';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\ninterface FocusGuardsProps {\n  children?: JSX.Element;\n}\n\nfunction FocusGuards(props: FocusGuardsProps) {\n  useFocusGuards();\n  return <>{props.children}</>;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n  onMount(() => {\n    const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');\n    document.body.insertAdjacentElement(\n      'afterbegin',\n      edgeGuards[0] ?? createFocusGuard()\n    );\n    document.body.insertAdjacentElement(\n      'beforeend',\n      edgeGuards[1] ?? createFocusGuard()\n    );\n    count++;\n  });\n\n  onCleanup(() => {\n    if (count === 1) {\n      document\n        .querySelectorAll('[data-radix-focus-guard]')\n        .forEach((node) => node.remove());\n    }\n    count--;\n  });\n}\n\nfunction createFocusGuard() {\n  const element = document.createElement('span');\n  element.setAttribute('data-radix-focus-guard', '');\n  element.tabIndex = 0;\n  element.style.outline = 'none';\n  element.style.opacity = '0';\n  element.style.position = 'fixed';\n  element.style.pointerEvents = 'none';\n  return element;\n}\n\nexport { FocusGuards, useFocusGuards };\n"]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@radix-solid-js/focus-guards",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.0"
+  },
+  "devDependencies": {
+    "@repo/tsconfig": "workspace:*",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "solid-js": "^1.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ljho01/shadcn-solid-js.git",
+    "directory": "packages/solid/focus-guards"
+  }
+}