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

Comparing version 0.19.1 to 0.20.0

dist/index.d.ts

@@ -5,2 +5,5 @@ import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Orientation, Context, NormalizeProps } from '@zag-js/types';
 
+interface ValueChangeDetails {
+    value: string[];
+}
 type ElementIds = Partial<{
@@ -10,3 +13,3 @@ root: string;
 }>;
-type PublicContext = DirectionProperty & CommonProperties & {
+interface PublicContext extends DirectionProperty, CommonProperties {
     /**
@@ -27,5 +30,3 @@ * The ids of the elements in the toggle. Useful for composition.
      */
-    onChange?: (details: {
-        value: string[];
-    }) => void;
+    onValueChange?: (details: ValueChangeDetails) => void;
     /**
@@ -47,3 +48,3 @@ * Whether to loop focus inside the toggle group.
     multiple?: boolean;
-};
+}
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
@@ -53,36 +54,15 @@ type ComputedContext = Readonly<{
 }>;
-type PrivateContext = Context<{
-    /**
-     * Whether the user is tabbing backward.
-     */
-    isTabbingBackward: boolean;
-    /**
-     * Whether the toggle group has focusable toggles.
-     */
-    hasFocusableToggle: boolean;
-    /**
-     * Whether the toggle was focused by a click.
-     */
-    isClickFocus: boolean;
-    /**
-     * The value of the toggle that was focused.
-     */
-    focusedId: string | null;
-    /**
-     * Whether the toggle group is within a toolbar.
-     * This is used to determine whether to use roving tab index.
-     */
-    isWithinToolbar: boolean;
-}>;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
+type PrivateContext = Context<{}>;
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
     value: "idle" | "focused";
-};
+}
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type ToggleProps = {
+interface ToggleProps {
     value: string;
     disabled?: boolean;
-};
-type MachineApi<T extends PropTypes = PropTypes> = {
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
     /**
@@ -98,3 +78,3 @@ * The value of the toggle group.
     getToggleProps(props: ToggleProps): T["button"];
-};
+}
 
@@ -101,0 +81,0 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;

dist/index.js

@@ -330,3 +330,3 @@ "use strict";
   change(ctx) {
-    ctx.onChange?.({ value: Array.from(ctx.value) });
+    ctx.onValueChange?.({ value: Array.from(ctx.value) });
   }
@@ -333,0 +333,0 @@ };

package.json

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

src/toggle-group.machine.ts

@@ -162,3 +162,3 @@ import { createMachine, guards } from "@zag-js/core"
   change(ctx: MachineContext) {
-    ctx.onChange?.({ value: Array.from(ctx.value) })
+    ctx.onValueChange?.({ value: Array.from(ctx.value) })
   },
@@ -165,0 +165,0 @@ }

src/toggle-group.types.ts

 import type { StateMachine as S } from "@zag-js/core"
 import type { CommonProperties, Context, DirectionProperty, Orientation, PropTypes, RequiredBy } from "@zag-js/types"
 
+/* -----------------------------------------------------------------------------
+ * Callback details
+ * -----------------------------------------------------------------------------*/
+
+export interface ValueChangeDetails {
+  value: string[]
+}
+
+/* -----------------------------------------------------------------------------
+ * Machine context
+ * -----------------------------------------------------------------------------*/
+
 type ElementIds = Partial<{
@@ -9,37 +21,36 @@ root: string
 
-type PublicContext = DirectionProperty &
-  CommonProperties & {
-    /**
-     * The ids of the elements in the toggle. Useful for composition.
-     */
-    ids?: ElementIds
-    /**
-     * Whether the toggle is disabled.
-     */
-    disabled?: boolean
-    /**
-     * The values of the toggles in the group.
-     */
-    value: string[]
-    /**
-     * Function to call when the toggle is clicked.
-     */
-    onChange?: (details: { value: string[] }) => void
-    /**
-     * Whether to loop focus inside the toggle group.
-     */
-    loop: boolean
-    /**
-     *  Whether to use roving tab index to manage focus.
-     */
-    rovingFocus?: boolean
-    /**
-     * The orientation of the toggle group.
-     */
-    orientation: Orientation
-    /**
-     * Whether to allow multiple toggles to be selected.
-     */
-    multiple?: boolean
-  }
+interface PublicContext extends DirectionProperty, CommonProperties {
+  /**
+   * The ids of the elements in the toggle. Useful for composition.
+   */
+  ids?: ElementIds
+  /**
+   * Whether the toggle is disabled.
+   */
+  disabled?: boolean
+  /**
+   * The values of the toggles in the group.
+   */
+  value: string[]
+  /**
+   * Function to call when the toggle is clicked.
+   */
+  onValueChange?: (details: ValueChangeDetails) => void
+  /**
+   * Whether to loop focus inside the toggle group.
+   */
+  loop: boolean
+  /**
+   *  Whether to use roving tab index to manage focus.
+   */
+  rovingFocus?: boolean
+  /**
+   * The orientation of the toggle group.
+   */
+  orientation: Orientation
+  /**
+   * Whether to allow multiple toggles to be selected.
+   */
+  multiple?: boolean
+}
 
@@ -54,2 +65,3 @@ export type UserDefinedContext = RequiredBy<PublicContext, "id">
   /**
+   * @internal
    * Whether the user is tabbing backward.
@@ -59,2 +71,3 @@ */
   /**
+   * @internal
    * Whether the toggle group has focusable toggles.
@@ -64,2 +77,3 @@ */
   /**
+   * @internal
    * Whether the toggle was focused by a click.
@@ -69,2 +83,3 @@ */
   /**
+   * @internal
    * The value of the toggle that was focused.
@@ -74,2 +89,3 @@ */
   /**
+   * @internal
    * Whether the toggle group is within a toolbar.
@@ -81,5 +97,5 @@ * This is used to determine whether to use roving tab index.
 
-export type MachineContext = PublicContext & PrivateContext & ComputedContext
+export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
 
-export type MachineState = {
+export interface MachineState {
   value: "idle" | "focused"
@@ -92,3 +108,7 @@ }
 
-export type ToggleProps = {
+/* -----------------------------------------------------------------------------
+ * Component API
+ * -----------------------------------------------------------------------------*/
+
+export interface ToggleProps {
   value: string
@@ -98,3 +118,3 @@ disabled?: boolean
 
-export type MachineApi<T extends PropTypes = PropTypes> = {
+export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
@@ -101,0 +121,0 @@ * The value of the toggle group.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

75798

decreased by-0.37%

Lines of code

1132

decreased by-0.35%

Dependency changes

• + Added@zag-js/anatomy@0.20.0(transitive)

• + Added@zag-js/core@0.20.0(transitive)

• + Added@zag-js/dom-event@0.20.0(transitive)

• + Added@zag-js/dom-query@0.20.0(transitive)

• + Added@zag-js/store@0.20.0(transitive)

• + Added@zag-js/text-selection@0.20.0(transitive)

• + Added@zag-js/types@0.20.0(transitive)

• + Added@zag-js/utils@0.20.0(transitive)

• - Removed@zag-js/anatomy@0.19.1(transitive)

• - Removed@zag-js/core@0.19.1(transitive)

• - Removed@zag-js/dom-event@0.19.1(transitive)

• - Removed@zag-js/dom-query@0.19.1(transitive)

• - Removed@zag-js/store@0.19.1(transitive)

• - Removed@zag-js/text-selection@0.19.1(transitive)

• - Removed@zag-js/types@0.19.1(transitive)

• - Removed@zag-js/utils@0.19.1(transitive)

• Updated@zag-js/anatomy@0.20.0

• Updated@zag-js/core@0.20.0

• Updated@zag-js/dom-event@0.20.0

• Updated@zag-js/dom-query@0.20.0

• Updated@zag-js/types@0.20.0

• Updated@zag-js/utils@0.20.0