@ablogcms/tooltip 3.2.28-beta.0

package/README.md

@@ -0,0 +1,15 @@
+# @ablogcms/tooltip
+
+`.js-acms-tooltip` / `.js-acms-tooltip-hover` を持つ要素を監視し、ツールチップ表示と
+アクセシビリティ属性（`aria-describedby` 等）の付与を行う `TooltipManager` を提供するパッケージ。
+
+## 使い方
+
+```tsx
+import { TooltipManager } from '@ablogcms/tooltip';
+
+render(<TooltipManager />, element);
+```
+
+ページに 1 度だけマウントすると、初期 DOM とその後 `MutationObserver` で検知した追加要素の
+両方に対して属性変換・アクセシビリティ属性付与・ツールチップ表示を行う。

package/dist/a11y.d.ts

@@ -0,0 +1 @@
+export declare const setA11yAttributesToTooltipTrigger: (element: HTMLElement, tooltipId: string) => void;

package/dist/chunk-BSOPUT4P.mjs

@@ -0,0 +1,86 @@
+// src/tooltip-manager.tsx
+import { Tooltip } from "@ablogcms/components/tooltip";
+import useMutationObserver from "@ablogcms/react-hooks/use-mutation-observer";
+import useEffectOnce from "@ablogcms/react-hooks/use-effect-once";
+
+// src/compatibility.ts
+function convertPosition(position) {
+  switch (position) {
+    case "right":
+      return "right";
+    case "left":
+      return "left";
+    case "bottom":
+      return "bottom";
+    case "top":
+      return "top";
+    case "top-left":
+      return "top-start";
+    case "top-right":
+      return "top-end";
+    case "bottom-left":
+      return "bottom-start";
+    case "bottom-right":
+      return "bottom-end";
+    default:
+      return "top";
+  }
+}
+var fixTooltipAttribute = (element, tooltipId2) => {
+  if (!element.hasAttribute("data-tooltip-id")) {
+    element.setAttribute("data-tooltip-id", tooltipId2);
+    const html = element.getAttribute("data-acms-tooltip") || "\u3053\u3053\u306B\u30D8\u30EB\u30D7\u304C\u5165\u308A\u307E\u3059\u3002";
+    element.setAttribute("data-tooltip-html", html);
+    element.removeAttribute("data-acms-tooltip");
+    const pos = convertPosition(element.getAttribute("data-acms-position"));
+    if (pos) {
+      element.setAttribute("data-tooltip-place", pos);
+      element.removeAttribute("data-acms-position");
+    }
+  }
+};
+
+// src/a11y.ts
+var setA11yAttributesToTooltipTrigger = (element, tooltipId2) => {
+  element.setAttribute("role", "button");
+  element.setAttribute("tabindex", "0");
+  element.setAttribute("aria-label", ACMS.i18n("tooltip.trigger.label"));
+  element.setAttribute("aria-describedby", tooltipId2);
+};
+
+// src/tooltip-manager.tsx
+import { jsx } from "react/jsx-runtime";
+var selector = ".js-acms-tooltip, .js-acms-tooltip-hover";
+var tooltipId = "acms-tooltip";
+function TooltipManager() {
+  useEffectOnce(() => {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach((element) => fixTooltipAttribute(element, tooltipId));
+    elements.forEach((element) => setA11yAttributesToTooltipTrigger(element, tooltipId));
+  });
+  useMutationObserver(
+    (mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (!(node instanceof HTMLElement)) continue;
+          if (node.matches(selector)) {
+            fixTooltipAttribute(node, tooltipId);
+            setA11yAttributesToTooltipTrigger(node, tooltipId);
+          }
+          const elements = node.querySelectorAll(selector);
+          elements.forEach((element) => fixTooltipAttribute(element, tooltipId));
+          elements.forEach((element) => setA11yAttributesToTooltipTrigger(element, tooltipId));
+        }
+      }
+    },
+    { childList: true, subtree: true },
+    document.body
+  );
+  return /* @__PURE__ */ jsx(Tooltip, { id: tooltipId });
+}
+var tooltip_manager_default = TooltipManager;
+
+export {
+  tooltip_manager_default
+};
+//# sourceMappingURL=chunk-BSOPUT4P.mjs.map

package/dist/chunk-BSOPUT4P.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip-manager.tsx","../src/compatibility.ts","../src/a11y.ts"],"sourcesContent":["import { Tooltip } from '@ablogcms/components/tooltip';\nimport useMutationObserver from '@ablogcms/react-hooks/use-mutation-observer';\nimport useEffectOnce from '@ablogcms/react-hooks/use-effect-once';\nimport { fixTooltipAttribute } from './compatibility';\nimport { setA11yAttributesToTooltipTrigger } from './a11y';\n\nconst selector = '.js-acms-tooltip, .js-acms-tooltip-hover';\nconst tooltipId = 'acms-tooltip';\n\nfunction TooltipManager() {\n  useEffectOnce(() => {\n    // 初期要素に変換適用\n    const elements = document.querySelectorAll<HTMLElement>(selector);\n    elements.forEach((element) => fixTooltipAttribute(element, tooltipId));\n    elements.forEach((element) => setA11yAttributesToTooltipTrigger(element, tooltipId));\n  });\n\n  useMutationObserver(\n    (mutations) => {\n      for (const mutation of mutations) {\n        for (const node of mutation.addedNodes) {\n          if (!(node instanceof HTMLElement)) continue;\n          if (node.matches(selector)) {\n            fixTooltipAttribute(node, tooltipId);\n            setA11yAttributesToTooltipTrigger(node, tooltipId);\n          }\n          const elements = node.querySelectorAll<HTMLElement>(selector);\n          elements.forEach((element) => fixTooltipAttribute(element, tooltipId));\n          elements.forEach((element) => setA11yAttributesToTooltipTrigger(element, tooltipId));\n        }\n      }\n    },\n    { childList: true, subtree: true },\n    document.body\n  );\n\n  return <Tooltip id={tooltipId} />;\n}\n\nexport default TooltipManager;\n","function convertPosition(position?: string | null): string | undefined {\n  switch (position) {\n    case 'right':\n      return 'right';\n    case 'left':\n      return 'left';\n    case 'bottom':\n      return 'bottom';\n    case 'top':\n      return 'top';\n    case 'top-left':\n      return 'top-start';\n    case 'top-right':\n      return 'top-end';\n    case 'bottom-left':\n      return 'bottom-start';\n    case 'bottom-right':\n      return 'bottom-end';\n    default:\n      return 'top';\n  }\n}\n\n/**\n * ツールチップ要素をReactTooltipの形式に変換\n * 旧ツールチップとの互換性を保つために使用\n * @param element - 変換対象のHTMLElement\n */\nexport const fixTooltipAttribute = (element: HTMLElement, tooltipId: string) => {\n  if (!element.hasAttribute('data-tooltip-id')) {\n    element.setAttribute('data-tooltip-id', tooltipId);\n\n    const html = element.getAttribute('data-acms-tooltip') || 'ここにヘルプが入ります。';\n    element.setAttribute('data-tooltip-html', html);\n    element.removeAttribute('data-acms-tooltip');\n\n    const pos = convertPosition(element.getAttribute('data-acms-position'));\n    if (pos) {\n      element.setAttribute('data-tooltip-place', pos);\n      element.removeAttribute('data-acms-position');\n    }\n  }\n};\n","export const setA11yAttributesToTooltipTrigger = (element: HTMLElement, tooltipId: string) => {\n  element.setAttribute('role', 'button');\n  element.setAttribute('tabindex', '0');\n  element.setAttribute('aria-label', ACMS.i18n('tooltip.trigger.label'));\n  element.setAttribute('aria-describedby', tooltipId);\n};\n"],"mappings":";AAAA,SAAS,eAAe;AACxB,OAAO,yBAAyB;AAChC,OAAO,mBAAmB;;;ACF1B,SAAS,gBAAgB,UAA8C;AACrE,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAOO,IAAM,sBAAsB,CAAC,SAAsBA,eAAsB;AAC9E,MAAI,CAAC,QAAQ,aAAa,iBAAiB,GAAG;AAC5C,YAAQ,aAAa,mBAAmBA,UAAS;AAEjD,UAAM,OAAO,QAAQ,aAAa,mBAAmB,KAAK;AAC1D,YAAQ,aAAa,qBAAqB,IAAI;AAC9C,YAAQ,gBAAgB,mBAAmB;AAE3C,UAAM,MAAM,gBAAgB,QAAQ,aAAa,oBAAoB,CAAC;AACtE,QAAI,KAAK;AACP,cAAQ,aAAa,sBAAsB,GAAG;AAC9C,cAAQ,gBAAgB,oBAAoB;AAAA,IAC9C;AAAA,EACF;AACF;;;AC1CO,IAAM,oCAAoC,CAAC,SAAsBC,eAAsB;AAC5F,UAAQ,aAAa,QAAQ,QAAQ;AACrC,UAAQ,aAAa,YAAY,GAAG;AACpC,UAAQ,aAAa,cAAc,KAAK,KAAK,uBAAuB,CAAC;AACrE,UAAQ,aAAa,oBAAoBA,UAAS;AACpD;;;AF+BS;AA9BT,IAAM,WAAW;AACjB,IAAM,YAAY;AAElB,SAAS,iBAAiB;AACxB,gBAAc,MAAM;AAElB,UAAM,WAAW,SAAS,iBAA8B,QAAQ;AAChE,aAAS,QAAQ,CAAC,YAAY,oBAAoB,SAAS,SAAS,CAAC;AACrE,aAAS,QAAQ,CAAC,YAAY,kCAAkC,SAAS,SAAS,CAAC;AAAA,EACrF,CAAC;AAED;AAAA,IACE,CAAC,cAAc;AACb,iBAAW,YAAY,WAAW;AAChC,mBAAW,QAAQ,SAAS,YAAY;AACtC,cAAI,EAAE,gBAAgB,aAAc;AACpC,cAAI,KAAK,QAAQ,QAAQ,GAAG;AAC1B,gCAAoB,MAAM,SAAS;AACnC,8CAAkC,MAAM,SAAS;AAAA,UACnD;AACA,gBAAM,WAAW,KAAK,iBAA8B,QAAQ;AAC5D,mBAAS,QAAQ,CAAC,YAAY,oBAAoB,SAAS,SAAS,CAAC;AACrE,mBAAS,QAAQ,CAAC,YAAY,kCAAkC,SAAS,SAAS,CAAC;AAAA,QACrF;AAAA,MACF;AAAA,IACF;AAAA,IACA,EAAE,WAAW,MAAM,SAAS,KAAK;AAAA,IACjC,SAAS;AAAA,EACX;AAEA,SAAO,oBAAC,WAAQ,IAAI,WAAW;AACjC;AAEA,IAAO,0BAAQ;","names":["tooltipId","tooltipId"]}

package/dist/compatibility.d.ts

@@ -0,0 +1,6 @@
+/**
+ * ツールチップ要素をReactTooltipの形式に変換
+ * 旧ツールチップとの互換性を保つために使用
+ * @param element - 変換対象のHTMLElement
+ */
+export declare const fixTooltipAttribute: (element: HTMLElement, tooltipId: string) => void;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as TooltipManager } from './tooltip-manager.js';

package/dist/index.mjs

@@ -0,0 +1,7 @@
+import {
+  tooltip_manager_default
+} from "./chunk-BSOPUT4P.mjs";
+export {
+  tooltip_manager_default as TooltipManager
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tooltip-manager.d.ts

@@ -0,0 +1,2 @@
+declare function TooltipManager(): import("react").JSX.Element;
+export default TooltipManager;

package/dist/tooltip-manager.mjs

@@ -0,0 +1,7 @@
+import {
+  tooltip_manager_default
+} from "./chunk-BSOPUT4P.mjs";
+export {
+  tooltip_manager_default as default
+};
+//# sourceMappingURL=tooltip-manager.mjs.map

package/dist/tooltip-manager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@ablogcms/tooltip",
+  "version": "3.2.28-beta.0",
+  "type": "module",
+  "description": "ツールチップ属性監視と表示制御",
+  "license": "MIT",
+  "homepage": "https://www.a-blogcms.jp",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org:appleple/ablogcms.git",
+    "directory": "packages/frontend/tooltip"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@ablogcms/components": "3.2.28-beta.0",
+    "@ablogcms/react-hooks": "3.2.28-beta.0"
+  },
+  "devDependencies": {
+    "vitest": "^4.1.9"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "@types/react": "^19.2.17"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./tooltip-manager": {
+      "types": "./dist/tooltip-manager.d.ts",
+      "import": "./dist/tooltip-manager.mjs",
+      "default": "./dist/tooltip-manager.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node ../../../tools/build-package.mjs"
+  }
+}