@zag-js/clipboard 1.43.0 → 2.0.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/clipboard.connect.js +13 -9
  2. package/dist/clipboard.connect.mjs +13 -9
  3. package/dist/clipboard.dom.js +5 -4
  4. package/dist/clipboard.dom.mjs +5 -4
  5. package/dist/clipboard.types.d.mts +15 -1
  6. package/dist/clipboard.types.d.ts +15 -1
  7. package/dist/index.d.mts +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/package.json +6 -6
package/dist/clipboard.connect.js CHANGED
@@ -40,6 +40,9 @@ function connect(service, normalize) {
40
40
  const { state, send, context, scope, prop } = service;
41
41
  const copied = state.matches("copied");
42
42
  const translations = prop("translations");
43
+ function getIndicatorState(props) {
44
+ return { copied: props.copied, visible: props.copied === copied };
45
+ }
43
46
  return {
44
47
  copied,
45
48
  value: context.get("value"),
@@ -51,14 +54,13 @@ function connect(service, normalize) {
51
54
  },
52
55
  getRootProps() {
53
56
  return normalize.element({
54
- ...import_clipboard.parts.root.attrs,
55
- "data-copied": (0, import_dom_query.dataAttr)(copied),
56
- id: dom.getRootId(scope)
57
+ ...import_clipboard.parts.root.attrs(scope.id),
58
+ "data-copied": (0, import_dom_query.dataAttr)(copied)
57
59
  });
58
60
  },
59
61
  getLabelProps() {
60
62
  return normalize.label({
61
- ...import_clipboard.parts.label.attrs,
63
+ ...import_clipboard.parts.label.attrs(scope.id),
62
64
  htmlFor: dom.getInputId(scope),
63
65
  "data-copied": (0, import_dom_query.dataAttr)(copied),
64
66
  id: dom.getLabelId(scope)
@@ -66,13 +68,13 @@ function connect(service, normalize) {
66
68
  },
67
69
  getControlProps() {
68
70
  return normalize.element({
69
- ...import_clipboard.parts.control.attrs,
71
+ ...import_clipboard.parts.control.attrs(scope.id),
70
72
  "data-copied": (0, import_dom_query.dataAttr)(copied)
71
73
  });
72
74
  },
73
75
  getInputProps() {
74
76
  return normalize.input({
75
- ...import_clipboard.parts.input.attrs,
77
+ ...import_clipboard.parts.input.attrs(scope.id),
76
78
  defaultValue: context.get("value"),
77
79
  "data-copied": (0, import_dom_query.dataAttr)(copied),
78
80
  readOnly: true,
@@ -88,7 +90,7 @@ function connect(service, normalize) {
88
90
  },
89
91
  getTriggerProps() {
90
92
  return normalize.button({
91
- ...import_clipboard.parts.trigger.attrs,
93
+ ...import_clipboard.parts.trigger.attrs(scope.id),
92
94
  type: "button",
93
95
  "aria-label": translations.triggerLabel?.(copied),
94
96
  "data-copied": (0, import_dom_query.dataAttr)(copied),
@@ -97,10 +99,12 @@ function connect(service, normalize) {
97
99
  }
98
100
  });
99
101
  },
102
+ getIndicatorState,
100
103
  getIndicatorProps(props) {
104
+ const indicatorState = getIndicatorState(props);
101
105
  return normalize.element({
102
- ...import_clipboard.parts.indicator.attrs,
103
- hidden: props.copied !== copied
106
+ ...import_clipboard.parts.indicator.attrs(scope.id),
107
+ hidden: !indicatorState.visible
104
108
  });
105
109
  }
106
110
  };
package/dist/clipboard.connect.mjs CHANGED
@@ -6,6 +6,9 @@ function connect(service, normalize) {
6
6
  const { state, send, context, scope, prop } = service;
7
7
  const copied = state.matches("copied");
8
8
  const translations = prop("translations");
9
+ function getIndicatorState(props) {
10
+ return { copied: props.copied, visible: props.copied === copied };
11
+ }
9
12
  return {
10
13
  copied,
11
14
  value: context.get("value"),
@@ -17,14 +20,13 @@ function connect(service, normalize) {
17
20
  },
18
21
  getRootProps() {
19
22
  return normalize.element({
20
- ...parts.root.attrs,
21
- "data-copied": dataAttr(copied),
22
- id: dom.getRootId(scope)
23
+ ...parts.root.attrs(scope.id),
24
+ "data-copied": dataAttr(copied)
23
25
  });
24
26
  },
25
27
  getLabelProps() {
26
28
  return normalize.label({
27
- ...parts.label.attrs,
29
+ ...parts.label.attrs(scope.id),
28
30
  htmlFor: dom.getInputId(scope),
29
31
  "data-copied": dataAttr(copied),
30
32
  id: dom.getLabelId(scope)
@@ -32,13 +34,13 @@ function connect(service, normalize) {
32
34
  },
33
35
  getControlProps() {
34
36
  return normalize.element({
35
- ...parts.control.attrs,
37
+ ...parts.control.attrs(scope.id),
36
38
  "data-copied": dataAttr(copied)
37
39
  });
38
40
  },
39
41
  getInputProps() {
40
42
  return normalize.input({
41
- ...parts.input.attrs,
43
+ ...parts.input.attrs(scope.id),
42
44
  defaultValue: context.get("value"),
43
45
  "data-copied": dataAttr(copied),
44
46
  readOnly: true,
@@ -54,7 +56,7 @@ function connect(service, normalize) {
54
56
  },
55
57
  getTriggerProps() {
56
58
  return normalize.button({
57
- ...parts.trigger.attrs,
59
+ ...parts.trigger.attrs(scope.id),
58
60
  type: "button",
59
61
  "aria-label": translations.triggerLabel?.(copied),
60
62
  "data-copied": dataAttr(copied),
@@ -63,10 +65,12 @@ function connect(service, normalize) {
63
65
  }
64
66
  });
65
67
  },
68
+ getIndicatorState,
66
69
  getIndicatorProps(props) {
70
+ const indicatorState = getIndicatorState(props);
67
71
  return normalize.element({
68
- ...parts.indicator.attrs,
69
- hidden: props.copied !== copied
72
+ ...parts.indicator.attrs(scope.id),
73
+ hidden: !indicatorState.visible
70
74
  });
71
75
  }
72
76
  };
package/dist/clipboard.dom.js CHANGED
@@ -28,10 +28,11 @@ __export(clipboard_dom_exports, {
28
28
  });
29
29
  module.exports = __toCommonJS(clipboard_dom_exports);
30
30
  var import_dom_query = require("@zag-js/dom-query");
31
- var getRootId = (ctx) => ctx.ids?.root ?? `clip:${ctx.id}`;
32
- var getInputId = (ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`;
33
- var getLabelId = (ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`;
34
- var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
31
+ var import_clipboard = require("./clipboard.anatomy.js");
32
+ var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
33
+ var getInputId = (ctx) => ctx.ids?.input ?? `${ctx.id}:input`;
34
+ var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
35
+ var getInputEl = (ctx) => ctx.query(ctx.selector(import_clipboard.parts.input));
35
36
  var writeToClipboard = (ctx, value) => copyText(ctx.getDoc(), value);
36
37
  function createNode(doc, text) {
37
38
  const node = doc.createElement("pre");
package/dist/clipboard.dom.mjs CHANGED
@@ -1,9 +1,10 @@
1
1
  // src/clipboard.dom.ts
2
2
  import { getWindow } from "@zag-js/dom-query";
3
- var getRootId = (ctx) => ctx.ids?.root ?? `clip:${ctx.id}`;
4
- var getInputId = (ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`;
5
- var getLabelId = (ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`;
6
- var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
3
+ import { parts } from "./clipboard.anatomy.mjs";
4
+ var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
5
+ var getInputId = (ctx) => ctx.ids?.input ?? `${ctx.id}:input`;
6
+ var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
7
+ var getInputEl = (ctx) => ctx.query(ctx.selector(parts.input));
7
8
  var writeToClipboard = (ctx, value) => copyText(ctx.getDoc(), value);
8
9
  function createNode(doc, text) {
9
10
  const node = doc.createElement("pre");
package/dist/clipboard.types.d.mts CHANGED
@@ -62,6 +62,16 @@ type ClipboardMachine = Machine<ClipboardSchema>;
62
62
  interface IndicatorProps {
63
63
  copied: boolean;
64
64
  }
65
+ interface IndicatorState {
66
+ /**
67
+ * The copied state this indicator represents
68
+ */
69
+ copied: boolean;
70
+ /**
71
+ * Whether the indicator matches the current copied state
72
+ */
73
+ visible: boolean;
74
+ }
65
75
  interface ClipboardApi<T extends PropTypes = PropTypes> {
66
76
  /**
67
77
  * Whether the value has been copied to the clipboard
@@ -84,7 +94,11 @@ interface ClipboardApi<T extends PropTypes = PropTypes> {
84
94
  getControlProps: () => T["element"];
85
95
  getTriggerProps: () => T["button"];
86
96
  getInputProps: () => T["input"];
97
+ /**
98
+ * Returns the state of the indicator
99
+ */
100
+ getIndicatorState: (props: IndicatorProps) => IndicatorState;
87
101
  getIndicatorProps: (props: IndicatorProps) => T["element"];
88
102
  }
89
103
 
90
- export type { ClipboardApi, ClipboardMachine, ClipboardProps, ClipboardSchema, ClipboardService, CopyStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ValueChangeDetails };
104
+ export type { ClipboardApi, ClipboardMachine, ClipboardProps, ClipboardSchema, ClipboardService, CopyStatusDetails, ElementIds, IndicatorProps, IndicatorState, IntlTranslations, ValueChangeDetails };
package/dist/clipboard.types.d.ts CHANGED
@@ -62,6 +62,16 @@ type ClipboardMachine = Machine<ClipboardSchema>;
62
62
  interface IndicatorProps {
63
63
  copied: boolean;
64
64
  }
65
+ interface IndicatorState {
66
+ /**
67
+ * The copied state this indicator represents
68
+ */
69
+ copied: boolean;
70
+ /**
71
+ * Whether the indicator matches the current copied state
72
+ */
73
+ visible: boolean;
74
+ }
65
75
  interface ClipboardApi<T extends PropTypes = PropTypes> {
66
76
  /**
67
77
  * Whether the value has been copied to the clipboard
@@ -84,7 +94,11 @@ interface ClipboardApi<T extends PropTypes = PropTypes> {
84
94
  getControlProps: () => T["element"];
85
95
  getTriggerProps: () => T["button"];
86
96
  getInputProps: () => T["input"];
97
+ /**
98
+ * Returns the state of the indicator
99
+ */
100
+ getIndicatorState: (props: IndicatorProps) => IndicatorState;
87
101
  getIndicatorProps: (props: IndicatorProps) => T["element"];
88
102
  }
89
103
 
90
- export type { ClipboardApi, ClipboardMachine, ClipboardProps, ClipboardSchema, ClipboardService, CopyStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ValueChangeDetails };
104
+ export type { ClipboardApi, ClipboardMachine, ClipboardProps, ClipboardSchema, ClipboardService, CopyStatusDetails, ElementIds, IndicatorProps, IndicatorState, IntlTranslations, ValueChangeDetails };
package/dist/index.d.mts CHANGED
@@ -2,7 +2,7 @@ export { anatomy } from './clipboard.anatomy.mjs';
2
2
  export { connect } from './clipboard.connect.mjs';
3
3
  export { machine } from './clipboard.machine.mjs';
4
4
  export { contextProps, indicatorProps, props, splitIndicatorProps } from './clipboard.props.mjs';
5
- export { ClipboardApi as Api, CopyStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ClipboardMachine as Machine, ClipboardProps as Props, ClipboardService as Service, ValueChangeDetails } from './clipboard.types.mjs';
5
+ export { ClipboardApi as Api, CopyStatusDetails, ElementIds, IndicatorProps, IndicatorState, IntlTranslations, ClipboardMachine as Machine, ClipboardProps as Props, ClipboardService as Service, ValueChangeDetails } from './clipboard.types.mjs';
6
6
  import '@zag-js/anatomy';
7
7
  import '@zag-js/types';
8
8
  import '@zag-js/core';
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ export { anatomy } from './clipboard.anatomy.js';
2
2
  export { connect } from './clipboard.connect.js';
3
3
  export { machine } from './clipboard.machine.js';
4
4
  export { contextProps, indicatorProps, props, splitIndicatorProps } from './clipboard.props.js';
5
- export { ClipboardApi as Api, CopyStatusDetails, ElementIds, IndicatorProps, IntlTranslations, ClipboardMachine as Machine, ClipboardProps as Props, ClipboardService as Service, ValueChangeDetails } from './clipboard.types.js';
5
+ export { ClipboardApi as Api, CopyStatusDetails, ElementIds, IndicatorProps, IndicatorState, IntlTranslations, ClipboardMachine as Machine, ClipboardProps as Props, ClipboardService as Service, ValueChangeDetails } from './clipboard.types.js';
6
6
  import '@zag-js/anatomy';
7
7
  import '@zag-js/types';
8
8
  import '@zag-js/core';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/clipboard",
3
- "version": "1.43.0",
3
+ "version": "2.0.0-next.1",
4
4
  "description": "Core logic for the clipboard widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -30,11 +30,11 @@
30
30
  "url": "https://github.com/chakra-ui/zag/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@zag-js/anatomy": "1.43.0",
34
- "@zag-js/core": "1.43.0",
35
- "@zag-js/dom-query": "1.43.0",
36
- "@zag-js/utils": "1.43.0",
37
- "@zag-js/types": "1.43.0"
33
+ "@zag-js/anatomy": "2.0.0-next.1",
34
+ "@zag-js/core": "2.0.0-next.1",
35
+ "@zag-js/dom-query": "2.0.0-next.1",
36
+ "@zag-js/utils": "2.0.0-next.1",
37
+ "@zag-js/types": "2.0.0-next.1"
38
38
  },
39
39
  "devDependencies": {
40
40
  "clean-package": "2.2.0"