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

Comparing version 0.0.0-dev-20230918144752 to 0.0.0-dev-20230919092110

dist/index.d.ts

@@ -6,3 +6,3 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "toggle">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item">;
 
@@ -62,6 +62,12 @@ interface ValueChangeDetails {
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-interface ToggleProps {
+interface ItemProps {
     value: string;
     disabled?: boolean;
 }
+interface ItemState {
+    id: string;
+    isDisabled: boolean;
+    isPressed: boolean;
+    isFocused: boolean;
+}
 interface MachineApi<T extends PropTypes = PropTypes> {
@@ -76,4 +82,8 @@ /**
     setValue: (values: string[]) => void;
+    /**
+     * Returns the state of the toggle item.
+     */
+    getItemState(props: ItemProps): ItemState;
     rootProps: T["element"];
-    getToggleProps(props: ToggleProps): T["button"];
+    getItemProps(props: ItemProps): T["button"];
 }
@@ -80,0 +90,0 @@

dist/index.js

@@ -31,3 +31,3 @@ "use strict";
 var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("toggle-group").parts("root", "toggle");
+var anatomy = (0, import_anatomy.createAnatomy)("toggle-group").parts("root", "item");
 var parts = anatomy.build();
@@ -44,3 +44,3 @@
   getRootId: (ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`,
-  getToggleId: (ctx, value) => ctx.ids?.toggle?.(value) ?? `toggle-group:${ctx.id}:${value}`,
+  getItemId: (ctx, value) => ctx.ids?.toggle?.(value) ?? `toggle-group:${ctx.id}:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
@@ -64,2 +64,15 @@ getElements: (ctx) => {
   const rovingFocus = state.context.rovingFocus;
+  const isHorizontal = state.context.orientation === "horizontal";
+  function getItemState(props) {
+    const isDisabled = !!props.disabled || !!disabled;
+    const isPressed = value?.includes(props.value);
+    const id = dom.getItemId(state.context, props.value);
+    const isFocused = state.context.focusedId === id;
+    return {
+      id,
+      isDisabled,
+      isPressed,
+      isFocused
+    };
+  }
   return {
@@ -70,2 +83,3 @@ value,
     },
+    getItemState,
     rootProps: normalize.element({
@@ -82,5 +96,9 @@ ...parts.root.attrs,
       onMouseDown() {
+        if (disabled)
+          return;
         send("ROOT.MOUSE_DOWN");
       },
       onFocus(event) {
+        if (disabled)
+          return;
         if (!(0, import_dom_query2.isSelfEvent)(event) || !!state.context.isClickFocus || state.context.isTabbingBackward)
@@ -91,37 +109,36 @@ return;
       onBlur() {
+        if (disabled)
+          return;
         send("ROOT.BLUR");
       }
     }),
-    getToggleProps(props) {
-      const isDisabled = props.disabled || disabled;
-      const isPressed = value?.includes(props.value);
-      const id = dom.getToggleId(state.context, props.value);
-      const isFocused = state.context.focusedId === id;
-      const rovingTabIndex = isFocused ? 0 : -1;
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      const rovingTabIndex = itemState.isFocused ? 0 : -1;
       return normalize.button({
-        ...parts.toggle.attrs,
-        id,
+        ...parts.item.attrs,
+        id: itemState.id,
         type: "button",
         "data-ownedby": dom.getRootId(state.context),
-        "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
-        disabled: isDisabled,
+        "data-focus": (0, import_dom_query2.dataAttr)(itemState.isFocused),
+        disabled: itemState.isDisabled,
         tabIndex: rovingFocus ? rovingTabIndex : void 0,
         // radio
         role: isSingle ? "radio" : void 0,
-        "aria-checked": isSingle ? isPressed : void 0,
-        "aria-pressed": isSingle ? void 0 : isPressed,
+        "aria-checked": isSingle ? itemState.isPressed : void 0,
+        "aria-pressed": isSingle ? void 0 : itemState.isPressed,
         //
-        "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+        "data-disabled": (0, import_dom_query2.dataAttr)(itemState.isDisabled),
         "data-orientation": state.context.orientation,
         dir: state.context.dir,
-        "data-state": isPressed ? "on" : "off",
+        "data-state": itemState.isPressed ? "on" : "off",
         onFocus() {
-          if (isDisabled)
+          if (itemState.isDisabled)
             return;
-          send({ type: "TOGGLE.FOCUS", id });
+          send({ type: "TOGGLE.FOCUS", id: itemState.id });
         },
         onClick(event) {
-          if (isDisabled)
+          if (itemState.isDisabled)
             return;
-          send({ type: "TOGGLE.CLICK", id, value: props.value });
+          send({ type: "TOGGLE.CLICK", id: itemState.id, value: props.value });
           if ((0, import_dom_query2.isSafari)()) {
@@ -132,5 +149,4 @@ event.currentTarget.focus({ preventScroll: true });
         onKeyDown(event) {
-          if (isDisabled || !(0, import_dom_query2.isSelfEvent)(event))
+          if (itemState.isDisabled || !(0, import_dom_query2.isSelfEvent)(event))
             return;
-          const isHorizontal = state.context.orientation === "horizontal";
           const keyMap = {
@@ -304,3 +320,3 @@ Tab(event2) {
           } else {
-            next = [evt.value];
+            next = (0, import_utils2.isEqual)(ctx2.value, [evt.value]) ? [] : [evt.value];
           }
@@ -307,0 +323,0 @@ set.value(ctx2, next);

package.json

 {
   "name": "@zag-js/toggle-group",
-  "version": "0.0.0-dev-20230918144752",
+  "version": "0.0.0-dev-20230919092110",
   "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-20230918144752",
-    "@zag-js/dom-query": "0.0.0-dev-20230918144752",
-    "@zag-js/dom-event": "0.0.0-dev-20230918144752",
-    "@zag-js/utils": "0.0.0-dev-20230918144752",
-    "@zag-js/core": "0.0.0-dev-20230918144752",
-    "@zag-js/types": "0.0.0-dev-20230918144752"
+    "@zag-js/anatomy": "0.0.0-dev-20230919092110",
+    "@zag-js/dom-query": "0.0.0-dev-20230919092110",
+    "@zag-js/dom-event": "0.0.0-dev-20230919092110",
+    "@zag-js/utils": "0.0.0-dev-20230919092110",
+    "@zag-js/core": "0.0.0-dev-20230919092110",
+    "@zag-js/types": "0.0.0-dev-20230919092110"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

src/toggle-group.anatomy.ts

 import { createAnatomy } from "@zag-js/anatomy"
 
-export const anatomy = createAnatomy("toggle-group").parts("root", "toggle")
+export const anatomy = createAnatomy("toggle-group").parts("root", "item")
 export const parts = anatomy.build()

src/toggle-group.connect.ts

@@ -6,3 +6,3 @@ import { getEventKey, type EventKeyMap } from "@zag-js/dom-event"
 import { dom } from "./toggle-group.dom"
-import type { MachineApi, Send, State } from "./toggle-group.types"
+import type { ItemProps, ItemState, MachineApi, Send, State } from "./toggle-group.types"
 
@@ -14,3 +14,18 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const rovingFocus = state.context.rovingFocus
+  const isHorizontal = state.context.orientation === "horizontal"
 
+  function getItemState(props: ItemProps): ItemState {
+    const isDisabled = !!props.disabled || !!disabled
+    const isPressed = value?.includes(props.value)
+    const id = dom.getItemId(state.context, props.value)
+    const isFocused = state.context.focusedId === id
+
+    return {
+      id,
+      isDisabled,
+      isPressed,
+      isFocused,
+    }
+  }
+
   return {
@@ -21,2 +36,3 @@ value,
     },
+    getItemState,
 
@@ -34,5 +50,7 @@ rootProps: normalize.element({
       onMouseDown() {
+        if (disabled) return
         send("ROOT.MOUSE_DOWN")
       },
       onFocus(event) {
+        if (disabled) return
         if (!isSelfEvent(event) || !!state.context.isClickFocus || state.context.isTabbingBackward) return
@@ -42,2 +60,3 @@ send("ROOT.FOCUS")
       onBlur() {
+        if (disabled) return
         send("ROOT.BLUR")
@@ -47,34 +66,30 @@ },
 
-    getToggleProps(props) {
-      const isDisabled = props.disabled || disabled
-      const isPressed = value?.includes(props.value)
+    getItemProps(props) {
+      const itemState = getItemState(props)
+      const rovingTabIndex = itemState.isFocused ? 0 : -1
 
-      const id = dom.getToggleId(state.context, props.value)
-      const isFocused = state.context.focusedId === id
-      const rovingTabIndex = isFocused ? 0 : -1
-
       return normalize.button({
-        ...parts.toggle.attrs,
-        id,
+        ...parts.item.attrs,
+        id: itemState.id,
         type: "button",
         "data-ownedby": dom.getRootId(state.context),
-        "data-focus": dataAttr(isFocused),
-        disabled: isDisabled,
+        "data-focus": dataAttr(itemState.isFocused),
+        disabled: itemState.isDisabled,
         tabIndex: rovingFocus ? rovingTabIndex : undefined,
         // radio
         role: isSingle ? "radio" : undefined,
-        "aria-checked": isSingle ? isPressed : undefined,
-        "aria-pressed": isSingle ? undefined : isPressed,
+        "aria-checked": isSingle ? itemState.isPressed : undefined,
+        "aria-pressed": isSingle ? undefined : itemState.isPressed,
         //
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": dataAttr(itemState.isDisabled),
         "data-orientation": state.context.orientation,
         dir: state.context.dir,
-        "data-state": isPressed ? "on" : "off",
+        "data-state": itemState.isPressed ? "on" : "off",
         onFocus() {
-          if (isDisabled) return
-          send({ type: "TOGGLE.FOCUS", id })
+          if (itemState.isDisabled) return
+          send({ type: "TOGGLE.FOCUS", id: itemState.id })
         },
         onClick(event) {
-          if (isDisabled) return
-          send({ type: "TOGGLE.CLICK", id, value: props.value })
+          if (itemState.isDisabled) return
+          send({ type: "TOGGLE.CLICK", id: itemState.id, value: props.value })
           if (isSafari()) {
@@ -85,4 +100,3 @@ event.currentTarget.focus({ preventScroll: true })
         onKeyDown(event) {
-          if (isDisabled || !isSelfEvent(event)) return
-          const isHorizontal = state.context.orientation === "horizontal"
+          if (itemState.isDisabled || !isSelfEvent(event)) return
 
@@ -89,0 +103,0 @@ const keyMap: EventKeyMap = {

src/toggle-group.dom.ts

@@ -7,6 +7,5 @@ import { createScope, nextById, prevById, queryAll } from "@zag-js/dom-query"
   getRootId: (ctx: Ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`,
-  getToggleId: (ctx: Ctx, value: string) => ctx.ids?.toggle?.(value) ?? `toggle-group:${ctx.id}:${value}`,
+  getItemId: (ctx: Ctx, value: string) => ctx.ids?.toggle?.(value) ?? `toggle-group:${ctx.id}:${value}`,
 
   getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-
   getElements: (ctx: Ctx) => {
@@ -13,0 +12,0 @@ const ownerId = CSS.escape(dom.getRootId(ctx))

src/toggle-group.machine.ts

@@ -129,3 +129,3 @@ import { createMachine, guards } from "@zag-js/core"
           } else {
-            next = [evt.value]
+            next = isEqual(ctx.value, [evt.value]) ? [] : [evt.value]
           }
@@ -132,0 +132,0 @@ set.value(ctx, next)

src/toggle-group.types.ts

@@ -105,3 +105,3 @@ import type { StateMachine as S } from "@zag-js/core"
 
-export interface ToggleProps {
+export interface ItemProps {
   value: string
@@ -111,2 +111,9 @@ disabled?: boolean
 
+export interface ItemState {
+  id: string
+  isDisabled: boolean
+  isPressed: boolean
+  isFocused: boolean
+}
+
 export interface MachineApi<T extends PropTypes = PropTypes> {
@@ -121,4 +128,8 @@ /**
   setValue: (values: string[]) => void
+  /**
+   * Returns the state of the toggle item.
+   */
+  getItemState(props: ItemProps): ItemState
   rootProps: T["element"]
-  getToggleProps(props: ToggleProps): T["button"]
+  getItemProps(props: ItemProps): T["button"]
 }

No alert changes

Improved metrics

Total package byte prevSize

80004

4.78%

Lines of code

1203

5.71%

Dependency changes

• + Added

  @zag-js/anatomy@0.0.0-dev-20230919092110
  (transitive)

• + Added

  @zag-js/core@0.0.0-dev-20230919092110
  (transitive)

• + Added

  @zag-js/dom-event@0.0.0-dev-20230919092110
  (transitive)

• + Added

  @zag-js/dom-query@0.0.0-dev-20230919092110
  (transitive)

• + Added

  @zag-js/store@0.0.0-dev-20230919092110
  (transitive)

• + Added

  @zag-js/text-selection@0.0.0-dev-20230919092110
  (transitive)

• + Added

  @zag-js/types@0.0.0-dev-20230919092110
  (transitive)

• + Added

  @zag-js/utils@0.0.0-dev-20230919092110
  (transitive)

• - Removed

  @zag-js/anatomy@0.0.0-dev-20230918144752
  (transitive)

• - Removed

  @zag-js/core@0.0.0-dev-20230918144752
  (transitive)

• - Removed

  @zag-js/dom-event@0.0.0-dev-20230918144752
  (transitive)

• - Removed

  @zag-js/dom-query@0.0.0-dev-20230918144752
  (transitive)

• - Removed

  @zag-js/store@0.0.0-dev-20230918144752
  (transitive)

• - Removed

  @zag-js/text-selection@0.0.0-dev-20230918144752
  (transitive)

• - Removed

  @zag-js/types@0.0.0-dev-20230918144752
  (transitive)

• - Removed

  @zag-js/utils@0.0.0-dev-20230918144752
  (transitive)

• Updated

  @zag-js/anatomy@0.0.0-dev-20230919092110

• Updated

  @zag-js/core@0.0.0-dev-20230919092110

• Updated

  @zag-js/dom-event@0.0.0-dev-20230919092110

• Updated

  @zag-js/dom-query@0.0.0-dev-20230919092110

• Updated

  @zag-js/types@0.0.0-dev-20230919092110

• Updated

  @zag-js/utils@0.0.0-dev-20230919092110