@antadesign/anta 0.3.8 → 0.3.10

package/dist/elements/copy-behavior.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared copy-to-clipboard behavior for `<a-button>` and `<a-menu-item>` — the
+ * write half of the productized "copy button" / "copying menu item". The element
+ * performs the clipboard write itself (rather than a UI-thread callback) and
+ * reports the outcome with a `copydone` event; the JSX wrapper listens and
+ * orchestrates the visual feedback (icon + tone swap). Nothing here touches the
+ * DOM — no light-DOM mutation, no host attributes, no ElementInternals.
+ *
+ * Events are dispatched non-bubbling (`bubbles: false`): the wrapper binds on the
+ * host itself, so it catches them in the target phase, and not bubbling keeps a
+ * nested copy row's `copydone` from flipping an ancestor copy row's feedback
+ * (the same point-to-point rule Anta's `statechange` follows).
+ *
+ * Three modes, chosen by attribute:
+ * - `copy="<text>"` — copy the literal string on activation.
+ * - `copy-node` / `copy-node="<selector>"` — copy a DOM node as rich text
+ *   (`text/html`) + plain text. Bare `copy-node` copies the nearest ancestor
+ *   marked `[data-copy-source]`; a value is a selector resolved with `closest()`
+ *   (an ancestor region). The copy control is stripped from the serialized
+ *   output (`[data-copy-node-button]`).
+ * - `copy-lazy` — the content isn't known until the click. Activation dispatches
+ *   `copyrequest` whose `detail.provide(text)` the consumer calls with the value
+ *   (synchronously, or after an `await` — the browser's transient-activation
+ *   window still covers the write). Nothing lands in the DOM, and there's no
+ *   attribute round-trip to reset. Takes precedence over any `copy` value.
+ *
+ * Precedence when several are set (the discriminated-union prop types make this
+ * unreachable from the wrappers, but hand-authored markup can): node → lazy →
+ * literal `copy`.
+ */
+/**
+ * Perform a copy on activation (click / Enter / Space / menu select). Returns
+ * `true` if the element is a copy control (so the caller knows the copy path
+ * ran); `false` for a plain, non-copy element.
+ */
+export declare function runCopy(el: HTMLElement): boolean;

package/dist/elements/copy-behavior.js

@@ -0,0 +1,68 @@
+async function writeText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function writeNode(node) {
+  const clone = node.cloneNode(true);
+  clone.querySelectorAll("[data-copy-node-button]").forEach((n) => n.remove());
+  const html = clone.outerHTML;
+  const text = clone.textContent ?? "";
+  try {
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/html": new Blob([html], { type: "text/html" }),
+          "text/plain": new Blob([text], { type: "text/plain" })
+        })
+      ]);
+      return true;
+    }
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function resolveNodeTarget(el) {
+  const sel = el.getAttribute("copy-node");
+  if (sel == null) return null;
+  return el.closest(sel === "" ? "[data-copy-source]" : sel);
+}
+function run(el, work) {
+  void work.then((ok) => {
+    el.dispatchEvent(new CustomEvent("copydone", { bubbles: false, detail: { ok } }));
+  });
+}
+function runCopy(el) {
+  if (el.hasAttribute("copy-node")) {
+    const target = resolveNodeTarget(el);
+    run(el, target ? writeNode(target) : Promise.resolve(false));
+    return true;
+  }
+  if (el.hasAttribute("copy-lazy")) {
+    let done = false;
+    el.dispatchEvent(
+      new CustomEvent("copyrequest", {
+        bubbles: false,
+        detail: {
+          provide(text) {
+            if (done) return;
+            done = true;
+            run(el, writeText(String(text ?? "")));
+          }
+        }
+      })
+    );
+    return true;
+  }
+  if (!el.hasAttribute("copy")) return false;
+  run(el, writeText(el.getAttribute("copy") ?? ""));
+  return true;
+}
+export {
+  runCopy
+};

package/dist/general_types.d.ts

@@ -727,6 +727,26 @@ export interface AMenuItemAttributes extends BaseAttributes {
      *  a `MouseEvent`, carrying the modifier keys (e.g. `altKey`). All-lowercase so
      *  React/Preact bind it to the CustomEvent. */
     onmenuselect?: (e: MouseEvent) => void;
+    /** Text copied to the clipboard when the row is chosen (a "copying menu item").
+     *  The element performs the write itself on `menuselect`. */
+    copy?: string;
+    /** Copy a DOM node instead of a string (rich `text/html` + plain text). Bare
+     *  `copy-node` copies the nearest ancestor marked `[data-copy-source]`; a value
+     *  is a CSS selector resolved with `closest()`. Presence-based for the boolean
+     *  form. */
+    'copy-node'?: boolean | string;
+    /** Lazy copy: with an empty `copy`, activation dispatches `copyrequest` and the
+     *  write completes once `copy` is set back (within the activation window).
+     *  Presence-based. */
+    'copy-lazy'?: boolean | '';
+    /** Fired after a copy attempt (bubbling `copydone`, `detail: { ok }`).
+     *  All-lowercase so it binds in React *and* Preact. */
+    oncopydone?: (e: CustomEvent<{
+        ok: boolean;
+    }>) => void;
+    /** Fired on a lazy copy activation to request the content (bubbling
+     *  `copyrequest`). Answer by setting the `copy` attribute. All-lowercase. */
+    oncopyrequest?: (e: CustomEvent) => void;
 }
 /**
  * Attributes for the `<a-menu-group>` styled element. For the typed JSX
@@ -770,6 +790,30 @@ export interface AButtonAttributes extends BaseAttributes {
     form?: string;
     /** Custom event name dispatched (bubbling) on click. */
     'data-custom-event'?: string;
+    /** Text copied to the clipboard on activation (the "copy button"). The element
+     *  performs the write itself and flashes a success / failure state. */
+    copy?: string;
+    /** Copy a DOM node instead of a string (rich `text/html` + plain text). Bare
+     *  `copy-node` copies the nearest ancestor marked `[data-copy-source]`; a value
+     *  is a CSS selector resolved with `closest()` (an ancestor region). Presence-
+     *  based for the boolean form. */
+    'copy-node'?: boolean | string;
+    /** Lazy copy: activation dispatches `copyrequest`; the consumer calls
+     *  `detail.provide(text)` with the content, which stays out of the DOM until
+     *  then. Takes precedence over `copy`. Presence-based. */
+    'copy-lazy'?: boolean | '';
+    /** Fired after a copy attempt (`copydone`, `detail: { ok }`, non-bubbling so a
+     *  nested copy row can't flip an ancestor's feedback). All-lowercase so it
+     *  binds in React *and* Preact. */
+    oncopydone?: (e: CustomEvent<{
+        ok: boolean;
+    }>) => void;
+    /** Fired on a lazy copy activation (`copyrequest`, non-bubbling). Supply the
+     *  content by calling `detail.provide(text)` — synchronously or within the
+     *  click's activation window. All-lowercase. */
+    oncopyrequest?: (e: CustomEvent<{
+        provide: (text: string) => void;
+    }>) => void;
     'aria-disabled'?: 'true' | 'false' | boolean;
     'aria-busy'?: 'true' | 'false' | boolean;
 }

package/dist/index.d.ts

@@ -27,7 +27,9 @@ export type { TagProps } from './components/Tag';
 export { Icon } from './components/Icon';
 export type { IconProps } from './components/Icon';
 export { Button } from './components/Button';
-export type { ButtonProps, BaseButtonProps, ContentMode, SubmitMode, PriorityMode, } from './components/Button';
+export type { ButtonProps, BaseButtonProps, ContentMode, SubmitMode, PriorityMode, CopyMode, } from './components/Button';
+export { ButtonCopy } from './components/ButtonCopy';
+export type { ButtonCopyProps } from './components/ButtonCopy';
 export { ICON_SHAPES, ICON_SYNONYMS } from './elements/a-icon.shapes';
 export { Tooltip } from './components/Tooltip';
 export type { TooltipProps } from './components/Tooltip';
@@ -37,6 +39,8 @@ export { Menu } from './components/Menu';
 export type { MenuProps } from './components/Menu';
 export { MenuItem } from './components/MenuItem';
 export type { MenuItemProps } from './components/MenuItem';
+export { MenuItemCopy } from './components/MenuItemCopy';
+export type { MenuItemCopyProps } from './components/MenuItemCopy';
 export { MenuSeparator } from './components/MenuSeparator';
 export type { MenuSeparatorProps } from './components/MenuSeparator';
 export { MenuGroup } from './components/MenuGroup';

package/dist/index.js

@@ -4,11 +4,13 @@ import { Title } from "./components/Title";
 import { Tag } from "./components/Tag";
 import { Icon } from "./components/Icon";
 import { Button } from "./components/Button";
+import { ButtonCopy } from "./components/ButtonCopy";
 import { ICON_SHAPES, ICON_SYNONYMS } from "./elements/a-icon.shapes";
 import { Tooltip } from "./components/Tooltip";
 import { Checkbox } from "./components/Checkbox";
 import { Menu } from "./components/Menu";
 import { MenuItem } from "./components/MenuItem";
+import { MenuItemCopy } from "./components/MenuItemCopy";
 import { MenuSeparator } from "./components/MenuSeparator";
 import { MenuGroup } from "./components/MenuGroup";
 import { Expander } from "./components/Expander";
@@ -43,6 +45,7 @@ import { Card } from "./components/Card";
 import { configure } from "./jsx-runtime";
 export {
   Button,
+  ButtonCopy,
   Calendar,
   Card,
   Checkbox,
@@ -58,6 +61,7 @@ export {
   Menu,
   MenuGroup,
   MenuItem,
+  MenuItemCopy,
   MenuSeparator,
   Progress,
   RadioGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",