@zag-js/clipboard - npm Package Compare versions

Comparing version 0.0.0-dev-20240203155634 to 0.0.0-dev-20240203171400

dist/index.d.ts

@@ -6,3 +6,3 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"trigger" | "indicator">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "control" | "trigger" | "indicator" | "input" | "label">;
 
@@ -41,2 +41,6 @@ interface CopyStatusDetails {
     /**
+     * Whether the value has been copied to the clipboard
+     */
+    isCopied: boolean;
+    /**
      * The value to be copied to the clipboard
@@ -49,14 +53,8 @@ */
     setValue(value: string): void;
-    /**
-     * The props for the trigger button
-     */
+    rootProps: T["element"];
+    labelProps: T["label"];
+    controlProps: T["element"];
     triggerProps: T["button"];
-    /**
-     * The props for the indicator
-     */
+    inputProps: T["input"];
     getIndicatorProps(props: IndicatorProps): T["element"];
-    /**
-     * Whether the value has been copied to the clipboard
-     */
-    isCopied: boolean;
 }
@@ -63,0 +61,0 @@

dist/index.js

@@ -31,3 +31,3 @@ "use strict";
 var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("clipboard").parts("trigger", "indicator");
+var anatomy = (0, import_anatomy.createAnatomy)("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
 var parts = anatomy.build();
@@ -42,3 +42,6 @@
 var dom = (0, import_dom_query.createScope)({
-  getTriggerId: (ctx) => `clip-trigger-${ctx.id}`,
+  getRootId: (ctx) => `clip-${ctx.id}`,
+  getInputId: (ctx) => `clip-input-${ctx.id}`,
+  getLabelId: (ctx) => `clip-label-${ctx.id}`,
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
   writeToClipboard: (ctx) => copyText(dom.getDoc(ctx), ctx.value)
@@ -96,5 +99,31 @@ });
     },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      "data-copied": (0, import_dom_query2.dataAttr)(isCopied),
+      id: dom.getRootId(state.context)
+    }),
+    labelProps: normalize.label({
+      ...parts.label.attrs,
+      htmlFor: dom.getInputId(state.context),
+      "data-copied": (0, import_dom_query2.dataAttr)(isCopied),
+      id: dom.getLabelId(state.context)
+    }),
+    controlProps: normalize.element({
+      ...parts.control.attrs,
+      "data-copied": (0, import_dom_query2.dataAttr)(isCopied)
+    }),
+    inputProps: normalize.input({
+      ...parts.input.attrs,
+      defaultValue: state.context.value,
+      "data-copied": (0, import_dom_query2.dataAttr)(isCopied),
+      readOnly: true,
+      "data-readonly": "true",
+      id: dom.getInputId(state.context),
+      onFocus(event) {
+        event.currentTarget.select();
+      }
+    }),
     triggerProps: normalize.button({
       ...parts.trigger.attrs,
-      id: dom.getTriggerId(state.context),
+      "aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
       "data-copied": (0, import_dom_query2.dataAttr)(isCopied),
@@ -128,2 +157,5 @@ onClick() {
       },
+      watch: {
+        value: ["syncInputElement"]
+      },
       on: {
@@ -166,2 +198,5 @@ "VALUE.SET": {
           ctx2.onCopyStatusChange?.({ copied: true });
+        },
+        syncInputElement(ctx2) {
+          dom.setValue(dom.getInputEl(ctx2), ctx2.value);
         }
@@ -168,0 +203,0 @@ },

package.json

 {
   "name": "@zag-js/clipboard",
-  "version": "0.0.0-dev-20240203155634",
+  "version": "0.0.0-dev-20240203171400",
   "description": "Core logic for the clipboard widget implemented as a state machine",
@@ -31,7 +31,7 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "0.0.0-dev-20240203155634",
-    "@zag-js/core": "0.0.0-dev-20240203155634",
-    "@zag-js/dom-query": "0.0.0-dev-20240203155634",
-    "@zag-js/utils": "0.0.0-dev-20240203155634",
-    "@zag-js/types": "0.0.0-dev-20240203155634"
+    "@zag-js/anatomy": "0.0.0-dev-20240203171400",
+    "@zag-js/core": "0.0.0-dev-20240203171400",
+    "@zag-js/dom-query": "0.0.0-dev-20240203171400",
+    "@zag-js/utils": "0.0.0-dev-20240203171400",
+    "@zag-js/types": "0.0.0-dev-20240203171400"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

src/clipboard.anatomy.ts

 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("clipboard").parts("trigger", "indicator")
+export const anatomy = createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label")
 
 export const parts = anatomy.build()

src/clipboard.connect.ts

@@ -16,5 +16,31 @@ import { dataAttr } from "@zag-js/dom-query"
     },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      "data-copied": dataAttr(isCopied),
+      id: dom.getRootId(state.context),
+    }),
+    labelProps: normalize.label({
+      ...parts.label.attrs,
+      htmlFor: dom.getInputId(state.context),
+      "data-copied": dataAttr(isCopied),
+      id: dom.getLabelId(state.context),
+    }),
+    controlProps: normalize.element({
+      ...parts.control.attrs,
+      "data-copied": dataAttr(isCopied),
+    }),
+    inputProps: normalize.input({
+      ...parts.input.attrs,
+      defaultValue: state.context.value,
+      "data-copied": dataAttr(isCopied),
+      readOnly: true,
+      "data-readonly": "true",
+      id: dom.getInputId(state.context),
+      onFocus(event) {
+        event.currentTarget.select()
+      },
+    }),
     triggerProps: normalize.button({
       ...parts.trigger.attrs,
-      id: dom.getTriggerId(state.context),
+      "aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
       "data-copied": dataAttr(isCopied),
@@ -21,0 +47,0 @@ onClick() {

src/clipboard.dom.ts

@@ -6,3 +6,6 @@ import { createScope, getWindow } from "@zag-js/dom-query"
 export const dom = createScope({
-  getTriggerId: (ctx: Ctx) => `clip-trigger-${ctx.id}`,
+  getRootId: (ctx: Ctx) => `clip-${ctx.id}`,
+  getInputId: (ctx: Ctx) => `clip-input-${ctx.id}`,
+  getLabelId: (ctx: Ctx) => `clip-label-${ctx.id}`,
+  getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),
   writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),
@@ -9,0 +12,0 @@ })

src/clipboard.machine.ts

@@ -17,2 +17,5 @@ import { createMachine } from "@zag-js/core"
       },
+      watch: {
+        value: ["syncInputElement"],
+      },
       on: {
@@ -56,2 +59,5 @@ "VALUE.SET": {
         },
+        syncInputElement(ctx) {
+          dom.setValue(dom.getInputEl(ctx), ctx.value)
+        },
       },
@@ -58,0 +64,0 @@ delays: {

src/clipboard.types.ts

@@ -49,2 +49,6 @@ import type { StateMachine as S } from "@zag-js/core"
   /**
+   * Whether the value has been copied to the clipboard
+   */
+  isCopied: boolean
+  /**
    * The value to be copied to the clipboard
@@ -57,14 +61,9 @@ */
   setValue(value: string): void
-  /**
-   * The props for the trigger button
-   */
+
+  rootProps: T["element"]
+  labelProps: T["label"]
+  controlProps: T["element"]
   triggerProps: T["button"]
-  /**
-   * The props for the indicator
-   */
+  inputProps: T["input"]
   getIndicatorProps(props: IndicatorProps): T["element"]
-  /**
-   * Whether the value has been copied to the clipboard
-   */
-  isCopied: boolean
 }

No alert changes

Improved metrics

Total package byte prevSize

43401

increased by22.73%

Lines of code

671

increased by17.72%

Dependency changes

• + Added@zag-js/anatomy@0.0.0-dev-20240203171400(transitive)

• + Added@zag-js/core@0.0.0-dev-20240203171400(transitive)

• + Added@zag-js/dom-query@0.0.0-dev-20240203171400(transitive)

• + Added@zag-js/store@0.0.0-dev-20240203171400(transitive)

• + Added@zag-js/types@0.0.0-dev-20240203171400(transitive)

• + Added@zag-js/utils@0.0.0-dev-20240203171400(transitive)

• - Removed@zag-js/anatomy@0.0.0-dev-20240203155634(transitive)

• - Removed@zag-js/core@0.0.0-dev-20240203155634(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20240203155634(transitive)

• - Removed@zag-js/store@0.0.0-dev-20240203155634(transitive)

• - Removed@zag-js/types@0.0.0-dev-20240203155634(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20240203155634(transitive)

• Updated@zag-js/anatomy@0.0.0-dev-20240203171400

• Updated@zag-js/core@0.0.0-dev-20240203171400

• Updated@zag-js/dom-query@0.0.0-dev-20240203171400

• Updated@zag-js/types@0.0.0-dev-20240203171400

• Updated@zag-js/utils@0.0.0-dev-20240203171400