@zag-js/toggle-group - npm Package Compare versions

Comparing version 0.0.0-dev-20230810085932 to 0.0.0-dev-20230816100944

dist/index.d.ts

@@ -78,4 +78,14 @@ import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Orientation, Context, NormalizeProps } from '@zag-js/types';
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type PublicApi<T extends PropTypes = PropTypes> = {
+type ToggleProps = {
+    value: string;
+    disabled?: boolean;
+};
+type MachineApi<T extends PropTypes = PropTypes> = {
+    /**
+     * The value of the toggle group.
+     */
     value: string[];
+    /**
+     * Function to set the value of the toggle group.
+     */
     setValue: (values: string[]) => void;
@@ -85,11 +95,7 @@ rootProps: T["element"];
 };
-type ToggleProps = {
-    value: string;
-    disabled?: boolean;
-};
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { UserDefinedContext as Context, PublicApi, connect, machine };
+export { MachineApi as Api, UserDefinedContext as Context, connect, machine };

dist/index.js

@@ -183,3 +183,3 @@ "use strict";
     {
-      id: "1",
+      id: "toggle-group",
       initial: "idle",
@@ -203,5 +203,2 @@ context: {
       entry: ["checkFocusableToggles", "checkIfWithinToolbar"],
-      watch: {
-        value: ["invokeOnChange"]
-      },
       on: {
@@ -212,3 +209,3 @@ "VALUE.SET": {
         "TOGGLE.CLICK": {
-          actions: ["setValue", "invokeOnChange"]
+          actions: ["setValue"]
         },
@@ -293,5 +290,2 @@ "ROOT.MOUSE_DOWN": {
         },
-        invokeOnChange(ctx2) {
-          ctx2.onChange?.({ value: ctx2.value });
-        },
         setValue(ctx2, evt) {
@@ -302,10 +296,7 @@ if (!evt.value)
           if (ctx2.multiple) {
-            if (next.includes(evt.value))
-              next = next.filter((v) => v !== evt.value);
-            else
-              next.push(evt.value);
+            next = next.includes(evt.value) ? (0, import_utils2.remove)(next, evt.value) : (0, import_utils2.add)(next, evt.value);
           } else {
             next = [evt.value];
           }
-          ctx2.value = next;
+          set.value(ctx2, next);
         },
@@ -340,2 +331,13 @@ focusNextToggle(ctx2) {
 }
+var invoke = {
+  change(ctx) {
+    ctx.onChange?.({ value: ctx.value });
+  }
+};
+var set = {
+  value(ctx, value) {
+    ctx.value = value;
+    invoke.change(ctx);
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
@@ -342,0 +344,0 @@ 0 && (module.exports = {

package.json

 {
   "name": "@zag-js/toggle-group",
-  "version": "0.0.0-dev-20230810085932",
+  "version": "0.0.0-dev-20230816100944",
   "description": "Core logic for the toggle widget implemented as a state machine",
@@ -30,8 +30,8 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "0.0.0-dev-20230810085932",
-    "@zag-js/dom-query": "0.0.0-dev-20230810085932",
-    "@zag-js/dom-event": "0.0.0-dev-20230810085932",
-    "@zag-js/utils": "0.0.0-dev-20230810085932",
-    "@zag-js/core": "0.0.0-dev-20230810085932",
-    "@zag-js/types": "0.0.0-dev-20230810085932"
+    "@zag-js/anatomy": "0.0.0-dev-20230816100944",
+    "@zag-js/dom-query": "0.0.0-dev-20230816100944",
+    "@zag-js/dom-event": "0.0.0-dev-20230816100944",
+    "@zag-js/utils": "0.0.0-dev-20230816100944",
+    "@zag-js/core": "0.0.0-dev-20230816100944",
+    "@zag-js/types": "0.0.0-dev-20230816100944"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

src/index.ts

 export { connect } from "./toggle-group.connect"
 export { machine } from "./toggle-group.machine"
-export type { UserDefinedContext as Context, PublicApi } from "./toggle-group.types"
+export type { UserDefinedContext as Context, MachineApi as Api } from "./toggle-group.types"

src/toggle-group.connect.ts

@@ -6,5 +6,5 @@ import { getEventKey, type EventKeyMap } from "@zag-js/dom-event"
 import { dom } from "./toggle-group.dom"
-import type { PublicApi, Send, State } from "./toggle-group.types"
+import type { MachineApi, Send, State } from "./toggle-group.types"
 
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const value = state.context.value
@@ -11,0 +11,0 @@ const disabled = state.context.disabled

src/toggle-group.machine.ts

 import { createMachine, guards } from "@zag-js/core"
 import { raf } from "@zag-js/dom-query"
-import { compact } from "@zag-js/utils"
+import { add, compact, remove } from "@zag-js/utils"
 import { dom } from "./toggle-group.dom"
@@ -13,3 +13,3 @@ import type { MachineContext, MachineState, UserDefinedContext } from "./toggle-group.types"
     {
-      id: "1",
+      id: "toggle-group",
       initial: "idle",
@@ -37,6 +37,2 @@
 
-      watch: {
-        value: ["invokeOnChange"],
-      },
-
       on: {
@@ -47,3 +43,3 @@ "VALUE.SET": {
         "TOGGLE.CLICK": {
-          actions: ["setValue", "invokeOnChange"],
+          actions: ["setValue"],
         },
@@ -130,5 +126,2 @@ "ROOT.MOUSE_DOWN": {
         },
-        invokeOnChange(ctx) {
-          ctx.onChange?.({ value: ctx.value })
-        },
         setValue(ctx, evt) {
@@ -138,8 +131,7 @@ if (!evt.value) return
           if (ctx.multiple) {
-            if (next.includes(evt.value)) next = next.filter((v) => v !== evt.value)
-            else next.push(evt.value)
+            next = next.includes(evt.value) ? remove(next, evt.value) : add(next, evt.value)
           } else {
             next = [evt.value]
           }
-          ctx.value = next
+          set.value(ctx, next)
         },
@@ -172,1 +164,14 @@ focusNextToggle(ctx) {
 }
+
+const invoke = {
+  change(ctx: MachineContext) {
+    ctx.onChange?.({ value: ctx.value })
+  },
+}
+
+const set = {
+  value(ctx: MachineContext, value: string[]) {
+    ctx.value = value
+    invoke.change(ctx)
+  },
+}

src/toggle-group.types.ts

@@ -85,4 +85,15 @@ import type { StateMachine as S } from "@zag-js/core"
 
-export type PublicApi<T extends PropTypes = PropTypes> = {
+export type ToggleProps = {
+  value: string
+  disabled?: boolean
+}
+
+export type MachineApi<T extends PropTypes = PropTypes> = {
+  /**
+   * The value of the toggle group.
+   */
   value: string[]
+  /**
+   * Function to set the value of the toggle group.
+   */
   setValue: (values: string[]) => void
@@ -92,6 +103,1 @@ rootProps: T["element"]
 }
-
-export type ToggleProps = {
-  value: string
-  disabled?: boolean
-}

No alert changes

Improved metrics

Total package byte prevSize

75032

increased by0.76%

Lines of code

1125

increased by1.81%

Dependency changes

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

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

• + Added@zag-js/dom-event@0.0.0-dev-20230816100944(transitive)

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

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

• + Added@zag-js/text-selection@0.0.0-dev-20230816100944(transitive)

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

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

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

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

• - Removed@zag-js/dom-event@0.0.0-dev-20230810085932(transitive)

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

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

• - Removed@zag-js/text-selection@0.0.0-dev-20230810085932(transitive)

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

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

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

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

• Updated@zag-js/dom-event@0.0.0-dev-20230816100944

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

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

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