From bcad01c1c149810f0c3b19f2d0b3aa406817ad41 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 21:28:24 +0100 Subject: [PATCH 01/31] refactor: accordion --- .changeset/witty-tomatoes-roll.md | 8 ++++ .../accordion/src/accordion.connect.ts | 42 +++++++++---------- .../machines/accordion/src/accordion.types.ts | 28 ++++++++++--- 3 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 .changeset/witty-tomatoes-roll.md diff --git a/.changeset/witty-tomatoes-roll.md b/.changeset/witty-tomatoes-roll.md new file mode 100644 index 0000000000..15735e1686 --- /dev/null +++ b/.changeset/witty-tomatoes-roll.md @@ -0,0 +1,8 @@ +--- +"@zag-js/accordion": minor +--- + +- Rename `getItemState` properties + - `isOpen` -> `expanded` + - `isDisabled` -> `disabled` + - `isFocused` -> `focused` diff --git a/packages/machines/accordion/src/accordion.connect.ts b/packages/machines/accordion/src/accordion.connect.ts index 0314780020..5e9b6219a3 100644 --- a/packages/machines/accordion/src/accordion.connect.ts +++ b/packages/machines/accordion/src/accordion.connect.ts @@ -20,9 +20,9 @@ export function connect(state: State, send: Send, normalize function getItemState(props: ItemProps): ItemState { return { - isOpen: value.includes(props.value), - isFocused: focusedValue === props.value, - isDisabled: Boolean(props.disabled ?? state.context.disabled), + expanded: value.includes(props.value), + focused: focusedValue === props.value, + disabled: Boolean(props.disabled ?? state.context.disabled), } } @@ -45,9 +45,9 @@ export function connect(state: State, send: Send, normalize ...parts.item.attrs, dir: state.context.dir, id: dom.getItemId(state.context, props.value), - "data-state": itemState.isOpen ? "open" : "closed", - "data-focus": dataAttr(itemState.isFocused), - "data-disabled": dataAttr(itemState.isDisabled), + "data-state": itemState.expanded ? "open" : "closed", + "data-focus": dataAttr(itemState.focused), + "data-disabled": dataAttr(itemState.disabled), "data-orientation": state.context.orientation, }) }, @@ -60,10 +60,10 @@ export function connect(state: State, send: Send, normalize role: "region", id: dom.getItemContentId(state.context, props.value), "aria-labelledby": dom.getItemTriggerId(state.context, props.value), - hidden: !itemState.isOpen, - "data-state": itemState.isOpen ? "open" : "closed", - "data-disabled": dataAttr(itemState.isDisabled), - "data-focus": dataAttr(itemState.isFocused), + hidden: !itemState.expanded, + "data-state": itemState.expanded ? "open" : "closed", + "data-disabled": dataAttr(itemState.disabled), + "data-focus": dataAttr(itemState.focused), "data-orientation": state.context.orientation, }) }, @@ -74,9 +74,9 @@ export function connect(state: State, send: Send, normalize ...parts.itemIndicator.attrs, dir: state.context.dir, "aria-hidden": true, - "data-state": itemState.isOpen ? "open" : "closed", - "data-disabled": dataAttr(itemState.isDisabled), - "data-focus": dataAttr(itemState.isFocused), + "data-state": itemState.expanded ? "open" : "closed", + "data-disabled": dataAttr(itemState.disabled), + "data-focus": dataAttr(itemState.focused), "data-orientation": state.context.orientation, }) }, @@ -91,22 +91,22 @@ export function connect(state: State, send: Send, normalize dir: state.context.dir, id: dom.getItemTriggerId(state.context, value), "aria-controls": dom.getItemContentId(state.context, value), - "aria-expanded": itemState.isOpen, - disabled: itemState.isDisabled, + "aria-expanded": itemState.expanded, + disabled: itemState.disabled, "data-orientation": state.context.orientation, - "aria-disabled": itemState.isDisabled, - "data-state": itemState.isOpen ? "open" : "closed", + "aria-disabled": itemState.disabled, + "data-state": itemState.expanded ? "open" : "closed", "data-ownedby": dom.getRootId(state.context), onFocus() { - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "TRIGGER.FOCUS", value }) }, onBlur() { - if (itemState.isDisabled) return + if (itemState.disabled) return send("TRIGGER.BLUR") }, onClick(event) { - if (itemState.isDisabled) return + if (itemState.disabled) return if (isSafari()) { event.currentTarget.focus() } @@ -114,7 +114,7 @@ export function connect(state: State, send: Send, normalize }, onKeyDown(event) { if (event.defaultPrevented) return - if (itemState.isDisabled) return + if (itemState.disabled) return const keyMap: EventKeyMap = { ArrowDown() { diff --git a/packages/machines/accordion/src/accordion.types.ts b/packages/machines/accordion/src/accordion.types.ts index 93276bd2d1..7f98b6cfe5 100644 --- a/packages/machines/accordion/src/accordion.types.ts +++ b/packages/machines/accordion/src/accordion.types.ts @@ -50,11 +50,11 @@ interface PublicContext extends DirectionProperty, CommonProperties { /** * The callback fired when the state of opened/closed accordion items changes. */ - onValueChange?: (details: ValueChangeDetails) => void + onValueChange?(details: ValueChangeDetails): void /** * The callback fired when the focused accordion item changes. */ - onFocusChange?: (details: FocusChangeDetails) => void + onFocusChange?(details: FocusChangeDetails): void /** * The orientation of the accordion items. */ @@ -94,14 +94,29 @@ export type Send = S.Send * -----------------------------------------------------------------------------*/ export interface ItemProps { + /** + * The value of the accordion item. + */ value: string + /** + * Whether the accordion item is disabled. + */ disabled?: boolean } export interface ItemState { - isOpen: boolean - isFocused: boolean - isDisabled: boolean + /** + * Whether the accordion item is expanded. + */ + expanded: boolean + /** + * Whether the accordion item is focused. + */ + focused: boolean + /** + * Whether the accordion item is disabled. + */ + disabled: boolean } export interface MachineApi { @@ -120,7 +135,8 @@ export interface MachineApi { /** * Gets the state of an accordion item. */ - getItemState: (props: ItemProps) => ItemState + getItemState(props: ItemProps): ItemState + rootProps: T["element"] getItemProps(props: ItemProps): T["element"] getItemContentProps(props: ItemProps): T["element"] From 79bb3c4c1b4a44fa34c239e16f19546d9f54b4b4 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 21:32:53 +0100 Subject: [PATCH 02/31] refactor: avatar --- .changeset/friendly-rings-impress.md | 6 ++++++ packages/machines/avatar/src/avatar.connect.ts | 15 ++++++--------- packages/machines/avatar/src/avatar.types.ts | 10 ++++------ packages/machines/avatar/src/index.ts | 2 +- 4 files changed, 17 insertions(+), 16 deletions(-) create mode 100644 .changeset/friendly-rings-impress.md diff --git a/.changeset/friendly-rings-impress.md b/.changeset/friendly-rings-impress.md new file mode 100644 index 0000000000..38784828c0 --- /dev/null +++ b/.changeset/friendly-rings-impress.md @@ -0,0 +1,6 @@ +--- +"@zag-js/avatar": minor +--- + +- Rename `api.isLoaded` to `api.loaded` +- Remove `api.showFallback` since it's equivalent to `!api.loaded` diff --git a/packages/machines/avatar/src/avatar.connect.ts b/packages/machines/avatar/src/avatar.connect.ts index 2b146a8686..9d8ec7535a 100644 --- a/packages/machines/avatar/src/avatar.connect.ts +++ b/packages/machines/avatar/src/avatar.connect.ts @@ -4,12 +4,9 @@ import { dom } from "./avatar.dom" import type { MachineApi, Send, State } from "./avatar.types" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { - const isLoaded = state.matches("loaded") - const showFallback = !isLoaded - + const loaded = state.matches("loaded") return { - isLoaded, - showFallback, + loaded, setSrc(src) { send({ type: "SRC.SET", src }) }, @@ -28,10 +25,10 @@ export function connect(state: State, send: Send, normalize imageProps: normalize.img({ ...parts.image.attrs, - hidden: !isLoaded, + hidden: !loaded, dir: state.context.dir, id: dom.getImageId(state.context), - "data-state": isLoaded ? "visible" : "hidden", + "data-state": loaded ? "visible" : "hidden", onLoad() { send({ type: "IMG.LOADED", src: "element" }) }, @@ -44,8 +41,8 @@ export function connect(state: State, send: Send, normalize ...parts.fallback.attrs, dir: state.context.dir, id: dom.getFallbackId(state.context), - hidden: isLoaded, - "data-state": isLoaded ? "hidden" : "visible", + hidden: loaded, + "data-state": loaded ? "hidden" : "visible", }), } } diff --git a/packages/machines/avatar/src/avatar.types.ts b/packages/machines/avatar/src/avatar.types.ts index 28ff0eef10..6421d361e1 100644 --- a/packages/machines/avatar/src/avatar.types.ts +++ b/packages/machines/avatar/src/avatar.types.ts @@ -5,8 +5,10 @@ import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from * Callback details * -----------------------------------------------------------------------------*/ +export type LoadStatus = "error" | "loaded" + export interface StatusChangeDetails { - status: "loaded" | "error" + status: LoadStatus } /* ----------------------------------------------------------------------------- @@ -44,11 +46,7 @@ export interface MachineApi { /** * Whether the image is loaded. */ - isLoaded: boolean - /** - * Whether the fallback is shown. - */ - showFallback: boolean + loaded: boolean /** * Function to set new src. */ diff --git a/packages/machines/avatar/src/index.ts b/packages/machines/avatar/src/index.ts index 53c0204402..4ecd5fdbc8 100644 --- a/packages/machines/avatar/src/index.ts +++ b/packages/machines/avatar/src/index.ts @@ -2,4 +2,4 @@ export { anatomy } from "./avatar.anatomy" export { connect } from "./avatar.connect" export { machine } from "./avatar.machine" export * from "./avatar.props" -export type { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails } from "./avatar.types" +export type { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails, LoadStatus } from "./avatar.types" From bd23cb278cb1f0616df61a623ef9aa9070bdff52 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 21:35:48 +0100 Subject: [PATCH 03/31] refactor: carousel --- .changeset/swift-hornets-hug.md | 12 +++++++ .../machines/carousel/src/carousel.connect.ts | 32 ++++++++----------- .../machines/carousel/src/carousel.types.ts | 12 +++---- 3 files changed, 31 insertions(+), 25 deletions(-) create mode 100644 .changeset/swift-hornets-hug.md diff --git a/.changeset/swift-hornets-hug.md b/.changeset/swift-hornets-hug.md new file mode 100644 index 0000000000..db776ab2e9 --- /dev/null +++ b/.changeset/swift-hornets-hug.md @@ -0,0 +1,12 @@ +--- +"@zag-js/carousel": minor +--- + +- Rename `api.getItemState` properties + + - `isCurrent` to `current` + - `isNext` to `next` + - `isPrevious` to `previous` + - `isInView` to `inView` + +- Rename `api.isAutoPlay` to `api.autoPlaying` diff --git a/packages/machines/carousel/src/carousel.connect.ts b/packages/machines/carousel/src/carousel.connect.ts index b199e93c06..810902145b 100644 --- a/packages/machines/carousel/src/carousel.connect.ts +++ b/packages/machines/carousel/src/carousel.connect.ts @@ -2,14 +2,14 @@ import { dataAttr, isDom } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { parts } from "./carousel.anatomy" import { dom } from "./carousel.dom" -import type { MachineApi, Send, IndicatorProps, ItemProps, State, ItemState } from "./carousel.types" +import type { IndicatorProps, ItemProps, ItemState, MachineApi, Send, State } from "./carousel.types" import { getSlidesInView } from "./utils/get-slide-in-view" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { const canScrollNext = state.context.canScrollNext const canScrollPrev = state.context.canScrollPrev - const isHorizontal = state.context.isHorizontal - const isAutoplay = state.matches("autoplay") + const horizontal = state.context.isHorizontal + const autoPlaying = state.matches("autoplay") const activeSnap = state.context.scrollSnaps[state.context.index] const slidesInView = isDom() ? getSlidesInView(state.context)(activeSnap) : [] @@ -18,38 +18,32 @@ export function connect(state: State, send: Send, normalize const { index } = props return { valueText: `Slide ${index + 1}`, - isCurrent: index === state.context.index, - isNext: index === state.context.index + 1, - isPrevious: index === state.context.index - 1, - isInView: slidesInView.includes(index), + current: index === state.context.index, + next: index === state.context.index + 1, + previous: index === state.context.index - 1, + inView: slidesInView.includes(index), } } return { index: state.context.index, scrollProgress: state.context.scrollProgress, - isAutoplay, + autoPlaying, canScrollNext, canScrollPrev, - scrollTo(index, jump) { send({ type: "GOTO", index, jump }) }, - scrollToNext() { send("NEXT") }, - scrollToPrevious() { send("PREV") }, - getItemState: getItemState, - play() { send("PLAY") }, - pause() { send("PAUSE") }, @@ -82,8 +76,8 @@ export function connect(state: State, send: Send, normalize dir: state.context.dir, style: { display: "flex", - flexDirection: isHorizontal ? "row" : "column", - [isHorizontal ? "height" : "width"]: "auto", + flexDirection: horizontal ? "row" : "column", + [horizontal ? "height" : "width"]: "auto", gap: "var(--slide-spacing)", transform: state.context.translateValue, transitionProperty: "transform", @@ -101,8 +95,8 @@ export function connect(state: State, send: Send, normalize ...parts.item.attrs, id: dom.getItemId(state.context, index), dir: state.context.dir, - "data-current": dataAttr(sliderState.isCurrent), - "data-inview": dataAttr(sliderState.isInView), + "data-current": dataAttr(sliderState.current), + "data-inview": dataAttr(sliderState.inView), role: "group", "aria-roledescription": "slide", "data-orientation": state.context.orientation, @@ -110,7 +104,7 @@ export function connect(state: State, send: Send, normalize style: { position: "relative", flex: "0 0 var(--slide-size)", - [isHorizontal ? "minWidth" : "minHeight"]: "0px", + [horizontal ? "minWidth" : "minHeight"]: "0px", }, }) }, diff --git a/packages/machines/carousel/src/carousel.types.ts b/packages/machines/carousel/src/carousel.types.ts index b383c1bf8e..f07e8cd41a 100644 --- a/packages/machines/carousel/src/carousel.types.ts +++ b/packages/machines/carousel/src/carousel.types.ts @@ -103,10 +103,10 @@ export interface ItemProps { export interface ItemState { valueText: string - isCurrent: boolean - isNext: boolean - isPrevious: boolean - isInView: boolean + current: boolean + next: boolean + previous: boolean + inView: boolean } export interface IndicatorProps { @@ -124,9 +124,9 @@ export interface MachineApi { */ scrollProgress: number /** - * Whether the carousel is currently auto-playing + * Whether the carousel is auto playing */ - isAutoplay: boolean + autoPlaying: boolean /** * Whether the carousel is can scroll to the next slide */ From 19a01dcd41b619f02e36b60bdf9d8a710447673c Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 21:38:22 +0100 Subject: [PATCH 04/31] refactor: checkbox --- .changeset/cyan-parrots-grin.md | 10 ++++++++++ packages/machines/checkbox/src/checkbox.connect.ts | 8 ++++---- packages/machines/checkbox/src/checkbox.types.ts | 8 ++++---- 3 files changed, 18 insertions(+), 8 deletions(-) create mode 100644 .changeset/cyan-parrots-grin.md diff --git a/.changeset/cyan-parrots-grin.md b/.changeset/cyan-parrots-grin.md new file mode 100644 index 0000000000..ca2674ac68 --- /dev/null +++ b/.changeset/cyan-parrots-grin.md @@ -0,0 +1,10 @@ +--- +"@zag-js/checkbox": minor +--- + +Rename `api` properties + +- `isChecked` to `checked` +- `isDisabled` to `disabled` +- `isIndeterminate` to `indeterminate` +- `isFocused` to `focused` diff --git a/packages/machines/checkbox/src/checkbox.connect.ts b/packages/machines/checkbox/src/checkbox.connect.ts index 307448656d..5f42168ea3 100644 --- a/packages/machines/checkbox/src/checkbox.connect.ts +++ b/packages/machines/checkbox/src/checkbox.connect.ts @@ -21,10 +21,10 @@ export function connect(state: State, send: Send, normalize } return { - isChecked, - isDisabled, - isIndeterminate, - isFocused, + checked: isChecked, + disabled: isDisabled, + indeterminate: isIndeterminate, + focused: isFocused, checkedState: state.context.checked, setChecked(checked: CheckedState) { diff --git a/packages/machines/checkbox/src/checkbox.types.ts b/packages/machines/checkbox/src/checkbox.types.ts index b41e80e46f..38056a657d 100644 --- a/packages/machines/checkbox/src/checkbox.types.ts +++ b/packages/machines/checkbox/src/checkbox.types.ts @@ -120,19 +120,19 @@ export interface MachineApi { /** * Whether the checkbox is checked */ - isChecked: boolean + checked: boolean /** * Whether the checkbox is disabled */ - isDisabled: boolean | undefined + disabled: boolean | undefined /** * Whether the checkbox is indeterminate */ - isIndeterminate: boolean + indeterminate: boolean /** * Whether the checkbox is focused */ - isFocused: boolean | undefined + focused: boolean | undefined /** * The checked state of the checkbox */ From 3943536cf2a38433381ba0fffba0c22a0d8c6ced Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 21:38:35 +0100 Subject: [PATCH 05/31] refactor: checkbox --- .../machines/checkbox/src/checkbox.connect.ts | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/machines/checkbox/src/checkbox.connect.ts b/packages/machines/checkbox/src/checkbox.connect.ts index 5f42168ea3..494f40a8ba 100644 --- a/packages/machines/checkbox/src/checkbox.connect.ts +++ b/packages/machines/checkbox/src/checkbox.connect.ts @@ -6,25 +6,25 @@ import { dom } from "./checkbox.dom" import type { CheckedState, MachineApi, Send, State } from "./checkbox.types" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { - const isDisabled = state.context.isDisabled - const isFocused = !isDisabled && state.context.focused - const isChecked = state.context.isChecked - const isIndeterminate = state.context.isIndeterminate + const disabled = state.context.isDisabled + const focused = !disabled && state.context.focused + const checked = state.context.isChecked + const indeterminate = state.context.isIndeterminate const dataAttrs = { "data-active": dataAttr(state.context.active), - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), "data-hover": dataAttr(state.context.hovered), - "data-disabled": dataAttr(isDisabled), - "data-state": isIndeterminate ? "indeterminate" : state.context.checked ? "checked" : "unchecked", + "data-disabled": dataAttr(disabled), + "data-state": indeterminate ? "indeterminate" : state.context.checked ? "checked" : "unchecked", "data-invalid": dataAttr(state.context.invalid), } return { - checked: isChecked, - disabled: isDisabled, - indeterminate: isIndeterminate, - focused: isFocused, + checked, + disabled, + indeterminate, + focused, checkedState: state.context.checked, setChecked(checked: CheckedState) { @@ -32,7 +32,7 @@ export function connect(state: State, send: Send, normalize }, toggleChecked() { - send({ type: "CHECKED.TOGGLE", checked: isChecked, isTrusted: false }) + send({ type: "CHECKED.TOGGLE", checked: checked, isTrusted: false }) }, rootProps: normalize.label({ @@ -42,11 +42,11 @@ export function connect(state: State, send: Send, normalize id: dom.getRootId(state.context), htmlFor: dom.getHiddenInputId(state.context), onPointerMove() { - if (isDisabled) return + if (disabled) return send({ type: "CONTEXT.SET", context: { hovered: true } }) }, onPointerLeave() { - if (isDisabled) return + if (disabled) return send({ type: "CONTEXT.SET", context: { hovered: false } }) }, onClick(event) { @@ -75,16 +75,16 @@ export function connect(state: State, send: Send, normalize ...parts.indicator.attrs, ...dataAttrs, dir: state.context.dir, - hidden: !isIndeterminate && !state.context.checked, + hidden: !indeterminate && !state.context.checked, }), hiddenInputProps: normalize.input({ id: dom.getHiddenInputId(state.context), type: "checkbox", required: state.context.required, - defaultChecked: isChecked, - disabled: isDisabled, - "data-disabled": dataAttr(isDisabled), + defaultChecked: checked, + disabled: disabled, + "data-disabled": dataAttr(disabled), "aria-labelledby": dom.getLabelId(state.context), "aria-invalid": state.context.invalid, name: state.context.name, From d9bc1832f95b5989a2d7a06c602b17a545b6c98b Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 21:40:10 +0100 Subject: [PATCH 06/31] refactor: clipboard --- .changeset/three-planes-mix.md | 5 +++++ .../clipboard/src/clipboard.connect.ts | 18 +++++++++--------- .../machines/clipboard/src/clipboard.types.ts | 2 +- 3 files changed, 15 insertions(+), 10 deletions(-) create mode 100644 .changeset/three-planes-mix.md diff --git a/.changeset/three-planes-mix.md b/.changeset/three-planes-mix.md new file mode 100644 index 0000000000..b417e631fe --- /dev/null +++ b/.changeset/three-planes-mix.md @@ -0,0 +1,5 @@ +--- +"@zag-js/clipboard": minor +--- + +Rename `api.isCopied` to `api.copied` diff --git a/packages/machines/clipboard/src/clipboard.connect.ts b/packages/machines/clipboard/src/clipboard.connect.ts index ed630cec6e..db267e5c61 100644 --- a/packages/machines/clipboard/src/clipboard.connect.ts +++ b/packages/machines/clipboard/src/clipboard.connect.ts @@ -5,10 +5,10 @@ import type { MachineApi, Send, State } from "./clipboard.types" import { dom } from "./clipboard.dom" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { - const isCopied = state.matches("copied") + const copied = state.matches("copied") return { - isCopied, + copied, value: state.context.value, setValue(value) { send({ type: "VALUE.SET", value }) @@ -18,23 +18,23 @@ export function connect(state: State, send: Send, normalize }, rootProps: normalize.element({ ...parts.root.attrs, - "data-copied": dataAttr(isCopied), + "data-copied": dataAttr(copied), id: dom.getRootId(state.context), }), labelProps: normalize.label({ ...parts.label.attrs, htmlFor: dom.getInputId(state.context), - "data-copied": dataAttr(isCopied), + "data-copied": dataAttr(copied), id: dom.getLabelId(state.context), }), controlProps: normalize.element({ ...parts.control.attrs, - "data-copied": dataAttr(isCopied), + "data-copied": dataAttr(copied), }), inputProps: normalize.input({ ...parts.input.attrs, defaultValue: state.context.value, - "data-copied": dataAttr(isCopied), + "data-copied": dataAttr(copied), readOnly: true, "data-readonly": "true", id: dom.getInputId(state.context), @@ -47,8 +47,8 @@ export function connect(state: State, send: Send, normalize }), triggerProps: normalize.button({ ...parts.trigger.attrs, - "aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard", - "data-copied": dataAttr(isCopied), + "aria-label": copied ? "Copied to clipboard" : "Copy to clipboard", + "data-copied": dataAttr(copied), onClick() { send({ type: "COPY" }) }, @@ -56,7 +56,7 @@ export function connect(state: State, send: Send, normalize getIndicatorProps(props) { return normalize.element({ ...parts.indicator.attrs, - hidden: props.copied !== isCopied, + hidden: props.copied !== copied, }) }, } diff --git a/packages/machines/clipboard/src/clipboard.types.ts b/packages/machines/clipboard/src/clipboard.types.ts index 89fb00c7c0..ad5c700061 100644 --- a/packages/machines/clipboard/src/clipboard.types.ts +++ b/packages/machines/clipboard/src/clipboard.types.ts @@ -58,7 +58,7 @@ export interface MachineApi { /** * Whether the value has been copied to the clipboard */ - isCopied: boolean + copied: boolean /** * The value to be copied to the clipboard */ From 54686dbd338bf80fb19bf7ff7a9ce4c00c18b03d Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 21:43:41 +0100 Subject: [PATCH 07/31] refactor: collapsible --- .changeset/real-icons-study.md | 10 +++++ .../collapsible/src/collapsible.connect.ts | 39 +++++++++---------- .../collapsible/src/collapsible.types.ts | 15 +++---- 3 files changed, 34 insertions(+), 30 deletions(-) create mode 100644 .changeset/real-icons-study.md diff --git a/.changeset/real-icons-study.md b/.changeset/real-icons-study.md new file mode 100644 index 0000000000..4d40cc0f28 --- /dev/null +++ b/.changeset/real-icons-study.md @@ -0,0 +1,10 @@ +--- +"@zag-js/collapsible": minor +--- + +Rename `api` properties + +- `isVisible` -> `visible` +- `isDisabled` -> `disabled` +- `isOpen` -> `open` +- `open`, `close` -> `setOpen(true|false)` diff --git a/packages/machines/collapsible/src/collapsible.connect.ts b/packages/machines/collapsible/src/collapsible.connect.ts index 7d2fcfd25d..56b07b12e9 100644 --- a/packages/machines/collapsible/src/collapsible.connect.ts +++ b/packages/machines/collapsible/src/collapsible.connect.ts @@ -5,39 +5,36 @@ import { dom } from "./collapsible.dom" import type { MachineApi, Send, State } from "./collapsible.types" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { - const isVisible = state.matches("open", "closing") - const isOpen = state.matches("open") + const visible = state.matches("open", "closing") + const open = state.matches("open") const height = state.context.height const width = state.context.width - const isDisabled = !!state.context.disabled + const disabled = !!state.context.disabled - const skipMountAnimation = state.context.isMountAnimationPrevented && isOpen + const skipMountAnimation = state.context.isMountAnimationPrevented && open return { - isDisabled, - isVisible, - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + disabled, + visible, + open, + setOpen(open) { + send(open ? "OPEN" : "CLOSE") }, rootProps: normalize.element({ ...parts.root.attrs, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", dir: state.context.dir, id: dom.getRootId(state.context), }), contentProps: normalize.element({ ...parts.content.attrs, - "data-state": skipMountAnimation ? undefined : isOpen ? "open" : "closed", + "data-state": skipMountAnimation ? undefined : open ? "open" : "closed", id: dom.getContentId(state.context), - "data-disabled": dataAttr(isDisabled), - hidden: !isVisible, + "data-disabled": dataAttr(disabled), + hidden: !visible, style: { "--height": height != null ? `${height}px` : undefined, "--width": width != null ? `${width}px` : undefined, @@ -49,13 +46,13 @@ export function connect(state: State, send: Send, normalize id: dom.getTriggerId(state.context), dir: state.context.dir, type: "button", - "data-state": isOpen ? "open" : "closed", - "data-disabled": dataAttr(isDisabled), + "data-state": open ? "open" : "closed", + "data-disabled": dataAttr(disabled), "aria-controls": dom.getContentId(state.context), - "aria-expanded": isVisible || false, + "aria-expanded": visible || false, onClick() { - if (isDisabled) return - send({ type: isOpen ? "CLOSE" : "OPEN", src: "trigger.click" }) + if (disabled) return + send({ type: open ? "CLOSE" : "OPEN", src: "trigger.click" }) }, }), } diff --git a/packages/machines/collapsible/src/collapsible.types.ts b/packages/machines/collapsible/src/collapsible.types.ts index 1534bcd502..a203963455 100644 --- a/packages/machines/collapsible/src/collapsible.types.ts +++ b/packages/machines/collapsible/src/collapsible.types.ts @@ -91,23 +91,20 @@ export interface MachineApi { /** * Whether the collapsible is open. */ - isOpen: boolean + open: boolean /** * Whether the collapsible is visible (open or closing) */ - isVisible: boolean + visible: boolean /** * Whether the collapsible is disabled */ - isDisabled: boolean - /** - * Function to open the collapsible. - */ - open(): void + disabled: boolean /** - * Function to close the collapsible. + * Function to open or close the collapsible. */ - close(): void + setOpen(open: boolean): void + rootProps: T["element"] triggerProps: T["button"] contentProps: T["element"] From ac0eaac73312f2ea606c31f032f5f0e899f54046 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 21:45:17 +0100 Subject: [PATCH 08/31] refactor: color picker --- .changeset/swift-years-do.md | 9 ++ .../color-picker/src/color-picker.connect.ts | 111 +++++++++--------- .../color-picker/src/color-picker.types.ts | 16 +-- 3 files changed, 69 insertions(+), 67 deletions(-) create mode 100644 .changeset/swift-years-do.md diff --git a/.changeset/swift-years-do.md b/.changeset/swift-years-do.md new file mode 100644 index 0000000000..b9cf3b7e8a --- /dev/null +++ b/.changeset/swift-years-do.md @@ -0,0 +1,9 @@ +--- +"@zag-js/color-picker": minor +--- + +Rename `api` properties + +- `isDragging` -> `dragging` +- `isOpen` -> `open` +- `open()`, `close()` -> `setOpen(true|false)` diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts index f284442c8b..fc1f5f4860 100644 --- a/packages/machines/color-picker/src/color-picker.connect.ts +++ b/packages/machines/color-picker/src/color-picker.connect.ts @@ -32,12 +32,12 @@ export function connect(state: State, send: Send, normalize const areaValue = state.context.areaValue const valueAsString = state.context.valueAsString - const isDisabled = state.context.isDisabled - const isInteractive = state.context.isInteractive + const disabled = state.context.isDisabled + const interactive = state.context.isInteractive - const isDragging = state.hasTag("dragging") - const isOpen = state.hasTag("open") - const isFocused = state.hasTag("focused") + const dragging = state.hasTag("dragging") + const open = state.hasTag("open") + const focused = state.hasTag("focused") const getAreaChannels = (props: AreaProps) => { const channels = areaValue.getChannels() @@ -58,21 +58,18 @@ export function connect(state: State, send: Send, normalize return { value: color, valueAsString: color.toString("hex"), - isChecked: color.isEqual(value), - isDisabled: props.disabled || !isInteractive, + checked: color.isEqual(value), + disabled: props.disabled || !interactive, } } return { - isDragging, - isOpen, + dragging, + open, valueAsString, value, - open() { - send({ type: "OPEN" }) - }, - close() { - send({ type: "CLOSE" }) + setOpen(open) { + send({ type: open ? "OPEN" : "CLOSE" }) }, setValue(value) { send({ type: "VALUE.SET", value: normalizeColor(value), src: "set-color" }) @@ -99,7 +96,7 @@ export function connect(state: State, send: Send, normalize ...parts.root.attrs, dir: state.context.dir, id: dom.getRootId(state.context), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(state.context.readOnly), style: { "--value": value.toString("css"), @@ -111,9 +108,9 @@ export function connect(state: State, send: Send, normalize dir: state.context.dir, id: dom.getLabelId(state.context), htmlFor: dom.getHiddenInputId(state.context), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(state.context.readOnly), - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), onClick(event) { event.preventDefault() const inputEl = query(dom.getControlEl(state.context), "[data-channel=hex]") @@ -125,33 +122,33 @@ export function connect(state: State, send: Send, normalize ...parts.control.attrs, id: dom.getControlId(state.context), dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(state.context.readOnly), - "data-state": isOpen ? "open" : "closed", - "data-focus": dataAttr(isFocused), + "data-state": open ? "open" : "closed", + "data-focus": dataAttr(focused), }), triggerProps: normalize.button({ ...parts.trigger.attrs, id: dom.getTriggerId(state.context), dir: state.context.dir, - disabled: isDisabled, + disabled: disabled, "aria-label": `select color. current color is ${valueAsString}`, "aria-controls": dom.getContentId(state.context), "aria-labelledby": dom.getLabelId(state.context), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(state.context.readOnly), "data-placement": currentPlacement, - "aria-expanded": dataAttr(isOpen), - "data-state": isOpen ? "open" : "closed", - "data-focus": dataAttr(isFocused), + "aria-expanded": dataAttr(open), + "data-state": open ? "open" : "closed", + "data-focus": dataAttr(focused), type: "button", onClick() { - if (!isInteractive) return + if (!interactive) return send({ type: "TRIGGER.CLICK" }) }, onBlur() { - if (!isInteractive) return + if (!interactive) return send({ type: "TRIGGER.BLUR" }) }, style: { @@ -171,8 +168,8 @@ export function connect(state: State, send: Send, normalize id: dom.getContentId(state.context), dir: state.context.dir, "data-placement": currentPlacement, - "data-state": isOpen ? "open" : "closed", - hidden: !isOpen, + "data-state": open ? "open" : "closed", + hidden: !open, }), getAreaProps(props = {}) { @@ -188,7 +185,7 @@ export function connect(state: State, send: Send, normalize id: dom.getAreaId(state.context), role: "group", onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (!isLeftClick(evt) || isModifierKey(evt)) return @@ -242,8 +239,8 @@ export function connect(state: State, send: Send, normalize ...parts.areaThumb.attrs, id: dom.getAreaThumbId(state.context), dir: state.context.dir, - tabIndex: isDisabled ? undefined : 0, - "data-disabled": dataAttr(isDisabled), + tabIndex: disabled ? undefined : 0, + "data-disabled": dataAttr(disabled), role: "slider", "aria-valuemin": 0, "aria-valuemax": 100, @@ -261,12 +258,12 @@ export function connect(state: State, send: Send, normalize background: areaValue.withChannelValue("alpha", 1).toString("css"), }, onFocus() { - if (!isInteractive) return + if (!interactive) return send({ type: "AREA.FOCUS", id: "area", channel }) }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const step = getEventStep(event) @@ -331,7 +328,7 @@ export function connect(state: State, send: Send, normalize "data-orientation": orientation, role: "presentation", onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (!isLeftClick(evt) || isModifierKey(evt)) return @@ -387,11 +384,11 @@ export function connect(state: State, send: Send, normalize id: dom.getChannelSliderThumbId(state.context, channel), role: "slider", "aria-label": channel, - tabIndex: isDisabled ? undefined : 0, + tabIndex: disabled ? undefined : 0, "data-channel": channel, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": orientation, - "aria-disabled": dataAttr(isDisabled), + "aria-disabled": dataAttr(disabled), "aria-orientation": orientation, "aria-valuemax": maxValue, "aria-valuemin": minValue, @@ -404,12 +401,12 @@ export function connect(state: State, send: Send, normalize ...placementStyles, }, onFocus() { - if (!isInteractive) return + if (!interactive) return send({ type: "CHANNEL_SLIDER.FOCUS", channel }) }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const step = getEventStep(event) * stepValue @@ -466,33 +463,33 @@ export function connect(state: State, send: Send, normalize "aria-label": channel, spellCheck: false, autoComplete: "off", - disabled: isDisabled, - "data-disabled": dataAttr(isDisabled), + disabled: disabled, + "data-disabled": dataAttr(disabled), readOnly: state.context.readOnly, defaultValue: getChannelValue(value, channel), min: range?.minValue, max: range?.maxValue, step: range?.step, onBeforeInput(event) { - if (isTextField || !isInteractive) return + if (isTextField || !interactive) return const value = event.currentTarget.value if (value.match(/[^0-9.]/g)) { event.preventDefault() } }, onFocus(event) { - if (!isInteractive) return + if (!interactive) return send({ type: "CHANNEL_INPUT.FOCUS", channel }) event.target.select() }, onBlur(event) { - if (!isInteractive) return + if (!interactive) return const value = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber send({ type: "CHANNEL_INPUT.BLUR", channel, value, isTextField }) }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return if (event.key === "Enter") { const value = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField }) @@ -509,7 +506,7 @@ export function connect(state: State, send: Send, normalize hiddenInputProps: normalize.input({ type: "text", - disabled: isDisabled, + disabled: disabled, name: state.context.name, id: dom.getHiddenInputId(state.context), style: visuallyHiddenStyle, @@ -520,11 +517,11 @@ export function connect(state: State, send: Send, normalize ...parts.eyeDropperTrigger.attrs, type: "button", dir: state.context.dir, - disabled: isDisabled, - "data-disabled": dataAttr(isDisabled), + disabled: disabled, + "data-disabled": dataAttr(disabled), "aria-label": "Pick a color from the screen", onClick() { - if (!isInteractive) return + if (!interactive) return send("EYEDROPPER.CLICK") }, }), @@ -540,15 +537,15 @@ export function connect(state: State, send: Send, normalize const triggerState = getSwatchTriggerState(props) return normalize.button({ ...parts.swatchTrigger.attrs, - disabled: triggerState.isDisabled, + disabled: triggerState.disabled, dir: state.context.dir, type: "button", "aria-label": `select ${triggerState.valueAsString} as the color`, - "data-state": triggerState.isChecked ? "checked" : "unchecked", + "data-state": triggerState.checked ? "checked" : "unchecked", "data-value": triggerState.valueAsString, - "data-disabled": dataAttr(triggerState.isDisabled), + "data-disabled": dataAttr(triggerState.disabled), onClick() { - if (triggerState.isDisabled) return + if (triggerState.disabled) return send({ type: "SWATCH_TRIGGER.CLICK", value: triggerState.value }) }, style: { @@ -562,7 +559,7 @@ export function connect(state: State, send: Send, normalize return normalize.element({ ...parts.swatchIndicator.attrs, dir: state.context.dir, - hidden: !triggerState.isChecked, + hidden: !triggerState.checked, }) }, @@ -572,7 +569,7 @@ export function connect(state: State, send: Send, normalize return normalize.element({ ...parts.swatch.attrs, dir: state.context.dir, - "data-state": triggerState.isChecked ? "checked" : "unchecked", + "data-state": triggerState.checked ? "checked" : "unchecked", "data-value": triggerState.valueAsString, style: { position: "relative", @@ -598,7 +595,7 @@ export function connect(state: State, send: Send, normalize "aria-label": "change color format", dir: state.context.dir, defaultValue: state.context.format, - disabled: isDisabled, + disabled: disabled, onChange(event) { const format = assertFormat(event.currentTarget.value) send({ type: "FORMAT.SET", format, src: "format-select" }) diff --git a/packages/machines/color-picker/src/color-picker.types.ts b/packages/machines/color-picker/src/color-picker.types.ts index d01e222427..f8172c29e4 100644 --- a/packages/machines/color-picker/src/color-picker.types.ts +++ b/packages/machines/color-picker/src/color-picker.types.ts @@ -218,8 +218,8 @@ export interface SwatchTriggerProps { export interface SwatchTriggerState { value: Color valueAsString: string - isChecked: boolean - isDisabled: boolean + checked: boolean + disabled: boolean } export interface SwatchProps { @@ -241,11 +241,11 @@ export interface MachineApi { /** * Whether the color picker is being dragged */ - isDragging: boolean + dragging: boolean /** * Whether the color picker is open */ - isOpen: boolean + open: boolean /** * The current color value (as a string) */ @@ -283,13 +283,9 @@ export interface MachineApi { */ setAlpha(value: number): void /** - * Function to open the color picker - */ - open(): void - /** - * Function to close the color picker + * Function to open or close the color picker */ - close(): void + setOpen(open: boolean): void rootProps: T["element"] labelProps: T["element"] From 9c29223f0944290d3299ca48d9e9d22d63012c7d Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 22:02:59 +0100 Subject: [PATCH 09/31] refactor: combobox --- .changeset/polite-vans-nail.md | 10 ++ .../machines/combobox/src/combobox.connect.ts | 137 +++++++++--------- .../machines/combobox/src/combobox.types.ts | 20 +-- 3 files changed, 84 insertions(+), 83 deletions(-) create mode 100644 .changeset/polite-vans-nail.md diff --git a/.changeset/polite-vans-nail.md b/.changeset/polite-vans-nail.md new file mode 100644 index 0000000000..62fbb45405 --- /dev/null +++ b/.changeset/polite-vans-nail.md @@ -0,0 +1,10 @@ +--- +"@zag-js/combobox": minor +--- + +Rename `api` properties + +- `isFocused` -> `focused` +- `isOpen` -> `open` +- `isInputValueEmpty` -> `inputEmpty` +- `open()`, `close()` -> `setOpen(true|false)` diff --git a/packages/machines/combobox/src/combobox.connect.ts b/packages/machines/combobox/src/combobox.connect.ts index c698c343e7..2ea664d225 100644 --- a/packages/machines/combobox/src/combobox.connect.ts +++ b/packages/machines/combobox/src/combobox.connect.ts @@ -11,7 +11,7 @@ import { getPlacementStyles } from "@zag-js/popper" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { parts } from "./combobox.anatomy" import { dom } from "./combobox.dom" -import type { CollectionItem, ItemProps, MachineApi, Send, State } from "./combobox.types" +import type { CollectionItem, ItemProps, ItemState, MachineApi, Send, State } from "./combobox.types" export function connect( state: State, @@ -21,13 +21,13 @@ export function connect( const translations = state.context.translations const collection = state.context.collection - const isDisabled = state.context.disabled - const isInteractive = state.context.isInteractive - const isInvalid = state.context.invalid - const isReadOnly = state.context.readOnly + const disabled = state.context.disabled + const interactive = state.context.isInteractive + const invalid = state.context.invalid + const readOnly = state.context.readOnly - const isOpen = state.hasTag("open") - const isFocused = state.hasTag("focused") + const open = state.hasTag("open") + const focused = state.hasTag("focused") const isDialogPopup = state.context.popup === "dialog" const popperStyles = getPlacementStyles({ @@ -35,23 +35,23 @@ export function connect( placement: state.context.currentPlacement, }) - function getItemState(props: ItemProps) { + function getItemState(props: ItemProps): ItemState { const { item } = props const disabled = collection.isItemDisabled(item) const value = collection.itemToValue(item) return { value, - isDisabled: Boolean(disabled || isDisabled), - isHighlighted: state.context.highlightedValue === value, - isSelected: state.context.value.includes(value), + disabled: Boolean(disabled || disabled), + highlighted: state.context.highlightedValue === value, + selected: state.context.value.includes(value), } } return { - isFocused, - isOpen, + focused, + open, inputValue: state.context.inputValue, - isInputValueEmpty: state.context.isInputValueEmpty, + inputEmpty: state.context.isInputValueEmpty, highlightedValue: state.context.highlightedValue, highlightedItem: state.context.highlightedItem, value: state.context.value, @@ -87,21 +87,16 @@ export function connect( focus() { dom.getInputEl(state.context)?.focus() }, - open() { - if (isOpen) return - send("OPEN") + setOpen(openValue) { + if (openValue && !open) send("OPEN") + if (!openValue && open) send("CLOSE") }, - close() { - if (!isOpen) return - send("CLOSE") - }, - rootProps: normalize.element({ ...parts.root.attrs, dir: state.context.dir, id: dom.getRootId(state.context), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), }), labelProps: normalize.label({ @@ -109,10 +104,10 @@ export function connect( dir: state.context.dir, htmlFor: dom.getInputId(state.context), id: dom.getLabelId(state.context), - "data-readonly": dataAttr(isReadOnly), - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-readonly": dataAttr(readOnly), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), onClick(event) { if (!isDialogPopup) return event.preventDefault() @@ -124,10 +119,10 @@ export function connect( ...parts.control.attrs, dir: state.context.dir, id: dom.getControlId(state.context), - "data-state": isOpen ? "open" : "closed", - "data-focus": dataAttr(isFocused), - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), + "data-state": open ? "open" : "closed", + "data-focus": dataAttr(focused), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), }), positionerProps: normalize.element({ @@ -140,17 +135,17 @@ export function connect( inputProps: normalize.input({ ...parts.input.attrs, dir: state.context.dir, - "aria-invalid": ariaAttr(isInvalid), - "data-invalid": dataAttr(isInvalid), + "aria-invalid": ariaAttr(invalid), + "data-invalid": dataAttr(invalid), name: state.context.name, form: state.context.form, - disabled: isDisabled, + disabled: disabled, autoFocus: state.context.autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "none", spellCheck: "false", - readOnly: isReadOnly, + readOnly: readOnly, placeholder: state.context.placeholder, id: dom.getInputId(state.context), type: "text", @@ -158,22 +153,22 @@ export function connect( defaultValue: state.context.inputValue, "aria-autocomplete": state.context.autoComplete ? "both" : "list", "aria-controls": isDialogPopup ? dom.getListId(state.context) : dom.getContentId(state.context), - "aria-expanded": isOpen, - "data-state": isOpen ? "open" : "closed", + "aria-expanded": open, + "data-state": open ? "open" : "closed", "aria-activedescendant": state.context.highlightedValue ? dom.getItemId(state.context, state.context.highlightedValue) : undefined, onClick() { if (!state.context.openOnClick) return - if (!isInteractive) return + if (!interactive) return send("INPUT.CLICK") }, onFocus() { - if (isDisabled) return + if (disabled) return send("INPUT.FOCUS") }, onBlur() { - if (isDisabled) return + if (disabled) return send("INPUT.BLUR") }, onChange(event) { @@ -181,7 +176,7 @@ export function connect( }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (evt.ctrlKey || evt.shiftKey || evt.isComposing) return @@ -192,33 +187,33 @@ export function connect( const keymap: EventKeyMap = { ArrowDown(event) { - if (!openOnKeyPress && !isOpen) return + if (!openOnKeyPress && !open) return send({ type: event.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress }) event.preventDefault() }, ArrowUp() { - if (!openOnKeyPress && !isOpen) return + if (!openOnKeyPress && !open) return send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress }) event.preventDefault() }, Home(event) { if (isModifierKey) return send({ type: "INPUT.HOME", keypress }) - if (isOpen) { + if (open) { event.preventDefault() } }, End(event) { if (isModifierKey) return send({ type: "INPUT.END", keypress }) - if (isOpen) { + if (open) { event.preventDefault() } }, Enter(event) { if (evt.isComposing) return send({ type: "INPUT.ENTER", keypress }) - if (isOpen) { + if (open) { event.preventDefault() } const itemEl = dom.getHighlightedItemEl(state.context) @@ -244,20 +239,20 @@ export function connect( type: "button", tabIndex: isDialogPopup ? 0 : -1, "aria-label": translations.triggerLabel, - "aria-expanded": isOpen, - "data-state": isOpen ? "open" : "closed", - "aria-controls": isOpen ? dom.getContentId(state.context) : undefined, - disabled: isDisabled, - "data-readonly": dataAttr(isReadOnly), - "data-disabled": dataAttr(isDisabled), + "aria-expanded": open, + "data-state": open ? "open" : "closed", + "aria-controls": open ? dom.getContentId(state.context) : undefined, + disabled: disabled, + "data-readonly": dataAttr(readOnly), + "data-disabled": dataAttr(disabled), onClick(event) { const evt = getNativeEvent(event) - if (!isInteractive) return + if (!interactive) return if (!isLeftClick(evt)) return send("TRIGGER.CLICK") }, onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return if (event.pointerType === "touch") return event.preventDefault() queueMicrotask(() => { @@ -301,8 +296,8 @@ export function connect( id: dom.getContentId(state.context), role: isDialogPopup ? "dialog" : "listbox", tabIndex: -1, - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", + hidden: !open, + "data-state": open ? "open" : "closed", "aria-labelledby": dom.getLabelId(state.context), "aria-multiselectable": state.context.multiple && !isDialogPopup ? true : undefined, onPointerDown(event) { @@ -324,12 +319,12 @@ export function connect( id: dom.getClearTriggerId(state.context), type: "button", tabIndex: -1, - disabled: isDisabled, + disabled: disabled, "aria-label": translations.clearTriggerLabel, "aria-controls": dom.getInputId(state.context), hidden: !state.context.value.length, onClick() { - if (!isInteractive) return + if (!interactive) return send({ type: "VALUE.CLEAR", src: "clear-trigger" }) }, }), @@ -346,19 +341,19 @@ export function connect( id: dom.getItemId(state.context, value), role: "option", tabIndex: -1, - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-state": itemState.isSelected ? "checked" : "unchecked", - "aria-selected": itemState.isHighlighted, - "aria-disabled": itemState.isDisabled, - "data-disabled": dataAttr(itemState.isDisabled), + "data-highlighted": dataAttr(itemState.highlighted), + "data-state": itemState.selected ? "checked" : "unchecked", + "aria-selected": itemState.highlighted, + "aria-disabled": itemState.disabled, + "data-disabled": dataAttr(itemState.disabled), "data-value": itemState.value, onPointerMove() { - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "ITEM.POINTER_MOVE", value }) }, onPointerLeave() { if (props.persistFocus) return - if (itemState.isDisabled) return + if (itemState.disabled) return const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE" if (!mouseMoved) return send({ type: "ITEM.POINTER_LEAVE", value }) @@ -367,7 +362,7 @@ export function connect( if (isDownloadingEvent(event)) return if (isOpeningInNewTab(event)) return if (isContextMenuEvent(event)) return - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "ITEM.CLICK", src: "pointerup", value }) }, onTouchEnd(event) { @@ -383,8 +378,8 @@ export function connect( return normalize.element({ ...parts.itemText.attrs, dir: state.context.dir, - "data-disabled": dataAttr(itemState.isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-disabled": dataAttr(itemState.disabled), + "data-highlighted": dataAttr(itemState.highlighted), }) }, getItemIndicatorProps(props) { @@ -393,8 +388,8 @@ export function connect( "aria-hidden": true, ...parts.itemIndicator.attrs, dir: state.context.dir, - "data-state": itemState.isSelected ? "checked" : "unchecked", - hidden: !itemState.isSelected, + "data-state": itemState.selected ? "checked" : "unchecked", + hidden: !itemState.selected, }) }, diff --git a/packages/machines/combobox/src/combobox.types.ts b/packages/machines/combobox/src/combobox.types.ts index 6bd495fac1..683d6a91c2 100644 --- a/packages/machines/combobox/src/combobox.types.ts +++ b/packages/machines/combobox/src/combobox.types.ts @@ -284,9 +284,9 @@ export interface ItemProps { export interface ItemState { value: string - isDisabled: boolean - isSelected: boolean - isHighlighted: boolean + disabled: boolean + selected: boolean + highlighted: boolean } export interface ItemGroupProps { @@ -301,15 +301,15 @@ export interface MachineApi Date: Sun, 21 Apr 2024 22:06:20 +0100 Subject: [PATCH 10/31] refactor: treeview --- .changeset/plenty-cherries-lay.md | 13 +++ .../tree-view/src/tree-view.connect.ts | 88 +++++++++---------- .../machines/tree-view/src/tree-view.types.ts | 23 ++++- 3 files changed, 76 insertions(+), 48 deletions(-) create mode 100644 .changeset/plenty-cherries-lay.md diff --git a/.changeset/plenty-cherries-lay.md b/.changeset/plenty-cherries-lay.md new file mode 100644 index 0000000000..c7c262201c --- /dev/null +++ b/.changeset/plenty-cherries-lay.md @@ -0,0 +1,13 @@ +--- +"@zag-js/tree-view": minor +--- + +- Rename `api.getItemState` properties + + - `isDisabled` -> `disabled` + - `isFocused` -> `focused` + - `isSelected` -> `selected` + +- Rename `api.getBranchState` properties + + - `isExpanded` -> `expanded` diff --git a/packages/machines/tree-view/src/tree-view.connect.ts b/packages/machines/tree-view/src/tree-view.connect.ts index a46315f6ad..cb471910ca 100644 --- a/packages/machines/tree-view/src/tree-view.connect.ts +++ b/packages/machines/tree-view/src/tree-view.connect.ts @@ -14,19 +14,19 @@ export function connect(state: State, send: Send, normalize function getItemState(props: ItemProps): ItemState { return { value: props.value, - isDisabled: Boolean(props.disabled), - isFocused: focusedValue === props.value, - isSelected: selectedValue.includes(props.value), + disabled: Boolean(props.disabled), + focused: focusedValue === props.value, + selected: selectedValue.includes(props.value), } } function getBranchState(props: BranchProps): BranchState { return { value: props.value, - isDisabled: Boolean(props.disabled), - isFocused: focusedValue === props.value, - isExpanded: expandedValue.includes(props.value), - isSelected: selectedValue.includes(props.value), + disabled: Boolean(props.disabled), + focused: focusedValue === props.value, + expanded: expandedValue.includes(props.value), + selected: selectedValue.includes(props.value), } } @@ -204,14 +204,14 @@ export function connect(state: State, send: Send, normalize dir: state.context.dir, "data-ownedby": dom.getTreeId(state.context), "data-item": itemState.value, - tabIndex: itemState.isFocused ? 0 : -1, - "data-focused": dataAttr(itemState.isFocused), + tabIndex: itemState.focused ? 0 : -1, + "data-focused": dataAttr(itemState.focused), role: "treeitem", - "aria-current": itemState.isSelected ? "true" : undefined, - "aria-selected": itemState.isDisabled ? undefined : itemState.isSelected, - "data-selected": dataAttr(itemState.isSelected), - "aria-disabled": itemState.isDisabled, - "data-disabled": dataAttr(itemState.isDisabled), + "aria-current": itemState.selected ? "true" : undefined, + "aria-selected": itemState.disabled ? undefined : itemState.selected, + "data-selected": dataAttr(itemState.selected), + "aria-disabled": itemState.disabled, + "data-disabled": dataAttr(itemState.disabled), "aria-level": props.depth, "data-depth": props.depth, style: { @@ -222,7 +222,7 @@ export function connect(state: State, send: Send, normalize send({ type: "ITEM.FOCUS", id: itemState.value }) }, onClick(event) { - if (itemState.isDisabled) return + if (itemState.disabled) return const isMetaKey = event.metaKey || event.ctrlKey send({ type: "ITEM.CLICK", id: itemState.value, shiftKey: event.shiftKey, ctrlKey: isMetaKey }) event.stopPropagation() @@ -237,9 +237,9 @@ export function connect(state: State, send: Send, normalize const itemState = getItemState(props) return normalize.element({ ...parts.itemText.attrs, - "data-disabled": dataAttr(itemState.isDisabled), - "data-selected": dataAttr(itemState.isSelected), - "data-focused": dataAttr(itemState.isFocused), + "data-disabled": dataAttr(itemState.disabled), + "data-selected": dataAttr(itemState.selected), + "data-focused": dataAttr(itemState.focused), }) }, @@ -248,10 +248,10 @@ export function connect(state: State, send: Send, normalize return normalize.element({ ...parts.itemIndicator.attrs, "aria-hidden": true, - "data-disabled": dataAttr(itemState.isDisabled), - "data-selected": dataAttr(itemState.isSelected), - "data-focused": dataAttr(itemState.isFocused), - hidden: !itemState.isSelected, + "data-disabled": dataAttr(itemState.disabled), + "data-selected": dataAttr(itemState.selected), + "data-focused": dataAttr(itemState.focused), + hidden: !itemState.selected, }) }, @@ -266,12 +266,12 @@ export function connect(state: State, send: Send, normalize role: "treeitem", "data-ownedby": dom.getTreeId(state.context), "aria-level": props.depth, - "aria-selected": branchState.isDisabled ? undefined : branchState.isSelected, - "data-selected": dataAttr(branchState.isSelected), - "aria-expanded": branchState.isExpanded, - "data-state": branchState.isExpanded ? "open" : "closed", - "aria-disabled": branchState.isDisabled, - "data-disabled": dataAttr(branchState.isDisabled), + "aria-selected": branchState.disabled ? undefined : branchState.selected, + "data-selected": dataAttr(branchState.selected), + "aria-expanded": branchState.expanded, + "data-state": branchState.expanded ? "open" : "closed", + "aria-disabled": branchState.disabled, + "data-disabled": dataAttr(branchState.disabled), style: { "--depth": props.depth, }, @@ -283,10 +283,10 @@ export function connect(state: State, send: Send, normalize return normalize.element({ ...parts.branchIndicator.attrs, "aria-hidden": true, - "data-state": branchState.isExpanded ? "open" : "closed", - "data-disabled": dataAttr(branchState.isDisabled), - "data-selected": dataAttr(branchState.isSelected), - "data-focused": dataAttr(branchState.isFocused), + "data-state": branchState.expanded ? "open" : "closed", + "data-disabled": dataAttr(branchState.disabled), + "data-selected": dataAttr(branchState.selected), + "data-focused": dataAttr(branchState.focused), }) }, @@ -296,10 +296,10 @@ export function connect(state: State, send: Send, normalize ...parts.branchTrigger.attrs, role: "button", dir: state.context.dir, - "data-disabled": dataAttr(branchState.isDisabled), - "data-state": branchState.isExpanded ? "open" : "closed", + "data-disabled": dataAttr(branchState.disabled), + "data-state": branchState.expanded ? "open" : "closed", onClick(event) { - if (branchState.isDisabled) return + if (branchState.disabled) return send({ type: "BRANCH_TOGGLE.CLICK", id: branchState.value }) event.stopPropagation() }, @@ -312,10 +312,10 @@ export function connect(state: State, send: Send, normalize ...parts.branchControl.attrs, role: "button", dir: state.context.dir, - tabIndex: branchState.isFocused ? 0 : -1, - "data-state": branchState.isExpanded ? "open" : "closed", - "data-disabled": dataAttr(branchState.isDisabled), - "data-selected": dataAttr(branchState.isSelected), + tabIndex: branchState.focused ? 0 : -1, + "data-state": branchState.expanded ? "open" : "closed", + "data-disabled": dataAttr(branchState.disabled), + "data-selected": dataAttr(branchState.selected), "data-branch": branchState.value, "data-depth": props.depth, onFocus(event) { @@ -323,7 +323,7 @@ export function connect(state: State, send: Send, normalize event.stopPropagation() }, onClick(event) { - if (branchState.isDisabled) return + if (branchState.disabled) return const isMetaKey = event.metaKey || event.ctrlKey send({ type: "BRANCH.CLICK", id: branchState.value, shiftKey: event.shiftKey, ctrlKey: isMetaKey }) @@ -339,8 +339,8 @@ export function connect(state: State, send: Send, normalize ...parts.branchText.attrs, dir: state.context.dir, "data-branch": branchState.value, - "data-disabled": dataAttr(branchState.isDisabled), - "data-state": branchState.isExpanded ? "open" : "closed", + "data-disabled": dataAttr(branchState.disabled), + "data-state": branchState.expanded ? "open" : "closed", }) }, @@ -351,8 +351,8 @@ export function connect(state: State, send: Send, normalize role: "group", dir: state.context.dir, "data-branch": branchState.value, - "data-state": branchState.isExpanded ? "open" : "closed", - hidden: !branchState.isExpanded, + "data-state": branchState.expanded ? "open" : "closed", + hidden: !branchState.expanded, }) }, } diff --git a/packages/machines/tree-view/src/tree-view.types.ts b/packages/machines/tree-view/src/tree-view.types.ts index b7b900aee6..53d6aaa786 100644 --- a/packages/machines/tree-view/src/tree-view.types.ts +++ b/packages/machines/tree-view/src/tree-view.types.ts @@ -121,14 +121,29 @@ export interface ItemProps { export interface BranchProps extends ItemProps {} export interface ItemState { + /** + * The value of the tree item + */ value: string - isDisabled: boolean - isSelected: boolean - isFocused: boolean + /** + * Whether the tree item is disabled + */ + disabled: boolean + /** + * Whether the tree item is selected + */ + selected: boolean + /** + * Whether the tree item is focused + */ + focused: boolean } export interface BranchState extends ItemState { - isExpanded: boolean + /** + * Whether the tree branch is expanded + */ + expanded: boolean } export interface MachineApi { From 90f916a273f3fdbc6f2acff9339dc34c1b61ca6f Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 22:08:23 +0100 Subject: [PATCH 11/31] refactor: tabs --- .changeset/unlucky-pumpkins-impress.md | 9 +++++++ packages/machines/tabs/src/tabs.connect.ts | 25 ++++++++++--------- packages/machines/tabs/src/tabs.types.ts | 23 +++++++++++++++-- .../dom-event/src/queue-before-event.ts | 10 +++++--- 4 files changed, 49 insertions(+), 18 deletions(-) create mode 100644 .changeset/unlucky-pumpkins-impress.md diff --git a/.changeset/unlucky-pumpkins-impress.md b/.changeset/unlucky-pumpkins-impress.md new file mode 100644 index 0000000000..36643677f3 --- /dev/null +++ b/.changeset/unlucky-pumpkins-impress.md @@ -0,0 +1,9 @@ +--- +"@zag-js/tabs": minor +--- + +Rename `api.getTriggerState` properties + +- `isSelected` -> `selected` +- `isDisabled` -> `disabled` +- `isFocused` -> `focused` diff --git a/packages/machines/tabs/src/tabs.connect.ts b/packages/machines/tabs/src/tabs.connect.ts index d0a64903c9..48eef675b8 100644 --- a/packages/machines/tabs/src/tabs.connect.ts +++ b/packages/machines/tabs/src/tabs.connect.ts @@ -3,17 +3,17 @@ import { dataAttr, isSafari, isSelfTarget } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { parts } from "./tabs.anatomy" import { dom } from "./tabs.dom" -import type { MachineApi, Send, State, TriggerProps } from "./tabs.types" +import type { MachineApi, Send, State, TriggerProps, TriggerState } from "./tabs.types" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { const translations = state.context.translations - const isFocused = state.matches("focused") + const focused = state.matches("focused") - function getTriggerState(props: TriggerProps) { + function getTriggerState(props: TriggerProps): TriggerState { return { - isSelected: state.context.value === props.value, - isFocused: state.context.focusedValue === props.value, - isDisabled: !!props.disabled, + selected: state.context.value === props.value, + focused: state.context.focusedValue === props.value, + disabled: !!props.disabled, } } @@ -36,7 +36,7 @@ export function connect(state: State, send: Send, normalize ...parts.root.attrs, id: dom.getRootId(state.context), "data-orientation": state.context.orientation, - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), dir: state.context.dir, }), @@ -45,7 +45,7 @@ export function connect(state: State, send: Send, normalize id: dom.getListId(state.context), role: "tablist", dir: state.context.dir, - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), "aria-orientation": state.context.orientation, "data-orientation": state.context.orientation, "aria-label": translations.listLabel, @@ -102,13 +102,13 @@ export function connect(state: State, send: Send, normalize "data-disabled": dataAttr(disabled), "aria-disabled": disabled, "data-value": value, - "aria-selected": triggerState.isSelected, - "data-selected": dataAttr(triggerState.isSelected), - "data-focus": dataAttr(triggerState.isFocused), + "aria-selected": triggerState.selected, + "data-selected": dataAttr(triggerState.selected), + "data-focus": dataAttr(triggerState.focused), "aria-controls": dom.getContentId(state.context, value), "data-ownedby": dom.getListId(state.context), id: dom.getTriggerId(state.context, value), - tabIndex: triggerState.isSelected ? 0 : -1, + tabIndex: triggerState.selected ? 0 : -1, onFocus() { send({ type: "TAB_FOCUS", value }) }, @@ -119,6 +119,7 @@ export function connect(state: State, send: Send, normalize } }, onClick(event) { + if (event.defaultPrevented) return if (disabled) return if (isSafari()) { event.currentTarget.focus() diff --git a/packages/machines/tabs/src/tabs.types.ts b/packages/machines/tabs/src/tabs.types.ts index 16974e9b45..f4ad3767e2 100644 --- a/packages/machines/tabs/src/tabs.types.ts +++ b/packages/machines/tabs/src/tabs.types.ts @@ -130,16 +130,35 @@ export type Send = S.Send * -----------------------------------------------------------------------------*/ export interface TriggerProps { + /** + * The value of the tab + */ value: string + /** + * Whether the tab is disabled + */ disabled?: boolean } export interface TriggerState { - isSelected: boolean - isFocused: boolean + /** + * Whether the tab is selected + */ + selected: boolean + /** + * Whether the tab is focused + */ + focused: boolean + /** + * Whether the tab is disabled + */ + disabled: boolean } export interface ContentProps { + /** + * The value of the tab + */ value: string } diff --git a/packages/utilities/dom-event/src/queue-before-event.ts b/packages/utilities/dom-event/src/queue-before-event.ts index dfd134332f..e781726968 100644 --- a/packages/utilities/dom-event/src/queue-before-event.ts +++ b/packages/utilities/dom-event/src/queue-before-event.ts @@ -1,10 +1,12 @@ -export function queueBeforeEvent(element: Element, type: string, cb: () => void) { - const raf = requestAnimationFrame(() => { +export function queueBeforeEvent(element: Element | null, type: string, cb: () => void) { + if (!element) return -1 + + const rafId = requestAnimationFrame(() => { element.removeEventListener(type, exec, true) cb() }) const exec = () => { - cancelAnimationFrame(raf) + cancelAnimationFrame(rafId) cb() } @@ -13,5 +15,5 @@ export function queueBeforeEvent(element: Element, type: string, cb: () => void) capture: true, }) - return raf + return rafId } From cc4f7b1df780372aed7b2274a3774154419709e9 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 22:09:21 +0100 Subject: [PATCH 12/31] refactor: signature pad --- .changeset/quick-flowers-sparkle.md | 8 ++++ .../src/signature-pad.connect.ts | 43 +++++++++++-------- .../signature-pad/src/signature-pad.types.ts | 4 +- 3 files changed, 35 insertions(+), 20 deletions(-) create mode 100644 .changeset/quick-flowers-sparkle.md diff --git a/.changeset/quick-flowers-sparkle.md b/.changeset/quick-flowers-sparkle.md new file mode 100644 index 0000000000..90dd3a247e --- /dev/null +++ b/.changeset/quick-flowers-sparkle.md @@ -0,0 +1,8 @@ +--- +"@zag-js/signature-pad": minor +--- + +Rename `api` properties + +- `isDrawing` -> `drawing` +- `isEmpty` -> `empty` diff --git a/packages/machines/signature-pad/src/signature-pad.connect.ts b/packages/machines/signature-pad/src/signature-pad.connect.ts index 23553ec3d3..7d49ebacca 100644 --- a/packages/machines/signature-pad/src/signature-pad.connect.ts +++ b/packages/machines/signature-pad/src/signature-pad.connect.ts @@ -6,14 +6,14 @@ import { dom } from "./signature-pad.dom" import type { MachineApi, Send, State } from "./signature-pad.types" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { - const isDrawing = state.matches("drawing") - const isEmpty = state.context.isEmpty - const isInteractive = state.context.isInteractive - const isDisabled = !!state.context.disabled + const drawing = state.matches("drawing") + const empty = state.context.isEmpty + const interactive = state.context.isInteractive + const disabled = !!state.context.disabled return { - isEmpty, - isDrawing, + empty: empty, + drawing: drawing, currentPath: state.context.currentPath, paths: state.context.paths, clear() { @@ -26,36 +26,43 @@ export function connect(state: State, send: Send, normalize labelProps: normalize.element({ ...parts.label.attrs, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), htmlFor: dom.getControlId(state.context), }), rootProps: normalize.element({ ...parts.root.attrs, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), id: dom.getRootId(state.context), }), controlProps: normalize.element({ ...parts.control.attrs, - tabIndex: isDisabled ? undefined : 0, + tabIndex: disabled ? undefined : 0, id: dom.getControlId(state.context), "aria-label": "Signature Pad", "aria-roledescription": "signature pad", - "aria-disabled": isDisabled, - "data-disabled": dataAttr(isDisabled), + "aria-disabled": disabled, + "data-disabled": dataAttr(disabled), onPointerDown(event) { + if (!isLeftClick(event)) return + if (isModifierKey(event)) return + if (!interactive) return + const target = getEventTarget(getNativeEvent(event)) if (target?.closest("[data-part=clear-trigger]")) return - if (!isLeftClick(event) || isModifierKey(event) || !isInteractive) return + event.currentTarget.setPointerCapture(event.pointerId) + const point = { x: event.clientX, y: event.clientY } const { offset } = getRelativePoint(point, dom.getControlEl(state.context)!) send({ type: "POINTER_DOWN", point: offset, pressure: event.pressure }) }, onPointerUp(event) { - if (!isInteractive) return - event.currentTarget.releasePointerCapture(event.pointerId) + if (!interactive) return + if (event.currentTarget.hasPointerCapture(event.pointerId)) { + event.currentTarget.releasePointerCapture(event.pointerId) + } }, style: { position: "relative", @@ -86,15 +93,15 @@ export function connect(state: State, send: Send, normalize guideProps: normalize.element({ ...parts.guide.attrs, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), }), clearTriggerProps: normalize.button({ ...parts.clearTrigger.attrs, type: "button", "aria-label": "Clear Signature", - hidden: !state.context.paths.length || isDrawing, - disabled: isDisabled, + hidden: !state.context.paths.length || drawing, + disabled: disabled, onClick() { send({ type: "CLEAR" }) }, @@ -104,7 +111,7 @@ export function connect(state: State, send: Send, normalize return normalize.input({ type: "text", hidden: true, - disabled: isDisabled, + disabled: disabled, name: state.context.name, value: props.value, }) diff --git a/packages/machines/signature-pad/src/signature-pad.types.ts b/packages/machines/signature-pad/src/signature-pad.types.ts index e93fc279c1..be6f63e2d5 100644 --- a/packages/machines/signature-pad/src/signature-pad.types.ts +++ b/packages/machines/signature-pad/src/signature-pad.types.ts @@ -107,11 +107,11 @@ export interface MachineApi { /** * Whether the signature pad is empty. */ - isEmpty: boolean + empty: boolean /** * Whether the user is currently drawing. */ - isDrawing: boolean + drawing: boolean /** * The current path being drawn. */ From fa373b63c6e2b4c8a33ef1343a3c6832f3ce2a22 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 22:10:33 +0100 Subject: [PATCH 13/31] refactor: editable --- .changeset/large-weeks-shout.md | 8 ++ .../machines/editable/src/editable.connect.ts | 110 +++++++++--------- .../machines/editable/src/editable.types.ts | 4 +- 3 files changed, 66 insertions(+), 56 deletions(-) create mode 100644 .changeset/large-weeks-shout.md diff --git a/.changeset/large-weeks-shout.md b/.changeset/large-weeks-shout.md new file mode 100644 index 0000000000..1d6bee5450 --- /dev/null +++ b/.changeset/large-weeks-shout.md @@ -0,0 +1,8 @@ +--- +"@zag-js/editable": minor +--- + +Rename `api` properties + +- `isEditing` -> `editing` +- `isValueEmpty` -> `empty` diff --git a/packages/machines/editable/src/editable.connect.ts b/packages/machines/editable/src/editable.connect.ts index 51fb7544fa..8df6febf9d 100644 --- a/packages/machines/editable/src/editable.connect.ts +++ b/packages/machines/editable/src/editable.connect.ts @@ -6,24 +6,24 @@ import { dom } from "./editable.dom" import type { MachineApi, Send, State } from "./editable.types" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { - const isDisabled = state.context.disabled - const isInteractive = state.context.isInteractive - const isReadOnly = state.context.readOnly - const isValueEmpty = state.context.isValueEmpty - const isInvalid = state.context.invalid + const disabled = state.context.disabled + const interactive = state.context.isInteractive + const readOnly = state.context.readOnly + const empty = state.context.isValueEmpty + const invalid = state.context.invalid const autoResize = state.context.autoResize const translations = state.context.translations - const isEditing = state.matches("edit") + const editing = state.matches("edit") const placeholderProp = state.context.placeholder const placeholder = typeof placeholderProp === "string" ? { edit: placeholderProp, preview: placeholderProp } : placeholderProp return { - isEditing, - isValueEmpty: isValueEmpty, + editing, + empty, value: state.context.value, setValue(value) { send({ type: "SET_VALUE", value }) @@ -32,15 +32,15 @@ export function connect(state: State, send: Send, normalize send({ type: "SET_VALUE", value: "" }) }, edit() { - if (!isInteractive) return + if (!interactive) return send("EDIT") }, cancel() { - if (!isInteractive) return + if (!interactive) return send("CANCEL") }, submit() { - if (!isInteractive) return + if (!interactive) return send("SUBMIT") }, @@ -55,9 +55,9 @@ export function connect(state: State, send: Send, normalize id: dom.getAreaId(state.context), dir: state.context.dir, style: autoResize ? { display: "inline-grid" } : undefined, - "data-focus": dataAttr(isEditing), - "data-disabled": dataAttr(isDisabled), - "data-placeholder-shown": dataAttr(isValueEmpty), + "data-focus": dataAttr(editing), + "data-disabled": dataAttr(disabled), + "data-placeholder-shown": dataAttr(empty), }), labelProps: normalize.label({ @@ -65,13 +65,12 @@ export function connect(state: State, send: Send, normalize id: dom.getLabelId(state.context), dir: state.context.dir, htmlFor: dom.getInputId(state.context), - "data-focus": dataAttr(isEditing), - "data-invalid": dataAttr(isInvalid), - onPointerDown(event) { - if (!isEditing) { - event.preventDefault() - dom.getPreviewEl(state.context)?.focus() - } + "data-focus": dataAttr(editing), + "data-invalid": dataAttr(invalid), + onClick() { + if (editing) return + const previewEl = dom.getPreviewEl(state.context) + previewEl?.focus({ preventScroll: true }) }, }), @@ -82,15 +81,15 @@ export function connect(state: State, send: Send, normalize name: state.context.name, form: state.context.form, id: dom.getInputId(state.context), - hidden: autoResize ? undefined : !isEditing, + hidden: autoResize ? undefined : !editing, placeholder: placeholder?.edit, maxLength: state.context.maxLength, - disabled: isDisabled, - "data-disabled": dataAttr(isDisabled), - readOnly: isReadOnly, - "data-readonly": dataAttr(isReadOnly), - "aria-invalid": ariaAttr(isInvalid), - "data-invalid": dataAttr(isInvalid), + disabled: disabled, + "data-disabled": dataAttr(disabled), + readOnly: readOnly, + "data-readonly": dataAttr(readOnly), + "aria-invalid": ariaAttr(invalid), + "data-invalid": dataAttr(invalid), defaultValue: state.context.value, size: autoResize ? 1 : undefined, onChange(event) { @@ -123,7 +122,7 @@ export function connect(state: State, send: Send, normalize ? { all: "unset", gridArea: "1 / 1 / auto / auto", - visibility: !isEditing ? "hidden" : undefined, + visibility: !editing ? "hidden" : undefined, } : undefined, }), @@ -132,22 +131,22 @@ export function connect(state: State, send: Send, normalize id: dom.getPreviewId(state.context), ...parts.preview.attrs, dir: state.context.dir, - "data-placeholder-shown": dataAttr(isValueEmpty), - "aria-readonly": ariaAttr(isReadOnly), - "data-readonly": dataAttr(isDisabled), - "data-disabled": dataAttr(isDisabled), - "aria-disabled": ariaAttr(isDisabled), - "aria-invalid": ariaAttr(isInvalid), - "data-invalid": dataAttr(isInvalid), - children: isValueEmpty ? placeholder?.preview : state.context.value, - hidden: autoResize ? undefined : isEditing, - tabIndex: isInteractive && state.context.isPreviewFocusable ? 0 : undefined, + "data-placeholder-shown": dataAttr(empty), + "aria-readonly": ariaAttr(readOnly), + "data-readonly": dataAttr(disabled), + "data-disabled": dataAttr(disabled), + "aria-disabled": ariaAttr(disabled), + "aria-invalid": ariaAttr(invalid), + "data-invalid": dataAttr(invalid), + children: empty ? placeholder?.preview : state.context.value, + hidden: autoResize ? undefined : editing, + tabIndex: interactive && state.context.isPreviewFocusable ? 0 : undefined, onFocus() { - if (!isInteractive) return + if (!interactive) return send("FOCUS") }, onDoubleClick() { - if (!isInteractive) return + if (!interactive) return send("DBLCLICK") }, style: autoResize @@ -155,7 +154,7 @@ export function connect(state: State, send: Send, normalize whiteSpace: "pre", userSelect: "none", gridArea: "1 / 1 / auto / auto", - visibility: isEditing ? "hidden" : undefined, + visibility: editing ? "hidden" : undefined, // in event the preview overflow's the parent element overflow: "hidden", textOverflow: "ellipsis", @@ -168,11 +167,12 @@ export function connect(state: State, send: Send, normalize id: dom.getEditTriggerId(state.context), dir: state.context.dir, "aria-label": translations.edit, - hidden: isEditing, + hidden: editing, type: "button", - disabled: isDisabled, - onClick() { - if (!isInteractive) return + disabled: disabled, + onClick(event) { + if (event.defaultPrevented) return + if (!interactive) return send("EDIT") }, }), @@ -188,11 +188,12 @@ export function connect(state: State, send: Send, normalize dir: state.context.dir, id: dom.getSubmitTriggerId(state.context), "aria-label": translations.submit, - hidden: !isEditing, - disabled: isDisabled, + hidden: !editing, + disabled: disabled, type: "button", - onClick() { - if (!isInteractive) return + onClick(event) { + if (event.defaultPrevented) return + if (!interactive) return send("SUBMIT") }, }), @@ -202,11 +203,12 @@ export function connect(state: State, send: Send, normalize dir: state.context.dir, "aria-label": translations.cancel, id: dom.getCancelTriggerId(state.context), - hidden: !isEditing, + hidden: !editing, type: "button", - disabled: isDisabled, - onClick() { - if (!isInteractive) return + disabled: disabled, + onClick(event) { + if (event.defaultPrevented) return + if (!interactive) return send("CANCEL") }, }), diff --git a/packages/machines/editable/src/editable.types.ts b/packages/machines/editable/src/editable.types.ts index d2092735a0..3894863c80 100644 --- a/packages/machines/editable/src/editable.types.ts +++ b/packages/machines/editable/src/editable.types.ts @@ -190,11 +190,11 @@ export interface MachineApi { /** * Whether the editable is in edit mode */ - isEditing: boolean + editing: boolean /** * Whether the editable value is empty */ - isValueEmpty: boolean + empty: boolean /** * The current value of the editable */ From fe271efbac733b90cf9f2aeb22c410cf60f85ef9 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 22:11:05 +0100 Subject: [PATCH 14/31] refactor: floating panel --- .../src/floating-panel.connect.ts | 44 +++++++++++-------- .../src/floating-panel.types.ts | 10 +++-- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/machines/floating-panel/src/floating-panel.connect.ts b/packages/machines/floating-panel/src/floating-panel.connect.ts index 31020465d7..5c7cb1cb23 100644 --- a/packages/machines/floating-panel/src/floating-panel.connect.ts +++ b/packages/machines/floating-panel/src/floating-panel.connect.ts @@ -7,24 +7,28 @@ import type { MachineApi, ResizeTriggerProps, Send, State } from "./floating-pan import { getResizeAxisStyle } from "./get-resize-axis-style" export function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi { - const isOpen = state.hasTag("open") - const isDragging = state.matches("open.dragging") - const isResizing = state.matches("open.resizing") + const open = state.hasTag("open") + const dragging = state.matches("open.dragging") + const resizing = state.matches("open.resizing") return { - isOpen, - isDragging, - isResizing, + open: open, + setOpen(open) { + send(open ? "OPEN" : "CLOSE") + }, + dragging: dragging, + resizing: resizing, triggerProps: normalize.button({ ...parts.trigger.attrs, type: "button", disabled: state.context.isDisabled, id: dom.getTriggerId(state.context), - "data-state": isOpen ? "open" : "closed", - "data-dragging": dataAttr(isDragging), + "data-state": open ? "open" : "closed", + "data-dragging": dataAttr(dragging), "aria-controls": dom.getContentId(state.context), - onClick() { + onClick(event) { + if (event.defaultPrevented) return if (state.context.isDisabled) return send({ type: "OPEN" }) }, @@ -44,11 +48,11 @@ export function connect(state: State, send: Send, normalize ...parts.content.attrs, role: "dialog", tabIndex: 0, - hidden: !isOpen, + hidden: !open, id: dom.getContentId(state.context), "aria-labelledby": dom.getTitleId(state.context), - "data-state": isOpen ? "open" : "closed", - "data-dragging": dataAttr(isDragging), + "data-state": open ? "open" : "closed", + "data-dragging": dataAttr(dragging), style: { position: "relative", width: "var(--width)", @@ -93,7 +97,8 @@ export function connect(state: State, send: Send, normalize disabled: state.context.isDisabled, "aria-label": "Close Window", type: "button", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("CLOSE") }, }), @@ -104,7 +109,8 @@ export function connect(state: State, send: Send, normalize "aria-label": "Minimize Window", hidden: state.context.isStaged, type: "button", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("MINIMIZE") }, }), @@ -115,7 +121,8 @@ export function connect(state: State, send: Send, normalize "aria-label": "Maximize Window", hidden: state.context.isStaged, type: "button", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("MAXIMIZE") }, }), @@ -126,7 +133,8 @@ export function connect(state: State, send: Send, normalize "aria-label": "Restore Window", hidden: !state.context.isStaged, type: "button", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("RESTORE") }, }), @@ -209,12 +217,12 @@ export function connect(state: State, send: Send, normalize headerProps: normalize.element({ ...parts.header.attrs, id: dom.getHeaderId(state.context), - "data-dragging": dataAttr(isDragging), + "data-dragging": dataAttr(dragging), }), bodyProps: normalize.element({ ...parts.body.attrs, - "data-dragging": dataAttr(isDragging), + "data-dragging": dataAttr(dragging), hidden: state.context.isMinimized, }), } diff --git a/packages/machines/floating-panel/src/floating-panel.types.ts b/packages/machines/floating-panel/src/floating-panel.types.ts index 83bb712a8a..8a57f206a7 100644 --- a/packages/machines/floating-panel/src/floating-panel.types.ts +++ b/packages/machines/floating-panel/src/floating-panel.types.ts @@ -158,15 +158,19 @@ export interface MachineApi { /** * Whether the panel is open */ - isOpen: boolean + open: boolean + /** + * Function to open or close the panel + */ + setOpen(open: boolean): void /** * Whether the panel is being dragged */ - isDragging: boolean + dragging: boolean /** * Whether the panel is being resized */ - isResizing: boolean + resizing: boolean dragTriggerProps: T["element"] getResizeTriggerProps(props: ResizeTriggerProps): T["element"] From 799b0a0b222a7f36945171171a7efd36a4c6b536 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 22:12:27 +0100 Subject: [PATCH 15/31] refactor: file upload --- .changeset/sour-boxes-march.md | 9 +++++++++ packages/machines/file-upload/src/file-upload.connect.ts | 6 +++--- packages/machines/file-upload/src/file-upload.types.ts | 6 +++--- 3 files changed, 15 insertions(+), 6 deletions(-) create mode 100644 .changeset/sour-boxes-march.md diff --git a/.changeset/sour-boxes-march.md b/.changeset/sour-boxes-march.md new file mode 100644 index 0000000000..156a0b7ff6 --- /dev/null +++ b/.changeset/sour-boxes-march.md @@ -0,0 +1,9 @@ +--- +"@zag-js/file-upload": minor +--- + +Rename `api` properties + +- `isDragging` -> `dragging` +- `isFocused` -> `focused` +- `open()` -> `openFilePicker()` diff --git a/packages/machines/file-upload/src/file-upload.connect.ts b/packages/machines/file-upload/src/file-upload.connect.ts index 9d960ebe8b..cdaec6ed9b 100644 --- a/packages/machines/file-upload/src/file-upload.connect.ts +++ b/packages/machines/file-upload/src/file-upload.connect.ts @@ -16,9 +16,9 @@ export function connect(state: State, send: Send, normalize const isFocused = state.matches("focused") && !disabled return { - isDragging, - isFocused, - open() { + dragging: isDragging, + focused: isFocused, + openFilePicker() { send("OPEN") }, deleteFile(file) { diff --git a/packages/machines/file-upload/src/file-upload.types.ts b/packages/machines/file-upload/src/file-upload.types.ts index 7a3d625533..6b4f5802a5 100644 --- a/packages/machines/file-upload/src/file-upload.types.ts +++ b/packages/machines/file-upload/src/file-upload.types.ts @@ -169,15 +169,15 @@ export interface MachineApi { /** * Whether the user is dragging something over the root element */ - isDragging: boolean + dragging: boolean /** * Whether the user is focused on the dropzone element */ - isFocused: boolean + focused: boolean /** * Function to open the file dialog */ - open(): void + openFilePicker(): void /** * Function to delete the file from the list */ From e45d319fe57f201309aa866945aa22d149aead59 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Sun, 21 Apr 2024 22:17:07 +0100 Subject: [PATCH 16/31] refactor: machines --- examples/next-ts/pages/select.tsx | 2 +- .../date-picker/src/date-picker.connect.ts | 190 +++++++++--------- .../date-picker/src/date-picker.types.ts | 44 ++-- .../machines/dialog/src/dialog.connect.ts | 29 ++- packages/machines/dialog/src/dialog.types.ts | 10 +- .../hover-card/src/hover-card.connect.ts | 17 +- .../hover-card/src/hover-card.types.ts | 9 +- packages/machines/menu/src/menu.connect.ts | 21 +- packages/machines/menu/src/menu.types.ts | 12 +- .../number-input/src/number-input.connect.ts | 63 +++--- .../number-input/src/number-input.types.ts | 7 +- .../pin-input/src/pin-input.connect.ts | 20 +- .../machines/pin-input/src/pin-input.types.ts | 2 +- .../machines/popover/src/popover.connect.ts | 29 ++- .../machines/popover/src/popover.types.ts | 11 +- .../machines/presence/src/presence.connect.ts | 6 +- .../machines/presence/src/presence.types.ts | 4 +- .../radio-group/src/radio-group.connect.ts | 40 ++-- .../radio-group/src/radio-group.machine.ts | 12 +- .../radio-group/src/radio-group.types.ts | 22 +- .../rating-group/src/rating-group.connect.ts | 55 +++-- .../rating-group/src/rating-group.types.ts | 10 +- .../machines/select/src/select.connect.ts | 129 ++++++------ packages/machines/select/src/select.types.ts | 20 +- .../machines/slider/src/slider.connect.ts | 78 +++---- packages/machines/slider/src/slider.types.ts | 11 +- .../machines/splitter/src/splitter.connect.ts | 35 ++-- .../machines/splitter/src/splitter.types.ts | 8 +- .../machines/switch/src/switch.connect.ts | 6 +- packages/machines/switch/src/switch.types.ts | 7 +- .../tags-input/src/tags-input.connect.ts | 104 +++++----- .../tags-input/src/tags-input.types.ts | 10 +- packages/machines/toast/src/toast.connect.ts | 25 +-- packages/machines/toast/src/toast.types.ts | 8 +- .../toggle-group/src/toggle-group.connect.ts | 26 +-- .../toggle-group/src/toggle-group.types.ts | 6 +- .../machines/tooltip/src/tooltip.connect.ts | 37 ++-- .../machines/tooltip/src/tooltip.types.ts | 8 +- website/lib/use-search.ts | 18 +- 39 files changed, 556 insertions(+), 595 deletions(-) diff --git a/examples/next-ts/pages/select.tsx b/examples/next-ts/pages/select.tsx index 8d4d3bee50..cee9d5e76f 100644 --- a/examples/next-ts/pages/select.tsx +++ b/examples/next-ts/pages/select.tsx @@ -54,7 +54,7 @@ export default function Page() { > {/* Hidden select */}
Indicator
- - diff --git a/examples/next-ts/pages/clipboard.tsx b/examples/next-ts/pages/clipboard.tsx index dedfbe3436..378716fbe1 100644 --- a/examples/next-ts/pages/clipboard.tsx +++ b/examples/next-ts/pages/clipboard.tsx @@ -29,7 +29,7 @@ export default function Page() {
- +
Copied!
Copy
diff --git a/examples/next-ts/pages/cmdk.tsx b/examples/next-ts/pages/cmdk.tsx index d932cddd43..a722e48a08 100644 --- a/examples/next-ts/pages/cmdk.tsx +++ b/examples/next-ts/pages/cmdk.tsx @@ -102,14 +102,14 @@ export default function Page() { useEffect(() => { const fn = (event: KeyboardEvent) => { - if (dialogApi.isOpen) return + if (dialogApi.open) return const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform) const hotkey = isMac ? "metaKey" : "ctrlKey" if (event.key?.toLowerCase() === "k" && event[hotkey]) { event.preventDefault() - dialogApi.open() + dialogApi.setOpen(true) } } document.addEventListener("keydown", fn, true) @@ -129,7 +129,7 @@ export default function Page() { or press Cmd+K - {dialogApi.isOpen && ( + {dialogApi.open && (
@@ -139,7 +139,7 @@ export default function Page() { collection={collection} onValueChange={({ value }) => { console.log("Selected value:", value) - queueMicrotask(() => dialogApi.close()) + queueMicrotask(() => dialogApi.setOpen(false)) }} onInputValueChange={({ inputValue }) => { setInputValue(inputValue) diff --git a/examples/next-ts/pages/collapsible.tsx b/examples/next-ts/pages/collapsible.tsx index 427f08268a..a8fef6bc7d 100644 --- a/examples/next-ts/pages/collapsible.tsx +++ b/examples/next-ts/pages/collapsible.tsx @@ -38,8 +38,8 @@ export default function Page() {
Toggle Controls
- - + +
diff --git a/examples/next-ts/pages/combo-textarea.tsx b/examples/next-ts/pages/combo-textarea.tsx index 0b75de6509..f553141110 100644 --- a/examples/next-ts/pages/combo-textarea.tsx +++ b/examples/next-ts/pages/combo-textarea.tsx @@ -96,11 +96,11 @@ export default function Page() { api.reposition() }, onPointerDown() { - api.close() + api.setOpen(true) }, onKeyDown(event) { if (event.key === "ArrowLeft" || event.key === "ArrowRight") { - api.close() + api.setOpen(false) } }, onChange(event) { @@ -108,9 +108,9 @@ export default function Page() { const searchValue = getSearchValue(event.currentTarget) if (trigger) { - api.open() + api.setOpen(true) } else if (!searchValue) { - api.close() + api.setOpen(false) } setSearchValue(searchValue) diff --git a/examples/next-ts/pages/dialog/controlled.tsx b/examples/next-ts/pages/dialog/controlled.tsx index c8ee5b1165..62288e3ea1 100644 --- a/examples/next-ts/pages/dialog/controlled.tsx +++ b/examples/next-ts/pages/dialog/controlled.tsx @@ -23,8 +23,8 @@ export default function Dialog() {

state - isOpen: {String(isOpen)}

-

machine - isOpen: {String(api.isOpen)}

- {api.isOpen && ( +

machine - isOpen: {String(api.open)}

+ {api.open && (
diff --git a/examples/next-ts/pages/dialog/index.tsx b/examples/next-ts/pages/dialog/index.tsx index 039ef61584..e7eb2dda01 100644 --- a/examples/next-ts/pages/dialog/index.tsx +++ b/examples/next-ts/pages/dialog/index.tsx @@ -33,7 +33,7 @@ export default function Page() {
- {parentDialog.isOpen && ( + {parentDialog.open && (
@@ -52,7 +52,7 @@ export default function Page() { Open Nested - {childDialog.isOpen && ( + {childDialog.open && (
@@ -61,7 +61,7 @@ export default function Page() { -
diff --git a/examples/next-ts/pages/dialog/overflow.tsx b/examples/next-ts/pages/dialog/overflow.tsx index cc5abee65f..a190b77b3b 100644 --- a/examples/next-ts/pages/dialog/overflow.tsx +++ b/examples/next-ts/pages/dialog/overflow.tsx @@ -9,7 +9,7 @@ export default function Dialog() {
- {api.isOpen && ( + {api.open && (
diff --git a/examples/next-ts/pages/editable.tsx b/examples/next-ts/pages/editable.tsx index d5649ac6e1..6910ba55ab 100644 --- a/examples/next-ts/pages/editable.tsx +++ b/examples/next-ts/pages/editable.tsx @@ -29,12 +29,12 @@ export default function Page() {
- {!api.isEditing && ( + {!api.editing && ( )} - {api.isEditing && ( + {api.editing && ( <> - {api.isPresent && ( + {api.present && (
{ api.setNode(node) diff --git a/examples/next-ts/pages/rating-group.tsx b/examples/next-ts/pages/rating-group.tsx index 18cfc53666..b1b01daf3a 100644 --- a/examples/next-ts/pages/rating-group.tsx +++ b/examples/next-ts/pages/rating-group.tsx @@ -62,7 +62,7 @@ export default function Page() { const state = api.getItemState({ index }) return ( - {state.isHalf ? : } + {state.half ? : } ) })} diff --git a/examples/next-ts/pages/select-in-dialog.tsx b/examples/next-ts/pages/select-in-dialog.tsx index 409420b5bf..064bd29601 100644 --- a/examples/next-ts/pages/select-in-dialog.tsx +++ b/examples/next-ts/pages/select-in-dialog.tsx @@ -47,7 +47,7 @@ export default function Page() { - {api.isOpen && ( + {api.open && (
diff --git a/examples/next-ts/pages/switch.tsx b/examples/next-ts/pages/switch.tsx index 5f9da9b0ca..fd36d38a80 100644 --- a/examples/next-ts/pages/switch.tsx +++ b/examples/next-ts/pages/switch.tsx @@ -29,7 +29,7 @@ export default function Page() { - Feature is {api.isChecked ? "enabled" : "disabled"} + Feature is {api.checked ? "enabled" : "disabled"} diff --git a/examples/next-ts/pages/toast.tsx b/examples/next-ts/pages/toast.tsx index c9b12c85dc..e60191ce56 100644 --- a/examples/next-ts/pages/toast.tsx +++ b/examples/next-ts/pages/toast.tsx @@ -18,10 +18,10 @@ function ToastItem({ actor }: { actor: toast.Service }) { "data-part": "progressbar", "data-type": state.context.type, style: { - opacity: api.isVisible ? 1 : 0, - transformOrigin: api.isRtl ? "right" : "left", + opacity: api.visible ? 1 : 0, + transformOrigin: api.rtl ? "right" : "left", animationName: api.type === "loading" ? "none" : undefined, - animationPlayState: api.isPaused ? "paused" : "running", + animationPlayState: api.paused ? "paused" : "running", animationDuration: "var(--duration)", }, } diff --git a/examples/next-ts/pages/tooltip.tsx b/examples/next-ts/pages/tooltip.tsx index 441ca0116b..64c7a9ba68 100644 --- a/examples/next-ts/pages/tooltip.tsx +++ b/examples/next-ts/pages/tooltip.tsx @@ -27,7 +27,7 @@ export default function Page() { - {api.isOpen && ( + {api.open && (
Tooltip @@ -38,7 +38,7 @@ export default function Page() { - {api2.isOpen && ( + {api2.open && (
diff --git a/examples/nuxt-ts/pages/checkbox.vue b/examples/nuxt-ts/pages/checkbox.vue index 1f8341a947..b67cb3f00c 100644 --- a/examples/nuxt-ts/pages/checkbox.vue +++ b/examples/nuxt-ts/pages/checkbox.vue @@ -30,13 +30,13 @@ const api = computed(() => checkbox.connect(state.value, send, normalizeProps))
diff --git a/examples/nuxt-ts/pages/clipboard.vue b/examples/nuxt-ts/pages/clipboard.vue index 8a68784370..d84b3a2a02 100644 --- a/examples/nuxt-ts/pages/clipboard.vue +++ b/examples/nuxt-ts/pages/clipboard.vue @@ -26,7 +26,7 @@ const api = computed(() => clipboard.connect(state.value, send, normalizeProps))
diff --git a/examples/nuxt-ts/pages/editable.vue b/examples/nuxt-ts/pages/editable.vue index 3fca9482d5..b6824225a5 100644 --- a/examples/nuxt-ts/pages/editable.vue +++ b/examples/nuxt-ts/pages/editable.vue @@ -20,9 +20,9 @@ const api = computed(() => editable.connect(state.value, send, normalizeProps))
- + - + diff --git a/examples/nuxt-ts/pages/hover-card.vue b/examples/nuxt-ts/pages/hover-card.vue index 03870049a8..d51305275a 100644 --- a/examples/nuxt-ts/pages/hover-card.vue +++ b/examples/nuxt-ts/pages/hover-card.vue @@ -17,7 +17,7 @@ const api = computed(() => hoverCard.connect(state.value, send, normalizeProps))
Twitter - +
diff --git a/examples/nuxt-ts/pages/rating-group.vue b/examples/nuxt-ts/pages/rating-group.vue index cd46775e18..e4d3e8a90b 100644 --- a/examples/nuxt-ts/pages/rating-group.vue +++ b/examples/nuxt-ts/pages/rating-group.vue @@ -27,7 +27,7 @@ const items = computed(() =>
- +
diff --git a/examples/nuxt-ts/pages/switch.vue b/examples/nuxt-ts/pages/switch.vue index 14c1c33423..a81ca014ac 100644 --- a/examples/nuxt-ts/pages/switch.vue +++ b/examples/nuxt-ts/pages/switch.vue @@ -23,7 +23,7 @@ const api = computed(() => zagSwitch.connect(state.value, send, normalizeProps)) - Feature is {{ api.isChecked ? "enabled" : "disabled" }} + Feature is {{ api.checked ? "enabled" : "disabled" }} diff --git a/examples/nuxt-ts/pages/tooltip.vue b/examples/nuxt-ts/pages/tooltip.vue index 1d4ac7d911..d11ce05f63 100644 --- a/examples/nuxt-ts/pages/tooltip.vue +++ b/examples/nuxt-ts/pages/tooltip.vue @@ -20,7 +20,7 @@ const api = computed(() => tooltip.connect(state.value, send, normalizeProps)) 
{{ state.value }}
-
+
Tooltip with alot of text probably
diff --git a/examples/solid-ts/src/pages/checkbox.tsx b/examples/solid-ts/src/pages/checkbox.tsx index 89e205fac4..52b1a539d9 100644 --- a/examples/solid-ts/src/pages/checkbox.tsx +++ b/examples/solid-ts/src/pages/checkbox.tsx @@ -35,17 +35,17 @@ export default function Page() {
- - diff --git a/examples/solid-ts/src/pages/clipboard.tsx b/examples/solid-ts/src/pages/clipboard.tsx index 6279f4080e..7f46fc1766 100644 --- a/examples/solid-ts/src/pages/clipboard.tsx +++ b/examples/solid-ts/src/pages/clipboard.tsx @@ -30,7 +30,7 @@ export default function Page() {
diff --git a/examples/solid-ts/src/pages/collapsible.tsx b/examples/solid-ts/src/pages/collapsible.tsx index cd26e4a204..a6b8adf341 100644 --- a/examples/solid-ts/src/pages/collapsible.tsx +++ b/examples/solid-ts/src/pages/collapsible.tsx @@ -33,8 +33,8 @@ export default function Page() {
Toggle Controls
- - + +
diff --git a/examples/solid-ts/src/pages/date-picker.tsx b/examples/solid-ts/src/pages/date-picker.tsx index 6bb25adf4d..0dc42a186a 100644 --- a/examples/solid-ts/src/pages/date-picker.tsx +++ b/examples/solid-ts/src/pages/date-picker.tsx @@ -36,7 +36,7 @@ export default function Page() {
- +
diff --git a/examples/solid-ts/src/pages/dialog.tsx b/examples/solid-ts/src/pages/dialog.tsx index f8ccc9ff2a..486053199e 100644 --- a/examples/solid-ts/src/pages/dialog.tsx +++ b/examples/solid-ts/src/pages/dialog.tsx @@ -25,7 +25,7 @@ export default function Page() {
- +
@@ -43,7 +43,7 @@ export default function Page() { - +
@@ -52,7 +52,7 @@ export default function Page() { -
diff --git a/examples/solid-ts/src/pages/editable.tsx b/examples/solid-ts/src/pages/editable.tsx index d30b5ed4b6..7418ede7f6 100644 --- a/examples/solid-ts/src/pages/editable.tsx +++ b/examples/solid-ts/src/pages/editable.tsx @@ -28,12 +28,12 @@ export default function Page() {
- + - + <> - +
{ api().setNode(node) diff --git a/examples/solid-ts/src/pages/rating-group.tsx b/examples/solid-ts/src/pages/rating-group.tsx index 5f7ab5029c..e3646662a5 100644 --- a/examples/solid-ts/src/pages/rating-group.tsx +++ b/examples/solid-ts/src/pages/rating-group.tsx @@ -62,7 +62,7 @@ export default function Page() { {(index) => { const state = createMemo(() => api().getItemState({ index: index() })) return ( - {state().isHalf ? : } + {state().half ? : } ) }} diff --git a/examples/solid-ts/src/pages/switch.tsx b/examples/solid-ts/src/pages/switch.tsx index f6310021c9..7891ac5367 100644 --- a/examples/solid-ts/src/pages/switch.tsx +++ b/examples/solid-ts/src/pages/switch.tsx @@ -29,7 +29,7 @@ export default function Page() { - Feature is {api().isChecked ? "enabled" : "disabled"} + Feature is {api().checked ? "enabled" : "disabled"} diff --git a/examples/solid-ts/src/pages/toast.tsx b/examples/solid-ts/src/pages/toast.tsx index 35ab01dfe1..97db141b8e 100644 --- a/examples/solid-ts/src/pages/toast.tsx +++ b/examples/solid-ts/src/pages/toast.tsx @@ -17,10 +17,10 @@ function ToastItem(props: { actor: toast.Service }) { "data-part": "progressbar", "data-type": state.context.type, style: { - opacity: api().isVisible ? 1 : 0, - "transform-origin": api().isRtl ? "right" : "left", + opacity: api().visible ? 1 : 0, + "transform-origin": api().rtl ? "right" : "left", "animation-name": api().type === "loading" ? "none" : undefined, - "animation-play-state": api().isPaused ? "paused" : "running", + "animation-play-state": api().paused ? "paused" : "running", "animation-duration": `${state.context.duration}ms`, }, })) diff --git a/examples/solid-ts/src/pages/tooltip.tsx b/examples/solid-ts/src/pages/tooltip.tsx index cf003e2a6c..2d1c53080e 100644 --- a/examples/solid-ts/src/pages/tooltip.tsx +++ b/examples/solid-ts/src/pages/tooltip.tsx @@ -20,7 +20,7 @@ export default function Page() { Hover me - +
@@ -34,7 +34,7 @@ export default function Page() { Over me - +
diff --git a/examples/svelte-ts/src/lib/components/toast-item.svelte b/examples/svelte-ts/src/lib/components/toast-item.svelte index 4defff7ff5..76f90b9c81 100644 --- a/examples/svelte-ts/src/lib/components/toast-item.svelte +++ b/examples/svelte-ts/src/lib/components/toast-item.svelte @@ -17,10 +17,10 @@ "data-part": "progressbar", "data-type": snapshot.context.type, style: { - opacity: api.isVisible ? 1 : 0, - transformOrigin: api.isRtl ? "right" : "left", + opacity: api.visible ? 1 : 0, + transformOrigin: api.rtl ? "right" : "left", animationName: api.type === "loading" ? "none" : undefined, - animationPlayState: api.isPaused ? "paused" : "running", + animationPlayState: api.paused ? "paused" : "running", animationDuration: "var(--duration)", }, }), diff --git a/examples/svelte-ts/src/routes/accordion.svelte b/examples/svelte-ts/src/routes/accordion.svelte index 1ad9cf8e5f..155564898b 100644 --- a/examples/svelte-ts/src/routes/accordion.svelte +++ b/examples/svelte-ts/src/routes/accordion.svelte @@ -9,11 +9,11 @@ const controls = useControls(accordionControls) - const [_state, send] = useMachine(accordion.machine({ id: "1" }), { + const [snapshot, send] = useMachine(accordion.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(accordion.connect(_state, send, normalizeProps)) + const api = $derived(accordion.connect(snapshot, send, normalizeProps))
@@ -38,5 +38,5 @@
- + diff --git a/examples/svelte-ts/src/routes/avatar.svelte b/examples/svelte-ts/src/routes/avatar.svelte index 85f47bb29b..7f8e9d00e0 100644 --- a/examples/svelte-ts/src/routes/avatar.svelte +++ b/examples/svelte-ts/src/routes/avatar.svelte @@ -11,8 +11,8 @@ let src = $state(images[0]) let showImage = $state(true) - const [_state, send] = useMachine(avatar.machine({ id: "1" })) - const api = $derived(avatar.connect(_state, send, normalizeProps)) + const [snapshot, send] = useMachine(avatar.machine({ id: "1" })) + const api = $derived(avatar.connect(snapshot, send, normalizeProps))
@@ -31,5 +31,5 @@
- + diff --git a/examples/svelte-ts/src/routes/carousel.svelte b/examples/svelte-ts/src/routes/carousel.svelte index 56d238d2f1..cf168d6005 100644 --- a/examples/svelte-ts/src/routes/carousel.svelte +++ b/examples/svelte-ts/src/routes/carousel.svelte @@ -8,11 +8,11 @@ const controls = useControls(carouselControls) - const [_state, send] = useMachine(carousel.machine({ id: "1", index: 0, spacing: "20px", slidesPerView: 2 }), { + const [snapshot, send] = useMachine(carousel.machine({ id: "1", index: 0, spacing: "20px", slidesPerView: 2 }), { // context: controls.context, }) - const api = $derived(carousel.connect(_state, send, normalizeProps)) + const api = $derived(carousel.connect(snapshot, send, normalizeProps))
@@ -32,5 +32,5 @@
- + diff --git a/examples/svelte-ts/src/routes/checkbox.svelte b/examples/svelte-ts/src/routes/checkbox.svelte index 8066ec2d01..b6afdd4d5b 100644 --- a/examples/svelte-ts/src/routes/checkbox.svelte +++ b/examples/svelte-ts/src/routes/checkbox.svelte @@ -9,11 +9,11 @@ const controls = useControls(checkboxControls) - const [_state, send] = useMachine(checkbox.machine({ id: "1" }), { + const [snapshot, send] = useMachine(checkbox.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(checkbox.connect(_state, send, normalizeProps)) + const api = $derived(checkbox.connect(snapshot, send, normalizeProps))
@@ -25,19 +25,19 @@ >
- + diff --git a/examples/svelte-ts/src/routes/clipboard.svelte b/examples/svelte-ts/src/routes/clipboard.svelte index 0e8c2ca9d5..b738a8ade6 100644 --- a/examples/svelte-ts/src/routes/clipboard.svelte +++ b/examples/svelte-ts/src/routes/clipboard.svelte @@ -9,7 +9,7 @@ const controls = useControls(clipboardControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( clipboard.machine({ id: "1", value: "https://github/com/chakra-ui/zag", @@ -19,7 +19,7 @@ }, ) - const api = $derived(clipboard.connect(_state, send, normalizeProps)) + const api = $derived(clipboard.connect(snapshot, send, normalizeProps))
@@ -29,7 +29,7 @@
- + diff --git a/examples/svelte-ts/src/routes/collapsible.svelte b/examples/svelte-ts/src/routes/collapsible.svelte index f3dc09de4b..38213d6bba 100644 --- a/examples/svelte-ts/src/routes/collapsible.svelte +++ b/examples/svelte-ts/src/routes/collapsible.svelte @@ -8,11 +8,11 @@ const controls = useControls(collapsibleControls) - const [_state, send] = useMachine(collapsible.machine({ id: "1" }), { + const [snapshot, send] = useMachine(collapsible.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(collapsible.connect(_state, send, normalizeProps)) + const api = $derived(collapsible.connect(snapshot, send, normalizeProps))
@@ -31,11 +31,11 @@
Toggle Controls
- - + +
- + diff --git a/examples/svelte-ts/src/routes/color-picker.svelte b/examples/svelte-ts/src/routes/color-picker.svelte index 5f67febf57..8907223454 100644 --- a/examples/svelte-ts/src/routes/color-picker.svelte +++ b/examples/svelte-ts/src/routes/color-picker.svelte @@ -11,7 +11,7 @@ const controls = useControls(colorPickerControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( colorPicker.machine({ id: "1", name: "color", @@ -23,7 +23,7 @@ }, ) - const api = $derived(colorPicker.connect(_state, send, normalizeProps)) + const api = $derived(colorPicker.connect(snapshot, send, normalizeProps))
@@ -128,7 +128,7 @@
- + {#snippet EyeDropIcon()} diff --git a/examples/svelte-ts/src/routes/combobox.svelte b/examples/svelte-ts/src/routes/combobox.svelte index 911bc12e9b..3fb252f673 100644 --- a/examples/svelte-ts/src/routes/combobox.svelte +++ b/examples/svelte-ts/src/routes/combobox.svelte @@ -19,7 +19,7 @@ controls.setContext("collection", collection) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( combobox.machine({ id: "1", collection, @@ -39,7 +39,7 @@ }, ) - const api = $derived(combobox.connect(_state, send, normalizeProps)) + const api = $derived(combobox.connect(snapshot, send, normalizeProps)) $inspect(api.inputValue) @@ -71,5 +71,5 @@ - + diff --git a/examples/svelte-ts/src/routes/context-menu.svelte b/examples/svelte-ts/src/routes/context-menu.svelte index 8db193d270..7733fc7946 100644 --- a/examples/svelte-ts/src/routes/context-menu.svelte +++ b/examples/svelte-ts/src/routes/context-menu.svelte @@ -4,14 +4,14 @@ import * as menu from "@zag-js/menu" import { normalizeProps, portal, useMachine } from "@zag-js/svelte" - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( menu.machine({ id: "1", onSelect: console.log, }), ) - const api = $derived(menu.connect(_state, send, normalizeProps)) + const api = $derived(menu.connect(snapshot, send, normalizeProps))
@@ -27,5 +27,5 @@
- + diff --git a/examples/svelte-ts/src/routes/floating-panel.svelte b/examples/svelte-ts/src/routes/floating-panel.svelte index 332450b06b..c6b14e79fa 100644 --- a/examples/svelte-ts/src/routes/floating-panel.svelte +++ b/examples/svelte-ts/src/routes/floating-panel.svelte @@ -9,11 +9,11 @@ const controls = useControls(floatingPanelControls) - const [_state, send] = useMachine(floatingPanel.machine({ id: "1" }), { + const [snapshot, send] = useMachine(floatingPanel.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(floatingPanel.connect(_state, send, normalizeProps)) + const api = $derived(floatingPanel.connect(snapshot, send, normalizeProps))
@@ -58,5 +58,5 @@
- + diff --git a/examples/svelte-ts/src/routes/hover-card.svelte b/examples/svelte-ts/src/routes/hover-card.svelte index ee8de30b40..e8e9ad980c 100644 --- a/examples/svelte-ts/src/routes/hover-card.svelte +++ b/examples/svelte-ts/src/routes/hover-card.svelte @@ -19,7 +19,7 @@
Twitter - {#if api.isOpen} + {#if api.open}
diff --git a/examples/svelte-ts/src/routes/menu-options.svelte b/examples/svelte-ts/src/routes/menu-options.svelte index ecb154336b..cabbc699b3 100644 --- a/examples/svelte-ts/src/routes/menu-options.svelte +++ b/examples/svelte-ts/src/routes/menu-options.svelte @@ -11,11 +11,11 @@ let order = $state("") let type = $state([]) - const [_state, send] = useMachine(menu.machine({ id: "1" }), { + const [snapshot, send] = useMachine(menu.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(menu.connect(_state, send, normalizeProps)) + const api = $derived(menu.connect(snapshot, send, normalizeProps)) const radios = $derived( menuOptionData.order.map((item) => ({ @@ -71,5 +71,5 @@ - + diff --git a/examples/svelte-ts/src/routes/number-input.svelte b/examples/svelte-ts/src/routes/number-input.svelte index 433145fd4d..f25a3704b3 100644 --- a/examples/svelte-ts/src/routes/number-input.svelte +++ b/examples/svelte-ts/src/routes/number-input.svelte @@ -8,11 +8,11 @@ const controls = useControls(numberInputControls) - const [_state, send] = useMachine(numberInput.machine({ id: "1" }), { + const [snapshot, send] = useMachine(numberInput.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(numberInput.connect(_state, send, normalizeProps)) + const api = $derived(numberInput.connect(snapshot, send, normalizeProps))
@@ -29,5 +29,5 @@
- + diff --git a/examples/svelte-ts/src/routes/pagination.svelte b/examples/svelte-ts/src/routes/pagination.svelte index 18f3c426d9..7a8cf7b012 100644 --- a/examples/svelte-ts/src/routes/pagination.svelte +++ b/examples/svelte-ts/src/routes/pagination.svelte @@ -9,7 +9,7 @@ const controls = useControls(paginationControls) let details = $state({}) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( pagination.machine({ id: "1", count: paginationData.length, @@ -22,7 +22,7 @@ }, ) - const api = $derived(pagination.connect(_state, send, normalizeProps)) + const api = $derived(pagination.connect(snapshot, send, normalizeProps)) const data = $derived(api.slice(paginationData)) @@ -82,5 +82,5 @@ - + diff --git a/examples/svelte-ts/src/routes/pin-input.svelte b/examples/svelte-ts/src/routes/pin-input.svelte index eee5614dd5..4e6b2f7a5e 100644 --- a/examples/svelte-ts/src/routes/pin-input.svelte +++ b/examples/svelte-ts/src/routes/pin-input.svelte @@ -9,7 +9,7 @@ const controls = useControls(pinInputControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( pinInput.machine({ name: "test", id: "1", @@ -19,7 +19,7 @@ }, ) - const api = $derived(pinInput.connect(_state, send, normalizeProps)) + const api = $derived(pinInput.connect(snapshot, send, normalizeProps))
@@ -46,5 +46,5 @@
- + diff --git a/examples/svelte-ts/src/routes/popover.svelte b/examples/svelte-ts/src/routes/popover.svelte index f901b26b5b..e37e8b89b3 100644 --- a/examples/svelte-ts/src/routes/popover.svelte +++ b/examples/svelte-ts/src/routes/popover.svelte @@ -29,7 +29,7 @@
-
+
Popover Title
diff --git a/examples/svelte-ts/src/routes/progress.svelte b/examples/svelte-ts/src/routes/progress.svelte index 4a4233940e..744cc5f177 100644 --- a/examples/svelte-ts/src/routes/progress.svelte +++ b/examples/svelte-ts/src/routes/progress.svelte @@ -8,11 +8,11 @@ const controls = useControls(progressControls) - const [_state, send] = useMachine(progress.machine({ id: "1" }), { + const [snapshot, send] = useMachine(progress.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(progress.connect(_state, send, normalizeProps)) + const api = $derived(progress.connect(snapshot, send, normalizeProps))
@@ -25,7 +25,7 @@
-
+
{api.valueAsString}
@@ -39,5 +39,5 @@
- + diff --git a/examples/svelte-ts/src/routes/radio-group.svelte b/examples/svelte-ts/src/routes/radio-group.svelte index 76070535dd..bb8c9b39e4 100644 --- a/examples/svelte-ts/src/routes/radio-group.svelte +++ b/examples/svelte-ts/src/routes/radio-group.svelte @@ -26,10 +26,10 @@

Fruits

-
+
{#each radioData as opt}