@zag-js/toggle-group
Advanced tools
Comparing version 0.20.0 to 0.21.0
@@ -0,1 +1,2 @@ | ||
import * as _zag_js_anatomy from '@zag-js/anatomy'; | ||
import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Orientation, Context, NormalizeProps } from '@zag-js/types'; | ||
@@ -5,2 +6,4 @@ import * as _zag_js_core from '@zag-js/core'; | ||
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item">; | ||
interface ValueChangeDetails { | ||
@@ -59,6 +62,12 @@ value: string[]; | ||
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> { | ||
@@ -73,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"]; | ||
} | ||
@@ -82,2 +95,2 @@ | ||
export { MachineApi as Api, UserDefinedContext as Context, connect, machine }; | ||
export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine }; |
@@ -23,2 +23,3 @@ "use strict"; | ||
__export(src_exports, { | ||
anatomy: () => anatomy, | ||
connect: () => connect, | ||
@@ -29,2 +30,7 @@ machine: () => machine | ||
// src/toggle-group.anatomy.ts | ||
var import_anatomy = require("@zag-js/anatomy"); | ||
var anatomy = (0, import_anatomy.createAnatomy)("toggle-group").parts("root", "item"); | ||
var parts = anatomy.build(); | ||
// src/toggle-group.connect.ts | ||
@@ -34,7 +40,2 @@ var import_dom_event = require("@zag-js/dom-event"); | ||
// src/toggle-group.anatomy.ts | ||
var import_anatomy = require("@zag-js/anatomy"); | ||
var anatomy = (0, import_anatomy.createAnatomy)("toggle-group").parts("root", "toggle"); | ||
var parts = anatomy.build(); | ||
// src/toggle-group.dom.ts | ||
@@ -45,3 +46,3 @@ var import_dom_query = require("@zag-js/dom-query"); | ||
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)), | ||
@@ -65,2 +66,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 { | ||
@@ -71,2 +85,3 @@ value, | ||
}, | ||
getItemState, | ||
rootProps: normalize.element({ | ||
@@ -83,5 +98,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) | ||
@@ -92,37 +111,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)()) { | ||
@@ -133,5 +151,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 = { | ||
@@ -305,3 +322,3 @@ Tab(event2) { | ||
} else { | ||
next = [evt.value]; | ||
next = (0, import_utils2.isEqual)(ctx2.value, [evt.value]) ? [] : [evt.value]; | ||
} | ||
@@ -353,2 +370,3 @@ set.value(ctx2, next); | ||
0 && (module.exports = { | ||
anatomy, | ||
connect, | ||
@@ -355,0 +373,0 @@ machine |
{ | ||
"name": "@zag-js/toggle-group", | ||
"version": "0.20.0", | ||
"version": "0.21.0", | ||
"description": "Core logic for the toggle widget implemented as a state machine", | ||
@@ -30,8 +30,8 @@ "keywords": [ | ||
"dependencies": { | ||
"@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" | ||
"@zag-js/anatomy": "0.21.0", | ||
"@zag-js/dom-query": "0.21.0", | ||
"@zag-js/dom-event": "0.21.0", | ||
"@zag-js/utils": "0.21.0", | ||
"@zag-js/core": "0.21.0", | ||
"@zag-js/types": "0.21.0" | ||
}, | ||
@@ -38,0 +38,0 @@ "devDependencies": { |
@@ -0,3 +1,4 @@ | ||
export { anatomy } from "./toggle-group.anatomy" | ||
export { connect } from "./toggle-group.connect" | ||
export { machine } from "./toggle-group.machine" | ||
export type { UserDefinedContext as Context, MachineApi as Api } from "./toggle-group.types" | ||
export type { MachineApi as Api, UserDefinedContext as Context } from "./toggle-group.types" |
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() |
@@ -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 = { |
@@ -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)) |
@@ -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) |
@@ -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"] | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
79878
1203
+ Added@zag-js/anatomy@0.21.0(transitive)
+ Added@zag-js/core@0.21.0(transitive)
+ Added@zag-js/dom-event@0.21.0(transitive)
+ Added@zag-js/dom-query@0.21.0(transitive)
+ Added@zag-js/store@0.21.0(transitive)
+ Added@zag-js/text-selection@0.21.0(transitive)
+ Added@zag-js/types@0.21.0(transitive)
+ Added@zag-js/utils@0.21.0(transitive)
- Removed@zag-js/anatomy@0.20.0(transitive)
- Removed@zag-js/core@0.20.0(transitive)
- Removed@zag-js/dom-event@0.20.0(transitive)
- Removed@zag-js/dom-query@0.20.0(transitive)
- Removed@zag-js/store@0.20.0(transitive)
- Removed@zag-js/text-selection@0.20.0(transitive)
- Removed@zag-js/types@0.20.0(transitive)
- Removed@zag-js/utils@0.20.0(transitive)
Updated@zag-js/anatomy@0.21.0
Updated@zag-js/core@0.21.0
Updated@zag-js/dom-event@0.21.0
Updated@zag-js/dom-query@0.21.0
Updated@zag-js/types@0.21.0
Updated@zag-js/utils@0.21.0