@radix-solid-js/announce 0.1.0

package/dist/index.cjs

@@ -0,0 +1,95 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var web = require('solid-js/web');
+var primitiveComponent = require('@radix-solid-js/primitive-component');
+var composeRefs = require('@radix-solid-js/compose-refs');
+
+// src/announce.tsx
+var ROLES = {
+  polite: "status",
+  assertive: "alert",
+  off: "none"
+};
+var listenerMap = /* @__PURE__ */ new Map();
+function Announce(inProps) {
+  const [local, rest] = solidJs.splitProps(inProps, [
+    "aria-atomic",
+    "aria-relevant",
+    "children",
+    "type",
+    "role",
+    "regionIdentifier",
+    "ref"
+  ]);
+  const type = () => local.type ?? "polite";
+  const role = () => local.role ?? ROLES[type()];
+  const ariaAtomic = () => ["true", true].includes(local["aria-atomic"]);
+  let ownerDocument = document;
+  const [region, setRegion] = solidJs.createSignal();
+  const getOrCreateRegion = () => {
+    const config = { type: type(), role: role(), atomic: ariaAtomic(), id: local.regionIdentifier };
+    const selector = buildSelector(config);
+    const existing = ownerDocument.querySelector(selector);
+    if (existing) return existing;
+    return buildLiveRegionElement(ownerDocument, config);
+  };
+  solidJs.onMount(() => {
+    setRegion(getOrCreateRegion());
+  });
+  solidJs.createEffect(() => {
+    const regionEl = getOrCreateRegion();
+    if (!regionEl) return;
+    function updateOnVisibilityChange() {
+      regionEl.setAttribute("role", ownerDocument.hidden ? "none" : role());
+      regionEl.setAttribute("aria-live", ownerDocument.hidden ? "off" : type());
+    }
+    if (!listenerMap.get(regionEl)) {
+      ownerDocument.addEventListener("visibilitychange", updateOnVisibilityChange);
+      listenerMap.set(regionEl, 1);
+    } else {
+      listenerMap.set(regionEl, (listenerMap.get(regionEl) ?? 0) + 1);
+    }
+    solidJs.onCleanup(() => {
+      const count = listenerMap.get(regionEl) ?? 0;
+      listenerMap.set(regionEl, count - 1);
+      if (count === 1) {
+        ownerDocument.removeEventListener("visibilitychange", updateOnVisibilityChange);
+      }
+    });
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    primitiveComponent.Primitive.div,
+    {
+      ...rest,
+      ref: composeRefs.mergeRefs(local.ref, (node) => {
+        if (node) ownerDocument = node.ownerDocument;
+      })
+    },
+    local.children
+  ), region() && /* @__PURE__ */ React.createElement(web.Portal, { mount: region() }, /* @__PURE__ */ React.createElement("div", null, local.children)));
+}
+function buildLiveRegionElement(ownerDocument, { type, role, atomic, id }) {
+  const el = ownerDocument.createElement("div");
+  el.setAttribute(getLiveRegionPartDataAttr(id), "");
+  el.setAttribute("style", "position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;");
+  ownerDocument.body.appendChild(el);
+  el.setAttribute("aria-live", type);
+  el.setAttribute("aria-atomic", String(atomic || false));
+  el.setAttribute("role", role);
+  return el;
+}
+function buildSelector({ type, role, atomic, id }) {
+  return `[${getLiveRegionPartDataAttr(id)}]${[
+    ["aria-live", type],
+    ["aria-atomic", atomic],
+    ["role", role]
+  ].filter(([, val]) => !!val).map(([attr, val]) => `[${attr}=${val}]`).join("")}`;
+}
+function getLiveRegionPartDataAttr(id) {
+  return "data-radix-announce-region" + (id ? `-${id}` : "");
+}
+
+exports.Announce = Announce;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/announce.tsx"],"names":["splitProps","createSignal","onMount","createEffect","onCleanup","Primitive","mergeRefs","Portal"],"mappings":"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","file":"index.cjs","sourcesContent":["import { type JSX, createSignal, createEffect, onMount, onCleanup, splitProps } from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { Primitive } from '@radix-solid-js/primitive-component';\nimport { mergeRefs } from '@radix-solid-js/compose-refs';\n\ntype RegionType = 'polite' | 'assertive' | 'off';\ntype RegionRole = 'status' | 'alert' | 'log' | 'none';\n\nconst ROLES: { [key in RegionType]: RegionRole } = {\n  polite: 'status',\n  assertive: 'alert',\n  off: 'none',\n};\n\nconst listenerMap = new Map<Element, number>();\n\ninterface AnnounceProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'aria-atomic' | 'aria-relevant' | 'children' | 'role' | 'type' | 'ref'> {\n  'aria-atomic'?: boolean;\n  'aria-relevant'?: string;\n  children: JSX.Element;\n  regionIdentifier?: string;\n  role?: RegionRole;\n  type?: RegionType;\n  ref?: (el: HTMLElement) => void;\n}\n\nfunction Announce(inProps: AnnounceProps) {\n  const [local, rest] = splitProps(inProps, [\n    'aria-atomic', 'aria-relevant', 'children', 'type', 'role', 'regionIdentifier', 'ref',\n  ]);\n\n  const type = () => local.type ?? 'polite';\n  const role = () => local.role ?? ROLES[type()];\n  const ariaAtomic = () => ['true', true].includes(local['aria-atomic'] as any);\n\n  let ownerDocument = document;\n  const [region, setRegion] = createSignal<HTMLElement>();\n\n  const getOrCreateRegion = () => {\n    const config = { type: type(), role: role(), atomic: ariaAtomic(), id: local.regionIdentifier };\n    const selector = buildSelector(config);\n    const existing = ownerDocument.querySelector(selector);\n    if (existing) return existing as HTMLElement;\n    return buildLiveRegionElement(ownerDocument, config);\n  };\n\n  onMount(() => {\n    setRegion(getOrCreateRegion());\n  });\n\n  createEffect(() => {\n    const regionEl = getOrCreateRegion();\n    if (!regionEl) return;\n\n    function updateOnVisibilityChange() {\n      regionEl.setAttribute('role', ownerDocument.hidden ? 'none' : role());\n      regionEl.setAttribute('aria-live', ownerDocument.hidden ? 'off' : type());\n    }\n\n    if (!listenerMap.get(regionEl)) {\n      ownerDocument.addEventListener('visibilitychange', updateOnVisibilityChange);\n      listenerMap.set(regionEl, 1);\n    } else {\n      listenerMap.set(regionEl, (listenerMap.get(regionEl) ?? 0) + 1);\n    }\n\n    onCleanup(() => {\n      const count = listenerMap.get(regionEl) ?? 0;\n      listenerMap.set(regionEl, count - 1);\n      if (count === 1) {\n        ownerDocument.removeEventListener('visibilitychange', updateOnVisibilityChange);\n      }\n    });\n  });\n\n  return (\n    <>\n      <Primitive.div\n        {...rest}\n        ref={mergeRefs(local.ref, (node: HTMLElement) => {\n          if (node) ownerDocument = node.ownerDocument;\n        })}\n      >\n        {local.children}\n      </Primitive.div>\n      {region() && (\n        <Portal mount={region()}>\n          <div>{local.children}</div>\n        </Portal>\n      )}\n    </>\n  );\n}\n\ntype LiveRegionOptions = {\n  type: string;\n  role: string;\n  atomic?: boolean;\n  id?: string;\n};\n\nfunction buildLiveRegionElement(ownerDocument: Document, { type, role, atomic, id }: LiveRegionOptions) {\n  const el = ownerDocument.createElement('div');\n  el.setAttribute(getLiveRegionPartDataAttr(id), '');\n  el.setAttribute('style', 'position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;');\n  ownerDocument.body.appendChild(el);\n  el.setAttribute('aria-live', type);\n  el.setAttribute('aria-atomic', String(atomic || false));\n  el.setAttribute('role', role);\n  return el;\n}\n\nfunction buildSelector({ type, role, atomic, id }: LiveRegionOptions) {\n  return `[${getLiveRegionPartDataAttr(id)}]${[\n    ['aria-live', type], ['aria-atomic', atomic], ['role', role],\n  ].filter(([, val]) => !!val).map(([attr, val]) => `[${attr}=${val}]`).join('')}`;\n}\n\nfunction getLiveRegionPartDataAttr(id?: string) {\n  return 'data-radix-announce-region' + (id ? `-${id}` : '');\n}\n\nexport { Announce };\nexport type { AnnounceProps };\n"]}

package/dist/index.d.cts

@@ -0,0 +1,16 @@
+import { JSX } from 'solid-js';
+
+type RegionType = 'polite' | 'assertive' | 'off';
+type RegionRole = 'status' | 'alert' | 'log' | 'none';
+interface AnnounceProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'aria-atomic' | 'aria-relevant' | 'children' | 'role' | 'type' | 'ref'> {
+    'aria-atomic'?: boolean;
+    'aria-relevant'?: string;
+    children: JSX.Element;
+    regionIdentifier?: string;
+    role?: RegionRole;
+    type?: RegionType;
+    ref?: (el: HTMLElement) => void;
+}
+declare function Announce(inProps: AnnounceProps): JSX.Element;
+
+export { Announce, type AnnounceProps };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'solid-js';
+
+type RegionType = 'polite' | 'assertive' | 'off';
+type RegionRole = 'status' | 'alert' | 'log' | 'none';
+interface AnnounceProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'aria-atomic' | 'aria-relevant' | 'children' | 'role' | 'type' | 'ref'> {
+    'aria-atomic'?: boolean;
+    'aria-relevant'?: string;
+    children: JSX.Element;
+    regionIdentifier?: string;
+    role?: RegionRole;
+    type?: RegionType;
+    ref?: (el: HTMLElement) => void;
+}
+declare function Announce(inProps: AnnounceProps): JSX.Element;
+
+export { Announce, type AnnounceProps };

package/dist/index.js

@@ -0,0 +1,93 @@
+import { splitProps, createSignal, onMount, createEffect, onCleanup } from 'solid-js';
+import { Portal } from 'solid-js/web';
+import { Primitive } from '@radix-solid-js/primitive-component';
+import { mergeRefs } from '@radix-solid-js/compose-refs';
+
+// src/announce.tsx
+var ROLES = {
+  polite: "status",
+  assertive: "alert",
+  off: "none"
+};
+var listenerMap = /* @__PURE__ */ new Map();
+function Announce(inProps) {
+  const [local, rest] = splitProps(inProps, [
+    "aria-atomic",
+    "aria-relevant",
+    "children",
+    "type",
+    "role",
+    "regionIdentifier",
+    "ref"
+  ]);
+  const type = () => local.type ?? "polite";
+  const role = () => local.role ?? ROLES[type()];
+  const ariaAtomic = () => ["true", true].includes(local["aria-atomic"]);
+  let ownerDocument = document;
+  const [region, setRegion] = createSignal();
+  const getOrCreateRegion = () => {
+    const config = { type: type(), role: role(), atomic: ariaAtomic(), id: local.regionIdentifier };
+    const selector = buildSelector(config);
+    const existing = ownerDocument.querySelector(selector);
+    if (existing) return existing;
+    return buildLiveRegionElement(ownerDocument, config);
+  };
+  onMount(() => {
+    setRegion(getOrCreateRegion());
+  });
+  createEffect(() => {
+    const regionEl = getOrCreateRegion();
+    if (!regionEl) return;
+    function updateOnVisibilityChange() {
+      regionEl.setAttribute("role", ownerDocument.hidden ? "none" : role());
+      regionEl.setAttribute("aria-live", ownerDocument.hidden ? "off" : type());
+    }
+    if (!listenerMap.get(regionEl)) {
+      ownerDocument.addEventListener("visibilitychange", updateOnVisibilityChange);
+      listenerMap.set(regionEl, 1);
+    } else {
+      listenerMap.set(regionEl, (listenerMap.get(regionEl) ?? 0) + 1);
+    }
+    onCleanup(() => {
+      const count = listenerMap.get(regionEl) ?? 0;
+      listenerMap.set(regionEl, count - 1);
+      if (count === 1) {
+        ownerDocument.removeEventListener("visibilitychange", updateOnVisibilityChange);
+      }
+    });
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Primitive.div,
+    {
+      ...rest,
+      ref: mergeRefs(local.ref, (node) => {
+        if (node) ownerDocument = node.ownerDocument;
+      })
+    },
+    local.children
+  ), region() && /* @__PURE__ */ React.createElement(Portal, { mount: region() }, /* @__PURE__ */ React.createElement("div", null, local.children)));
+}
+function buildLiveRegionElement(ownerDocument, { type, role, atomic, id }) {
+  const el = ownerDocument.createElement("div");
+  el.setAttribute(getLiveRegionPartDataAttr(id), "");
+  el.setAttribute("style", "position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;");
+  ownerDocument.body.appendChild(el);
+  el.setAttribute("aria-live", type);
+  el.setAttribute("aria-atomic", String(atomic || false));
+  el.setAttribute("role", role);
+  return el;
+}
+function buildSelector({ type, role, atomic, id }) {
+  return `[${getLiveRegionPartDataAttr(id)}]${[
+    ["aria-live", type],
+    ["aria-atomic", atomic],
+    ["role", role]
+  ].filter(([, val]) => !!val).map(([attr, val]) => `[${attr}=${val}]`).join("")}`;
+}
+function getLiveRegionPartDataAttr(id) {
+  return "data-radix-announce-region" + (id ? `-${id}` : "");
+}
+
+export { Announce };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/announce.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { type JSX, createSignal, createEffect, onMount, onCleanup, splitProps } from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { Primitive } from '@radix-solid-js/primitive-component';\nimport { mergeRefs } from '@radix-solid-js/compose-refs';\n\ntype RegionType = 'polite' | 'assertive' | 'off';\ntype RegionRole = 'status' | 'alert' | 'log' | 'none';\n\nconst ROLES: { [key in RegionType]: RegionRole } = {\n  polite: 'status',\n  assertive: 'alert',\n  off: 'none',\n};\n\nconst listenerMap = new Map<Element, number>();\n\ninterface AnnounceProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'aria-atomic' | 'aria-relevant' | 'children' | 'role' | 'type' | 'ref'> {\n  'aria-atomic'?: boolean;\n  'aria-relevant'?: string;\n  children: JSX.Element;\n  regionIdentifier?: string;\n  role?: RegionRole;\n  type?: RegionType;\n  ref?: (el: HTMLElement) => void;\n}\n\nfunction Announce(inProps: AnnounceProps) {\n  const [local, rest] = splitProps(inProps, [\n    'aria-atomic', 'aria-relevant', 'children', 'type', 'role', 'regionIdentifier', 'ref',\n  ]);\n\n  const type = () => local.type ?? 'polite';\n  const role = () => local.role ?? ROLES[type()];\n  const ariaAtomic = () => ['true', true].includes(local['aria-atomic'] as any);\n\n  let ownerDocument = document;\n  const [region, setRegion] = createSignal<HTMLElement>();\n\n  const getOrCreateRegion = () => {\n    const config = { type: type(), role: role(), atomic: ariaAtomic(), id: local.regionIdentifier };\n    const selector = buildSelector(config);\n    const existing = ownerDocument.querySelector(selector);\n    if (existing) return existing as HTMLElement;\n    return buildLiveRegionElement(ownerDocument, config);\n  };\n\n  onMount(() => {\n    setRegion(getOrCreateRegion());\n  });\n\n  createEffect(() => {\n    const regionEl = getOrCreateRegion();\n    if (!regionEl) return;\n\n    function updateOnVisibilityChange() {\n      regionEl.setAttribute('role', ownerDocument.hidden ? 'none' : role());\n      regionEl.setAttribute('aria-live', ownerDocument.hidden ? 'off' : type());\n    }\n\n    if (!listenerMap.get(regionEl)) {\n      ownerDocument.addEventListener('visibilitychange', updateOnVisibilityChange);\n      listenerMap.set(regionEl, 1);\n    } else {\n      listenerMap.set(regionEl, (listenerMap.get(regionEl) ?? 0) + 1);\n    }\n\n    onCleanup(() => {\n      const count = listenerMap.get(regionEl) ?? 0;\n      listenerMap.set(regionEl, count - 1);\n      if (count === 1) {\n        ownerDocument.removeEventListener('visibilitychange', updateOnVisibilityChange);\n      }\n    });\n  });\n\n  return (\n    <>\n      <Primitive.div\n        {...rest}\n        ref={mergeRefs(local.ref, (node: HTMLElement) => {\n          if (node) ownerDocument = node.ownerDocument;\n        })}\n      >\n        {local.children}\n      </Primitive.div>\n      {region() && (\n        <Portal mount={region()}>\n          <div>{local.children}</div>\n        </Portal>\n      )}\n    </>\n  );\n}\n\ntype LiveRegionOptions = {\n  type: string;\n  role: string;\n  atomic?: boolean;\n  id?: string;\n};\n\nfunction buildLiveRegionElement(ownerDocument: Document, { type, role, atomic, id }: LiveRegionOptions) {\n  const el = ownerDocument.createElement('div');\n  el.setAttribute(getLiveRegionPartDataAttr(id), '');\n  el.setAttribute('style', 'position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;');\n  ownerDocument.body.appendChild(el);\n  el.setAttribute('aria-live', type);\n  el.setAttribute('aria-atomic', String(atomic || false));\n  el.setAttribute('role', role);\n  return el;\n}\n\nfunction buildSelector({ type, role, atomic, id }: LiveRegionOptions) {\n  return `[${getLiveRegionPartDataAttr(id)}]${[\n    ['aria-live', type], ['aria-atomic', atomic], ['role', role],\n  ].filter(([, val]) => !!val).map(([attr, val]) => `[${attr}=${val}]`).join('')}`;\n}\n\nfunction getLiveRegionPartDataAttr(id?: string) {\n  return 'data-radix-announce-region' + (id ? `-${id}` : '');\n}\n\nexport { Announce };\nexport type { AnnounceProps };\n"]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@radix-solid-js/announce",
+  "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"
+  },
+  "dependencies": {
+    "@radix-solid-js/compose-refs": "workspace:*",
+    "@radix-solid-js/primitive-component": "workspace:*"
+  },
+  "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/announce"
+  }
+}