state - isOpen: {String(isOpen)}
machine - isOpen: {String(api.isOpen)}
machine - isOpen: {String(api.open)}
+ - + {api.type === "loading" && } {api.title} @@ -39,7 +26,7 @@ function ToastItem({ actor }: { actor: toast.Service }) { - + ) } 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() { Hover me - {api.isOpen && ( + {api.open && ( Tooltip @@ -38,7 +38,7 @@ export default function Page() { Over me - {api2.isOpen && ( + {api2.open && ( diff --git a/examples/nuxt-ts/package.json b/examples/nuxt-ts/package.json index 499eb489da..24c3592cd7 100644 --- a/examples/nuxt-ts/package.json +++ b/examples/nuxt-ts/package.json @@ -77,7 +77,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/vue": "workspace:*", "epic-spinners": "2.0.0", "form-serialize": "0.7.2", 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)) - Input {{ api.isChecked ? "Checked" : "Unchecked" }} + Input {{ api.checked ? "Checked" : "Unchecked" }} Indicator - Check - Uncheck + Check + Uncheck Reset Form 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)) - Edit + Edit - + Save Cancel 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 }} Hover me - + Tooltip with alot of text probably diff --git a/examples/preact-ts/package.json b/examples/preact-ts/package.json index 74ee7e4067..c58058d4dc 100644 --- a/examples/preact-ts/package.json +++ b/examples/preact-ts/package.json @@ -77,7 +77,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "match-sorter": "6.3.4", "lucide-preact": "0.372.0", "preact": "10.20.2", diff --git a/examples/solid-ts/package.json b/examples/solid-ts/package.json index e20b5f446d..b8dec359e9 100644 --- a/examples/solid-ts/package.json +++ b/examples/solid-ts/package.json @@ -87,7 +87,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "form-serialize": "0.7.2", "match-sorter": "6.3.4", "lucide-solid": "0.372.0", 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() { - Input {api().isChecked ? "Checked" : "Unchecked"} + Input {api().checked ? "Checked" : "Unchecked"} Indicator - api().setChecked(true)}> + api().setChecked(true)}> Check - api().setChecked(false)}> + api().setChecked(false)}> Uncheck Reset Form 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 - Open - Close + api().setOpen(true)}>Open + api().setOpen(false)}>Close 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() { Open Nested - + @@ -52,7 +52,7 @@ export default function Page() { X - parentDialog().close()} data-testid="special-close"> + parentDialog().setOpen(false)} data-testid="special-close"> Close Dialog 1 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() { - + Edit - + <> Save diff --git a/examples/solid-ts/src/pages/hover-card.tsx b/examples/solid-ts/src/pages/hover-card.tsx index da62de760a..586daf5e48 100644 --- a/examples/solid-ts/src/pages/hover-card.tsx +++ b/examples/solid-ts/src/pages/hover-card.tsx @@ -23,7 +23,7 @@ export default function Page() { Twitter - + diff --git a/examples/solid-ts/src/pages/pagination.tsx b/examples/solid-ts/src/pages/pagination.tsx index 77610419fa..a2f9ef800d 100644 --- a/examples/solid-ts/src/pages/pagination.tsx +++ b/examples/solid-ts/src/pages/pagination.tsx @@ -1,6 +1,5 @@ import * as pagination from "@zag-js/pagination" import { normalizeProps, useMachine } from "@zag-js/solid" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { createMemo, createUniqueId, For } from "solid-js" import { paginationControls, paginationData } from "@zag-js/shared" import { StateVisualizer } from "../components/state-visualizer" @@ -56,9 +55,7 @@ export default function Page() { - - Previous Page - + Previous {(page, i) => { @@ -78,9 +75,7 @@ export default function Page() { }} - - Next Page - + Next diff --git a/examples/solid-ts/src/pages/presence.tsx b/examples/solid-ts/src/pages/presence.tsx index 7223fa53c9..77083b20f3 100644 --- a/examples/solid-ts/src/pages/presence.tsx +++ b/examples/solid-ts/src/pages/presence.tsx @@ -16,7 +16,7 @@ export default function Page() { return ( setPresent((c) => !c)}>Toggle - + { 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..784cacd03f 100644 --- a/examples/solid-ts/src/pages/toast.tsx +++ b/examples/solid-ts/src/pages/toast.tsx @@ -12,23 +12,10 @@ function ToastItem(props: { actor: toast.Service }) { const [state, send] = useActor(props.actor) const api = createMemo(() => toast.connect(state, send, normalizeProps)) - const progressbarProps = createMemo(() => ({ - "data-scope": "toast", - "data-part": "progressbar", - "data-type": state.context.type, - style: { - opacity: api().isVisible ? 1 : 0, - "transform-origin": api().isRtl ? "right" : "left", - "animation-name": api().type === "loading" ? "none" : undefined, - "animation-play-state": api().isPaused ? "paused" : "running", - "animation-duration": `${state.context.duration}ms`, - }, - })) - return ( - + {api().type === "loading" && } {api().title} 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/package.json b/examples/svelte-ts/package.json index 9dc0c8c1af..9c8874415d 100644 --- a/examples/svelte-ts/package.json +++ b/examples/svelte-ts/package.json @@ -79,7 +79,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "form-serialize": "0.7.2", "match-sorter": "6.3.4", "lucide-svelte": "0.372.0", diff --git a/examples/svelte-ts/src/lib/components/toast-item.svelte b/examples/svelte-ts/src/lib/components/toast-item.svelte index 4defff7ff5..a3a23cd578 100644 --- a/examples/svelte-ts/src/lib/components/toast-item.svelte +++ b/examples/svelte-ts/src/lib/components/toast-item.svelte @@ -1,6 +1,7 @@ - - - {api.title} - {api.description} - Close - + + + {api.title} + {api.description} + + + + 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 @@ > - - Input {api.isChecked ? "Checked" : "Unchecked"} + + Input {api.checked ? "Checked" : "Unchecked"} Indicator - api.setChecked(true)}>Check - api.setChecked(false)}>Uncheck + api.setChecked(true)}>Check + api.setChecked(false)}>Uncheck Reset Form - + 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 @@ - {#if api.isCopied} + {#if api.copied} {:else} @@ -42,5 +42,5 @@ - + 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 - Open - Close + api.setOpen(true)}>Open + api.setOpen(false)}>Close - + 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/file-upload.svelte b/examples/svelte-ts/src/routes/file-upload.svelte index 17e4c44ae0..4d4fa1eea8 100644 --- a/examples/svelte-ts/src/routes/file-upload.svelte +++ b/examples/svelte-ts/src/routes/file-upload.svelte @@ -8,11 +8,11 @@ const controls = useControls(fileUploadControls) - const [state, send] = useMachine(fileUpload.machine({ id: "1" }), { + const [snapshot, send] = useMachine(fileUpload.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(fileUpload.connect(state, send, normalizeProps)) + const api = $derived(fileUpload.connect(snapshot, send, normalizeProps)) @@ -40,5 +40,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..0da60ac927 100644 --- a/examples/svelte-ts/src/routes/hover-card.svelte +++ b/examples/svelte-ts/src/routes/hover-card.svelte @@ -8,22 +8,22 @@ const controls = useControls(hoverCardControls) - const [state, send] = useMachine(hoverCard.machine({ id: "1" }), { + const [snapshot, send] = useMachine(hoverCard.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(hoverCard.connect(state, send, normalizeProps)) + const api = $derived(hoverCard.connect(snapshot, send, normalizeProps)) Twitter - {#if api.isOpen} + {#if api.open} - + Twitter Preview Twitter @@ -36,5 +36,5 @@ - + 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/menu.svelte b/examples/svelte-ts/src/routes/menu.svelte index 4459ccef1b..7d277a4db5 100644 --- a/examples/svelte-ts/src/routes/menu.svelte +++ b/examples/svelte-ts/src/routes/menu.svelte @@ -8,11 +8,11 @@ const controls = useControls(menuControls) - const [state, send] = useMachine(menu.machine({ id: "1", onSelect: console.log }), { + const [snapshot, send] = useMachine(menu.machine({ id: "1", onSelect: console.log }), { context: controls.context, }) - const api = $derived(menu.connect(state, send, normalizeProps)) + const api = $derived(menu.connect(snapshot, send, normalizeProps)) @@ -32,5 +32,5 @@ - + diff --git a/examples/svelte-ts/src/routes/number-input.svelte b/examples/svelte-ts/src/routes/number-input.svelte index 433145fd4d..71d8a9a347 100644 --- a/examples/svelte-ts/src/routes/number-input.svelte +++ b/examples/svelte-ts/src/routes/number-input.svelte @@ -8,16 +8,16 @@ 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)) - + Enter number: @@ -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..1c0f5589fb 100644 --- a/examples/svelte-ts/src/routes/popover.svelte +++ b/examples/svelte-ts/src/routes/popover.svelte @@ -8,11 +8,11 @@ const controls = useControls(popoverControls) - const [state, send] = useMachine(popover.machine({ id: "1" }), { + const [snapshot, send] = useMachine(popover.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(popover.connect(state, send, normalizeProps)) + const api = $derived(popover.connect(snapshot, send, normalizeProps)) @@ -29,7 +29,7 @@ - + Popover Title @@ -48,5 +48,5 @@ - + 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..111ab8046a 100644 --- a/examples/svelte-ts/src/routes/radio-group.svelte +++ b/examples/svelte-ts/src/routes/radio-group.svelte @@ -9,11 +9,11 @@ const controls = useControls(radioControls) - const [state, send] = useMachine(radio.machine({ id: "1", name: "fruit" }), { + const [snapshot, send] = useMachine(radio.machine({ id: "1", name: "fruit" }), { context: controls.context, }) - const api = $derived(radio.connect(state, send, normalizeProps)) + const api = $derived(radio.connect(snapshot, send, normalizeProps)) @@ -26,10 +26,10 @@ Fruits - + {#each radioData as opt} - + {opt.label} @@ -47,5 +47,5 @@ - + diff --git a/examples/svelte-ts/src/routes/range-slider.svelte b/examples/svelte-ts/src/routes/range-slider.svelte index 0213cab1b7..e091e846e4 100644 --- a/examples/svelte-ts/src/routes/range-slider.svelte +++ b/examples/svelte-ts/src/routes/range-slider.svelte @@ -9,7 +9,7 @@ const controls = useControls(sliderControls) - const [state, send] = useMachine( + const [snapshot, send] = useMachine( slider.machine({ id: "1", name: "quantity", @@ -18,7 +18,7 @@ { context: controls.context }, ) - const api = $derived(slider.connect(state, send, normalizeProps)) + const api = $derived(slider.connect(snapshot, send, normalizeProps)) @@ -37,7 +37,7 @@ - + {#each api.value as _, index} @@ -57,5 +57,5 @@ - + diff --git a/examples/svelte-ts/src/routes/rating-group.svelte b/examples/svelte-ts/src/routes/rating-group.svelte index 9eb49779cb..0b0b648801 100644 --- a/examples/svelte-ts/src/routes/rating-group.svelte +++ b/examples/svelte-ts/src/routes/rating-group.svelte @@ -8,11 +8,11 @@ const controls = useControls(ratingControls) - const [state, send] = useMachine(rating.machine({ id: "1", value: 2.5 }), { + const [snapshot, send] = useMachine(rating.machine({ id: "1", value: 2.5 }), { context: controls.context, }) - const api = $derived(rating.connect(state, send, normalizeProps)) + const api = $derived(rating.connect(snapshot, send, normalizeProps)) {#snippet HalfStar()} @@ -50,7 +50,7 @@ {#each api.items as index} {@const itemState = api.getItemState({ index })} - {#if itemState.isHalf} + {#if itemState.half} {@render HalfStar()} {:else} {@render Star()} @@ -65,5 +65,5 @@ - + diff --git a/examples/svelte-ts/src/routes/segment-control.svelte b/examples/svelte-ts/src/routes/segment-control.svelte index 09760f00c9..b0c0bdea9c 100644 --- a/examples/svelte-ts/src/routes/segment-control.svelte +++ b/examples/svelte-ts/src/routes/segment-control.svelte @@ -8,16 +8,16 @@ const controls = useControls(radioControls) - const [state, send] = useMachine(radio.machine({ id: "2", name: "fruit", orientation: "horizontal" }), { + const [snapshot, send] = useMachine(radio.machine({ id: "2", name: "fruit", orientation: "horizontal" }), { context: controls.context, }) - const api = $derived(radio.connect(state, send, normalizeProps)) + const api = $derived(radio.connect(snapshot, send, normalizeProps)) - + {#each radioData as opt} @@ -31,5 +31,5 @@ - + diff --git a/examples/svelte-ts/src/routes/select.svelte b/examples/svelte-ts/src/routes/select.svelte index c9ac118008..6c920ebcdd 100644 --- a/examples/svelte-ts/src/routes/select.svelte +++ b/examples/svelte-ts/src/routes/select.svelte @@ -9,7 +9,7 @@ const controls = useControls(selectControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( select.machine({ id: "1", name: "select", @@ -20,7 +20,7 @@ }, ) - const api = $derived(select.connect(_state, send, normalizeProps)) + const api = $derived(select.connect(snapshot, send, normalizeProps)) @@ -71,5 +71,5 @@ - + diff --git a/examples/svelte-ts/src/routes/signature-pad.svelte b/examples/svelte-ts/src/routes/signature-pad.svelte index 12cf0d019e..4682c3dc86 100644 --- a/examples/svelte-ts/src/routes/signature-pad.svelte +++ b/examples/svelte-ts/src/routes/signature-pad.svelte @@ -12,7 +12,7 @@ let url = $state("") const setUrl = (value: string) => (url = value) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( signaturePad.machine({ id: "1", onDrawEnd(details) { @@ -29,7 +29,7 @@ }, ) - const api = $derived(signaturePad.connect(_state, send, normalizeProps)) + const api = $derived(signaturePad.connect(snapshot, send, normalizeProps)) @@ -69,5 +69,5 @@ - + diff --git a/examples/svelte-ts/src/routes/slider.svelte b/examples/svelte-ts/src/routes/slider.svelte index af2fa2c5ba..2082542b29 100644 --- a/examples/svelte-ts/src/routes/slider.svelte +++ b/examples/svelte-ts/src/routes/slider.svelte @@ -9,7 +9,7 @@ const controls = useControls(sliderControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( slider.machine({ id: "1", name: "quantity", @@ -20,7 +20,7 @@ }, ) - const api = $derived(slider.connect(_state, send, normalizeProps)) + const api = $derived(slider.connect(snapshot, send, normalizeProps)) @@ -60,5 +60,5 @@ - + diff --git a/examples/svelte-ts/src/routes/switch.svelte b/examples/svelte-ts/src/routes/switch.svelte index 5b643b2708..dc497cfc5f 100644 --- a/examples/svelte-ts/src/routes/switch.svelte +++ b/examples/svelte-ts/src/routes/switch.svelte @@ -8,11 +8,11 @@ const controls = useControls(switchControls) - const [state, send] = useMachine(zagSwitch.machine({ id: "1", name: "switch" }), { + const [snapshot, send] = useMachine(zagSwitch.machine({ id: "1", name: "switch" }), { context: controls.context, }) - const api = $derived(zagSwitch.connect(state, send, normalizeProps)) + const api = $derived(zagSwitch.connect(snapshot, send, normalizeProps)) @@ -20,12 +20,12 @@ - + - Feature is {api.isChecked ? "enabled" : "disabled"} + Feature is {api.checked ? "enabled" : "disabled"} - + diff --git a/examples/svelte-ts/src/routes/tabs.svelte b/examples/svelte-ts/src/routes/tabs.svelte index f3419dab4c..9591f2505d 100644 --- a/examples/svelte-ts/src/routes/tabs.svelte +++ b/examples/svelte-ts/src/routes/tabs.svelte @@ -8,7 +8,7 @@ const controls = useControls(tabsControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( tabs.machine({ id: "1", value: "nils", @@ -18,12 +18,12 @@ }, ) - const api = $derived(tabs.connect(_state, send, normalizeProps)) + const api = $derived(tabs.connect(snapshot, send, normalizeProps)) - + {#each tabsData as data} @@ -44,5 +44,5 @@ - + diff --git a/examples/svelte-ts/src/routes/tags-input.svelte b/examples/svelte-ts/src/routes/tags-input.svelte index 1cfe03fef5..f832d7a26f 100644 --- a/examples/svelte-ts/src/routes/tags-input.svelte +++ b/examples/svelte-ts/src/routes/tags-input.svelte @@ -12,7 +12,7 @@ const controls = useControls(tagsInputControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( tagsInput.machine({ id: "1", value: ["React", "Vue"], @@ -22,7 +22,7 @@ }, ) - const api = $derived(tagsInput.connect(_state, send, normalizeProps)) + const api = $derived(tagsInput.connect(snapshot, send, normalizeProps)) @@ -54,5 +54,5 @@ - + diff --git a/examples/svelte-ts/src/routes/toast.svelte b/examples/svelte-ts/src/routes/toast.svelte index 44d5a1bbe1..97f11649ff 100644 --- a/examples/svelte-ts/src/routes/toast.svelte +++ b/examples/svelte-ts/src/routes/toast.svelte @@ -9,7 +9,7 @@ const controls = useControls(toastControls) - const [state, send] = useMachine( + const [snapshot, send] = useMachine( toast.group.machine({ id: "1", placement: "bottom-end", @@ -21,7 +21,7 @@ }, ) - const api = $derived(toast.group.connect(state, send, normalizeProps)) + const api = $derived(toast.group.connect(snapshot, send, normalizeProps)) let id: string | undefined = "" @@ -73,5 +73,5 @@ - + diff --git a/examples/svelte-ts/src/routes/toggle-group.svelte b/examples/svelte-ts/src/routes/toggle-group.svelte index ad8f226d4b..0d58f6fc0f 100644 --- a/examples/svelte-ts/src/routes/toggle-group.svelte +++ b/examples/svelte-ts/src/routes/toggle-group.svelte @@ -8,11 +8,11 @@ const controls = useControls(toggleGroupControls) - const [_state, send] = useMachine(toggle.machine({ id: "1" }), { + const [snapshot, send] = useMachine(toggle.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(toggle.connect(_state, send, normalizeProps)) + const api = $derived(toggle.connect(snapshot, send, normalizeProps)) @@ -27,5 +27,5 @@ - + diff --git a/examples/svelte-ts/src/routes/tooltip.svelte b/examples/svelte-ts/src/routes/tooltip.svelte index 49771ece97..1402169fdf 100644 --- a/examples/svelte-ts/src/routes/tooltip.svelte +++ b/examples/svelte-ts/src/routes/tooltip.svelte @@ -7,23 +7,23 @@ const id = "tip-1" const id2 = "tip-2" - const [_state, send] = useMachine(tooltip.machine({ id })) - const [_state2, send2] = useMachine(tooltip.machine({ id: id2 })) + const [snapshot, send] = useMachine(tooltip.machine({ id })) + const [snapshot2, send2] = useMachine(tooltip.machine({ id: id2 })) - const api = $derived(tooltip.connect(_state, send, normalizeProps)) - const api2 = $derived(tooltip.connect(_state2, send2, normalizeProps)) + const api = $derived(tooltip.connect(snapshot, send, normalizeProps)) + const api2 = $derived(tooltip.connect(snapshot2, send2, normalizeProps)) Hover me - {#if api.isOpen} + {#if api.open} Tooltip {/if} Over me - {#if api2.isOpen} + {#if api2.open} Tooltip 2 @@ -32,6 +32,6 @@ - - + + diff --git a/examples/svelte-ts/src/routes/tour.svelte b/examples/svelte-ts/src/routes/tour.svelte index 83a7e1ac6a..560698f068 100644 --- a/examples/svelte-ts/src/routes/tour.svelte +++ b/examples/svelte-ts/src/routes/tour.svelte @@ -7,11 +7,11 @@ const controls = useControls(tourControls) - const [state, send] = useMachine(tour.machine({ id: "1", steps: tourData }), { + const [snapshot, send] = useMachine(tour.machine({ id: "1", steps: tourData }), { context: controls.context, }) - const api = $derived(tour.connect(state, send, normalizeProps)) + const api = $derived(tour.connect(snapshot, send, normalizeProps)) @@ -20,9 +20,9 @@ Step 1 - + Step 2 - + <h1 id="step-2a">Iframe Content</h1> @@ -37,13 +37,13 @@ </div> <div use:portal> - <div {...api.overlayProps} /> - <div {...api.spotlightProps} /> + <div {...api.overlayProps}></div> + <div {...api.spotlightProps}></div> <div {...api.positionerProps}> {#if api.currentStep} <div {...api.contentProps}> <div {...api.arrowProps}> - <div {...api.arrowTipProps} /> + <div {...api.arrowTipProps}></div> </div> <p {...api.titleProps}>{api.currentStep.title}</p> <div {...api.descriptionProps}>{api.currentStep.description}</div> diff --git a/examples/svelte-ts/src/routes/tree-view.svelte b/examples/svelte-ts/src/routes/tree-view.svelte index f3026b886a..5d8c97de7e 100644 --- a/examples/svelte-ts/src/routes/tree-view.svelte +++ b/examples/svelte-ts/src/routes/tree-view.svelte @@ -8,11 +8,11 @@ const controls = useControls(treeviewControls) - const [state, send] = useMachine(tree.machine({ id: "1" }), { + const [snapshot, send] = useMachine(tree.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(tree.connect(state, send, normalizeProps)) + const api = $derived(tree.connect(snapshot, send, normalizeProps)) </script> <main class="tree-view"> @@ -69,5 +69,5 @@ </main> <Toolbar {controls}> - <StateVisualizer {state} /> + <StateVisualizer state={snapshot} /> </Toolbar> diff --git a/examples/vue-ts/package.json b/examples/vue-ts/package.json index 63811422f6..baef86a282 100644 --- a/examples/vue-ts/package.json +++ b/examples/vue-ts/package.json @@ -78,7 +78,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/vue": "workspace:*", "epic-spinners": "2.0.0", "form-serialize": "0.7.2", diff --git a/examples/vue-ts/src/pages/checkbox.tsx b/examples/vue-ts/src/pages/checkbox.tsx index f5b1af4eb6..f494d7d5f5 100644 --- a/examples/vue-ts/src/pages/checkbox.tsx +++ b/examples/vue-ts/src/pages/checkbox.tsx @@ -39,15 +39,15 @@ export default defineComponent({ <fieldset> <label {...api.rootProps}> <div {...api.controlProps} /> - <span {...api.labelProps}>Input {api.isChecked ? "Checked" : "Unchecked"}</span> + <span {...api.labelProps}>Input {api.checked ? "Checked" : "Unchecked"}</span> <input {...api.hiddenInputProps} data-testid="hidden-input" /> <div {...api.indicatorProps}>Indicator</div> </label> - <button type="button" disabled={api.isChecked} onClick={() => api.setChecked(true)}> + <button type="button" disabled={api.checked} onClick={() => api.setChecked(true)}> Check </button> - <button type="button" disabled={!api.isChecked} onClick={() => api.setChecked(false)}> + <button type="button" disabled={!api.checked} onClick={() => api.setChecked(false)}> Uncheck </button> <button type="reset">Reset Form</button> diff --git a/examples/vue-ts/src/pages/clipboard.tsx b/examples/vue-ts/src/pages/clipboard.tsx index bd69e93881..452ec460fb 100644 --- a/examples/vue-ts/src/pages/clipboard.tsx +++ b/examples/vue-ts/src/pages/clipboard.tsx @@ -34,7 +34,7 @@ export default defineComponent({ <label {...api.labelProps}>Copy this link</label> <div {...api.controlProps}> <input {...api.inputProps} style={{ width: "100%" }} /> - <button {...api.triggerProps}>{api.isCopied ? <ClipboardCheck /> : <ClipboardCopyIcon />}</button> + <button {...api.triggerProps}>{api.copied ? <ClipboardCheck /> : <ClipboardCopyIcon />}</button> </div> <div {...api.getIndicatorProps({ copied: true })}>Copied!</div> <div {...api.getIndicatorProps({ copied: false })}>Copy</div> diff --git a/examples/vue-ts/src/pages/collapsible.tsx b/examples/vue-ts/src/pages/collapsible.tsx index 8c4b204e92..5eda24b437 100644 --- a/examples/vue-ts/src/pages/collapsible.tsx +++ b/examples/vue-ts/src/pages/collapsible.tsx @@ -38,8 +38,8 @@ export default defineComponent({ <div> <div>Toggle Controls</div> - <button onClick={api.open}>Open</button> - <button onClick={api.close}>Close</button> + <button onClick={() => api.setOpen(true)}>Open</button> + <button onClick={() => api.setOpen(false)}>Close</button> </div> </main> diff --git a/examples/vue-ts/src/pages/date-picker.tsx b/examples/vue-ts/src/pages/date-picker.tsx index 0c8ea2cd36..91c056739c 100644 --- a/examples/vue-ts/src/pages/date-picker.tsx +++ b/examples/vue-ts/src/pages/date-picker.tsx @@ -45,7 +45,7 @@ export default defineComponent({ </output> <div {...api.controlProps}> - <input {...api.inputProps} /> + <input {...api.getInputProps({ index: 0 })} /> <button {...api.clearTriggerProps}>❌</button> <button {...api.triggerProps}>🗓</button> </div> diff --git a/examples/vue-ts/src/pages/dialog.tsx b/examples/vue-ts/src/pages/dialog.tsx index d6310f7fd4..ea6e184f1d 100644 --- a/examples/vue-ts/src/pages/dialog.tsx +++ b/examples/vue-ts/src/pages/dialog.tsx @@ -30,7 +30,7 @@ export default defineComponent({ Open Dialog </button> <div style={{ minHeight: "1200px", pointerEvents: "none" }} /> - {parentDialog.isOpen && ( + {parentDialog.open && ( <Teleport to="body"> <div {...parentDialog.backdropProps} /> <div {...parentDialog.positionerProps} data-testid="positioner-1"> @@ -47,7 +47,7 @@ export default defineComponent({ <button {...childDialog.triggerProps} data-testid="trigger-2"> Open Nested </button> - {childDialog.isOpen && ( + {childDialog.open && ( <Teleport to="body"> <div {...childDialog.positionerProps} data-testid="positioner-2"> <div {...childDialog.contentProps}> @@ -55,7 +55,7 @@ export default defineComponent({ <button {...childDialog.closeTriggerProps} data-testid="close-2"> X </button> - <button onClick={() => parentDialog.close()} data-testid="special-close"> + <button onClick={() => parentDialog.setOpen(false)} data-testid="special-close"> Close Dialog 1 </button> </div> diff --git a/examples/vue-ts/src/pages/editable.tsx b/examples/vue-ts/src/pages/editable.tsx index 18c1fae366..37238315e2 100644 --- a/examples/vue-ts/src/pages/editable.tsx +++ b/examples/vue-ts/src/pages/editable.tsx @@ -29,12 +29,12 @@ export default defineComponent({ <span data-testid="preview" {...api.previewProps} /> </div> <div {...api.controlProps}> - {!api.isEditing && ( + {!api.editing && ( <button data-testid="edit-button" {...api.editTriggerProps}> Edit </button> )} - {api.isEditing && ( + {api.editing && ( <> <button data-testid="save-button" {...api.submitTriggerProps}> Save diff --git a/examples/vue-ts/src/pages/hover-card.tsx b/examples/vue-ts/src/pages/hover-card.tsx index e7539bef97..9b6f4463e7 100644 --- a/examples/vue-ts/src/pages/hover-card.tsx +++ b/examples/vue-ts/src/pages/hover-card.tsx @@ -28,7 +28,7 @@ export default defineComponent({ Twitter </a> - {api.isOpen && ( + {api.open && ( <Teleport to="body"> <div {...api.positionerProps}> <div {...api.contentProps}> diff --git a/examples/vue-ts/src/pages/pagination.tsx b/examples/vue-ts/src/pages/pagination.tsx index 7540cc9caf..6c2f2a9bf9 100644 --- a/examples/vue-ts/src/pages/pagination.tsx +++ b/examples/vue-ts/src/pages/pagination.tsx @@ -1,6 +1,5 @@ import * as pagination from "@zag-js/pagination" import { normalizeProps, useMachine } from "@zag-js/vue" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { computed, defineComponent, h, Fragment } from "vue" import { paginationControls, paginationData } from "@zag-js/shared" import { StateVisualizer } from "../components/state-visualizer" @@ -60,9 +59,7 @@ export default defineComponent({ <nav {...api.rootProps}> <ul> <li> - <button {...api.prevTriggerProps}> - Previous <span style={visuallyHiddenStyle}>Page</span> - </button> + <button {...api.prevTriggerProps}>Previous</button> </li> {api.pages.map((page, i) => { if (page.type === "page") @@ -81,9 +78,7 @@ export default defineComponent({ ) })} <li> - <button {...api.nextTriggerProps}> - Next <span style={visuallyHiddenStyle}>Page</span> - </button> + <button {...api.nextTriggerProps}>Next</button> </li> </ul> </nav> diff --git a/examples/vue-ts/src/pages/presence.tsx b/examples/vue-ts/src/pages/presence.tsx index 9d9ebab424..0c889bf9bb 100644 --- a/examples/vue-ts/src/pages/presence.tsx +++ b/examples/vue-ts/src/pages/presence.tsx @@ -26,7 +26,7 @@ export default defineComponent({ return ( <main class="presence"> <button onClick={() => (present.value = !present.value)}>Toggle</button> - {api.isPresent && ( + {api.present && ( <div ref={nodeRef} data-scope="presence" data-state={present.value ? "open" : "closed"}> Content </div> diff --git a/examples/vue-ts/src/pages/rating-group.tsx b/examples/vue-ts/src/pages/rating-group.tsx index b65dfecca6..5c4fbaff77 100644 --- a/examples/vue-ts/src/pages/rating-group.tsx +++ b/examples/vue-ts/src/pages/rating-group.tsx @@ -71,7 +71,7 @@ export default defineComponent({ const state = api.getItemState({ index }) return ( <span key={index} {...api.getItemProps({ index })}> - {state.isHalf ? <HalfStar /> : <Star />} + {state.half ? <HalfStar /> : <Star />} </span> ) })} diff --git a/examples/vue-ts/src/pages/switch.tsx b/examples/vue-ts/src/pages/switch.tsx index d9f7265bfb..2904483c8b 100644 --- a/examples/vue-ts/src/pages/switch.tsx +++ b/examples/vue-ts/src/pages/switch.tsx @@ -34,7 +34,7 @@ export default defineComponent({ <span {...api.controlProps}> <span {...api.thumbProps} /> </span> - <span {...api.labelProps}>Feature is {api.isChecked ? "enabled" : "disabled"}</span> + <span {...api.labelProps}>Feature is {api.checked ? "enabled" : "disabled"}</span> </label> </main> diff --git a/examples/vue-ts/src/pages/toast.tsx b/examples/vue-ts/src/pages/toast.tsx index ccb081aeab..0460bcc005 100644 --- a/examples/vue-ts/src/pages/toast.tsx +++ b/examples/vue-ts/src/pages/toast.tsx @@ -19,26 +19,13 @@ const ToastItem = defineComponent({ setup(props) { const [state, send] = useActor(props.actor) const apiRef = computed(() => toast.connect(state.value, send, normalizeProps)) - const progressbarProps = computed(() => ({ - "data-scope": "toast", - "data-part": "progressbar", - "data-type": state.value.context.type, - style: { - opacity: apiRef.value.isVisible ? 1 : 0, - transformOrigin: apiRef.value.isRtl ? "right" : "left", - animationName: apiRef.value.type === "loading" ? "none" : undefined, - animationPlayState: apiRef.value.isPaused ? "paused" : "running", - animationDuration: "var(--duration)", - }, - })) - return () => { const api = apiRef.value return ( - <pre {...api.rootProps}> + <div {...api.rootProps}> <span {...api.ghostBeforeProps} /> - <div {...progressbarProps.value} /> + <div data-scope="toast" data-part="progressbar" /> <p {...api.titleProps}> {api.type === "loading" && <LoaderBar />} {api.title} @@ -47,7 +34,7 @@ const ToastItem = defineComponent({ <button {...api.closeTriggerProps}> <XIcon /> </button> - </pre> + </div> ) } }, diff --git a/examples/vue-ts/src/pages/tooltip.tsx b/examples/vue-ts/src/pages/tooltip.tsx index 824574adf3..a063f1ccc8 100644 --- a/examples/vue-ts/src/pages/tooltip.tsx +++ b/examples/vue-ts/src/pages/tooltip.tsx @@ -21,7 +21,7 @@ export default defineComponent({ <main class="tooltip" style={{ gap: "12px", flexDirection: "row" }}> <div class="root"> <button {...api.triggerProps}>Hover me</button> - {api.isOpen && ( + {api.open && ( <Teleport to="body"> <div {...api.positionerProps}> <div class="tooltip-content" data-testid="tip-1-tooltip" {...api.contentProps}> @@ -32,7 +32,7 @@ export default defineComponent({ )} <button {...api2.triggerProps}>Over me</button> - {api2.isOpen && ( + {api2.open && ( <Teleport to="body"> <div {...api2.positionerProps}> <div class="tooltip-content" data-testid="tip-2-tooltip" {...api2.contentProps}> diff --git a/packages/docs/data/api.json b/packages/docs/data/api.json index 2f23dd59b0..2365af393a 100644 --- a/packages/docs/data/api.json +++ b/packages/docs/data/api.json @@ -70,14 +70,10 @@ }, "avatar": { "api": { - "isLoaded": { + "loaded": { "type": "boolean", "description": "Whether the image is loaded." }, - "showFallback": { - "type": "boolean", - "description": "Whether the fallback is shown." - }, "setSrc": { "type": "(src: string) => void", "description": "Function to set new src." @@ -121,9 +117,9 @@ "type": "number", "description": "The current scroll progress of the carousel" }, - "isAutoplay": { + "autoPlaying": { "type": "boolean", - "description": "Whether the carousel is currently auto-playing" + "description": "Whether the carousel is auto playing" }, "canScrollNext": { "type": "boolean", @@ -209,19 +205,19 @@ }, "checkbox": { "api": { - "isChecked": { + "checked": { "type": "boolean", "description": "Whether the checkbox is checked" }, - "isDisabled": { + "disabled": { "type": "boolean", "description": "Whether the checkbox is disabled" }, - "isIndeterminate": { + "indeterminate": { "type": "boolean", "description": "Whether the checkbox is indeterminate" }, - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the checkbox is focused" }, @@ -245,27 +241,31 @@ }, "disabled": { "type": "boolean", - "description": "If `true`, the checkbox will be disabled" + "description": "Whether the checkbox is disabled" }, "invalid": { "type": "boolean", - "description": "If `true`, the checkbox is marked as invalid." + "description": "Whether the checkbox is invalid" }, "required": { "type": "boolean", - "description": "If `true`, the checkbox input is marked as required," + "description": "Whether the checkbox is required" }, "checked": { "type": "CheckedState", - "description": "If `true`, the checkbox will be checked." + "description": "The checked state of the checkbox" + }, + "readOnly": { + "type": "boolean", + "description": "Whether the checkbox is read-only" }, "onCheckedChange": { "type": "(details: CheckedChangeDetails) => void", - "description": "The callback invoked when the checked state of the `Checkbox` changes." + "description": "The callback invoked when the checked state changes." }, "name": { "type": "string", - "description": "The name of the input field in a checkbox. Useful for form submission." + "description": "The name of the input field in a checkbox.\nUseful for form submission." }, "form": { "type": "string", @@ -293,7 +293,7 @@ }, "clipboard": { "api": { - "isCopied": { + "copied": { "type": "boolean", "description": "Whether the value has been copied to the clipboard" }, @@ -339,25 +339,21 @@ }, "collapsible": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the collapsible is open." }, - "isVisible": { + "visible": { "type": "boolean", "description": "Whether the collapsible is visible (open or closing)" }, - "isDisabled": { + "disabled": { "type": "boolean", "description": "Whether the collapsible is disabled" }, - "open": { - "type": "() => void", - "description": "Function to open the collapsible." - }, - "close": { - "type": "() => void", - "description": "Function to close the collapsible." + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the collapsible." } }, "context": { @@ -402,11 +398,11 @@ }, "color-picker": { "api": { - "isDragging": { + "dragging": { "type": "boolean", "description": "Whether the color picker is being dragged" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the color picker is open" }, @@ -446,13 +442,9 @@ "type": "(value: number) => void", "description": "Function to set the color alpha" }, - "open": { - "type": "() => void", - "description": "Function to open the color picker" - }, - "close": { - "type": "() => void", - "description": "Function to close the color picker" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the color picker" } }, "context": { @@ -544,15 +536,15 @@ }, "combobox": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the combobox is focused" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the combobox is open" }, - "isInputValueEmpty": { + "inputEmpty": { "type": "boolean", "description": "Whether the combobox input value is empty" }, @@ -612,13 +604,9 @@ "type": "(props: ItemProps) => ItemState", "description": "Returns the state of a combobox item" }, - "open": { - "type": "() => void", - "description": "Function to open the combobox" - }, - "close": { - "type": "() => void", - "description": "Function to close the combobox" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the combobox" }, "collection": { "type": "Collection<V>", @@ -795,11 +783,11 @@ }, "date-picker": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the input is focused" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the date picker is open" }, @@ -883,13 +871,9 @@ "type": "() => void", "description": "Clears the selected date(s)." }, - "open": { - "type": "() => void", - "description": "Function to open the calendar." - }, - "close": { - "type": "() => void", - "description": "Function to close the calendar." + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the calendar." }, "focusMonth": { "type": "(month: number) => void", @@ -1076,17 +1060,13 @@ }, "dialog": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the dialog is open" }, - "open": { - "type": "() => void", - "description": "Function to open the dialog" - }, - "close": { - "type": "() => void", - "description": "Function to close the dialog" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the dialog" } }, "context": { @@ -1180,11 +1160,11 @@ }, "editable": { "api": { - "isEditing": { + "editing": { "type": "boolean", "description": "Whether the editable is in edit mode" }, - "isValueEmpty": { + "empty": { "type": "boolean", "description": "Whether the editable value is empty" }, @@ -1325,15 +1305,15 @@ }, "file-upload": { "api": { - "isDragging": { + "dragging": { "type": "boolean", "description": "Whether the user is dragging something over the root element" }, - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the user is focused on the dropzone element" }, - "open": { + "openFilePicker": { "type": "() => void", "description": "Function to open the file dialog" }, @@ -1449,15 +1429,19 @@ }, "floating-panel": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the panel is open" }, - "isDragging": { + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the panel" + }, + "dragging": { "type": "boolean", "description": "Whether the panel is being dragged" }, - "isResizing": { + "resizing": { "type": "boolean", "description": "Whether the panel is being resized" } @@ -1556,18 +1540,14 @@ }, "hover-card": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the hover card is open" }, - "open": { - "type": "() => void", + "setOpen": { + "type": "(open: boolean) => void", "description": "Function to open the hover card" }, - "close": { - "type": "() => void", - "description": "Function to close the hover card" - }, "reposition": { "type": "(options?: Partial<PositioningOptions>) => void", "description": "Function to reposition the popover" @@ -1619,17 +1599,13 @@ }, "menu": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the menu is open" }, - "open": { - "type": "() => void", - "description": "Function to open the menu" - }, - "close": { - "type": "() => void", - "description": "Function to close the menu" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the menu" }, "highlightedValue": { "type": "string", @@ -1746,15 +1722,15 @@ }, "number-input": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the input is focused." }, - "isInvalid": { + "invalid": { "type": "boolean", "description": "Whether the input is invalid." }, - "isValueEmpty": { + "empty": { "type": "boolean", "description": "Whether the input value is empty." }, @@ -1939,14 +1915,6 @@ "type": "<V>(data: V[]) => V[]", "description": "Function to slice an array of data based on the current page." }, - "isFirstPage": { - "type": "boolean", - "description": "Whether the current page is the first page." - }, - "isLastPage": { - "type": "boolean", - "description": "Whether the current page is the last page." - }, "setCount": { "type": "(count: number) => void", "description": "Function to set the total number of pages." @@ -2019,7 +1987,7 @@ "type": "string", "description": "The value of the input as a string." }, - "isValueComplete": { + "complete": { "type": "boolean", "description": "Whether all inputs are filled." }, @@ -2134,17 +2102,13 @@ "type": "boolean", "description": "Whether the popover is portalled" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the popover is open" }, - "open": { - "type": "() => void", - "description": "Function to open the popover" - }, - "close": { - "type": "() => void", - "description": "Function to close the popover" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the popover" }, "reposition": { "type": "(options?: Partial<PositioningOptions>) => void", @@ -2231,7 +2195,7 @@ }, "presence": { "api": { - "isPresent": { + "present": { "type": "boolean", "description": "Whether the node is present in the DOM." }, @@ -2351,6 +2315,10 @@ "type": "boolean", "description": "If `true`, the radio group will be disabled" }, + "readOnly": { + "type": "boolean", + "description": "Whether the checkbox is read-only" + }, "onValueChange": { "type": "(details: ValueChangeDetails) => void", "description": "Function called once a radio is checked" @@ -2384,7 +2352,7 @@ "type": "() => void", "description": "Clears the value of the rating group" }, - "isHovering": { + "hovering": { "type": "boolean", "description": "Whether the rating group is being hovered" }, @@ -2475,15 +2443,15 @@ }, "select": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the select is focused" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the select is open" }, - "isValueEmpty": { + "empty": { "type": "boolean", "description": "Whether the select value is empty" }, @@ -2535,13 +2503,9 @@ "type": "(props: ItemProps<any>) => ItemState", "description": "Returns the state of a select item" }, - "open": { - "type": "() => void", - "description": "Function to open the select" - }, - "close": { - "type": "() => void", - "description": "Function to close the select" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the select" }, "collection": { "type": "Collection<V>", @@ -2662,11 +2626,11 @@ }, "signature-pad": { "api": { - "isEmpty": { + "empty": { "type": "boolean", "description": "Whether the signature pad is empty." }, - "isDrawing": { + "drawing": { "type": "boolean", "description": "Whether the user is currently drawing." }, @@ -2733,11 +2697,11 @@ "type": "number[]", "description": "The value of the slider." }, - "isDragging": { + "dragging": { "type": "boolean", "description": "Whether the slider is being dragged." }, - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the slider is focused." }, @@ -2840,7 +2804,7 @@ "description": "Function invoked when the slider's focused index changes" }, "getAriaValueText": { - "type": "(value: number, index: number) => string", + "type": "(details: ValueTextDetails) => string", "description": "Function that returns a human readable value for the slider thumb" }, "min": { @@ -2892,11 +2856,11 @@ }, "splitter": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the splitter is focused." }, - "isDragging": { + "dragging": { "type": "boolean", "description": "Whether the splitter is being dragged." }, @@ -2959,15 +2923,15 @@ }, "switch": { "api": { - "isChecked": { + "checked": { "type": "boolean", "description": "Whether the checkbox is checked" }, - "isDisabled": { + "disabled": { "type": "boolean", "description": "Whether the checkbox is disabled" }, - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the checkbox is focused" }, @@ -3001,6 +2965,10 @@ "type": "boolean", "description": "If `true`, the switch input is marked as required," }, + "readOnly": { + "type": "boolean", + "description": "Whether the switch is read-only" + }, "onCheckedChange": { "type": "(details: CheckedChangeDetails) => void", "description": "Function to call when the switch is clicked." @@ -3117,7 +3085,7 @@ }, "tags-input": { "api": { - "isEmpty": { + "empty": { "type": "boolean", "description": "Whether the tags are empty" }, @@ -3137,7 +3105,7 @@ "type": "number", "description": "The number of the tags." }, - "isAtMax": { + "atMax": { "type": "boolean", "description": "Whether the tags have reached the max limit." }, @@ -3357,18 +3325,14 @@ }, "tooltip": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the tooltip is open." }, - "open": { - "type": "() => void", + "setOpen": { + "type": "(open: boolean) => void", "description": "Function to open the tooltip." }, - "close": { - "type": "() => void", - "description": "Function to close the tooltip." - }, "reposition": { "type": "(options?: Partial<PositioningOptions>) => void", "description": "Function to reposition the popover" 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<S.AnyEventObject> * -----------------------------------------------------------------------------*/ 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<T extends PropTypes = PropTypes> { @@ -120,7 +135,8 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * 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"] 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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" 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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..b92e9df1bd 100644 --- a/packages/machines/carousel/src/carousel.types.ts +++ b/packages/machines/carousel/src/carousel.types.ts @@ -98,15 +98,33 @@ export type Send = S.Send<S.AnyEventObject> * -----------------------------------------------------------------------------*/ export interface ItemProps { + /** + * The index of the item. + */ index: number } export interface ItemState { + /** + * The text value of the item. Used for accessibility. + */ valueText: string - isCurrent: boolean - isNext: boolean - isPrevious: boolean - isInView: boolean + /** + * Whether the item is the current item in the carousel + */ + current: boolean + /** + * Whether the item is the next item in the carousel + */ + next: boolean + /** + * Whether the item is the previous item in the carousel + */ + previous: boolean + /** + * Whether the item is in view + */ + inView: boolean } export interface IndicatorProps { @@ -124,9 +142,9 @@ export interface MachineApi<T extends PropTypes = PropTypes> { */ 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 */ diff --git a/packages/machines/checkbox/package.json b/packages/machines/checkbox/package.json index e1a9a13721..e7f490b20e 100644 --- a/packages/machines/checkbox/package.json +++ b/packages/machines/checkbox/package.json @@ -41,7 +41,6 @@ "@zag-js/types": "workspace:*", "@zag-js/dom-query": "workspace:*", "@zag-js/dom-event": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/form-utils": "workspace:*", "@zag-js/utils": "workspace:*" }, diff --git a/packages/machines/checkbox/src/checkbox.connect.ts b/packages/machines/checkbox/src/checkbox.connect.ts index 307448656d..ff16d983b3 100644 --- a/packages/machines/checkbox/src/checkbox.connect.ts +++ b/packages/machines/checkbox/src/checkbox.connect.ts @@ -1,38 +1,39 @@ -import { dataAttr } from "@zag-js/dom-query" +import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./checkbox.anatomy" import { dom } from "./checkbox.dom" -import type { CheckedState, MachineApi, Send, State } from "./checkbox.types" +import type { MachineApi, Send, State } from "./checkbox.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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 readOnly = state.context.readOnly const dataAttrs = { "data-active": dataAttr(state.context.active), - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), + "data-readonly": dataAttr(readOnly), "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 { - isChecked, - isDisabled, - isIndeterminate, - isFocused, + checked, + disabled, + indeterminate, + focused, checkedState: state.context.checked, - setChecked(checked: CheckedState) { + setChecked(checked) { send({ type: "CHECKED.SET", checked, isTrusted: false }) }, toggleChecked() { - send({ type: "CHECKED.TOGGLE", checked: isChecked, isTrusted: false }) + send({ type: "CHECKED.TOGGLE", checked: checked, isTrusted: false }) }, rootProps: normalize.label({ @@ -42,11 +43,11 @@ export function connect<T extends PropTypes>(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 +76,16 @@ export function connect<T extends PropTypes>(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, @@ -92,6 +93,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize value: state.context.value, style: visuallyHiddenStyle, onChange(event) { + if (readOnly) { + event.preventDefault() + return + } + const checked = event.currentTarget.checked send({ type: "CHECKED.SET", checked, isTrusted: true }) }, diff --git a/packages/machines/checkbox/src/checkbox.props.ts b/packages/machines/checkbox/src/checkbox.props.ts index f0072b357b..46e1903a4f 100644 --- a/packages/machines/checkbox/src/checkbox.props.ts +++ b/packages/machines/checkbox/src/checkbox.props.ts @@ -13,6 +13,7 @@ export const props = createProps<UserDefinedContext>()([ "invalid", "name", "onCheckedChange", + "readOnly", "required", "value", ]) diff --git a/packages/machines/checkbox/src/checkbox.types.ts b/packages/machines/checkbox/src/checkbox.types.ts index b41e80e46f..d3be097554 100644 --- a/packages/machines/checkbox/src/checkbox.types.ts +++ b/packages/machines/checkbox/src/checkbox.types.ts @@ -28,27 +28,32 @@ interface PublicContext extends DirectionProperty, CommonProperties { */ ids?: ElementIds /** - * If `true`, the checkbox will be disabled + * Whether the checkbox is disabled */ disabled?: boolean /** - * If `true`, the checkbox is marked as invalid. + * Whether the checkbox is invalid */ invalid?: boolean /** - * If `true`, the checkbox input is marked as required, + * Whether the checkbox is required */ required?: boolean /** - * If `true`, the checkbox will be checked. + * The checked state of the checkbox */ checked: CheckedState /** - * The callback invoked when the checked state of the `Checkbox` changes. + * Whether the checkbox is read-only + */ + readOnly?: boolean + /** + * The callback invoked when the checked state changes. */ onCheckedChange?(details: CheckedChangeDetails): void /** - * The name of the input field in a checkbox. Useful for form submission. + * The name of the input field in a checkbox. + * Useful for form submission. */ name?: string /** @@ -120,19 +125,19 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * 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 */ 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * Whether the value has been copied to the clipboard */ - isCopied: boolean + copied: boolean /** * The value to be copied to the clipboard */ diff --git a/packages/machines/collapsible/src/collapsible.connect.ts b/packages/machines/collapsible/src/collapsible.connect.ts index 7d2fcfd25d..7034c3daf5 100644 --- a/packages/machines/collapsible/src/collapsible.connect.ts +++ b/packages/machines/collapsible/src/collapsible.connect.ts @@ -5,39 +5,37 @@ import { dom } from "./collapsible.dom" import type { MachineApi, Send, State } from "./collapsible.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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) { + if (_open === open) return + 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 +47,13 @@ export function connect<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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"] diff --git a/packages/machines/color-picker/package.json b/packages/machines/color-picker/package.json index d7a2811237..8905765bcc 100644 --- a/packages/machines/color-picker/package.json +++ b/packages/machines/color-picker/package.json @@ -44,7 +44,6 @@ "@zag-js/utils": "workspace:*", "@zag-js/form-utils": "workspace:*", "@zag-js/color-utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/popper": "workspace:*", "@zag-js/text-selection": "workspace:*", "@zag-js/types": "workspace:*" diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts index f284442c8b..ad4988e790 100644 --- a/packages/machines/color-picker/src/color-picker.connect.ts +++ b/packages/machines/color-picker/src/color-picker.connect.ts @@ -8,10 +8,9 @@ import { isModifierKey, type EventKeyMap, } from "@zag-js/dom-event" -import { dataAttr, query } from "@zag-js/dom-query" +import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query" import { getPlacementStyles } from "@zag-js/popper" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./color-picker.anatomy" import { dom } from "./color-picker.dom" import type { @@ -32,12 +31,12 @@ export function connect<T extends PropTypes>(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 +57,19 @@ export function connect<T extends PropTypes>(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) { + if (_open === open) return + send({ type: _open ? "OPEN" : "CLOSE" }) }, setValue(value) { send({ type: "VALUE.SET", value: normalizeColor(value), src: "set-color" }) @@ -99,7 +96,7 @@ export function connect<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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.machine.ts b/packages/machines/color-picker/src/color-picker.machine.ts index b0a1d271fa..4bb0f1a20f 100644 --- a/packages/machines/color-picker/src/color-picker.machine.ts +++ b/packages/machines/color-picker/src/color-picker.machine.ts @@ -404,11 +404,11 @@ export function machine(userContext: UserDefinedContext) { openEyeDropper(ctx) { const isSupported = "EyeDropper" in dom.getWin(ctx) if (!isSupported) return - const win = dom.getWin(ctx) as any + const win = dom.getWin(ctx) const picker = new win.EyeDropper() picker .open() - .then(({ sRGBHex }: { sRGBHex: string }) => { + .then(({ sRGBHex }) => { const format = ctx.value.getFormat() const color = parseColor(sRGBHex).toFormat(format) as Color set.value(ctx, color) diff --git a/packages/machines/color-picker/src/color-picker.types.ts b/packages/machines/color-picker/src/color-picker.types.ts index d01e222427..c6dd65a700 100644 --- a/packages/machines/color-picker/src/color-picker.types.ts +++ b/packages/machines/color-picker/src/color-picker.types.ts @@ -7,6 +7,20 @@ import type { MaybeFunction } from "@zag-js/utils" export type ExtendedColorChannel = ColorChannel | "hex" | "css" +// patch the global window object to include the EyeDropper API + +interface EyeDropper { + new (): EyeDropper + open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> + [Symbol.toStringTag]: "EyeDropper" +} + +declare global { + interface Window { + EyeDropper: EyeDropper + } +} + /* ----------------------------------------------------------------------------- * Callback details * -----------------------------------------------------------------------------*/ @@ -218,8 +232,8 @@ export interface SwatchTriggerProps { export interface SwatchTriggerState { value: Color valueAsString: string - isChecked: boolean - isDisabled: boolean + checked: boolean + disabled: boolean } export interface SwatchProps { @@ -241,11 +255,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * 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 +297,9 @@ export interface MachineApi<T extends PropTypes = PropTypes> { */ 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"] diff --git a/packages/machines/combobox/src/combobox.connect.ts b/packages/machines/combobox/src/combobox.connect.ts index c698c343e7..56bea6054a 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<T extends PropTypes, V extends CollectionItem>( state: State, @@ -21,13 +21,13 @@ export function connect<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( focus() { dom.getInputEl(state.context)?.focus() }, - open() { - if (isOpen) return - send("OPEN") + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( ...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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( }, 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( "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..858b85e86c 100644 --- a/packages/machines/combobox/src/combobox.types.ts +++ b/packages/machines/combobox/src/combobox.types.ts @@ -278,15 +278,33 @@ export type Send = S.Send<S.AnyEventObject> * -----------------------------------------------------------------------------*/ export interface ItemProps { + /** + * Whether hovering outside should clear the highlighted state + */ persistFocus?: boolean + /** + * The item to render + */ item: CollectionItem } export interface ItemState { + /** + * The value of the item + */ value: string - isDisabled: boolean - isSelected: boolean - isHighlighted: boolean + /** + * Whether the item is disabled + */ + disabled: boolean + /** + * Whether the item is selected + */ + selected: boolean + /** + * Whether the item is highlighted via pointer or keyboard navigation + */ + highlighted: boolean } export interface ItemGroupProps { @@ -301,15 +319,15 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio /** * Whether the combobox is focused */ - isFocused: boolean + focused: boolean /** * Whether the combobox is open */ - isOpen: boolean + open: boolean /** * Whether the combobox input value is empty */ - isInputValueEmpty: boolean + inputEmpty: boolean /** * The value of the combobox input */ @@ -367,13 +385,9 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio */ getItemState(props: ItemProps): ItemState /** - * Function to open the combobox - */ - open(): void - /** - * Function to close the combobox + * Function to open or close the combobox */ - close(): void + setOpen(open: boolean): void /** * Function to toggle the combobox */ diff --git a/packages/machines/date-picker/src/date-picker.connect.ts b/packages/machines/date-picker/src/date-picker.connect.ts index fce409f70f..26be920504 100644 --- a/packages/machines/date-picker/src/date-picker.connect.ts +++ b/packages/machines/date-picker/src/date-picker.connect.ts @@ -63,7 +63,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const disabled = state.context.disabled const readOnly = state.context.readOnly - const isInteractive = state.context.isInteractive + const interactive = state.context.isInteractive const min = state.context.min const max = state.context.max @@ -71,8 +71,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const timeZone = state.context.timeZone const startOfWeek = state.context.startOfWeek - const isFocused = state.matches("focused") - const isOpen = state.matches("open") + const focused = state.matches("focused") + const open = state.matches("open") const isRangePicker = state.context.selectionMode === "range" const isDateUnavailableFn = state.context.isDateUnavailable @@ -120,12 +120,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const { value, disabled } = props const normalized = focusedValue.set({ year: value }) const cellState = { - isFocused: focusedValue.year === props.value, - isSelectable: !isDateInvalid(normalized, min, max), - isSelected: !!selectedValue.find((date) => date.year === value), + focused: focusedValue.year === props.value, + selectable: !isDateInvalid(normalized, min, max), + selected: !!selectedValue.find((date) => date.year === value), valueText: value.toString(), - get isDisabled() { - return disabled || !cellState.isSelectable + get disabled() { + return disabled || !cellState.selectable }, } return cellState @@ -136,12 +136,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const normalized = focusedValue.set({ month: value }) const formatter = getMonthFormatter(locale, timeZone) const cellState = { - isFocused: focusedValue.month === props.value, - isSelectable: !isDateInvalid(normalized, min, max), - isSelected: !!selectedValue.find((date) => date.month === value && date.year === focusedValue.year), + focused: focusedValue.month === props.value, + selectable: !isDateInvalid(normalized, min, max), + selected: !!selectedValue.find((date) => date.month === value && date.year === focusedValue.year), valueText: formatter.format(normalized.toDate(timeZone)), - get isDisabled() { - return disabled || !cellState.isSelectable + get disabled() { + return disabled || !cellState.selectable }, } return cellState @@ -156,28 +156,28 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const end = visibleRange.start.add(unitDuration).subtract({ days: 1 }) const cellState = { - isInvalid: isDateInvalid(value, min, max), - isDisabled: disabled || isDateDisabled(value, visibleRange.start, end, min, max), - isSelected: selectedValue.some((date) => isDateEqual(value, date)), - isUnavailable: isDateUnavailable(value, isDateUnavailableFn, locale, min, max) && !disabled, - isOutsideRange: isDateOutsideVisibleRange(value, visibleRange.start, end), - isInRange: + invalid: isDateInvalid(value, min, max), + disabled: disabled || isDateDisabled(value, visibleRange.start, end, min, max), + selected: selectedValue.some((date) => isDateEqual(value, date)), + unavailable: isDateUnavailable(value, isDateUnavailableFn, locale, min, max) && !disabled, + outsideRange: isDateOutsideVisibleRange(value, visibleRange.start, end), + inRange: isRangePicker && (isDateWithinRange(value, selectedValue) || isDateWithinRange(value, hoveredRangeValue)), - isFirstInRange: isRangePicker && isDateEqual(value, selectedValue[0]), - isLastInRange: isRangePicker && isDateEqual(value, selectedValue[1]), - isToday: isTodayDate(value, timeZone), - isWeekend: isWeekend(value, locale), + firstInRange: isRangePicker && isDateEqual(value, selectedValue[0]), + lastInRange: isRangePicker && isDateEqual(value, selectedValue[1]), + today: isTodayDate(value, timeZone), + weekend: isWeekend(value, locale), formattedDate: formatter.format(value.toDate(timeZone)), - get isFocused() { - return isDateEqual(value, focusedValue) && !cellState.isOutsideRange + get focused() { + return isDateEqual(value, focusedValue) && !cellState.outsideRange }, get ariaLabel() { - if (cellState.isUnavailable) return `Not available. ${cellState.formattedDate}` - if (cellState.isSelected) return `Selected date. ${cellState.formattedDate}` + if (cellState.unavailable) return `Not available. ${cellState.formattedDate}` + if (cellState.selected) return `Selected date. ${cellState.formattedDate}` return `Choose ${cellState.formattedDate}` }, - get isSelectable() { - return !cellState.isDisabled && !cellState.isUnavailable + get selectable() { + return !cellState.disabled && !cellState.unavailable }, } return cellState @@ -189,8 +189,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize } return { - isFocused, - isOpen, + focused, + open, view: state.context.view, getRangePresetValue(preset) { return getDateRangePreset(preset, locale, timeZone) @@ -231,11 +231,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize setFocusedValue(value) { send({ type: "FOCUS.SET", value }) }, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, focusMonth, focusYear, @@ -270,7 +268,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.root.attrs, dir: state.context.dir, id: dom.getRootId(state.context), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(readOnly), }), @@ -279,7 +277,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.label.attrs, dir: state.context.dir, htmlFor: dom.getInputId(state.context, 0), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(readOnly), }), @@ -298,9 +296,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize contentProps: normalize.element({ ...parts.content.attrs, - hidden: !isOpen, + hidden: !open, dir: state.context.dir, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "data-placement": currentPlacement, id: dom.getContentId(state.context), role: "application", @@ -425,10 +423,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return normalize.element({ ...parts.tableCell.attrs, role: "gridcell", - "aria-disabled": ariaAttr(!cellState.isSelectable), - "aria-selected": cellState.isSelected || cellState.isInRange, - "aria-invalid": ariaAttr(cellState.isInvalid), - "aria-current": cellState.isToday ? "date" : undefined, + "aria-disabled": ariaAttr(!cellState.selectable), + "aria-selected": cellState.selected || cellState.inRange, + "aria-invalid": ariaAttr(cellState.invalid), + "aria-current": cellState.today ? "date" : undefined, "data-value": value.toString(), }) }, @@ -440,28 +438,29 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getCellTriggerId(state.context, value.toString()), role: "button", dir: state.context.dir, - tabIndex: cellState.isFocused ? 0 : -1, + tabIndex: cellState.focused ? 0 : -1, "aria-label": cellState.ariaLabel, - "aria-disabled": ariaAttr(!cellState.isSelectable), - "aria-invalid": ariaAttr(cellState.isInvalid), - "data-disabled": dataAttr(!cellState.isSelectable), - "data-selected": dataAttr(cellState.isSelected), + "aria-disabled": ariaAttr(!cellState.selectable), + "aria-invalid": ariaAttr(cellState.invalid), + "data-disabled": dataAttr(!cellState.selectable), + "data-selected": dataAttr(cellState.selected), "data-value": value.toString(), "data-view": "day", - "data-today": dataAttr(cellState.isToday), - "data-focused": dataAttr(cellState.isFocused), - "data-unavailable": dataAttr(cellState.isUnavailable), - "data-range-start": dataAttr(cellState.isFirstInRange), - "data-range-end": dataAttr(cellState.isLastInRange), - "data-in-range": dataAttr(cellState.isInRange), - "data-outside-range": dataAttr(cellState.isOutsideRange), - "data-weekend": dataAttr(cellState.isWeekend), - onClick() { - if (!cellState.isSelectable) return + "data-today": dataAttr(cellState.today), + "data-focused": dataAttr(cellState.focused), + "data-unavailable": dataAttr(cellState.unavailable), + "data-range-start": dataAttr(cellState.firstInRange), + "data-range-end": dataAttr(cellState.lastInRange), + "data-in-range": dataAttr(cellState.inRange), + "data-outside-range": dataAttr(cellState.outsideRange), + "data-weekend": dataAttr(cellState.weekend), + onClick(event) { + if (event.defaultPrevented) return + if (!cellState.selectable) return send({ type: "CELL.CLICK", cell: "day", value }) }, onPointerMove(event) { - if (event.pointerType === "touch" || !cellState.isSelectable) return + if (event.pointerType === "touch" || !cellState.selectable) return const focus = event.currentTarget.ownerDocument.activeElement !== event.currentTarget if (hoveredValue && isEqualDay(value, hoveredValue)) return send({ type: "CELL.POINTER_MOVE", cell: "day", value, focus }) @@ -478,9 +477,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, colSpan: columns, role: "gridcell", - "aria-selected": ariaAttr(cellState.isSelected), - "data-selected": dataAttr(cellState.isSelected), - "aria-disabled": ariaAttr(!cellState.isSelectable), + "aria-selected": ariaAttr(cellState.selected), + "data-selected": dataAttr(cellState.selected), + "aria-disabled": ariaAttr(!cellState.selectable), "data-value": value, }) }, @@ -492,16 +491,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, role: "button", id: dom.getCellTriggerId(state.context, value.toString()), - "data-selected": dataAttr(cellState.isSelected), - "aria-disabled": ariaAttr(!cellState.isSelectable), - "data-disabled": dataAttr(!cellState.isSelectable), - "data-focused": dataAttr(cellState.isFocused), + "data-selected": dataAttr(cellState.selected), + "aria-disabled": ariaAttr(!cellState.selectable), + "data-disabled": dataAttr(!cellState.selectable), + "data-focused": dataAttr(cellState.focused), "aria-label": cellState.valueText, "data-view": "month", "data-value": value, - tabIndex: cellState.isFocused ? 0 : -1, - onClick() { - if (!cellState.isSelectable) return + tabIndex: cellState.focused ? 0 : -1, + onClick(event) { + if (event.defaultPrevented) return + if (!cellState.selectable) return send({ type: "CELL.CLICK", cell: "month", value }) }, }) @@ -516,9 +516,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, colSpan: columns, role: "gridcell", - "aria-selected": ariaAttr(cellState.isSelected), - "data-selected": dataAttr(cellState.isSelected), - "aria-disabled": ariaAttr(!cellState.isSelectable), + "aria-selected": ariaAttr(cellState.selected), + "data-selected": dataAttr(cellState.selected), + "aria-disabled": ariaAttr(!cellState.selectable), "data-value": value, }) }, @@ -530,16 +530,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, role: "button", id: dom.getCellTriggerId(state.context, value.toString()), - "data-selected": dataAttr(cellState.isSelected), - "data-focused": dataAttr(cellState.isFocused), - "aria-disabled": ariaAttr(!cellState.isSelectable), - "data-disabled": dataAttr(!cellState.isSelectable), + "data-selected": dataAttr(cellState.selected), + "data-focused": dataAttr(cellState.focused), + "aria-disabled": ariaAttr(!cellState.selectable), + "data-disabled": dataAttr(!cellState.selectable), "aria-label": cellState.valueText, "data-value": value, "data-view": "year", - tabIndex: cellState.isFocused ? 0 : -1, - onClick() { - if (!cellState.isSelectable) return + tabIndex: cellState.focused ? 0 : -1, + onClick(event) { + if (event.defaultPrevented) return + if (!cellState.selectable) return send({ type: "CELL.CLICK", cell: "year", value }) }, }) @@ -554,7 +555,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize type: "button", "aria-label": getNextTriggerLabel(view), disabled: disabled || !state.context.isNextVisibleRangeValid, - onClick() { + onClick(event) { + if (event.defaultPrevented) return send({ type: "GOTO.NEXT", view }) }, }) @@ -569,7 +571,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize type: "button", "aria-label": getPrevTriggerLabel(view), disabled: disabled || !state.context.isPrevVisibleRangeValid, - onClick() { + onClick(event) { + if (event.defaultPrevented) return send({ type: "GOTO.PREV", view }) }, }) @@ -582,7 +585,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize type: "button", "aria-label": "Clear dates", hidden: !state.context.value.length, - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("VALUE.CLEAR") }, }), @@ -593,13 +597,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, type: "button", "data-placement": currentPlacement, - "aria-label": isOpen ? "Close calendar" : "Open calendar", + "aria-label": open ? "Close calendar" : "Open calendar", "aria-controls": dom.getContentId(state.context), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "aria-haspopup": "grid", disabled, - onClick() { - if (!isInteractive) return + onClick(event) { + if (event.defaultPrevented) return + if (!interactive) return send("TRIGGER.CLICK") }, }), @@ -614,8 +619,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize type: "button", disabled, "aria-label": getViewTriggerLabel(state.context.view), - onClick() { - if (!isInteractive) return + onClick(event) { + if (event.defaultPrevented) return + if (!interactive) return send("VIEW.CHANGE") }, }) @@ -641,7 +647,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize spellCheck: "false", dir: state.context.dir, name: state.context.name, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", readOnly, disabled, placeholder: getInputPlaceholder(locale), @@ -660,7 +666,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (evt.isComposing) return if (event.key !== "Enter") return @@ -714,7 +720,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ? `select ${value[0].toString()} to ${value[1].toString()}` : `select ${value}`, type: "button", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send({ type: "PRESET.CLICK", value }) }, }) diff --git a/packages/machines/date-picker/src/date-picker.types.ts b/packages/machines/date-picker/src/date-picker.types.ts index 1a8c502a61..d816ab6d36 100644 --- a/packages/machines/date-picker/src/date-picker.types.ts +++ b/packages/machines/date-picker/src/date-picker.types.ts @@ -317,11 +317,11 @@ export interface TableCellProps { } export interface TableCellState { - isFocused: boolean - isSelectable: boolean - isSelected: boolean + focused: boolean + selectable: boolean + selected: boolean valueText: string - readonly isDisabled: boolean + readonly disabled: boolean } export interface DayTableCellProps { @@ -331,20 +331,20 @@ export interface DayTableCellProps { } export interface DayTableCellState { - isInvalid: boolean - isDisabled: boolean - isSelected: boolean - isUnavailable: boolean - isOutsideRange: boolean - isInRange: boolean - isFirstInRange: boolean - isLastInRange: boolean - isToday: boolean - isWeekend: boolean + invalid: boolean + disabled: boolean + selected: boolean + unavailable: boolean + outsideRange: boolean + inRange: boolean + firstInRange: boolean + lastInRange: boolean + today: boolean + weekend: boolean formattedDate: string - readonly isFocused: boolean + readonly focused: boolean readonly ariaLabel: string - readonly isSelectable: boolean + readonly selectable: boolean } export interface TableProps { @@ -402,11 +402,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the input is focused */ - isFocused: boolean + focused: boolean /** * Whether the date picker is open */ - isOpen: boolean + open: boolean /** * The current view of the date picker */ @@ -488,13 +488,9 @@ export interface MachineApi<T extends PropTypes = PropTypes> { */ clearValue(): void /** - * Function to open the calendar. - */ - open(): void - /** - * Function to close the calendar. + * Function to open or close the calendar. */ - close(): void + setOpen(open: boolean): void /** * Function to set the selected month. */ diff --git a/packages/machines/dialog/src/dialog.connect.ts b/packages/machines/dialog/src/dialog.connect.ts index 9debea931b..1aa91cf736 100644 --- a/packages/machines/dialog/src/dialog.connect.ts +++ b/packages/machines/dialog/src/dialog.connect.ts @@ -5,16 +5,14 @@ import type { MachineApi, Send, State } from "./dialog.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { const ariaLabel = state.context["aria-label"] - const isOpen = state.matches("open") + const open = state.matches("open") const rendered = state.context.renderedElements return { - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, triggerProps: normalize.button({ @@ -23,10 +21,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getTriggerId(state.context), "aria-haspopup": "dialog", type: "button", - "aria-expanded": isOpen, - "data-state": isOpen ? "open" : "closed", + "aria-expanded": open, + "data-state": open ? "open" : "closed", "aria-controls": dom.getContentId(state.context), - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("TOGGLE") }, }), @@ -34,9 +33,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize backdropProps: normalize.element({ ...parts.backdrop.attrs, dir: state.context.dir, - hidden: !isOpen, + hidden: !open, id: dom.getBackdropId(state.context), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", }), positionerProps: normalize.element({ @@ -44,7 +43,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getPositionerId(state.context), style: { - pointerEvents: isOpen ? undefined : "none", + pointerEvents: open ? undefined : "none", }, }), @@ -52,10 +51,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.content.attrs, dir: state.context.dir, role: state.context.role, - hidden: !isOpen, + hidden: !open, id: dom.getContentId(state.context), tabIndex: -1, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "aria-modal": true, "aria-label": ariaLabel || undefined, "aria-labelledby": ariaLabel || !rendered.title ? undefined : dom.getTitleId(state.context), @@ -80,6 +79,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getCloseTriggerId(state.context), type: "button", onClick(event) { + if (event.defaultPrevented) return event.stopPropagation() send("CLOSE") }, diff --git a/packages/machines/dialog/src/dialog.types.ts b/packages/machines/dialog/src/dialog.types.ts index afbe63ba6e..47b30de38f 100644 --- a/packages/machines/dialog/src/dialog.types.ts +++ b/packages/machines/dialog/src/dialog.types.ts @@ -121,15 +121,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the dialog is open */ - isOpen: boolean - /** - * Function to open the dialog - */ - open(): void + open: boolean /** - * Function to close the dialog + * Function to open or close the dialog */ - close(): void + setOpen(open: boolean): void triggerProps: T["button"] backdropProps: T["element"] 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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 */ diff --git a/packages/machines/file-upload/package.json b/packages/machines/file-upload/package.json index fdc4f8907a..9041a4b8e5 100644 --- a/packages/machines/file-upload/package.json +++ b/packages/machines/file-upload/package.json @@ -40,7 +40,6 @@ "@zag-js/dom-query": "workspace:*", "@zag-js/file-utils": "workspace:*", "@zag-js/i18n-utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/utils": "workspace:*", "@zag-js/types": "workspace:*" }, diff --git a/packages/machines/file-upload/src/file-upload.connect.ts b/packages/machines/file-upload/src/file-upload.connect.ts index 9d960ebe8b..7aa4d58b28 100644 --- a/packages/machines/file-upload/src/file-upload.connect.ts +++ b/packages/machines/file-upload/src/file-upload.connect.ts @@ -1,7 +1,6 @@ -import { contains, dataAttr, isSelfTarget } from "@zag-js/dom-query" +import { contains, dataAttr, isSelfTarget, visuallyHiddenStyle } from "@zag-js/dom-query" import { formatBytes } from "@zag-js/i18n-utils" import { type NormalizeProps, type PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./file-upload.anatomy" import { dom } from "./file-upload.dom" import { type MachineApi, type Send, type State } from "./file-upload.types" @@ -12,13 +11,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const allowDrop = state.context.allowDrop const translations = state.context.translations - const isDragging = state.matches("dragging") - const isFocused = state.matches("focused") && !disabled + const dragging = state.matches("dragging") + const focused = state.matches("focused") && !disabled return { - isDragging, - isFocused, - open() { + dragging: dragging, + focused: focused, + openFilePicker() { send("OPEN") }, deleteFile(file) { @@ -48,7 +47,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getRootId(state.context), "data-disabled": dataAttr(disabled), - "data-dragging": dataAttr(isDragging), + "data-dragging": dataAttr(dragging), }), dropzoneProps: normalize.element({ @@ -60,7 +59,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "aria-invalid": state.context.invalid, "data-invalid": dataAttr(state.context.invalid), "data-disabled": dataAttr(disabled), - "data-dragging": dataAttr(isDragging), + "data-dragging": dataAttr(dragging), onKeyDown(event) { if (event.defaultPrevented) return const evt = event.nativeEvent || event 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<T extends PropTypes> { /** * 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 */ diff --git a/packages/machines/floating-panel/src/floating-panel.connect.ts b/packages/machines/floating-panel/src/floating-panel.connect.ts index 31020465d7..5e4865a646 100644 --- a/packages/machines/floating-panel/src/floating-panel.connect.ts +++ b/packages/machines/floating-panel/src/floating-panel.connect.ts @@ -7,24 +7,29 @@ import type { MachineApi, ResizeTriggerProps, Send, State } from "./floating-pan import { getResizeAxisStyle } from "./get-resize-axis-style" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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) { + if (_open === open) return + 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 +49,11 @@ export function connect<T extends PropTypes>(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 +98,8 @@ export function connect<T extends PropTypes>(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 +110,8 @@ export function connect<T extends PropTypes>(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 +122,8 @@ export function connect<T extends PropTypes>(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 +134,8 @@ export function connect<T extends PropTypes>(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 +218,12 @@ export function connect<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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"] diff --git a/packages/machines/hover-card/src/hover-card.connect.ts b/packages/machines/hover-card/src/hover-card.connect.ts index fd90277bb6..eb57de0e3d 100644 --- a/packages/machines/hover-card/src/hover-card.connect.ts +++ b/packages/machines/hover-card/src/hover-card.connect.ts @@ -5,7 +5,7 @@ import { dom } from "./hover-card.dom" import type { MachineApi, Send, State } from "./hover-card.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isOpen = state.hasTag("open") + const open = state.hasTag("open") const popperStyles = getPlacementStyles({ ...state.context.positioning, @@ -13,12 +13,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }) return { - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open: open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, reposition(options = {}) { send({ type: "POSITIONING.SET", options }) @@ -42,7 +40,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, "data-placement": state.context.currentPlacement, id: dom.getTriggerId(state.context), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", onPointerEnter(event) { if (event.pointerType === "touch") return send({ type: "POINTER_ENTER", src: "trigger" }) @@ -73,8 +71,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.content.attrs, dir: state.context.dir, id: dom.getContentId(state.context), - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", + hidden: !open, + "data-state": open ? "open" : "closed", "data-placement": state.context.currentPlacement, onPointerEnter(event) { if (event.pointerType === "touch") return diff --git a/packages/machines/hover-card/src/hover-card.types.ts b/packages/machines/hover-card/src/hover-card.types.ts index 7b9fd48631..15c9b5a26a 100644 --- a/packages/machines/hover-card/src/hover-card.types.ts +++ b/packages/machines/hover-card/src/hover-card.types.ts @@ -88,19 +88,16 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the hover card is open */ - isOpen: boolean + open: boolean /** * Function to open the hover card */ - open(): void - /** - * Function to close the hover card - */ - close(): void + setOpen(open: boolean): void /** * Function to reposition the popover */ reposition(options?: Partial<PositioningOptions>): void + arrowProps: T["element"] arrowTipProps: T["element"] triggerProps: T["element"] diff --git a/packages/machines/menu/src/menu.connect.ts b/packages/machines/menu/src/menu.connect.ts index 687e0a5dd9..b0772277cb 100644 --- a/packages/machines/menu/src/menu.connect.ts +++ b/packages/machines/menu/src/menu.connect.ts @@ -27,7 +27,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const isSubmenu = state.context.isSubmenu const isTypingAhead = state.context.isTypingAhead - const isOpen = state.hasTag("open") + const open = state.hasTag("open") const popperStyles = getPlacementStyles({ ...state.context.positioning, @@ -36,8 +36,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize function getItemState(props: ItemProps): ItemState { return { - isDisabled: !!props.disabled, - isHighlighted: state.context.highlightedValue === props.value, + disabled: !!props.disabled, + highlighted: state.context.highlightedValue === props.value, } } @@ -50,7 +50,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const itemState = getItemState(getOptionItemProps(props)) return { ...itemState, - isChecked: !!props.checked, + checked: !!props.checked, } } @@ -61,39 +61,39 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.item.attrs, id, role: "menuitem", - "aria-disabled": itemState.isDisabled, - "data-disabled": dataAttr(itemState.isDisabled), + "aria-disabled": itemState.disabled, + "data-disabled": dataAttr(itemState.disabled), "data-ownedby": dom.getContentId(state.context), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-highlighted": dataAttr(itemState.highlighted), "data-valuetext": valueText, onDragStart(event) { const isLink = event.currentTarget.matches("a[href]") if (isLink) event.preventDefault() }, onPointerMove(event) { - if (itemState.isDisabled) return + if (itemState.disabled) return if (event.pointerType !== "mouse") return const target = event.currentTarget - if (itemState.isHighlighted) return + if (itemState.highlighted) return send({ type: "ITEM_POINTERMOVE", id, target, closeOnSelect }) }, onPointerLeave(event) { const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE" if (!mouseMoved) return - if (itemState.isDisabled) return + if (itemState.disabled) return if (event.pointerType !== "mouse") return const target = event.currentTarget send({ type: "ITEM_POINTERLEAVE", id, target, closeOnSelect }) }, onPointerDown(event) { - if (itemState.isDisabled) return + if (itemState.disabled) return const target = event.currentTarget send({ type: "ITEM_POINTERDOWN", target, id, closeOnSelect }) }, onPointerUp(event) { if (isDownloadingEvent(event)) return if (isOpeningInNewTab(event)) return - if (itemState.isDisabled) return + if (itemState.disabled) return if (!isLeftClick(event)) return const target = event.currentTarget @@ -112,12 +112,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return { highlightedValue: state.context.highlightedValue, - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open: open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, setHighlightedValue(value) { send({ type: "HIGHLIGHTED.SET", id: value }) @@ -179,8 +177,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "data-uid": state.context.id, "aria-haspopup": "menu", "aria-controls": dom.getContentId(state.context), - "aria-expanded": isOpen || undefined, - "data-state": isOpen ? "open" : "closed", + "aria-expanded": open || undefined, + "data-state": open ? "open" : "closed", onPointerMove(event) { if (event.pointerType !== "mouse") return const disabled = dom.isTargetDisabled(event.currentTarget) @@ -247,7 +245,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize indicatorProps: normalize.element({ ...parts.indicator.attrs, dir: state.context.dir, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", }), positionerProps: normalize.element({ @@ -274,8 +272,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.content.attrs, id: dom.getContentId(state.context), "aria-label": state.context["aria-label"], - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", + hidden: !open, + "data-state": open ? "open" : "closed", role: "menu", tabIndex: 0, dir: state.context.dir, @@ -380,15 +378,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, "data-value": option.value, role: `menuitem${type}`, - "aria-checked": !!itemState.isChecked, - "data-state": itemState.isChecked ? "checked" : "unchecked", + "aria-checked": !!itemState.checked, + "data-state": itemState.checked ? "checked" : "unchecked", onPointerUp(event) { if (!isLeftClick(event) || disabled) return if (isDownloadingEvent(event)) return if (isOpeningInNewTab(event)) return const target = event.currentTarget send({ type: "ITEM_CLICK", src: "pointerup", target, option, closeOnSelect }) - onCheckedChange?.(!itemState.isChecked) + onCheckedChange?.(!itemState.checked) }, }), } @@ -399,10 +397,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return normalize.element({ ...parts.itemIndicator.attrs, dir: state.context.dir, - "data-disabled": dataAttr(itemState.isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-state": itemState.isChecked ? "checked" : "unchecked", - hidden: !itemState.isChecked, + "data-disabled": dataAttr(itemState.disabled), + "data-highlighted": dataAttr(itemState.highlighted), + "data-state": itemState.checked ? "checked" : "unchecked", + hidden: !itemState.checked, }) }, @@ -411,9 +409,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return normalize.element({ ...parts.itemText.attrs, dir: state.context.dir, - "data-disabled": dataAttr(itemState.isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-state": itemState.isChecked ? "checked" : "unchecked", + "data-disabled": dataAttr(itemState.disabled), + "data-highlighted": dataAttr(itemState.highlighted), + "data-state": itemState.checked ? "checked" : "unchecked", }) }, diff --git a/packages/machines/menu/src/menu.types.ts b/packages/machines/menu/src/menu.types.ts index 3300506c6c..ce4fb3c524 100644 --- a/packages/machines/menu/src/menu.types.ts +++ b/packages/machines/menu/src/menu.types.ts @@ -221,16 +221,25 @@ export interface OptionItemProps extends Partial<ItemProps> { /** * Function called when the option state is changed */ - onCheckedChange?: (checked: boolean) => void + onCheckedChange?(checked: boolean): void } export interface ItemState { - isDisabled: boolean - isHighlighted: boolean + /** + * Whether the item is disabled + */ + disabled: boolean + /** + * Whether the item is highlighted + */ + highlighted: boolean } export interface OptionItemState extends ItemState { - isChecked: boolean + /** + * Whether the option item is checked + */ + checked: boolean } export interface ItemGroupProps { @@ -251,15 +260,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the menu is open */ - isOpen: boolean - /** - * Function to open the menu - */ - open(): void + open: boolean /** - * Function to close the menu + * Function to open or close the menu */ - close(): void + setOpen(open: boolean): void /** * The id of the currently highlighted menuitem */ diff --git a/packages/machines/number-input/src/number-input.connect.ts b/packages/machines/number-input/src/number-input.connect.ts index 7f80ba9e8a..0e4fe75bab 100644 --- a/packages/machines/number-input/src/number-input.connect.ts +++ b/packages/machines/number-input/src/number-input.connect.ts @@ -7,23 +7,22 @@ import { dom } from "./number-input.dom" import type { MachineApi, Send, State } from "./number-input.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isFocused = state.hasTag("focus") - const isInvalid = state.context.isOutOfRange || !!state.context.invalid + const focused = state.hasTag("focus") + const disabled = state.context.isDisabled + const readOnly = state.context.readOnly - const isValueEmpty = state.context.isValueEmpty + const empty = state.context.isValueEmpty + const invalid = state.context.isOutOfRange || !!state.context.invalid - const isDisabled = state.context.isDisabled - const isReadOnly = state.context.readOnly - - const isIncrementDisabled = isDisabled || !state.context.canIncrement || isReadOnly - const isDecrementDisabled = isDisabled || !state.context.canDecrement || isReadOnly + const isIncrementDisabled = disabled || !state.context.canIncrement || readOnly + const isDecrementDisabled = disabled || !state.context.canDecrement || readOnly const translations = state.context.translations return { - isFocused, - isInvalid, - isValueEmpty, + focused: focused, + invalid: invalid, + empty: empty, value: state.context.formattedValue, valueAsNumber: state.context.valueAsNumber, setValue(value) { @@ -52,17 +51,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getRootId(state.context), ...parts.root.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), - "data-focus": dataAttr(isFocused), - "data-invalid": dataAttr(isInvalid), + "data-disabled": dataAttr(disabled), + "data-focus": dataAttr(focused), + "data-invalid": dataAttr(invalid), }), labelProps: normalize.label({ ...parts.label.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), - "data-focus": dataAttr(isFocused), - "data-invalid": dataAttr(isInvalid), + "data-disabled": dataAttr(disabled), + "data-focus": dataAttr(focused), + "data-invalid": dataAttr(invalid), id: dom.getLabelId(state.context), htmlFor: dom.getInputId(state.context), }), @@ -71,10 +70,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.control.attrs, dir: state.context.dir, role: "group", - "aria-disabled": isDisabled, - "data-focus": dataAttr(isFocused), - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), + "aria-disabled": disabled, + "data-focus": dataAttr(focused), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), "aria-invalid": ariaAttr(state.context.invalid), }), @@ -88,10 +87,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize defaultValue: state.context.formattedValue, pattern: state.context.pattern, inputMode: state.context.inputMode, - "aria-invalid": ariaAttr(isInvalid), - "data-invalid": dataAttr(isInvalid), - disabled: isDisabled, - "data-disabled": dataAttr(isDisabled), + "aria-invalid": ariaAttr(invalid), + "data-invalid": dataAttr(invalid), + disabled: disabled, + "data-disabled": dataAttr(disabled), readOnly: !!state.context.readOnly, autoComplete: "off", autoCorrect: "off", @@ -102,12 +101,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "aria-valuemax": state.context.max, "aria-valuenow": Number.isNaN(state.context.valueAsNumber) ? undefined : state.context.valueAsNumber, "aria-valuetext": state.context.valueText, - onCompositionStart() { - send("INPUT.COMPOSITION_START") - }, - onCompositionEnd() { - send("INPUT.COMPOSITION_END") - }, onFocus() { send("INPUT.FOCUS") }, @@ -133,7 +126,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }, onKeyDown(event) { if (event.defaultPrevented) return - if (isReadOnly) return + if (readOnly) return const evt = getNativeEvent(event) if (evt.isComposing) return @@ -226,11 +219,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize scrubberProps: normalize.element({ ...parts.scrubber.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), id: dom.getScrubberId(state.context), role: "presentation", onMouseDown(event) { - if (isDisabled) return + if (disabled) return const evt = getNativeEvent(event) const point = getEventPoint(evt) @@ -242,7 +235,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize event.preventDefault() }, style: { - cursor: isDisabled ? undefined : "ew-resize", + cursor: disabled ? undefined : "ew-resize", }, }), } diff --git a/packages/machines/number-input/src/number-input.types.ts b/packages/machines/number-input/src/number-input.types.ts index 2ceaf13fe7..eb4916be9b 100644 --- a/packages/machines/number-input/src/number-input.types.ts +++ b/packages/machines/number-input/src/number-input.types.ts @@ -258,15 +258,15 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the input is focused. */ - isFocused: boolean + focused: boolean /** * Whether the input is invalid. */ - isInvalid: boolean + invalid: boolean /** * Whether the input value is empty. */ - isValueEmpty: boolean + empty: boolean /** * The formatted value of the input. */ @@ -303,6 +303,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { * Function to focus the input. */ focus(): void + rootProps: T["element"] labelProps: T["label"] controlProps: T["element"] diff --git a/packages/machines/pagination/src/pagination.connect.ts b/packages/machines/pagination/src/pagination.connect.ts index 53eb501f4a..f98c0ed48b 100644 --- a/packages/machines/pagination/src/pagination.connect.ts +++ b/packages/machines/pagination/src/pagination.connect.ts @@ -27,8 +27,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize previousPage, nextPage, pageRange, - isFirstPage, - isLastPage, slice(data) { return data.slice(pageRange.start, pageRange.end) }, diff --git a/packages/machines/pagination/src/pagination.types.ts b/packages/machines/pagination/src/pagination.types.ts index 67a4450cbd..01417fc9e5 100644 --- a/packages/machines/pagination/src/pagination.types.ts +++ b/packages/machines/pagination/src/pagination.types.ts @@ -166,14 +166,6 @@ export interface MachineApi<T extends PropTypes = PropTypes> { * Function to slice an array of data based on the current page. */ slice<V>(data: V[]): V[] - /** - * Whether the current page is the first page. - */ - isFirstPage: boolean - /** - * Whether the current page is the last page. - */ - isLastPage: boolean /** * Function to set the total number of pages. */ diff --git a/packages/machines/pin-input/package.json b/packages/machines/pin-input/package.json index 63d5c43f93..10e06eb99d 100644 --- a/packages/machines/pin-input/package.json +++ b/packages/machines/pin-input/package.json @@ -31,7 +31,6 @@ "@zag-js/dom-query": "workspace:*", "@zag-js/dom-event": "workspace:*", "@zag-js/form-utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/utils": "workspace:*", "@zag-js/core": "workspace:*", "@zag-js/types": "workspace:*" diff --git a/packages/machines/pin-input/src/pin-input.connect.ts b/packages/machines/pin-input/src/pin-input.connect.ts index 0d1d19b521..246c5ef2fb 100644 --- a/packages/machines/pin-input/src/pin-input.connect.ts +++ b/packages/machines/pin-input/src/pin-input.connect.ts @@ -1,16 +1,15 @@ import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from "@zag-js/dom-event" -import { ariaAttr, dataAttr, getBeforeInputValue } from "@zag-js/dom-query" +import { ariaAttr, dataAttr, getBeforeInputValue, visuallyHiddenStyle } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { invariant } from "@zag-js/utils" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./pin-input.anatomy" import { dom } from "./pin-input.dom" import type { MachineApi, Send, State } from "./pin-input.types" import { isValidValue } from "./pin-input.utils" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isValueComplete = state.context.isValueComplete - const isInvalid = state.context.invalid + const complete = state.context.isValueComplete + const invalid = state.context.invalid const focusedIndex = state.context.focusedIndex const translations = state.context.translations @@ -22,7 +21,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize focus, value: state.context.value, valueAsString: state.context.valueAsString, - isValueComplete: isValueComplete, + complete: complete, setValue(value) { if (!Array.isArray(value)) { invariant("[pin-input/setValue] value must be an array") @@ -40,9 +39,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, ...parts.root.attrs, id: dom.getRootId(state.context), - "data-invalid": dataAttr(isInvalid), + "data-invalid": dataAttr(invalid), "data-disabled": dataAttr(state.context.disabled), - "data-complete": dataAttr(isValueComplete), + "data-complete": dataAttr(complete), }), labelProps: normalize.label({ @@ -50,9 +49,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, htmlFor: dom.getHiddenInputId(state.context), id: dom.getLabelId(state.context), - "data-invalid": dataAttr(isInvalid), + "data-invalid": dataAttr(invalid), "data-disabled": dataAttr(state.context.disabled), - "data-complete": dataAttr(isValueComplete), + "data-complete": dataAttr(complete), onClick(event) { event.preventDefault() focus() @@ -85,13 +84,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, disabled: state.context.disabled, "data-disabled": dataAttr(state.context.disabled), - "data-complete": dataAttr(isValueComplete), + "data-complete": dataAttr(complete), id: dom.getInputId(state.context, index.toString()), "data-ownedby": dom.getRootId(state.context), "aria-label": translations.inputLabel(index, state.context.valueLength), inputMode: state.context.otp || state.context.type === "numeric" ? "numeric" : "text", - "aria-invalid": ariaAttr(isInvalid), - "data-invalid": dataAttr(isInvalid), + "aria-invalid": ariaAttr(invalid), + "data-invalid": dataAttr(invalid), type: state.context.mask ? "password" : inputType, defaultValue: state.context.value[index] || "", autoCapitalize: "none", diff --git a/packages/machines/pin-input/src/pin-input.types.ts b/packages/machines/pin-input/src/pin-input.types.ts index d037e146be..65c7ba538a 100644 --- a/packages/machines/pin-input/src/pin-input.types.ts +++ b/packages/machines/pin-input/src/pin-input.types.ts @@ -175,7 +175,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether all inputs are filled. */ - isValueComplete: boolean + complete: boolean /** * Function to set the value of the inputs. */ diff --git a/packages/machines/popover/src/popover.connect.ts b/packages/machines/popover/src/popover.connect.ts index 04cf90b4ad..1d875de448 100644 --- a/packages/machines/popover/src/popover.connect.ts +++ b/packages/machines/popover/src/popover.connect.ts @@ -6,7 +6,7 @@ import { dom } from "./popover.dom" import type { MachineApi, Send, State } from "./popover.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isOpen = state.matches("open") + const open = state.matches("open") const currentPlacement = state.context.currentPlacement const portalled = state.context.currentPortalled @@ -19,12 +19,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return { portalled, - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open: open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, reposition(options = {}) { send({ type: "POSITIONING.SET", options }) @@ -56,10 +54,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "data-placement": currentPlacement, id: dom.getTriggerId(state.context), "aria-haspopup": "dialog", - "aria-expanded": isOpen, - "data-state": isOpen ? "open" : "closed", + "aria-expanded": open, + "data-state": open ? "open" : "closed", "aria-controls": dom.getContentId(state.context), - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("TOGGLE") }, onBlur(event) { @@ -70,7 +69,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize indicatorProps: normalize.element({ ...parts.indicator.attrs, dir: state.context.dir, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", }), positionerProps: normalize.element({ @@ -86,9 +85,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getContentId(state.context), tabIndex: -1, role: "dialog", - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", - "data-expanded": dataAttr(isOpen), + hidden: !open, + "data-state": open ? "open" : "closed", + "data-expanded": dataAttr(open), "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : undefined, "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : undefined, "data-placement": currentPlacement, @@ -112,7 +111,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getCloseTriggerId(state.context), type: "button", "aria-label": "close", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("CLOSE") }, }), diff --git a/packages/machines/popover/src/popover.types.ts b/packages/machines/popover/src/popover.types.ts index b5622a5db9..e78bd64053 100644 --- a/packages/machines/popover/src/popover.types.ts +++ b/packages/machines/popover/src/popover.types.ts @@ -130,19 +130,16 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the popover is open */ - isOpen: boolean - /** - * Function to open the popover - */ - open(): void + open: boolean /** - * Function to close the popover + * Function to open or close the popover */ - close(): void + setOpen(open: boolean): void /** * Function to reposition the popover */ reposition(options?: Partial<PositioningOptions>): void + arrowProps: T["element"] arrowTipProps: T["element"] anchorProps: T["element"] diff --git a/packages/machines/presence/src/presence.connect.ts b/packages/machines/presence/src/presence.connect.ts index 79d45fe402..bf1be6e815 100644 --- a/packages/machines/presence/src/presence.connect.ts +++ b/packages/machines/presence/src/presence.connect.ts @@ -1,11 +1,9 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types" import type { MachineApi, Send, State } from "./presence.types" -export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi { - void normalize +export function connect<T extends PropTypes>(state: State, send: Send, _normalize: NormalizeProps<T>): MachineApi { return { - isPresent: state.matches("mounted", "unmountSuspended"), - + present: state.matches("mounted", "unmountSuspended"), setNode(node: HTMLElement | null) { if (!node) return send({ type: "NODE.SET", node }) diff --git a/packages/machines/presence/src/presence.types.ts b/packages/machines/presence/src/presence.types.ts index 6f839887e8..9659d93147 100644 --- a/packages/machines/presence/src/presence.types.ts +++ b/packages/machines/presence/src/presence.types.ts @@ -12,7 +12,7 @@ interface PublicContext { /** * Function called when the animation ends in the closed state. */ - onExitComplete?: () => void + onExitComplete?(): void } interface PrivateContext { @@ -42,7 +42,7 @@ export interface MachineApi { /** * Whether the node is present in the DOM. */ - isPresent: boolean + present: boolean /** * Function to set the node (as early as possible) */ diff --git a/packages/machines/radio-group/package.json b/packages/machines/radio-group/package.json index d4b01b4c05..e7b312b88a 100644 --- a/packages/machines/radio-group/package.json +++ b/packages/machines/radio-group/package.json @@ -39,7 +39,6 @@ "@zag-js/dom-query": "workspace:*", "@zag-js/element-rect": "workspace:*", "@zag-js/form-utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/utils": "workspace:*", "@zag-js/core": "workspace:*", "@zag-js/types": "workspace:*" diff --git a/packages/machines/radio-group/src/radio-group.connect.ts b/packages/machines/radio-group/src/radio-group.connect.ts index 21ba27bc81..49d1b49f0b 100644 --- a/packages/machines/radio-group/src/radio-group.connect.ts +++ b/packages/machines/radio-group/src/radio-group.connect.ts @@ -1,32 +1,33 @@ -import { dataAttr } from "@zag-js/dom-query" +import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./radio-group.anatomy" import { dom } from "./radio-group.dom" import type { ItemProps, ItemState, MachineApi, Send, State } from "./radio-group.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isGroupDisabled = state.context.isDisabled + const groupDisabled = state.context.isDisabled + const readOnly = state.context.readOnly function getItemState(props: ItemProps): ItemState { return { - isInvalid: !!props.invalid, - isDisabled: !!props.disabled || isGroupDisabled, - isChecked: state.context.value === props.value, - isFocused: state.context.focusedId === props.value, - isHovered: state.context.hoveredId === props.value, - isActive: state.context.activeId === props.value, + invalid: !!props.invalid, + disabled: !!props.disabled || groupDisabled, + checked: state.context.value === props.value, + focused: state.context.focusedValue === props.value, + hovered: state.context.hoveredValue === props.value, + active: state.context.activeValue === props.value, } } function getItemDataAttrs<T extends ItemProps>(props: T) { const radioState = getItemState(props) return { - "data-focus": dataAttr(radioState.isFocused), - "data-disabled": dataAttr(radioState.isDisabled), - "data-state": radioState.isChecked ? "checked" : "unchecked", - "data-hover": dataAttr(radioState.isHovered), - "data-invalid": dataAttr(radioState.isInvalid), + "data-focus": dataAttr(radioState.focused), + "data-disabled": dataAttr(radioState.disabled), + "dats-readonly": dataAttr(readOnly), + "data-state": radioState.checked ? "checked" : "unchecked", + "data-hover": dataAttr(radioState.hovered), + "data-invalid": dataAttr(radioState.invalid), "data-orientation": state.context.orientation, } } @@ -60,7 +61,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getRootId(state.context), "aria-labelledby": dom.getLabelId(state.context), "data-orientation": state.context.orientation, - "data-disabled": dataAttr(isGroupDisabled), + "data-disabled": dataAttr(groupDisabled), "aria-orientation": state.context.orientation, dir: state.context.dir, style: { @@ -72,7 +73,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.label.attrs, dir: state.context.dir, "data-orientation": state.context.orientation, - "data-disabled": dataAttr(isGroupDisabled), + "data-disabled": dataAttr(groupDisabled), id: dom.getLabelId(state.context), onClick: focus, }), @@ -87,24 +88,24 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize htmlFor: dom.getItemHiddenInputId(state.context, props.value), ...getItemDataAttrs(props), onPointerMove() { - if (rootState.isDisabled) return + if (rootState.disabled) return send({ type: "SET_HOVERED", value: props.value, hovered: true }) }, onPointerLeave() { - if (rootState.isDisabled) return + if (rootState.disabled) return send({ type: "SET_HOVERED", value: null }) }, onPointerDown(event) { - if (rootState.isDisabled) return + if (rootState.disabled) return // On pointerdown, the input blurs and returns focus to the `body`, // we need to prevent this. - if (rootState.isFocused && event.pointerType === "mouse") { + if (rootState.focused && event.pointerType === "mouse") { event.preventDefault() } send({ type: "SET_ACTIVE", value: props.value, active: true }) }, onPointerUp() { - if (rootState.isDisabled) return + if (rootState.disabled) return send({ type: "SET_ACTIVE", value: null }) }, }) @@ -126,7 +127,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.itemControl.attrs, dir: state.context.dir, id: dom.getItemControlId(state.context, props.value), - "data-active": dataAttr(controlState.isActive), + "data-active": dataAttr(controlState.active), "aria-hidden": true, ...getItemDataAttrs(props), }) @@ -143,7 +144,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize form: state.context.form, value: props.value, onChange(event) { - if (inputState.isDisabled) return + if (readOnly) { + event.preventDefault() + return + } if (event.target.checked) { send({ type: "SET_VALUE", value: props.value, isTrusted: true }) @@ -167,8 +171,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize send({ type: "SET_ACTIVE", value: null }) } }, - disabled: inputState.isDisabled, - defaultChecked: inputState.isChecked, + disabled: inputState.disabled, + defaultChecked: inputState.checked, style: visuallyHiddenStyle, }) }, @@ -178,7 +182,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.indicator.attrs, dir: state.context.dir, hidden: state.context.value == null, - "data-disabled": dataAttr(isGroupDisabled), + "data-disabled": dataAttr(groupDisabled), "data-orientation": state.context.orientation, style: { "--transition-property": "left, top, width, height", diff --git a/packages/machines/radio-group/src/radio-group.machine.ts b/packages/machines/radio-group/src/radio-group.machine.ts index f46aba29c0..b177c8e798 100644 --- a/packages/machines/radio-group/src/radio-group.machine.ts +++ b/packages/machines/radio-group/src/radio-group.machine.ts @@ -16,9 +16,9 @@ export function machine(userContext: UserDefinedContext) { initial: "idle", context: { value: null, - activeId: null, - focusedId: null, - hoveredId: null, + activeValue: null, + focusedValue: null, + hoveredValue: null, disabled: false, orientation: "vertical", ...ctx, @@ -89,13 +89,13 @@ export function machine(userContext: UserDefinedContext) { set.value(ctx, evt.value) }, setHovered(ctx, evt) { - ctx.hoveredId = evt.value + ctx.hoveredValue = evt.value }, setActive(ctx, evt) { - ctx.activeId = evt.value + ctx.activeValue = evt.value }, setFocused(ctx, evt) { - ctx.focusedId = evt.value + ctx.focusedValue = evt.value }, syncInputElements(ctx) { const inputs = dom.getInputEls(ctx) diff --git a/packages/machines/radio-group/src/radio-group.props.ts b/packages/machines/radio-group/src/radio-group.props.ts index bf88711baf..ee1fc1be26 100644 --- a/packages/machines/radio-group/src/radio-group.props.ts +++ b/packages/machines/radio-group/src/radio-group.props.ts @@ -12,6 +12,7 @@ export const props = createProps<UserDefinedContext>()([ "name", "onValueChange", "orientation", + "readOnly", "value", ]) export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props) diff --git a/packages/machines/radio-group/src/radio-group.types.ts b/packages/machines/radio-group/src/radio-group.types.ts index c65a117069..8390d0ba5c 100644 --- a/packages/machines/radio-group/src/radio-group.types.ts +++ b/packages/machines/radio-group/src/radio-group.types.ts @@ -28,7 +28,6 @@ interface PublicContext extends DirectionProperty, CommonProperties { * The value of the checked radio */ value: string | null - /** * The name of the input fields in the radio * (Useful for form submission). @@ -42,6 +41,10 @@ interface PublicContext extends DirectionProperty, CommonProperties { * If `true`, the radio group will be disabled */ disabled?: boolean + /** + * Whether the checkbox is read-only + */ + readOnly?: boolean /** * Function called once a radio is checked * @param value the value of the checked radio @@ -58,17 +61,17 @@ interface PrivateContext { * @internal * The id of the active radio */ - activeId: string | null + activeValue: string | null /** * @internal * The id of the focused radio */ - focusedId: string | null + focusedValue: string | null /** * @internal * The id of the hovered radio */ - hoveredId: string | null + hoveredValue: string | null /** * @internal * The active tab indicator's dom rect @@ -122,12 +125,30 @@ export interface ItemProps { } export interface ItemState { - isInvalid: boolean - isDisabled: boolean - isChecked: boolean - isFocused: boolean - isHovered: boolean - isActive: boolean + /** + * Whether the radio is invalid + */ + invalid: boolean + /** + * Whether the radio is disabled + */ + disabled: boolean + /** + * Whether the radio is checked + */ + checked: boolean + /** + * Whether the radio is focused + */ + focused: boolean + /** + * Whether the radio is hovered + */ + hovered: boolean + /** + * Whether the radio is active or pressed + */ + active: boolean } /* ----------------------------------------------------------------------------- @@ -150,11 +171,12 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Function to focus the radio group */ - focus: () => void + focus(): void /** * Returns the state details of a radio input */ getItemState(props: ItemProps): ItemState + rootProps: T["element"] labelProps: T["element"] getItemProps(props: ItemProps): T["label"] diff --git a/packages/machines/rating-group/src/rating-group.connect.ts b/packages/machines/rating-group/src/rating-group.connect.ts index 378020fd87..b1e37443bd 100644 --- a/packages/machines/rating-group/src/rating-group.connect.ts +++ b/packages/machines/rating-group/src/rating-group.connect.ts @@ -13,28 +13,27 @@ import { dom } from "./rating-group.dom" import type { ItemProps, ItemState, MachineApi, Send, State } from "./rating-group.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isInteractive = state.context.isInteractive - const isDisabled = state.context.isDisabled + const interactive = state.context.isInteractive + const disabled = state.context.isDisabled const value = state.context.value const hoveredValue = state.context.hoveredValue const translations = state.context.translations function getItemState(props: ItemProps): ItemState { const value = state.context.isHovering ? state.context.hoveredValue : state.context.value - const isEqual = Math.ceil(value) === props.index - const isHighlighted = props.index <= value || isEqual - const isHalf = isEqual && Math.abs(value - props.index) === 0.5 + const equal = Math.ceil(value) === props.index + const highlighted = props.index <= value || equal + const half = equal && Math.abs(value - props.index) === 0.5 + return { - isEqual, - isValueEmpty: state.context.value === -1, - isHighlighted, - isHalf, - isChecked: isEqual || (state.context.value === -1 && props.index === 1), + highlighted, + half, + checked: equal || (state.context.value === -1 && props.index === 1), } } return { - isHovering: state.context.isHovering, + hovering: state.context.isHovering, value, hoveredValue, count: state.context.count, @@ -66,7 +65,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.label.attrs, dir: state.context.dir, id: dom.getLabelId(state.context), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), }), controlProps: normalize.element({ @@ -79,13 +78,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "aria-readonly": ariaAttr(state.context.readOnly), "data-readonly": dataAttr(state.context.readOnly), tabIndex: state.context.readOnly ? 0 : -1, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), onPointerMove(event) { - if (!isInteractive || event.pointerType === "touch") return + if (!interactive || event.pointerType === "touch") return send("GROUP_POINTER_OVER") }, onPointerLeave(event) { - if (!isInteractive || event.pointerType === "touch") return + if (!interactive || event.pointerType === "touch") return send("GROUP_POINTER_LEAVE") }, }), @@ -100,27 +99,27 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getItemId(state.context, index.toString()), role: "radio", - tabIndex: isDisabled ? undefined : itemState.isChecked ? 0 : -1, + tabIndex: disabled ? undefined : itemState.checked ? 0 : -1, "aria-roledescription": "rating", "aria-label": valueText, - "aria-disabled": isDisabled, - "data-disabled": dataAttr(isDisabled), + "aria-disabled": disabled, + "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(state.context.readOnly), "aria-setsize": state.context.count, - "aria-checked": itemState.isChecked, - "data-checked": dataAttr(itemState.isChecked), + "aria-checked": itemState.checked, + "data-checked": dataAttr(itemState.checked), "aria-posinset": index, - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-half": dataAttr(itemState.isHalf), + "data-highlighted": dataAttr(itemState.highlighted), + "data-half": dataAttr(itemState.half), onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (isLeftClick(evt)) { event.preventDefault() } }, onPointerMove(event) { - if (!isInteractive) return + if (!interactive) return const point = getEventPoint(getNativeEvent(event)) const relativePoint = getRelativePoint(point, event.currentTarget) const percentX = relativePoint.getPercentValue({ @@ -132,7 +131,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const keyMap: EventKeyMap = { ArrowLeft() { @@ -167,15 +166,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize } }, onClick() { - if (!isInteractive) return + if (!interactive) return send({ type: "CLICK", value: index }) }, onFocus() { - if (!isInteractive) return + if (!interactive) return send("FOCUS") }, onBlur() { - if (!isInteractive) return + if (!interactive) return send("BLUR") }, }) diff --git a/packages/machines/rating-group/src/rating-group.types.ts b/packages/machines/rating-group/src/rating-group.types.ts index 423d5ce829..e1544ebc71 100644 --- a/packages/machines/rating-group/src/rating-group.types.ts +++ b/packages/machines/rating-group/src/rating-group.types.ts @@ -130,11 +130,18 @@ export interface ItemProps { } export interface ItemState { - isEqual: boolean - isValueEmpty: boolean - isHighlighted: boolean - isHalf: boolean - isChecked: boolean + /** + * Whether the rating item is highlighted. + */ + highlighted: boolean + /** + * Whether the rating item is partially highlighted. + */ + half: boolean + /** + * Whether the rating item is checked. + */ + checked: boolean } export interface MachineApi<T extends PropTypes = PropTypes> { @@ -149,7 +156,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the rating group is being hovered */ - isHovering: boolean + hovering: boolean /** * The current value of the rating group */ diff --git a/packages/machines/select/package.json b/packages/machines/select/package.json index 8ba4850c94..bab3ec0606 100644 --- a/packages/machines/select/package.json +++ b/packages/machines/select/package.json @@ -40,7 +40,6 @@ "@zag-js/dom-query": "workspace:*", "@zag-js/dom-event": "workspace:*", "@zag-js/collection": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/form-utils": "workspace:*", "@zag-js/utils": "workspace:*", "@zag-js/dismissable": "workspace:*", diff --git a/packages/machines/select/src/select.connect.ts b/packages/machines/select/src/select.connect.ts index 180114aa73..6f664168a1 100644 --- a/packages/machines/select/src/select.connect.ts +++ b/packages/machines/select/src/select.connect.ts @@ -1,38 +1,43 @@ -import { getEventKey, getNativeEvent, type EventKeyMap } from "@zag-js/dom-event" -import { ariaAttr, dataAttr, getByTypeahead, isEditableElement, isSelfTarget } from "@zag-js/dom-query" +import { getEventKey, getNativeEvent, isLeftClick, type EventKeyMap } from "@zag-js/dom-event" +import { + ariaAttr, + dataAttr, + getByTypeahead, + isEditableElement, + isSelfTarget, + visuallyHiddenStyle, +} from "@zag-js/dom-query" import { getPlacementStyles } from "@zag-js/popper" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./select.anatomy" import { dom } from "./select.dom" -import type { CollectionItem, ItemProps, MachineApi, Send, State } from "./select.types" +import type { CollectionItem, ItemProps, ItemState, MachineApi, Send, State } from "./select.types" export function connect<T extends PropTypes, V extends CollectionItem = CollectionItem>( state: State, send: Send, normalize: NormalizeProps<T>, ): MachineApi<T, V> { - const isDisabled = state.context.isDisabled - const isInvalid = state.context.invalid - const isReadOnly = state.context.readOnly - const isInteractive = state.context.isInteractive + const disabled = state.context.isDisabled + const invalid = state.context.invalid + const readOnly = state.context.readOnly + const interactive = state.context.isInteractive - const isOpen = state.hasTag("open") - const isFocused = state.matches("focused") + const open = state.hasTag("open") + const focused = state.matches("focused") const highlightedItem = state.context.highlightedItem const selectedItems = state.context.selectedItems const isTypingAhead = state.context.isTypingAhead - function getItemState(props: ItemProps) { - const { item } = props - const disabled = state.context.collection.isItemDisabled(item) - const value = state.context.collection.itemToValue(item) + function getItemState(props: ItemProps): ItemState { + const _disabled = state.context.collection.isItemDisabled(props.item) + const value = state.context.collection.itemToValue(props.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), } } @@ -42,9 +47,9 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti }) return { - isOpen, - isFocused, - isValueEmpty: state.context.value.length === 0, + open: open, + focused: focused, + empty: state.context.value.length === 0, highlightedItem, highlightedValue: state.context.highlightedValue, selectedItems, @@ -61,11 +66,9 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti focus() { dom.getTriggerEl(state.context)?.focus({ preventScroll: true }) }, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, selectValue(value) { send({ type: "ITEM.SELECT", value }) @@ -90,20 +93,20 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti ...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({ dir: state.context.dir, id: dom.getLabelId(state.context), ...parts.label.attrs, - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), htmlFor: dom.getHiddenSelectId(state.context), onClick() { - if (isDisabled) return + if (disabled) return dom.getTriggerEl(state.context)?.focus({ preventScroll: true }) }, }), @@ -112,38 +115,39 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti ...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), }), triggerProps: normalize.button({ id: dom.getTriggerId(state.context), - disabled: isDisabled, + disabled: disabled, dir: state.context.dir, type: "button", role: "combobox", "aria-controls": dom.getContentId(state.context), - "aria-expanded": isOpen, + "aria-expanded": open, "aria-haspopup": "listbox", - "data-state": isOpen ? "open" : "closed", - "aria-invalid": isInvalid, + "data-state": open ? "open" : "closed", + "aria-invalid": invalid, "aria-labelledby": dom.getLabelId(state.context), ...parts.trigger.attrs, - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), "data-placement": state.context.currentPlacement, "data-placeholder-shown": dataAttr(!state.context.hasSelectedItems), onPointerDown(event) { - if (event.button || event.ctrlKey || !isInteractive) return + if (!isLeftClick(event)) return + if (!interactive) return event.currentTarget.dataset.pointerType = event.pointerType - if (isDisabled || event.pointerType === "touch") return + if (disabled || event.pointerType === "touch") return send({ type: "TRIGGER.CLICK" }) }, onClick(event) { - if (!isInteractive || event.button) return + if (!interactive || event.button) return if (event.currentTarget.dataset.pointerType === "touch") { send({ type: "TRIGGER.CLICK" }) } @@ -156,7 +160,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const keyMap: EventKeyMap = { ArrowUp() { @@ -208,10 +212,10 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti ...parts.indicator.attrs, dir: state.context.dir, "aria-hidden": true, - "data-state": isOpen ? "open" : "closed", - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-state": open ? "open" : "closed", + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), }), getItemProps(props) { @@ -223,23 +227,23 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti ...parts.item.attrs, dir: state.context.dir, "data-value": itemState.value, - "aria-selected": itemState.isSelected, - "data-state": itemState.isSelected ? "checked" : "unchecked", - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-disabled": dataAttr(itemState.isDisabled), - "aria-disabled": ariaAttr(itemState.isDisabled), + "aria-selected": itemState.selected, + "data-state": itemState.selected ? "checked" : "unchecked", + "data-highlighted": dataAttr(itemState.highlighted), + "data-disabled": dataAttr(itemState.disabled), + "aria-disabled": ariaAttr(itemState.disabled), onPointerMove(event) { - if (itemState.isDisabled || event.pointerType !== "mouse") return + if (itemState.disabled || event.pointerType !== "mouse") return if (itemState.value === state.context.highlightedValue) return send({ type: "ITEM.POINTER_MOVE", value: itemState.value }) }, onPointerUp() { - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "ITEM.CLICK", src: "pointerup", value: itemState.value }) }, onPointerLeave(event) { const isKeyboardNavigationEvent = ["CONTENT.ARROW_UP", "CONTENT.ARROW_DOWN"].includes(state.event.type) - if (itemState.isDisabled || event.pointerType !== "mouse" || isKeyboardNavigationEvent) return + if (itemState.disabled || event.pointerType !== "mouse" || isKeyboardNavigationEvent) return send({ type: "ITEM.POINTER_LEAVE" }) }, onTouchEnd(event) { @@ -254,8 +258,8 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti const itemState = getItemState(props) return normalize.element({ ...parts.itemText.attrs, - "data-disabled": dataAttr(itemState.isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-disabled": dataAttr(itemState.disabled), + "data-highlighted": dataAttr(itemState.highlighted), }) }, @@ -264,8 +268,8 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti return normalize.element({ "aria-hidden": true, ...parts.itemIndicator.attrs, - "data-state": itemState.isSelected ? "checked" : "unchecked", - hidden: !itemState.isSelected, + "data-state": itemState.selected ? "checked" : "unchecked", + hidden: !itemState.selected, }) }, @@ -283,7 +287,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti const { id } = props return normalize.element({ ...parts.itemGroup.attrs, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), id: dom.getItemGroupId(state.context, id), "aria-labelledby": dom.getItemGroupLabelId(state.context, id), dir: state.context.dir, @@ -295,7 +299,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti id: dom.getClearTriggerId(state.context), type: "button", "aria-label": "Clear value", - disabled: isDisabled, + disabled: disabled, hidden: !state.context.hasSelectedItems, dir: state.context.dir, onClick() { @@ -306,7 +310,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti hiddenSelectProps: normalize.select({ name: state.context.name, form: state.context.form, - disabled: isDisabled, + disabled: disabled, multiple: state.context.multiple, "aria-hidden": true, id: dom.getHiddenSelectId(state.context), @@ -329,12 +333,12 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti }), contentProps: normalize.element({ - hidden: !isOpen, + hidden: !open, dir: state.context.dir, id: dom.getContentId(state.context), role: "listbox", ...parts.content.attrs, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "data-placement": state.context.currentPlacement, "aria-activedescendant": state.context.highlightedValue ? dom.getItemId(state.context, state.context.highlightedValue) @@ -345,7 +349,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti onKeyDown(event) { if (event.defaultPrevented) return const evt = getNativeEvent(event) - if (!isInteractive) return + if (!interactive) return if (!isSelfTarget(evt)) return // select should not be navigated using tab key so we prevent it diff --git a/packages/machines/select/src/select.types.ts b/packages/machines/select/src/select.types.ts index 543f6396b0..dfa2342074 100644 --- a/packages/machines/select/src/select.types.ts +++ b/packages/machines/select/src/select.types.ts @@ -213,10 +213,22 @@ export interface ItemProps<T extends CollectionItem = CollectionItem> { } export interface ItemState { + /** + * The underlying value of the item + */ value: string - isDisabled: boolean - isSelected: boolean - isHighlighted: boolean + /** + * Whether the item is disabled + */ + disabled: boolean + /** + * Whether the item is selected + */ + selected: boolean + /** + * Whether the item is highlighted + */ + highlighted: boolean } export interface ItemGroupProps { @@ -231,15 +243,15 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio /** * Whether the select is focused */ - isFocused: boolean + focused: boolean /** * Whether the select is open */ - isOpen: boolean + open: boolean /** * Whether the select value is empty */ - isValueEmpty: boolean + empty: boolean /** * The value of the highlighted item */ @@ -289,13 +301,9 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio */ getItemState(props: ItemProps): ItemState /** - * Function to open the select - */ - open(): void - /** - * Function to close the select + * Function to open or close the select */ - close(): void + setOpen(open: boolean): void /** * Function to toggle the select */ 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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<T extends PropTypes>(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<HTMLElement>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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. */ diff --git a/packages/machines/slider/src/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts index 621829dcd4..824621093b 100644 --- a/packages/machines/slider/src/slider.connect.ts +++ b/packages/machines/slider/src/slider.connect.ts @@ -20,12 +20,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const ariaLabelledBy = state.context["aria-labelledby"] const sliderValue = state.context.value - const isFocused = state.matches("focus") - const isDragging = state.matches("dragging") + const focused = state.matches("focus") + const dragging = state.matches("dragging") - const isDisabled = state.context.isDisabled - const isInvalid = state.context.invalid - const isInteractive = state.context.isInteractive + const disabled = state.context.isDisabled + const invalid = state.context.invalid + const interactive = state.context.isInteractive function getValuePercentFn(value: number) { return getValuePercent(value, state.context.min, state.context.max) @@ -37,8 +37,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return { value: state.context.value, - isDragging, - isFocused, + dragging, + focused, setValue(value) { send({ type: "SET_VALUE", value: value }) }, @@ -70,21 +70,21 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize send({ type: "DECREMENT", index }) }, focus() { - if (!isInteractive) return + if (!interactive) return send({ type: "FOCUS", index: 0 }) }, labelProps: normalize.label({ ...parts.label.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), id: dom.getLabelId(state.context), htmlFor: dom.getHiddenInputId(state.context, 0), onClick(event) { - if (!isInteractive) return + if (!interactive) return event.preventDefault() dom.getFirstEl(state.context)?.focus() }, @@ -95,10 +95,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize rootProps: normalize.element({ ...parts.root.attrs, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), id: dom.getRootId(state.context), dir: state.context.dir, style: dom.getRootStyle(state.context), @@ -107,10 +107,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize valueTextProps: normalize.element({ ...parts.valueText.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), id: dom.getValueTextId(state.context), }), @@ -118,10 +118,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.track.attrs, dir: state.context.dir, id: dom.getTrackId(state.context), - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), "data-orientation": state.context.orientation, - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), style: { position: "relative" }, }), @@ -130,7 +130,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const value = sliderValue[index] const range = getRangeAtIndex(state.context, index) - const ariaValueText = state.context.getAriaValueText?.(value, index) + const valueText = state.context.getAriaValueText?.({ value, index }) const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy @@ -140,37 +140,37 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "data-index": index, "data-name": name, id: dom.getThumbId(state.context, index), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-focus": dataAttr(isFocused && state.context.focusedIndex === index), + "data-focus": dataAttr(focused && state.context.focusedIndex === index), draggable: false, - "aria-disabled": ariaAttr(isDisabled), + "aria-disabled": ariaAttr(disabled), "aria-label": _ariaLabel, "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context), "aria-orientation": state.context.orientation, "aria-valuemax": range.max, "aria-valuemin": range.min, "aria-valuenow": sliderValue[index], - "aria-valuetext": ariaValueText, + "aria-valuetext": valueText, role: "slider", - tabIndex: isDisabled ? undefined : 0, + tabIndex: disabled ? undefined : 0, style: dom.getThumbStyle(state.context, index), onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return send({ type: "THUMB_POINTER_DOWN", index }) event.stopPropagation() }, onBlur() { - if (!isInteractive) return + if (!interactive) return send("BLUR") }, onFocus() { - if (!isInteractive) return + if (!interactive) return send({ type: "FOCUS", index }) }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const step = getEventStep(event) * state.context.step let prevent = true @@ -237,9 +237,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getRangeId(state.context), ...parts.range.attrs, dir: state.context.dir, - "data-focus": dataAttr(isFocused), - "data-invalid": dataAttr(isInvalid), - "data-disabled": dataAttr(isDisabled), + "data-focus": dataAttr(focused), + "data-invalid": dataAttr(invalid), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, style: dom.getRangeStyle(state.context), }), @@ -248,13 +248,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.control.attrs, dir: state.context.dir, id: dom.getControlId(state.context), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), style: dom.getControlStyle(), onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (!isLeftClick(evt) || isModifierKey(evt)) return @@ -298,7 +298,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, "data-orientation": state.context.orientation, "data-value": props.value, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-state": markerState, style, }) diff --git a/packages/machines/slider/src/slider.types.ts b/packages/machines/slider/src/slider.types.ts index 86e4ca92e5..bbe2591bc2 100644 --- a/packages/machines/slider/src/slider.types.ts +++ b/packages/machines/slider/src/slider.types.ts @@ -14,6 +14,11 @@ export interface FocusChangeDetails { value: number[] } +export interface ValueTextDetails { + value: number + index: number +} + /* ----------------------------------------------------------------------------- * Machine context * -----------------------------------------------------------------------------*/ @@ -81,7 +86,7 @@ interface PublicContext extends DirectionProperty, CommonProperties { /** * Function that returns a human readable value for the slider thumb */ - getAriaValueText?(value: number, index: number): string + getAriaValueText?(details: ValueTextDetails): string /** * The minimum value of the slider */ @@ -214,11 +219,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the slider is being dragged. */ - isDragging: boolean + dragging: boolean /** * Whether the slider is focused. */ - isFocused: boolean + focused: boolean /** * Function to set the value of the slider. */ diff --git a/packages/machines/splitter/src/splitter.connect.ts b/packages/machines/splitter/src/splitter.connect.ts index a9252cb8fc..757b46331b 100644 --- a/packages/machines/splitter/src/splitter.connect.ts +++ b/packages/machines/splitter/src/splitter.connect.ts @@ -3,24 +3,24 @@ import { dataAttr } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { parts } from "./splitter.anatomy" import { dom } from "./splitter.dom" -import type { MachineApi, ResizeTriggerProps, Send, State } from "./splitter.types" +import type { MachineApi, ResizeTriggerProps, ResizeTriggerState, Send, State } from "./splitter.types" import { getHandleBounds } from "./splitter.utils" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isHorizontal = state.context.isHorizontal - const isFocused = state.hasTag("focus") - const isDragging = state.matches("dragging") + const horizontal = state.context.isHorizontal + const focused = state.hasTag("focus") + const dragging = state.matches("dragging") const panels = state.context.panels - function getResizeTriggerState(props: ResizeTriggerProps) { + function getResizeTriggerState(props: ResizeTriggerProps): ResizeTriggerState { const { id, disabled } = props const ids = id.split(":") const panelIds = ids.map((id) => dom.getPanelId(state.context, id)) const panels = getHandleBounds(state.context, id) return { - isDisabled: !!disabled, - isFocused: state.context.activeResizeId === id && isFocused, + disabled: !!disabled, + focused: state.context.activeResizeId === id && focused, panelIds, min: panels?.min, max: panels?.max, @@ -29,8 +29,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize } return { - isFocused, - isDragging, + focused: focused, + dragging: dragging, getResizeTriggerState, bounds: getHandleBounds(state.context), setToMinSize(id) { @@ -52,7 +52,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, style: { display: "flex", - flexDirection: isHorizontal ? "row" : "column", + flexDirection: horizontal ? "row" : "column", height: "100%", width: "100%", overflow: "hidden", @@ -88,15 +88,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "data-orientation": state.context.orientation, "aria-orientation": state.context.orientation, "aria-controls": triggerState.panelIds.join(" "), - "data-focus": dataAttr(triggerState.isFocused), + "data-focus": dataAttr(triggerState.focused), "data-disabled": dataAttr(disabled), style: { touchAction: "none", userSelect: "none", flex: "0 0 auto", - pointerEvents: isDragging && !triggerState.isFocused ? "none" : undefined, - cursor: isHorizontal ? "col-resize" : "row-resize", - [isHorizontal ? "minHeight" : "minWidth"]: "0", + pointerEvents: dragging && !triggerState.focused ? "none" : undefined, + cursor: horizontal ? "col-resize" : "row-resize", + [horizontal ? "minHeight" : "minWidth"]: "0", }, onPointerDown(event) { if (disabled) { @@ -104,9 +104,16 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return } send({ type: "POINTER_DOWN", id }) + event.currentTarget.setPointerCapture(event.pointerId) event.preventDefault() event.stopPropagation() }, + onPointerUp(event) { + if (disabled) return + if (event.currentTarget.hasPointerCapture(event.pointerId)) { + event.currentTarget.releasePointerCapture(event.pointerId) + } + }, onPointerOver() { if (disabled) return send({ type: "POINTER_OVER", id }) diff --git a/packages/machines/splitter/src/splitter.types.ts b/packages/machines/splitter/src/splitter.types.ts index 70dbf0455e..ce1c78cbb7 100644 --- a/packages/machines/splitter/src/splitter.types.ts +++ b/packages/machines/splitter/src/splitter.types.ts @@ -106,8 +106,8 @@ export interface ResizeTriggerProps { } export interface ResizeTriggerState { - isDisabled: boolean - isFocused: boolean + disabled: boolean + focused: boolean panelIds: string[] min: number | undefined max: number | undefined @@ -123,11 +123,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the splitter is focused. */ - isFocused: boolean + focused: boolean /** * Whether the splitter is being dragged. */ - isDragging: boolean + dragging: boolean /** * The bounds of the currently dragged splitter handle. */ diff --git a/packages/machines/switch/package.json b/packages/machines/switch/package.json index 864f33b816..434b2df928 100644 --- a/packages/machines/switch/package.json +++ b/packages/machines/switch/package.json @@ -41,8 +41,7 @@ "@zag-js/dom-event": "workspace:*", "@zag-js/form-utils": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/types": "workspace:*", - "@zag-js/visually-hidden": "workspace:*" + "@zag-js/types": "workspace:*" }, "devDependencies": { "clean-package": "2.2.0" diff --git a/packages/machines/switch/src/switch.connect.ts b/packages/machines/switch/src/switch.connect.ts index 7aa3c9394b..9497759aae 100644 --- a/packages/machines/switch/src/switch.connect.ts +++ b/packages/machines/switch/src/switch.connect.ts @@ -1,33 +1,34 @@ -import { dataAttr } from "@zag-js/dom-query" +import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./switch.anatomy" import { dom } from "./switch.dom" import type { MachineApi, Send, State } from "./switch.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isDisabled = state.context.isDisabled - const isFocused = !isDisabled && state.context.focused - const isChecked = state.context.checked + const disabled = state.context.isDisabled + const focused = !disabled && state.context.focused + const checked = state.context.checked + const readOnly = state.context.readOnly const dataAttrs = { "data-active": dataAttr(state.context.active), - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), + "data-readonly": dataAttr(readOnly), "data-hover": dataAttr(state.context.hovered), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-state": state.context.checked ? "checked" : "unchecked", "data-invalid": dataAttr(state.context.invalid), } return { - isChecked, - isDisabled, - isFocused, + checked: checked, + disabled: disabled, + focused: focused, setChecked(checked) { send({ type: "CHECKED.SET", checked, isTrusted: false }) }, toggleChecked() { - send({ type: "CHECKED.TOGGLE", checked: isChecked, isTrusted: false }) + send({ type: "CHECKED.TOGGLE", checked: checked, isTrusted: false }) }, rootProps: normalize.label({ @@ -37,11 +38,11 @@ export function connect<T extends PropTypes>(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) { @@ -78,8 +79,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getHiddenInputId(state.context), type: "checkbox", required: state.context.required, - defaultChecked: isChecked, - disabled: isDisabled, + defaultChecked: checked, + disabled: disabled, "aria-labelledby": dom.getLabelId(state.context), "aria-invalid": state.context.invalid, name: state.context.name, @@ -87,6 +88,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize value: state.context.value, style: visuallyHiddenStyle, onChange(event) { + if (readOnly) { + event.preventDefault() + return + } + const checked = event.currentTarget.checked send({ type: "CHECKED.SET", checked, isTrusted: true }) }, diff --git a/packages/machines/switch/src/switch.props.ts b/packages/machines/switch/src/switch.props.ts index e617c7487c..bc76b29c0e 100644 --- a/packages/machines/switch/src/switch.props.ts +++ b/packages/machines/switch/src/switch.props.ts @@ -14,6 +14,7 @@ export const props = createProps<UserDefinedContext>()([ "label", "name", "onCheckedChange", + "readOnly", "required", "value", ]) diff --git a/packages/machines/switch/src/switch.types.ts b/packages/machines/switch/src/switch.types.ts index 624f7d5206..f75ef8fe88 100644 --- a/packages/machines/switch/src/switch.types.ts +++ b/packages/machines/switch/src/switch.types.ts @@ -42,6 +42,10 @@ interface PublicContext extends DirectionProperty, CommonProperties { * If `true`, the switch input is marked as required, */ required?: boolean + /** + * Whether the switch is read-only + */ + readOnly?: boolean /** * Function to call when the switch is clicked. */ @@ -116,15 +120,15 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the checkbox is checked */ - isChecked: boolean + checked: boolean /** * Whether the checkbox is disabled */ - isDisabled: boolean | undefined + disabled: boolean | undefined /** * Whether the checkbox is focused */ - isFocused: boolean | undefined + focused: boolean | undefined /** * Function to set the checked state of the switch. */ @@ -133,6 +137,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { * Function to toggle the checked state of the checkbox */ toggleChecked(): void + rootProps: T["label"] labelProps: T["element"] thumbProps: T["element"] 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<S.AnyEventObject> * -----------------------------------------------------------------------------*/ 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/machines/tags-input/src/tags-input.connect.ts b/packages/machines/tags-input/src/tags-input.connect.ts index 24c39470f7..508f6f4dfb 100644 --- a/packages/machines/tags-input/src/tags-input.connect.ts +++ b/packages/machines/tags-input/src/tags-input.connect.ts @@ -3,37 +3,37 @@ import { ariaAttr, dataAttr } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { parts } from "./tags-input.anatomy" import { dom } from "./tags-input.dom" -import type { ItemProps, MachineApi, Send, State } from "./tags-input.types" +import type { ItemProps, ItemState, MachineApi, Send, State } from "./tags-input.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isInteractive = state.context.isInteractive - const isDisabled = state.context.isDisabled - const isReadOnly = state.context.readOnly - const isInvalid = state.context.invalid || state.context.isOverflowing + const interactive = state.context.isInteractive + const disabled = state.context.disabled + const readOnly = state.context.readOnly + const invalid = state.context.invalid || state.context.isOverflowing const translations = state.context.translations - const isInputFocused = state.hasTag("focused") - const isEditingTag = state.matches("editing:tag") - const isEmpty = state.context.count === 0 + const focused = state.hasTag("focused") + const editingTag = state.matches("editing:tag") + const empty = state.context.count === 0 - function getItemState(options: ItemProps) { + function getItemState(options: ItemProps): ItemState { const id = dom.getItemId(state.context, options) return { id, - isEditing: isEditingTag && state.context.editedTagId === id, - isHighlighted: id === state.context.highlightedTagId, - isDisabled: options.disabled || isDisabled, + editing: editingTag && state.context.editedTagId === id, + highlighted: id === state.context.highlightedTagId, + disabled: Boolean(options.disabled || disabled), } } return { - isEmpty, + empty: empty, inputValue: state.context.trimmedInputValue, value: state.context.value, valueAsString: state.context.valueAsString, count: state.context.count, - isAtMax: state.context.isAtMax, + atMax: state.context.isAtMax, setValue(value) { send({ type: "SET_VALUE", value }) }, @@ -64,23 +64,23 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize rootProps: normalize.element({ dir: state.context.dir, ...parts.root.attrs, - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), - "data-disabled": dataAttr(isDisabled), - "data-focus": dataAttr(isInputFocused), - "data-empty": dataAttr(isEmpty), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), + "data-disabled": dataAttr(disabled), + "data-focus": dataAttr(focused), + "data-empty": dataAttr(empty), id: dom.getRootId(state.context), onPointerDown() { - if (!isInteractive) return + if (!interactive) return send("POINTER_DOWN") }, }), labelProps: normalize.label({ ...parts.label.attrs, - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), id: dom.getLabelId(state.context), dir: state.context.dir, htmlFor: dom.getInputId(state.context), @@ -90,26 +90,26 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getControlId(state.context), ...parts.control.attrs, dir: state.context.dir, - tabIndex: isReadOnly ? 0 : undefined, - "data-disabled": dataAttr(isDisabled), - "data-readonly": dataAttr(isReadOnly), - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isInputFocused), + tabIndex: readOnly ? 0 : undefined, + "data-disabled": dataAttr(disabled), + "data-readonly": dataAttr(readOnly), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), }), inputProps: normalize.input({ ...parts.input.attrs, dir: state.context.dir, - "data-invalid": dataAttr(isInvalid), - "aria-invalid": ariaAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-invalid": dataAttr(invalid), + "aria-invalid": ariaAttr(invalid), + "data-readonly": dataAttr(readOnly), maxLength: state.context.maxLength, id: dom.getInputId(state.context), defaultValue: state.context.inputValue, autoComplete: "off", autoCorrect: "off", autoCapitalize: "none", - disabled: isDisabled || isReadOnly, + disabled: disabled || readOnly, onChange(event) { const evt = getNativeEvent(event) @@ -197,7 +197,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.item.attrs, dir: state.context.dir, "data-value": props.value, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), }) }, @@ -207,17 +207,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.itemPreview.attrs, id: itemState.id, dir: state.context.dir, - hidden: itemState.isEditing, + hidden: itemState.editing, "data-value": props.value, - "data-disabled": dataAttr(isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-disabled": dataAttr(disabled), + "data-highlighted": dataAttr(itemState.highlighted), onPointerDown(event) { - if (!isInteractive || itemState.isDisabled) return + if (!interactive || itemState.disabled) return event.preventDefault() send({ type: "POINTER_DOWN_TAG", id: itemState.id }) }, onDoubleClick() { - if (!isInteractive || itemState.isDisabled) return + if (!interactive || itemState.disabled) return send({ type: "DOUBLE_CLICK_TAG", id: itemState.id }) }, }) @@ -228,8 +228,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return normalize.element({ ...parts.itemText.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-disabled": dataAttr(disabled), + "data-highlighted": dataAttr(itemState.highlighted), }) }, @@ -240,11 +240,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, "aria-label": translations.tagEdited(props.value), "aria-hidden": true, - disabled: isDisabled, + disabled: disabled, id: dom.getItemInputId(state.context, props), tabIndex: -1, - hidden: !itemState.isEditing, - defaultValue: itemState.isEditing ? state.context.editedTagValue : "", + hidden: !itemState.editing, + defaultValue: itemState.editing ? state.context.editedTagValue : "", onChange(event) { send({ type: "TAG_INPUT_TYPE", value: event.target.value }) }, @@ -282,24 +282,24 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getItemDeleteTriggerId(state.context, props), type: "button", - disabled: isDisabled, + disabled: disabled, "aria-label": translations.deleteTagTriggerLabel(props.value), tabIndex: -1, onPointerDown(event) { - if (!isInteractive) { + if (!interactive) { event.preventDefault() } }, onPointerMove(event) { - if (!isInteractive) return + if (!interactive) return dom.setHoverIntent(event.currentTarget) }, onPointerLeave(event) { - if (!isInteractive) return + if (!interactive) return dom.clearHoverIntent(event.currentTarget) }, onClick() { - if (!isInteractive) return + if (!interactive) return send({ type: "CLEAR_TAG", id }) }, }) @@ -310,12 +310,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getClearTriggerId(state.context), type: "button", - "data-readonly": dataAttr(isReadOnly), - disabled: isDisabled, + "data-readonly": dataAttr(readOnly), + disabled: disabled, "aria-label": translations.clearTriggerLabel, - hidden: isEmpty, + hidden: empty, onClick() { - if (!isInteractive) return + if (!interactive) return send("CLEAR_VALUE") }, }), diff --git a/packages/machines/tags-input/src/tags-input.types.ts b/packages/machines/tags-input/src/tags-input.types.ts index b5abed2e64..2efc2567d9 100644 --- a/packages/machines/tags-input/src/tags-input.types.ts +++ b/packages/machines/tags-input/src/tags-input.types.ts @@ -267,17 +267,29 @@ export interface ItemProps { } export interface ItemState { + /** + * The underlying id of the item + */ id: string - isEditing: boolean - isHighlighted: boolean - isDisabled: boolean + /** + * Whether the item is being edited + */ + editing: boolean + /** + * Whether the item is highlighted + */ + highlighted: boolean + /** + * Whether the item is disabled + */ + disabled: boolean } export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the tags are empty */ - isEmpty: boolean + empty: boolean /** * The value of the tags entry input. */ @@ -297,7 +309,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the tags have reached the max limit. */ - isAtMax: boolean + atMax: boolean /** * Function to set the value of the tags. */ diff --git a/packages/machines/toast/src/toast.connect.ts b/packages/machines/toast/src/toast.connect.ts index 2aef906a01..1a500c357b 100644 --- a/packages/machines/toast/src/toast.connect.ts +++ b/packages/machines/toast/src/toast.connect.ts @@ -10,8 +10,8 @@ export function connect<T extends PropTypes, O>( send: Send, normalize: NormalizeProps<T>, ): MachineApi<T, O> { - const isVisible = state.hasTag("visible") - const isPaused = state.hasTag("paused") + const visible = state.hasTag("visible") + const paused = state.hasTag("paused") const placement = state.context.placement! const type = state.context.type! @@ -23,9 +23,8 @@ export function connect<T extends PropTypes, O>( title: state.context.title, description: state.context.description, placement, - isVisible, - isPaused, - isRtl: state.context.dir === "rtl", + visible: visible, + paused: paused, pause() { send("PAUSE") @@ -43,13 +42,13 @@ export function connect<T extends PropTypes, O>( ...parts.root.attrs, dir: state.context.dir, id: dom.getRootId(state.context), - "data-state": isVisible ? "open" : "closed", + "data-state": visible ? "open" : "closed", "data-type": type, "data-placement": placement, "data-align": align, "data-side": side, "data-mounted": dataAttr(state.context.mounted), - "data-paused": dataAttr(isPaused), + "data-paused": dataAttr(paused), "data-first": dataAttr(state.context.frontmost), "data-sibling": dataAttr(!state.context.frontmost), @@ -59,7 +58,7 @@ export function connect<T extends PropTypes, O>( role: "status", "aria-atomic": "true", tabIndex: 0, - style: getPlacementStyle(state.context, isVisible), + style: getPlacementStyle(state.context, visible), onKeyDown(event) { if (event.defaultPrevented) return if (event.key == "Escape") { @@ -72,13 +71,13 @@ export function connect<T extends PropTypes, O>( /* Leave a ghost div to avoid setting hover to false when transitioning out */ ghostBeforeProps: normalize.element({ "data-ghost": "before", - style: getGhostBeforeStyle(state.context, isVisible), + style: getGhostBeforeStyle(state.context, visible), }), /* Needed to avoid setting hover to false when in between toasts */ ghostAfterProps: normalize.element({ "data-ghost": "after", - style: getGhostAfterStyle(state.context, isVisible), + style: getGhostAfterStyle(state.context, visible), }), titleProps: normalize.element({ @@ -94,7 +93,8 @@ export function connect<T extends PropTypes, O>( actionTriggerProps: normalize.button({ ...parts.actionTrigger.attrs, type: "button", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("DISMISS") }, }), @@ -104,7 +104,8 @@ export function connect<T extends PropTypes, O>( ...parts.closeTrigger.attrs, type: "button", "aria-label": "Dismiss notification", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("DISMISS") }, }), diff --git a/packages/machines/toast/src/toast.types.ts b/packages/machines/toast/src/toast.types.ts index f18ca5af08..08d3df4525 100644 --- a/packages/machines/toast/src/toast.types.ts +++ b/packages/machines/toast/src/toast.types.ts @@ -353,15 +353,11 @@ export interface MachineApi<T extends PropTypes = PropTypes, O = any> extends Ge /** * Whether the toast is visible. */ - isVisible: boolean + visible: boolean /** * Whether the toast is paused. */ - isPaused: boolean - /** - * Whether the toast is in RTL mode. - */ - isRtl: boolean + paused: boolean /** * Function to pause the toast (keeping it visible). */ diff --git a/packages/machines/toggle-group/src/toggle-group.connect.ts b/packages/machines/toggle-group/src/toggle-group.connect.ts index 8bb5db4024..68be22b42c 100644 --- a/packages/machines/toggle-group/src/toggle-group.connect.ts +++ b/packages/machines/toggle-group/src/toggle-group.connect.ts @@ -13,16 +13,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const isHorizontal = state.context.orientation === "horizontal" function getItemState(props: ItemProps): ItemState { - const isDisabled = !!props.disabled || !!disabled - const isPressed = value?.includes(props.value) const id = dom.getItemId(state.context, props.value) - const isFocused = state.context.focusedId === id - return { id, - isDisabled, - isPressed, - isFocused, + disabled: Boolean(props.disabled || disabled), + pressed: !!value.includes(props.value), + focused: state.context.focusedId === id, } } @@ -61,31 +57,31 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize getItemProps(props) { const itemState = getItemState(props) - const rovingTabIndex = itemState.isFocused ? 0 : -1 + const rovingTabIndex = itemState.focused ? 0 : -1 return normalize.button({ ...parts.item.attrs, id: itemState.id, type: "button", "data-ownedby": dom.getRootId(state.context), - "data-focus": dataAttr(itemState.isFocused), - disabled: itemState.isDisabled, + "data-focus": dataAttr(itemState.focused), + disabled: itemState.disabled, tabIndex: rovingFocus ? rovingTabIndex : undefined, // radio role: isSingle ? "radio" : undefined, - "aria-checked": isSingle ? itemState.isPressed : undefined, - "aria-pressed": isSingle ? undefined : itemState.isPressed, + "aria-checked": isSingle ? itemState.pressed : undefined, + "aria-pressed": isSingle ? undefined : itemState.pressed, // - "data-disabled": dataAttr(itemState.isDisabled), + "data-disabled": dataAttr(itemState.disabled), "data-orientation": state.context.orientation, dir: state.context.dir, - "data-state": itemState.isPressed ? "on" : "off", + "data-state": itemState.pressed ? "on" : "off", onFocus() { - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "TOGGLE.FOCUS", id: itemState.id }) }, onClick(event) { - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "TOGGLE.CLICK", id: itemState.id, value: props.value }) if (isSafari()) { event.currentTarget.focus({ preventScroll: true }) @@ -95,7 +91,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize if (event.defaultPrevented) return const evt = getNativeEvent(event) if (!isSelfTarget(evt)) return - if (itemState.isDisabled) return + if (itemState.disabled) return const keyMap: EventKeyMap = { Tab(event) { diff --git a/packages/machines/toggle-group/src/toggle-group.machine.ts b/packages/machines/toggle-group/src/toggle-group.machine.ts index 0bc87511da..96adb92158 100644 --- a/packages/machines/toggle-group/src/toggle-group.machine.ts +++ b/packages/machines/toggle-group/src/toggle-group.machine.ts @@ -22,7 +22,6 @@ export function machine(userContext: UserDefinedContext) { ...ctx, focusedId: null, isTabbingBackward: false, - hasFocusableToggle: false, isClickFocus: false, isWithinToolbar: false, }, @@ -31,7 +30,7 @@ export function machine(userContext: UserDefinedContext) { currentLoopFocus: (ctx) => ctx.loopFocus && !ctx.isWithinToolbar, }, - entry: ["checkFocusableToggles", "checkIfWithinToolbar"], + entry: ["checkIfWithinToolbar"], on: { "VALUE.SET": { @@ -107,9 +106,6 @@ export function machine(userContext: UserDefinedContext) { clearClickFocus(ctx) { ctx.isClickFocus = false }, - checkFocusableToggles(ctx) { - ctx.hasFocusableToggle = ctx.value.length > 0 - }, checkIfWithinToolbar(ctx) { const closestToolbar = dom.getRootEl(ctx)?.closest("[role=toolbar]") ctx.isWithinToolbar = !!closestToolbar diff --git a/packages/machines/toggle-group/src/toggle-group.types.ts b/packages/machines/toggle-group/src/toggle-group.types.ts index 63e7d572da..6c822c59b5 100644 --- a/packages/machines/toggle-group/src/toggle-group.types.ts +++ b/packages/machines/toggle-group/src/toggle-group.types.ts @@ -65,11 +65,6 @@ interface PrivateContext { * Whether the user is tabbing backward. */ isTabbingBackward: boolean - /** - * @internal - * Whether the toggle group has focusable toggles. - */ - hasFocusableToggle: boolean /** * @internal * Whether the toggle was focused by a click. @@ -108,10 +103,22 @@ export interface ItemProps { } export interface ItemState { + /** + * The underlying id of the item. + */ id: string - isDisabled: boolean - isPressed: boolean - isFocused: boolean + /** + * Whether the toggle item is disabled. + */ + disabled: boolean + /** + * Whether the toggle item is pressed. + */ + pressed: boolean + /** + * Whether the toggle item is focused. + */ + focused: boolean } export interface MachineApi<T extends PropTypes = PropTypes> { diff --git a/packages/machines/tooltip/src/tooltip.connect.ts b/packages/machines/tooltip/src/tooltip.connect.ts index 341803bee6..bd2f12b9cd 100644 --- a/packages/machines/tooltip/src/tooltip.connect.ts +++ b/packages/machines/tooltip/src/tooltip.connect.ts @@ -10,12 +10,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const id = state.context.id const hasAriaLabel = state.context.hasAriaLabel - const isOpen = state.hasTag("open") + const open = state.hasTag("open") const triggerId = dom.getTriggerId(state.context) const contentId = dom.getContentId(state.context) - const isDisabled = state.context.disabled + const disabled = state.context.disabled const popperStyles = getPlacementStyles({ ...state.context.positioning, @@ -23,12 +23,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }) return { - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open: open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, reposition(options = {}) { send({ type: "POSITIONING.SET", options }) @@ -38,39 +36,39 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.trigger.attrs, id: triggerId, dir: state.context.dir, - "data-expanded": dataAttr(isOpen), - "data-state": isOpen ? "open" : "closed", - "aria-describedby": isOpen ? contentId : undefined, + "data-expanded": dataAttr(open), + "data-state": open ? "open" : "closed", + "aria-describedby": open ? contentId : undefined, onClick() { - if (isDisabled) return + if (disabled) return send("CLOSE") }, onFocus() { - if (isDisabled || state.event.type === "POINTER_DOWN") return + if (disabled || state.event.type === "POINTER_DOWN") return send("OPEN") }, onBlur() { - if (isDisabled) return + if (disabled) return if (id === store.id) { send("CLOSE") } }, onPointerDown() { - if (isDisabled || !state.context.closeOnPointerDown) return + if (disabled || !state.context.closeOnPointerDown) return if (id === store.id) { send("CLOSE") } }, onPointerMove(event) { - if (isDisabled || event.pointerType === "touch") return + if (disabled || event.pointerType === "touch") return send("POINTER_MOVE") }, onPointerLeave() { - if (isDisabled) return + if (disabled) return send("POINTER_LEAVE") }, onPointerCancel() { - if (isDisabled) return + if (disabled) return send("POINTER_LEAVE") }, }), @@ -98,8 +96,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize contentProps: normalize.element({ ...parts.content.attrs, dir: state.context.dir, - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", + hidden: !open, + "data-state": open ? "open" : "closed", role: hasAriaLabel ? undefined : "tooltip", id: hasAriaLabel ? undefined : contentId, "data-placement": state.context.currentPlacement, diff --git a/packages/machines/tooltip/src/tooltip.types.ts b/packages/machines/tooltip/src/tooltip.types.ts index 4375947b89..3bfd903390 100644 --- a/packages/machines/tooltip/src/tooltip.types.ts +++ b/packages/machines/tooltip/src/tooltip.types.ts @@ -119,15 +119,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the tooltip is open. */ - isOpen: boolean + open: boolean /** * Function to open the tooltip. */ - open(): void - /** - * Function to close the tooltip. - */ - close(): void + setOpen(open: boolean): void /** * Function to reposition the popover */ 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { 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 } diff --git a/packages/utilities/dom-query/src/index.ts b/packages/utilities/dom-query/src/index.ts index 1a2ff56dfc..e2809c98dd 100644 --- a/packages/utilities/dom-query/src/index.ts +++ b/packages/utilities/dom-query/src/index.ts @@ -13,11 +13,12 @@ export * from "./is" export * from "./is-editable-element" export * from "./is-hidden-element" export * from "./is-overflow-element" +export * from "./observe-attributes" +export * from "./observe-children" export * from "./overflow" export * from "./platform" export * from "./query" export * from "./raf" export * from "./scope" export * from "./scroll-into-view" -export * from "./observe-attributes" -export * from "./observe-children" +export * from "./visually-hidden" diff --git a/packages/utilities/visually-hidden/src/index.ts b/packages/utilities/dom-query/src/visually-hidden.ts similarity index 100% rename from packages/utilities/visually-hidden/src/index.ts rename to packages/utilities/dom-query/src/visually-hidden.ts diff --git a/packages/utilities/focus-scope/package.json b/packages/utilities/focus-scope/package.json index 66965f0c53..320479ff48 100644 --- a/packages/utilities/focus-scope/package.json +++ b/packages/utilities/focus-scope/package.json @@ -33,7 +33,6 @@ }, "dependencies": { "@zag-js/dom-query": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/tabbable": "workspace:*", "@zag-js/dom-event": "workspace:*", "@zag-js/utils": "workspace:*" diff --git a/packages/utilities/focus-scope/src/focus-containment.ts b/packages/utilities/focus-scope/src/focus-containment.ts index 15191df70e..9819a975ac 100644 --- a/packages/utilities/focus-scope/src/focus-containment.ts +++ b/packages/utilities/focus-scope/src/focus-containment.ts @@ -1,5 +1,5 @@ import { addDomEvent } from "@zag-js/dom-event" -import { setVisuallyHidden } from "@zag-js/visually-hidden" +import { setVisuallyHidden } from "@zag-js/dom-query" import type { FocusContext } from "./focus-context" export interface FocusContainmentOptions { diff --git a/packages/utilities/live-region/package.json b/packages/utilities/live-region/package.json index a1abceebc4..804eb4230a 100644 --- a/packages/utilities/live-region/package.json +++ b/packages/utilities/live-region/package.json @@ -25,9 +25,6 @@ "prepack": "clean-package", "postpack": "clean-package restore" }, - "dependencies": { - "@zag-js/visually-hidden": "workspace:*" - }, "devDependencies": { "clean-package": "2.2.0" }, diff --git a/packages/utilities/live-region/src/index.ts b/packages/utilities/live-region/src/index.ts index a07cc31f85..e0efb2ddb1 100644 --- a/packages/utilities/live-region/src/index.ts +++ b/packages/utilities/live-region/src/index.ts @@ -1,5 +1,3 @@ -import { setVisuallyHidden } from "@zag-js/visually-hidden" - export interface LiveRegionOptions { level: "polite" | "assertive" document?: Document @@ -39,7 +37,18 @@ export function createLiveRegion(opts: Partial<LiveRegionOptions> = {}) { region.setAttribute("role", role) // hide live region - setVisuallyHidden(region) + Object.assign(region.style, { + border: "0", + clip: "rect(0 0 0 0)", + height: "1px", + margin: "-1px", + overflow: "hidden", + padding: "0", + position: "absolute", + width: "1px", + whiteSpace: "nowrap", + wordWrap: "normal", + }) parent.appendChild(region) diff --git a/packages/utilities/visually-hidden/CHANGELOG.md b/packages/utilities/visually-hidden/CHANGELOG.md deleted file mode 100644 index 0638fa4b74..0000000000 --- a/packages/utilities/visually-hidden/CHANGELOG.md +++ /dev/null @@ -1,152 +0,0 @@ -# @zag-js/visually-hidden - -## 0.47.0 - -## 0.46.0 - -## 0.45.0 - -## 0.44.0 - -## 0.43.0 - -## 0.42.0 - -## 0.41.0 - -## 0.40.0 - -## 0.39.0 - -## 0.38.1 - -## 0.38.0 - -## 0.37.3 - -## 0.37.2 - -## 0.37.1 - -## 0.37.0 - -## 0.36.3 - -## 0.36.2 - -## 0.36.1 - -## 0.36.0 - -## 0.35.0 - -## 0.34.0 - -## 0.33.2 - -## 0.33.1 - -## 0.33.0 - -## 0.32.1 - -## 0.32.0 - -## 0.31.1 - -## 0.31.0 - -## 0.30.0 - -## 0.29.0 - -## 0.28.1 - -## 0.28.0 - -## 0.27.1 - -## 0.27.0 - -## 0.26.0 - -## 0.25.0 - -## 0.24.0 - -## 0.23.0 - -## 0.22.0 - -## 0.21.0 - -## 0.20.0 - -### Patch Changes - -- [`942db6ca`](https://github.com/chakra-ui/zag/commit/942db6caf9f699d6af56929c835b10ae80cfbc85) Thanks - [@segunadebayo](https://github.com/segunadebayo)! - Remove toggle machine - -## 0.19.1 - -## 0.19.0 - -## 0.18.0 - -## 0.17.0 - -## 0.16.0 - -## 0.15.0 - -## 0.14.0 - -## 0.13.0 - -## 0.12.0 - -## 0.11.2 - -## 0.11.1 - -## 0.11.0 - -### Patch Changes - -- [`4f371874`](https://github.com/chakra-ui/zag/commit/4f3718742dc88a2cd8726bdd889c9bbde94f5bce) Thanks - [@segunadebayo](https://github.com/segunadebayo)! - Rebuild all packages using tsup - -## 0.10.5 - -## 0.10.4 - -## 0.10.3 - -### Patch Changes - -- [`c59a8dec`](https://github.com/chakra-ui/zag/commit/c59a8dec15ab57d218823bfe7af6d723972be6c7) Thanks - [@cschroeter](https://github.com/cschroeter)! - Use vite to build packages - -## 0.10.2 - -## 0.10.1 - -## 0.10.0 - -## 0.9.2 - -## 0.9.1 - -### Patch Changes - -- [`8469daa1`](https://github.com/chakra-ui/zag/commit/8469daa15fd7f2c0a80869a8715b0342bd3c355f) Thanks - [@segunadebayo](https://github.com/segunadebayo)! - Force release every package to fix regression - -## 0.0.1 - -### Patch Changes - -- [#536](https://github.com/chakra-ui/zag/pull/536) - [`aabc9aed`](https://github.com/chakra-ui/zag/commit/aabc9aed93ae3f49e2cec8d8b28edd23a337ce99) Thanks - [@segunadebayo](https://github.com/segunadebayo)! - Refactor all packages to have proper dependency structure and - bundle size. diff --git a/packages/utilities/visually-hidden/README.md b/packages/utilities/visually-hidden/README.md deleted file mode 100644 index 512313a24b..0000000000 --- a/packages/utilities/visually-hidden/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# @zag-js/visually-hidden - -## Installation - -```sh -yarn add @zag-js/visually-hidden -# or -npm i @zag-js/visually-hidden -``` - -## Contribution - -Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details. - -## Licence - -This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE). diff --git a/packages/utilities/visually-hidden/package.json b/packages/utilities/visually-hidden/package.json deleted file mode 100644 index d5aba8c698..0000000000 --- a/packages/utilities/visually-hidden/package.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "@zag-js/visually-hidden", - "version": "0.47.0", - "description": "", - "keywords": [ - "js", - "utils", - "visually-hidden" - ], - "author": "Segun Adebayo <sage@adebayosegun.com>", - "homepage": "https://github.com/chakra-ui/zag#readme", - "license": "MIT", - "main": "src/index.ts", - "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/visually-hidden", - "sideEffects": false, - "files": [ - "dist", - "src" - ], - "scripts": { - "build": "tsup", - "lint": "eslint src --ext .ts,.tsx", - "typecheck": "tsc --noEmit", - "prepack": "clean-package", - "postpack": "clean-package restore" - }, - "publishConfig": { - "access": "public" - }, - "bugs": { - "url": "https://github.com/chakra-ui/zag/issues" - }, - "clean-package": "../../../clean-package.config.json", - "devDependencies": { - "clean-package": "2.2.0" - } -} diff --git a/packages/utilities/visually-hidden/tsconfig.json b/packages/utilities/visually-hidden/tsconfig.json deleted file mode 100644 index 8e781cd154..0000000000 --- a/packages/utilities/visually-hidden/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "include": ["src"], - "compilerOptions": { - "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" - } -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 474dd48761..b9e3c46056 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -351,9 +351,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden form-serialize: specifier: 0.7.2 version: 0.7.2 @@ -607,9 +604,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden '@zag-js/vue': specifier: workspace:* version: link:../../packages/frameworks/vue @@ -854,9 +848,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden lucide-preact: specifier: 0.372.0 version: 0.372.0(preact@10.20.2) @@ -1101,9 +1092,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden form-serialize: specifier: 0.7.2 version: 0.7.2 @@ -1336,9 +1324,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden form-serialize: specifier: 0.7.2 version: 0.7.2 @@ -1586,9 +1571,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden '@zag-js/vue': specifier: workspace:* version: link:../../packages/frameworks/vue @@ -1924,9 +1906,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2014,9 +1993,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2193,9 +2169,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2382,9 +2355,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2488,9 +2458,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2556,9 +2523,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2677,9 +2641,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -3038,9 +2999,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -3095,10 +3053,6 @@ importers: version: 2.2.0 packages/utilities/live-region: - dependencies: - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -3168,12 +3122,6 @@ importers: specifier: 2.2.0 version: 2.2.0 - packages/utilities/visually-hidden: - devDependencies: - clean-package: - specifier: 2.2.0 - version: 2.2.0 - shared: {} starters/react: @@ -3382,9 +3330,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden form-serialize: specifier: 0.7.2 version: 0.7.2 diff --git a/shared/src/controls.ts b/shared/src/controls.ts index bc30740d1d..0ecf149c95 100644 --- a/shared/src/controls.ts +++ b/shared/src/controls.ts @@ -10,6 +10,7 @@ export const checkboxControls = defineControls({ name: { type: "string", defaultValue: "checkbox" }, disabled: { type: "boolean", defaultValue: false }, value: { type: "string", defaultValue: "on" }, + readOnly: { type: "boolean", defaultValue: false }, }) export const collapsibleControls = defineControls({ diff --git a/shared/src/css/toast.css b/shared/src/css/toast.css index cd406fdf77..a93e4fd550 100644 --- a/shared/src/css/toast.css +++ b/shared/src/css/toast.css @@ -103,7 +103,22 @@ bottom: 0; inset-inline: 0; animation-name: shrink; + animation-duration: var(--duration); animation-fill-mode: forwards; + animation-play-state: running; + transform-origin: left; + + [data-type="loading"] & { + animation-name: none; + } + + [data-paused] & { + animation-play-state: paused; + } + + [dir="rtl"] & { + transform-origin: right; + } } [data-scope="toast"][data-part="progressbar"][data-type="loading"] { diff --git a/starters/react/components/accordion.tsx b/starters/react/components/accordion.tsx index ae25f17eca..363e36bb4f 100644 --- a/starters/react/components/accordion.tsx +++ b/starters/react/components/accordion.tsx @@ -30,7 +30,7 @@ export const Accordion = (props: Props) => { {...itemContentProps} dir={context.dir} ids={{ content: itemContentProps.id }} - open={itemState.isOpen} + open={itemState.open} > {item.description} </Collapsible> diff --git a/starters/react/components/clipboard.tsx b/starters/react/components/clipboard.tsx index 75939a842d..5a04cbe1a7 100644 --- a/starters/react/components/clipboard.tsx +++ b/starters/react/components/clipboard.tsx @@ -21,7 +21,7 @@ export function Clipboard(props: Props) { <label {...api.labelProps}>Copy this link</label> <div {...api.controlProps}> <input {...api.inputProps} /> - <button {...api.triggerProps}>{api.isCopied ? <ClipboardCheck /> : <ClipboardCopyIcon />}</button> + <button {...api.triggerProps}>{api.copied ? <ClipboardCheck /> : <ClipboardCopyIcon />}</button> </div> <div {...api.getIndicatorProps({ copied: true })}>Copied!</div> <div {...api.getIndicatorProps({ copied: false })}>Copy</div> diff --git a/starters/react/components/collapsible.tsx b/starters/react/components/collapsible.tsx index 563eb58c28..91f9dc3199 100644 --- a/starters/react/components/collapsible.tsx +++ b/starters/react/components/collapsible.tsx @@ -30,7 +30,7 @@ export function Collapsible(props: Props) { const api = collapsible.connect(state, send, normalizeProps) const { unmount } = useRenderStrategy({ - visible: api.isVisible, + visible: api.visible, lazyMount, unmountOnExit, }) diff --git a/starters/react/components/dialog.tsx b/starters/react/components/dialog.tsx index 2f901d4d3b..7737ff8642 100644 --- a/starters/react/components/dialog.tsx +++ b/starters/react/components/dialog.tsx @@ -28,7 +28,7 @@ export function Dialog(props: Props) { return ( <> <button {...api.triggerProps}>Open Dialog</button> - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.backdropProps} /> <div {...api.positionerProps}> diff --git a/starters/react/components/hover-card.tsx b/starters/react/components/hover-card.tsx index 00d20da977..ff677ce3ad 100644 --- a/starters/react/components/hover-card.tsx +++ b/starters/react/components/hover-card.tsx @@ -33,7 +33,7 @@ export function HoverCard(props: Props) { Twitter </a> - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.positionerProps}> <div {...api.contentProps}> diff --git a/starters/react/components/tooltip.tsx b/starters/react/components/tooltip.tsx index 76618a408d..423af50fee 100644 --- a/starters/react/components/tooltip.tsx +++ b/starters/react/components/tooltip.tsx @@ -34,7 +34,7 @@ export function Tooltip(props: Props) { ) : ( <span {...api.triggerProps}>{children}</span> )} - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.positionerProps}> <div {...api.contentProps}>{label}</div> diff --git a/starters/react/package.json b/starters/react/package.json index b64737025e..5b4cae0401 100644 --- a/starters/react/package.json +++ b/starters/react/package.json @@ -77,7 +77,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "form-serialize": "0.7.2", "match-sorter": "6.3.4", "lucide-react": "0.372.0", diff --git a/website/components/machines/clipboard.tsx b/website/components/machines/clipboard.tsx index 1194f6e0e1..af607013d5 100644 --- a/website/components/machines/clipboard.tsx +++ b/website/components/machines/clipboard.tsx @@ -23,7 +23,7 @@ export function Clipboard(props: Props) { <div {...api.controlProps}> <input {...api.inputProps} /> <button {...api.triggerProps}> - {api.isCopied ? <HiCheck /> : <HiOutlineClipboard />} + {api.copied ? <HiCheck /> : <HiOutlineClipboard />} </button> </div> </div> diff --git a/website/components/machines/editable.tsx b/website/components/machines/editable.tsx index 82c37b4260..eb11471c7e 100644 --- a/website/components/machines/editable.tsx +++ b/website/components/machines/editable.tsx @@ -17,8 +17,8 @@ export function Editable(props: any) { </div> <div> - {!api.isEditing && <button {...api.editTriggerProps}>Edit</button>} - {api.isEditing && ( + {!api.editing && <button {...api.editTriggerProps}>Edit</button>} + {api.editing && ( <div> <button {...api.submitTriggerProps}>Save</button> <button {...api.cancelTriggerProps}>Cancel</button> diff --git a/website/components/machines/hover-card.tsx b/website/components/machines/hover-card.tsx index 263d1fafab..fc582b4c5c 100644 --- a/website/components/machines/hover-card.tsx +++ b/website/components/machines/hover-card.tsx @@ -27,7 +27,7 @@ export function HoverCard(props: HoverCardProps) { <img alt="Twitter" src="/favicon/apple-touch-icon.png" /> </a> - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.positionerProps}> <div {...api.contentProps}> diff --git a/website/components/machines/rating.tsx b/website/components/machines/rating.tsx index 22fc68b175..30a1f9f8ce 100644 --- a/website/components/machines/rating.tsx +++ b/website/components/machines/rating.tsx @@ -64,7 +64,7 @@ export function Rating(props: RadioProps) { const state = api.getItemState({ index }) return ( <span key={index} {...api.getItemProps({ index })}> - {state.isHalf ? <HalfStar /> : <Star />} + {state.half ? <HalfStar /> : <Star />} </span> ) })} diff --git a/website/components/machines/switch.tsx b/website/components/machines/switch.tsx index 2378187177..abe3468dcc 100644 --- a/website/components/machines/switch.tsx +++ b/website/components/machines/switch.tsx @@ -22,7 +22,7 @@ export function Switch(props: SwitchProps) { <span {...api.controlProps}> <span {...api.thumbProps} /> </span> - <span {...api.labelProps}>{api.isChecked ? "On" : "Off"}</span> + <span {...api.labelProps}>{api.checked ? "On" : "Off"}</span> </label> </div> ) diff --git a/website/components/machines/tooltip.tsx b/website/components/machines/tooltip.tsx index e3ed35315e..2b1e399f4e 100644 --- a/website/components/machines/tooltip.tsx +++ b/website/components/machines/tooltip.tsx @@ -16,7 +16,7 @@ export function Tooltip(props: TooltipProps) { <> <button {...api.triggerProps}>Hover me</button> <Portal> - {api.isOpen && ( + {api.open && ( <div {...api.positionerProps}> <div {...api.contentProps}> <div {...api.arrowProps}> diff --git a/website/components/mobile-navigation.tsx b/website/components/mobile-navigation.tsx index 194187f441..1ea28f29fb 100644 --- a/website/components/mobile-navigation.tsx +++ b/website/components/mobile-navigation.tsx @@ -26,12 +26,12 @@ export function MobileNavigation() { const [desktop] = useMatchMedia([`(min-width: ${lgBreakpoint})`]) useEffect(() => { - if (desktop) api.close() + if (desktop) api.setOpen(false) // eslint-disable-next-line react-hooks/exhaustive-deps }, [desktop]) useRouteChange(() => { - api.close() + api.setOpen(false) }) return ( @@ -51,7 +51,7 @@ export function MobileNavigation() { </HStack> </Button> - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.positionerProps}> <Box diff --git a/website/components/search-dialog.tsx b/website/components/search-dialog.tsx index 974493b2a5..c8883b0c0a 100644 --- a/website/components/search-dialog.tsx +++ b/website/components/search-dialog.tsx @@ -15,7 +15,7 @@ export function Search() { return ( <> <SearchTrigger {...dialog_api.triggerProps} /> - {dialog_api.isOpen && ( + {dialog_api.open && ( <Portal> <Box position="fixed" @@ -137,7 +137,7 @@ export function Search() { lineHeight="1" color="gray.500" spacing="5" - borderTopWidth={combobox_api.isOpen ? "1px" : undefined} + borderTopWidth={combobox_api.open ? "1px" : undefined} > <HStack> <Box as="span">↑↓</Box> diff --git a/website/data/components/clipboard.mdx b/website/data/components/clipboard.mdx index f66e1cf325..ed13727369 100644 --- a/website/data/components/clipboard.mdx +++ b/website/data/components/clipboard.mdx @@ -83,13 +83,12 @@ const [state, send] = useMachine( ## Checking if the value is copied -Use the `api.isCopied` property to check if the value is copied to the -clipboard. +Use the `api.copied` property to check if the value is copied to the clipboard. ```jsx {3} const api = clipboard.connect(state, send) -if (api.isCopied) { +if (api.copied) { console.log("Value is copied to the clipboard") } ``` diff --git a/website/data/components/color-picker.mdx b/website/data/components/color-picker.mdx index 7b46c17fd3..27de4d5fa3 100644 --- a/website/data/components/color-picker.mdx +++ b/website/data/components/color-picker.mdx @@ -157,8 +157,8 @@ const [current, send] = useMachine( ) ``` -You can also leverage the `api.open()` or `api.close()` methods to control the -open and closed state of the color picker. +You can also leverage the `api.setOpen(...)` method to control the open and +closed state of the color picker. ## Controlling individual color channel diff --git a/website/data/components/editable.mdx b/website/data/components/editable.mdx index b300f7a6d3..fb5b823d0d 100644 --- a/website/data/components/editable.mdx +++ b/website/data/components/editable.mdx @@ -89,7 +89,7 @@ const [state, send] = useMachine( onValueChange(details) { console.log("Value changed", details.value) }, - onValueCommit: (details) => { + onValueCommit(details) { console.log("Value submitted", details.value) }, }), diff --git a/website/data/components/pagination.mdx b/website/data/components/pagination.mdx index 6e17ec825b..2597be14a3 100644 --- a/website/data/components/pagination.mdx +++ b/website/data/components/pagination.mdx @@ -65,9 +65,6 @@ const currentPageData = data.slice(api.pageRange.start, api.pageRange.end) api.page // => 1 -api.isFirstPage() -// => true - api.setPage(3) // page => 3 diff --git a/website/lib/use-search.ts b/website/lib/use-search.ts index fabc99ec50..b4085a7420 100644 --- a/website/lib/use-search.ts +++ b/website/lib/use-search.ts @@ -53,7 +53,7 @@ export function useSearch(): UseSearchReturn { return inputValue.length > 2 }, onValueChange() { - dialog_api.close() + dialog_api.setOpen(false) }, onInputValueChange({ inputValue }) { if (inputValue.length < 3) return @@ -77,14 +77,14 @@ export function useSearch(): UseSearchReturn { const hotkey = isMac ? "metaKey" : "ctrlKey" if (event.key?.toLowerCase() === "k" && event[hotkey]) { event.preventDefault() - dialog_api.isOpen ? dialog_api.close() : dialog_api.open() + dialog_api.setOpen(dialog_api.open ? false : true) } } document.addEventListener("keydown", fn) return () => { document.removeEventListener("keydown", fn) } - }, [dialog_api.isOpen, dialog_api.close, dialog_api.open]) + }, [dialog_api.setOpen, dialog_api.open]) const combobox_api = combobox.connect( combobox_state, @@ -93,20 +93,16 @@ export function useSearch(): UseSearchReturn { ) useUpdateEffect(() => { - if (dialog_api.isOpen && combobox_api.isInputValueEmpty) { + if (dialog_api.open && combobox_api.inputEmpty) { setResults([]) } - }, [dialog_api.isOpen, combobox_api.isInputValueEmpty]) + }, [dialog_api.open, combobox_api.inputEmpty]) useUpdateEffect(() => { - if (!dialog_api.isOpen && !combobox_api.isInputValueEmpty) { + if (!dialog_api.open && !combobox_api.inputEmpty) { combobox_api.clearValue() } - }, [ - dialog_api.isOpen, - combobox_api.isInputValueEmpty, - combobox_api.clearValue, - ]) + }, [dialog_api.open, combobox_api.inputEmpty, combobox_api.clearValue]) return { results,
{api.type === "loading" && } {api.title} @@ -39,7 +26,7 @@ function ToastItem({ actor }: { actor: toast.Service }) { - +
{{ state.value }}
{api().type === "loading" && } {api().title} 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/package.json b/examples/svelte-ts/package.json index 9dc0c8c1af..9c8874415d 100644 --- a/examples/svelte-ts/package.json +++ b/examples/svelte-ts/package.json @@ -79,7 +79,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "form-serialize": "0.7.2", "match-sorter": "6.3.4", "lucide-svelte": "0.372.0", diff --git a/examples/svelte-ts/src/lib/components/toast-item.svelte b/examples/svelte-ts/src/lib/components/toast-item.svelte index 4defff7ff5..a3a23cd578 100644 --- a/examples/svelte-ts/src/lib/components/toast-item.svelte +++ b/examples/svelte-ts/src/lib/components/toast-item.svelte @@ -1,6 +1,7 @@ - - - {api.title} - {api.description} - Close - + + + {api.title} + {api.description} + + + + 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 @@ > - - Input {api.isChecked ? "Checked" : "Unchecked"} + + Input {api.checked ? "Checked" : "Unchecked"} Indicator - api.setChecked(true)}>Check - api.setChecked(false)}>Uncheck + api.setChecked(true)}>Check + api.setChecked(false)}>Uncheck Reset Form - + 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 @@ - {#if api.isCopied} + {#if api.copied} {:else} @@ -42,5 +42,5 @@ - + 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 - Open - Close + api.setOpen(true)}>Open + api.setOpen(false)}>Close - + 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/file-upload.svelte b/examples/svelte-ts/src/routes/file-upload.svelte index 17e4c44ae0..4d4fa1eea8 100644 --- a/examples/svelte-ts/src/routes/file-upload.svelte +++ b/examples/svelte-ts/src/routes/file-upload.svelte @@ -8,11 +8,11 @@ const controls = useControls(fileUploadControls) - const [state, send] = useMachine(fileUpload.machine({ id: "1" }), { + const [snapshot, send] = useMachine(fileUpload.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(fileUpload.connect(state, send, normalizeProps)) + const api = $derived(fileUpload.connect(snapshot, send, normalizeProps)) @@ -40,5 +40,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..0da60ac927 100644 --- a/examples/svelte-ts/src/routes/hover-card.svelte +++ b/examples/svelte-ts/src/routes/hover-card.svelte @@ -8,22 +8,22 @@ const controls = useControls(hoverCardControls) - const [state, send] = useMachine(hoverCard.machine({ id: "1" }), { + const [snapshot, send] = useMachine(hoverCard.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(hoverCard.connect(state, send, normalizeProps)) + const api = $derived(hoverCard.connect(snapshot, send, normalizeProps)) Twitter - {#if api.isOpen} + {#if api.open} - + Twitter Preview Twitter @@ -36,5 +36,5 @@ - + 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/menu.svelte b/examples/svelte-ts/src/routes/menu.svelte index 4459ccef1b..7d277a4db5 100644 --- a/examples/svelte-ts/src/routes/menu.svelte +++ b/examples/svelte-ts/src/routes/menu.svelte @@ -8,11 +8,11 @@ const controls = useControls(menuControls) - const [state, send] = useMachine(menu.machine({ id: "1", onSelect: console.log }), { + const [snapshot, send] = useMachine(menu.machine({ id: "1", onSelect: console.log }), { context: controls.context, }) - const api = $derived(menu.connect(state, send, normalizeProps)) + const api = $derived(menu.connect(snapshot, send, normalizeProps)) @@ -32,5 +32,5 @@ - + diff --git a/examples/svelte-ts/src/routes/number-input.svelte b/examples/svelte-ts/src/routes/number-input.svelte index 433145fd4d..71d8a9a347 100644 --- a/examples/svelte-ts/src/routes/number-input.svelte +++ b/examples/svelte-ts/src/routes/number-input.svelte @@ -8,16 +8,16 @@ 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)) - + Enter number: @@ -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..1c0f5589fb 100644 --- a/examples/svelte-ts/src/routes/popover.svelte +++ b/examples/svelte-ts/src/routes/popover.svelte @@ -8,11 +8,11 @@ const controls = useControls(popoverControls) - const [state, send] = useMachine(popover.machine({ id: "1" }), { + const [snapshot, send] = useMachine(popover.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(popover.connect(state, send, normalizeProps)) + const api = $derived(popover.connect(snapshot, send, normalizeProps)) @@ -29,7 +29,7 @@ - + Popover Title @@ -48,5 +48,5 @@ - + 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..111ab8046a 100644 --- a/examples/svelte-ts/src/routes/radio-group.svelte +++ b/examples/svelte-ts/src/routes/radio-group.svelte @@ -9,11 +9,11 @@ const controls = useControls(radioControls) - const [state, send] = useMachine(radio.machine({ id: "1", name: "fruit" }), { + const [snapshot, send] = useMachine(radio.machine({ id: "1", name: "fruit" }), { context: controls.context, }) - const api = $derived(radio.connect(state, send, normalizeProps)) + const api = $derived(radio.connect(snapshot, send, normalizeProps)) @@ -26,10 +26,10 @@ Fruits - + {#each radioData as opt} - + {opt.label} @@ -47,5 +47,5 @@ - + diff --git a/examples/svelte-ts/src/routes/range-slider.svelte b/examples/svelte-ts/src/routes/range-slider.svelte index 0213cab1b7..e091e846e4 100644 --- a/examples/svelte-ts/src/routes/range-slider.svelte +++ b/examples/svelte-ts/src/routes/range-slider.svelte @@ -9,7 +9,7 @@ const controls = useControls(sliderControls) - const [state, send] = useMachine( + const [snapshot, send] = useMachine( slider.machine({ id: "1", name: "quantity", @@ -18,7 +18,7 @@ { context: controls.context }, ) - const api = $derived(slider.connect(state, send, normalizeProps)) + const api = $derived(slider.connect(snapshot, send, normalizeProps)) @@ -37,7 +37,7 @@ - + {#each api.value as _, index} @@ -57,5 +57,5 @@ - + diff --git a/examples/svelte-ts/src/routes/rating-group.svelte b/examples/svelte-ts/src/routes/rating-group.svelte index 9eb49779cb..0b0b648801 100644 --- a/examples/svelte-ts/src/routes/rating-group.svelte +++ b/examples/svelte-ts/src/routes/rating-group.svelte @@ -8,11 +8,11 @@ const controls = useControls(ratingControls) - const [state, send] = useMachine(rating.machine({ id: "1", value: 2.5 }), { + const [snapshot, send] = useMachine(rating.machine({ id: "1", value: 2.5 }), { context: controls.context, }) - const api = $derived(rating.connect(state, send, normalizeProps)) + const api = $derived(rating.connect(snapshot, send, normalizeProps)) {#snippet HalfStar()} @@ -50,7 +50,7 @@ {#each api.items as index} {@const itemState = api.getItemState({ index })} - {#if itemState.isHalf} + {#if itemState.half} {@render HalfStar()} {:else} {@render Star()} @@ -65,5 +65,5 @@ - + diff --git a/examples/svelte-ts/src/routes/segment-control.svelte b/examples/svelte-ts/src/routes/segment-control.svelte index 09760f00c9..b0c0bdea9c 100644 --- a/examples/svelte-ts/src/routes/segment-control.svelte +++ b/examples/svelte-ts/src/routes/segment-control.svelte @@ -8,16 +8,16 @@ const controls = useControls(radioControls) - const [state, send] = useMachine(radio.machine({ id: "2", name: "fruit", orientation: "horizontal" }), { + const [snapshot, send] = useMachine(radio.machine({ id: "2", name: "fruit", orientation: "horizontal" }), { context: controls.context, }) - const api = $derived(radio.connect(state, send, normalizeProps)) + const api = $derived(radio.connect(snapshot, send, normalizeProps)) - + {#each radioData as opt} @@ -31,5 +31,5 @@ - + diff --git a/examples/svelte-ts/src/routes/select.svelte b/examples/svelte-ts/src/routes/select.svelte index c9ac118008..6c920ebcdd 100644 --- a/examples/svelte-ts/src/routes/select.svelte +++ b/examples/svelte-ts/src/routes/select.svelte @@ -9,7 +9,7 @@ const controls = useControls(selectControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( select.machine({ id: "1", name: "select", @@ -20,7 +20,7 @@ }, ) - const api = $derived(select.connect(_state, send, normalizeProps)) + const api = $derived(select.connect(snapshot, send, normalizeProps)) @@ -71,5 +71,5 @@ - + diff --git a/examples/svelte-ts/src/routes/signature-pad.svelte b/examples/svelte-ts/src/routes/signature-pad.svelte index 12cf0d019e..4682c3dc86 100644 --- a/examples/svelte-ts/src/routes/signature-pad.svelte +++ b/examples/svelte-ts/src/routes/signature-pad.svelte @@ -12,7 +12,7 @@ let url = $state("") const setUrl = (value: string) => (url = value) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( signaturePad.machine({ id: "1", onDrawEnd(details) { @@ -29,7 +29,7 @@ }, ) - const api = $derived(signaturePad.connect(_state, send, normalizeProps)) + const api = $derived(signaturePad.connect(snapshot, send, normalizeProps)) @@ -69,5 +69,5 @@ - + diff --git a/examples/svelte-ts/src/routes/slider.svelte b/examples/svelte-ts/src/routes/slider.svelte index af2fa2c5ba..2082542b29 100644 --- a/examples/svelte-ts/src/routes/slider.svelte +++ b/examples/svelte-ts/src/routes/slider.svelte @@ -9,7 +9,7 @@ const controls = useControls(sliderControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( slider.machine({ id: "1", name: "quantity", @@ -20,7 +20,7 @@ }, ) - const api = $derived(slider.connect(_state, send, normalizeProps)) + const api = $derived(slider.connect(snapshot, send, normalizeProps)) @@ -60,5 +60,5 @@ - + diff --git a/examples/svelte-ts/src/routes/switch.svelte b/examples/svelte-ts/src/routes/switch.svelte index 5b643b2708..dc497cfc5f 100644 --- a/examples/svelte-ts/src/routes/switch.svelte +++ b/examples/svelte-ts/src/routes/switch.svelte @@ -8,11 +8,11 @@ const controls = useControls(switchControls) - const [state, send] = useMachine(zagSwitch.machine({ id: "1", name: "switch" }), { + const [snapshot, send] = useMachine(zagSwitch.machine({ id: "1", name: "switch" }), { context: controls.context, }) - const api = $derived(zagSwitch.connect(state, send, normalizeProps)) + const api = $derived(zagSwitch.connect(snapshot, send, normalizeProps)) @@ -20,12 +20,12 @@ - + - Feature is {api.isChecked ? "enabled" : "disabled"} + Feature is {api.checked ? "enabled" : "disabled"} - + diff --git a/examples/svelte-ts/src/routes/tabs.svelte b/examples/svelte-ts/src/routes/tabs.svelte index f3419dab4c..9591f2505d 100644 --- a/examples/svelte-ts/src/routes/tabs.svelte +++ b/examples/svelte-ts/src/routes/tabs.svelte @@ -8,7 +8,7 @@ const controls = useControls(tabsControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( tabs.machine({ id: "1", value: "nils", @@ -18,12 +18,12 @@ }, ) - const api = $derived(tabs.connect(_state, send, normalizeProps)) + const api = $derived(tabs.connect(snapshot, send, normalizeProps)) - + {#each tabsData as data} @@ -44,5 +44,5 @@ - + diff --git a/examples/svelte-ts/src/routes/tags-input.svelte b/examples/svelte-ts/src/routes/tags-input.svelte index 1cfe03fef5..f832d7a26f 100644 --- a/examples/svelte-ts/src/routes/tags-input.svelte +++ b/examples/svelte-ts/src/routes/tags-input.svelte @@ -12,7 +12,7 @@ const controls = useControls(tagsInputControls) - const [_state, send] = useMachine( + const [snapshot, send] = useMachine( tagsInput.machine({ id: "1", value: ["React", "Vue"], @@ -22,7 +22,7 @@ }, ) - const api = $derived(tagsInput.connect(_state, send, normalizeProps)) + const api = $derived(tagsInput.connect(snapshot, send, normalizeProps)) @@ -54,5 +54,5 @@ - + diff --git a/examples/svelte-ts/src/routes/toast.svelte b/examples/svelte-ts/src/routes/toast.svelte index 44d5a1bbe1..97f11649ff 100644 --- a/examples/svelte-ts/src/routes/toast.svelte +++ b/examples/svelte-ts/src/routes/toast.svelte @@ -9,7 +9,7 @@ const controls = useControls(toastControls) - const [state, send] = useMachine( + const [snapshot, send] = useMachine( toast.group.machine({ id: "1", placement: "bottom-end", @@ -21,7 +21,7 @@ }, ) - const api = $derived(toast.group.connect(state, send, normalizeProps)) + const api = $derived(toast.group.connect(snapshot, send, normalizeProps)) let id: string | undefined = "" @@ -73,5 +73,5 @@ - + diff --git a/examples/svelte-ts/src/routes/toggle-group.svelte b/examples/svelte-ts/src/routes/toggle-group.svelte index ad8f226d4b..0d58f6fc0f 100644 --- a/examples/svelte-ts/src/routes/toggle-group.svelte +++ b/examples/svelte-ts/src/routes/toggle-group.svelte @@ -8,11 +8,11 @@ const controls = useControls(toggleGroupControls) - const [_state, send] = useMachine(toggle.machine({ id: "1" }), { + const [snapshot, send] = useMachine(toggle.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(toggle.connect(_state, send, normalizeProps)) + const api = $derived(toggle.connect(snapshot, send, normalizeProps)) @@ -27,5 +27,5 @@ - + diff --git a/examples/svelte-ts/src/routes/tooltip.svelte b/examples/svelte-ts/src/routes/tooltip.svelte index 49771ece97..1402169fdf 100644 --- a/examples/svelte-ts/src/routes/tooltip.svelte +++ b/examples/svelte-ts/src/routes/tooltip.svelte @@ -7,23 +7,23 @@ const id = "tip-1" const id2 = "tip-2" - const [_state, send] = useMachine(tooltip.machine({ id })) - const [_state2, send2] = useMachine(tooltip.machine({ id: id2 })) + const [snapshot, send] = useMachine(tooltip.machine({ id })) + const [snapshot2, send2] = useMachine(tooltip.machine({ id: id2 })) - const api = $derived(tooltip.connect(_state, send, normalizeProps)) - const api2 = $derived(tooltip.connect(_state2, send2, normalizeProps)) + const api = $derived(tooltip.connect(snapshot, send, normalizeProps)) + const api2 = $derived(tooltip.connect(snapshot2, send2, normalizeProps)) Hover me - {#if api.isOpen} + {#if api.open} Tooltip {/if} Over me - {#if api2.isOpen} + {#if api2.open} Tooltip 2 @@ -32,6 +32,6 @@ - - + + diff --git a/examples/svelte-ts/src/routes/tour.svelte b/examples/svelte-ts/src/routes/tour.svelte index 83a7e1ac6a..560698f068 100644 --- a/examples/svelte-ts/src/routes/tour.svelte +++ b/examples/svelte-ts/src/routes/tour.svelte @@ -7,11 +7,11 @@ const controls = useControls(tourControls) - const [state, send] = useMachine(tour.machine({ id: "1", steps: tourData }), { + const [snapshot, send] = useMachine(tour.machine({ id: "1", steps: tourData }), { context: controls.context, }) - const api = $derived(tour.connect(state, send, normalizeProps)) + const api = $derived(tour.connect(snapshot, send, normalizeProps)) @@ -20,9 +20,9 @@ Step 1 - + Step 2 - + <h1 id="step-2a">Iframe Content</h1> @@ -37,13 +37,13 @@ </div> <div use:portal> - <div {...api.overlayProps} /> - <div {...api.spotlightProps} /> + <div {...api.overlayProps}></div> + <div {...api.spotlightProps}></div> <div {...api.positionerProps}> {#if api.currentStep} <div {...api.contentProps}> <div {...api.arrowProps}> - <div {...api.arrowTipProps} /> + <div {...api.arrowTipProps}></div> </div> <p {...api.titleProps}>{api.currentStep.title}</p> <div {...api.descriptionProps}>{api.currentStep.description}</div> diff --git a/examples/svelte-ts/src/routes/tree-view.svelte b/examples/svelte-ts/src/routes/tree-view.svelte index f3026b886a..5d8c97de7e 100644 --- a/examples/svelte-ts/src/routes/tree-view.svelte +++ b/examples/svelte-ts/src/routes/tree-view.svelte @@ -8,11 +8,11 @@ const controls = useControls(treeviewControls) - const [state, send] = useMachine(tree.machine({ id: "1" }), { + const [snapshot, send] = useMachine(tree.machine({ id: "1" }), { context: controls.context, }) - const api = $derived(tree.connect(state, send, normalizeProps)) + const api = $derived(tree.connect(snapshot, send, normalizeProps)) </script> <main class="tree-view"> @@ -69,5 +69,5 @@ </main> <Toolbar {controls}> - <StateVisualizer {state} /> + <StateVisualizer state={snapshot} /> </Toolbar> diff --git a/examples/vue-ts/package.json b/examples/vue-ts/package.json index 63811422f6..baef86a282 100644 --- a/examples/vue-ts/package.json +++ b/examples/vue-ts/package.json @@ -78,7 +78,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/vue": "workspace:*", "epic-spinners": "2.0.0", "form-serialize": "0.7.2", diff --git a/examples/vue-ts/src/pages/checkbox.tsx b/examples/vue-ts/src/pages/checkbox.tsx index f5b1af4eb6..f494d7d5f5 100644 --- a/examples/vue-ts/src/pages/checkbox.tsx +++ b/examples/vue-ts/src/pages/checkbox.tsx @@ -39,15 +39,15 @@ export default defineComponent({ <fieldset> <label {...api.rootProps}> <div {...api.controlProps} /> - <span {...api.labelProps}>Input {api.isChecked ? "Checked" : "Unchecked"}</span> + <span {...api.labelProps}>Input {api.checked ? "Checked" : "Unchecked"}</span> <input {...api.hiddenInputProps} data-testid="hidden-input" /> <div {...api.indicatorProps}>Indicator</div> </label> - <button type="button" disabled={api.isChecked} onClick={() => api.setChecked(true)}> + <button type="button" disabled={api.checked} onClick={() => api.setChecked(true)}> Check </button> - <button type="button" disabled={!api.isChecked} onClick={() => api.setChecked(false)}> + <button type="button" disabled={!api.checked} onClick={() => api.setChecked(false)}> Uncheck </button> <button type="reset">Reset Form</button> diff --git a/examples/vue-ts/src/pages/clipboard.tsx b/examples/vue-ts/src/pages/clipboard.tsx index bd69e93881..452ec460fb 100644 --- a/examples/vue-ts/src/pages/clipboard.tsx +++ b/examples/vue-ts/src/pages/clipboard.tsx @@ -34,7 +34,7 @@ export default defineComponent({ <label {...api.labelProps}>Copy this link</label> <div {...api.controlProps}> <input {...api.inputProps} style={{ width: "100%" }} /> - <button {...api.triggerProps}>{api.isCopied ? <ClipboardCheck /> : <ClipboardCopyIcon />}</button> + <button {...api.triggerProps}>{api.copied ? <ClipboardCheck /> : <ClipboardCopyIcon />}</button> </div> <div {...api.getIndicatorProps({ copied: true })}>Copied!</div> <div {...api.getIndicatorProps({ copied: false })}>Copy</div> diff --git a/examples/vue-ts/src/pages/collapsible.tsx b/examples/vue-ts/src/pages/collapsible.tsx index 8c4b204e92..5eda24b437 100644 --- a/examples/vue-ts/src/pages/collapsible.tsx +++ b/examples/vue-ts/src/pages/collapsible.tsx @@ -38,8 +38,8 @@ export default defineComponent({ <div> <div>Toggle Controls</div> - <button onClick={api.open}>Open</button> - <button onClick={api.close}>Close</button> + <button onClick={() => api.setOpen(true)}>Open</button> + <button onClick={() => api.setOpen(false)}>Close</button> </div> </main> diff --git a/examples/vue-ts/src/pages/date-picker.tsx b/examples/vue-ts/src/pages/date-picker.tsx index 0c8ea2cd36..91c056739c 100644 --- a/examples/vue-ts/src/pages/date-picker.tsx +++ b/examples/vue-ts/src/pages/date-picker.tsx @@ -45,7 +45,7 @@ export default defineComponent({ </output> <div {...api.controlProps}> - <input {...api.inputProps} /> + <input {...api.getInputProps({ index: 0 })} /> <button {...api.clearTriggerProps}>❌</button> <button {...api.triggerProps}>🗓</button> </div> diff --git a/examples/vue-ts/src/pages/dialog.tsx b/examples/vue-ts/src/pages/dialog.tsx index d6310f7fd4..ea6e184f1d 100644 --- a/examples/vue-ts/src/pages/dialog.tsx +++ b/examples/vue-ts/src/pages/dialog.tsx @@ -30,7 +30,7 @@ export default defineComponent({ Open Dialog </button> <div style={{ minHeight: "1200px", pointerEvents: "none" }} /> - {parentDialog.isOpen && ( + {parentDialog.open && ( <Teleport to="body"> <div {...parentDialog.backdropProps} /> <div {...parentDialog.positionerProps} data-testid="positioner-1"> @@ -47,7 +47,7 @@ export default defineComponent({ <button {...childDialog.triggerProps} data-testid="trigger-2"> Open Nested </button> - {childDialog.isOpen && ( + {childDialog.open && ( <Teleport to="body"> <div {...childDialog.positionerProps} data-testid="positioner-2"> <div {...childDialog.contentProps}> @@ -55,7 +55,7 @@ export default defineComponent({ <button {...childDialog.closeTriggerProps} data-testid="close-2"> X </button> - <button onClick={() => parentDialog.close()} data-testid="special-close"> + <button onClick={() => parentDialog.setOpen(false)} data-testid="special-close"> Close Dialog 1 </button> </div> diff --git a/examples/vue-ts/src/pages/editable.tsx b/examples/vue-ts/src/pages/editable.tsx index 18c1fae366..37238315e2 100644 --- a/examples/vue-ts/src/pages/editable.tsx +++ b/examples/vue-ts/src/pages/editable.tsx @@ -29,12 +29,12 @@ export default defineComponent({ <span data-testid="preview" {...api.previewProps} /> </div> <div {...api.controlProps}> - {!api.isEditing && ( + {!api.editing && ( <button data-testid="edit-button" {...api.editTriggerProps}> Edit </button> )} - {api.isEditing && ( + {api.editing && ( <> <button data-testid="save-button" {...api.submitTriggerProps}> Save diff --git a/examples/vue-ts/src/pages/hover-card.tsx b/examples/vue-ts/src/pages/hover-card.tsx index e7539bef97..9b6f4463e7 100644 --- a/examples/vue-ts/src/pages/hover-card.tsx +++ b/examples/vue-ts/src/pages/hover-card.tsx @@ -28,7 +28,7 @@ export default defineComponent({ Twitter </a> - {api.isOpen && ( + {api.open && ( <Teleport to="body"> <div {...api.positionerProps}> <div {...api.contentProps}> diff --git a/examples/vue-ts/src/pages/pagination.tsx b/examples/vue-ts/src/pages/pagination.tsx index 7540cc9caf..6c2f2a9bf9 100644 --- a/examples/vue-ts/src/pages/pagination.tsx +++ b/examples/vue-ts/src/pages/pagination.tsx @@ -1,6 +1,5 @@ import * as pagination from "@zag-js/pagination" import { normalizeProps, useMachine } from "@zag-js/vue" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { computed, defineComponent, h, Fragment } from "vue" import { paginationControls, paginationData } from "@zag-js/shared" import { StateVisualizer } from "../components/state-visualizer" @@ -60,9 +59,7 @@ export default defineComponent({ <nav {...api.rootProps}> <ul> <li> - <button {...api.prevTriggerProps}> - Previous <span style={visuallyHiddenStyle}>Page</span> - </button> + <button {...api.prevTriggerProps}>Previous</button> </li> {api.pages.map((page, i) => { if (page.type === "page") @@ -81,9 +78,7 @@ export default defineComponent({ ) })} <li> - <button {...api.nextTriggerProps}> - Next <span style={visuallyHiddenStyle}>Page</span> - </button> + <button {...api.nextTriggerProps}>Next</button> </li> </ul> </nav> diff --git a/examples/vue-ts/src/pages/presence.tsx b/examples/vue-ts/src/pages/presence.tsx index 9d9ebab424..0c889bf9bb 100644 --- a/examples/vue-ts/src/pages/presence.tsx +++ b/examples/vue-ts/src/pages/presence.tsx @@ -26,7 +26,7 @@ export default defineComponent({ return ( <main class="presence"> <button onClick={() => (present.value = !present.value)}>Toggle</button> - {api.isPresent && ( + {api.present && ( <div ref={nodeRef} data-scope="presence" data-state={present.value ? "open" : "closed"}> Content </div> diff --git a/examples/vue-ts/src/pages/rating-group.tsx b/examples/vue-ts/src/pages/rating-group.tsx index b65dfecca6..5c4fbaff77 100644 --- a/examples/vue-ts/src/pages/rating-group.tsx +++ b/examples/vue-ts/src/pages/rating-group.tsx @@ -71,7 +71,7 @@ export default defineComponent({ const state = api.getItemState({ index }) return ( <span key={index} {...api.getItemProps({ index })}> - {state.isHalf ? <HalfStar /> : <Star />} + {state.half ? <HalfStar /> : <Star />} </span> ) })} diff --git a/examples/vue-ts/src/pages/switch.tsx b/examples/vue-ts/src/pages/switch.tsx index d9f7265bfb..2904483c8b 100644 --- a/examples/vue-ts/src/pages/switch.tsx +++ b/examples/vue-ts/src/pages/switch.tsx @@ -34,7 +34,7 @@ export default defineComponent({ <span {...api.controlProps}> <span {...api.thumbProps} /> </span> - <span {...api.labelProps}>Feature is {api.isChecked ? "enabled" : "disabled"}</span> + <span {...api.labelProps}>Feature is {api.checked ? "enabled" : "disabled"}</span> </label> </main> diff --git a/examples/vue-ts/src/pages/toast.tsx b/examples/vue-ts/src/pages/toast.tsx index ccb081aeab..0460bcc005 100644 --- a/examples/vue-ts/src/pages/toast.tsx +++ b/examples/vue-ts/src/pages/toast.tsx @@ -19,26 +19,13 @@ const ToastItem = defineComponent({ setup(props) { const [state, send] = useActor(props.actor) const apiRef = computed(() => toast.connect(state.value, send, normalizeProps)) - const progressbarProps = computed(() => ({ - "data-scope": "toast", - "data-part": "progressbar", - "data-type": state.value.context.type, - style: { - opacity: apiRef.value.isVisible ? 1 : 0, - transformOrigin: apiRef.value.isRtl ? "right" : "left", - animationName: apiRef.value.type === "loading" ? "none" : undefined, - animationPlayState: apiRef.value.isPaused ? "paused" : "running", - animationDuration: "var(--duration)", - }, - })) - return () => { const api = apiRef.value return ( - <pre {...api.rootProps}> + <div {...api.rootProps}> <span {...api.ghostBeforeProps} /> - <div {...progressbarProps.value} /> + <div data-scope="toast" data-part="progressbar" /> <p {...api.titleProps}> {api.type === "loading" && <LoaderBar />} {api.title} @@ -47,7 +34,7 @@ const ToastItem = defineComponent({ <button {...api.closeTriggerProps}> <XIcon /> </button> - </pre> + </div> ) } }, diff --git a/examples/vue-ts/src/pages/tooltip.tsx b/examples/vue-ts/src/pages/tooltip.tsx index 824574adf3..a063f1ccc8 100644 --- a/examples/vue-ts/src/pages/tooltip.tsx +++ b/examples/vue-ts/src/pages/tooltip.tsx @@ -21,7 +21,7 @@ export default defineComponent({ <main class="tooltip" style={{ gap: "12px", flexDirection: "row" }}> <div class="root"> <button {...api.triggerProps}>Hover me</button> - {api.isOpen && ( + {api.open && ( <Teleport to="body"> <div {...api.positionerProps}> <div class="tooltip-content" data-testid="tip-1-tooltip" {...api.contentProps}> @@ -32,7 +32,7 @@ export default defineComponent({ )} <button {...api2.triggerProps}>Over me</button> - {api2.isOpen && ( + {api2.open && ( <Teleport to="body"> <div {...api2.positionerProps}> <div class="tooltip-content" data-testid="tip-2-tooltip" {...api2.contentProps}> diff --git a/packages/docs/data/api.json b/packages/docs/data/api.json index 2f23dd59b0..2365af393a 100644 --- a/packages/docs/data/api.json +++ b/packages/docs/data/api.json @@ -70,14 +70,10 @@ }, "avatar": { "api": { - "isLoaded": { + "loaded": { "type": "boolean", "description": "Whether the image is loaded." }, - "showFallback": { - "type": "boolean", - "description": "Whether the fallback is shown." - }, "setSrc": { "type": "(src: string) => void", "description": "Function to set new src." @@ -121,9 +117,9 @@ "type": "number", "description": "The current scroll progress of the carousel" }, - "isAutoplay": { + "autoPlaying": { "type": "boolean", - "description": "Whether the carousel is currently auto-playing" + "description": "Whether the carousel is auto playing" }, "canScrollNext": { "type": "boolean", @@ -209,19 +205,19 @@ }, "checkbox": { "api": { - "isChecked": { + "checked": { "type": "boolean", "description": "Whether the checkbox is checked" }, - "isDisabled": { + "disabled": { "type": "boolean", "description": "Whether the checkbox is disabled" }, - "isIndeterminate": { + "indeterminate": { "type": "boolean", "description": "Whether the checkbox is indeterminate" }, - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the checkbox is focused" }, @@ -245,27 +241,31 @@ }, "disabled": { "type": "boolean", - "description": "If `true`, the checkbox will be disabled" + "description": "Whether the checkbox is disabled" }, "invalid": { "type": "boolean", - "description": "If `true`, the checkbox is marked as invalid." + "description": "Whether the checkbox is invalid" }, "required": { "type": "boolean", - "description": "If `true`, the checkbox input is marked as required," + "description": "Whether the checkbox is required" }, "checked": { "type": "CheckedState", - "description": "If `true`, the checkbox will be checked." + "description": "The checked state of the checkbox" + }, + "readOnly": { + "type": "boolean", + "description": "Whether the checkbox is read-only" }, "onCheckedChange": { "type": "(details: CheckedChangeDetails) => void", - "description": "The callback invoked when the checked state of the `Checkbox` changes." + "description": "The callback invoked when the checked state changes." }, "name": { "type": "string", - "description": "The name of the input field in a checkbox. Useful for form submission." + "description": "The name of the input field in a checkbox.\nUseful for form submission." }, "form": { "type": "string", @@ -293,7 +293,7 @@ }, "clipboard": { "api": { - "isCopied": { + "copied": { "type": "boolean", "description": "Whether the value has been copied to the clipboard" }, @@ -339,25 +339,21 @@ }, "collapsible": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the collapsible is open." }, - "isVisible": { + "visible": { "type": "boolean", "description": "Whether the collapsible is visible (open or closing)" }, - "isDisabled": { + "disabled": { "type": "boolean", "description": "Whether the collapsible is disabled" }, - "open": { - "type": "() => void", - "description": "Function to open the collapsible." - }, - "close": { - "type": "() => void", - "description": "Function to close the collapsible." + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the collapsible." } }, "context": { @@ -402,11 +398,11 @@ }, "color-picker": { "api": { - "isDragging": { + "dragging": { "type": "boolean", "description": "Whether the color picker is being dragged" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the color picker is open" }, @@ -446,13 +442,9 @@ "type": "(value: number) => void", "description": "Function to set the color alpha" }, - "open": { - "type": "() => void", - "description": "Function to open the color picker" - }, - "close": { - "type": "() => void", - "description": "Function to close the color picker" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the color picker" } }, "context": { @@ -544,15 +536,15 @@ }, "combobox": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the combobox is focused" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the combobox is open" }, - "isInputValueEmpty": { + "inputEmpty": { "type": "boolean", "description": "Whether the combobox input value is empty" }, @@ -612,13 +604,9 @@ "type": "(props: ItemProps) => ItemState", "description": "Returns the state of a combobox item" }, - "open": { - "type": "() => void", - "description": "Function to open the combobox" - }, - "close": { - "type": "() => void", - "description": "Function to close the combobox" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the combobox" }, "collection": { "type": "Collection<V>", @@ -795,11 +783,11 @@ }, "date-picker": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the input is focused" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the date picker is open" }, @@ -883,13 +871,9 @@ "type": "() => void", "description": "Clears the selected date(s)." }, - "open": { - "type": "() => void", - "description": "Function to open the calendar." - }, - "close": { - "type": "() => void", - "description": "Function to close the calendar." + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the calendar." }, "focusMonth": { "type": "(month: number) => void", @@ -1076,17 +1060,13 @@ }, "dialog": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the dialog is open" }, - "open": { - "type": "() => void", - "description": "Function to open the dialog" - }, - "close": { - "type": "() => void", - "description": "Function to close the dialog" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the dialog" } }, "context": { @@ -1180,11 +1160,11 @@ }, "editable": { "api": { - "isEditing": { + "editing": { "type": "boolean", "description": "Whether the editable is in edit mode" }, - "isValueEmpty": { + "empty": { "type": "boolean", "description": "Whether the editable value is empty" }, @@ -1325,15 +1305,15 @@ }, "file-upload": { "api": { - "isDragging": { + "dragging": { "type": "boolean", "description": "Whether the user is dragging something over the root element" }, - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the user is focused on the dropzone element" }, - "open": { + "openFilePicker": { "type": "() => void", "description": "Function to open the file dialog" }, @@ -1449,15 +1429,19 @@ }, "floating-panel": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the panel is open" }, - "isDragging": { + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the panel" + }, + "dragging": { "type": "boolean", "description": "Whether the panel is being dragged" }, - "isResizing": { + "resizing": { "type": "boolean", "description": "Whether the panel is being resized" } @@ -1556,18 +1540,14 @@ }, "hover-card": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the hover card is open" }, - "open": { - "type": "() => void", + "setOpen": { + "type": "(open: boolean) => void", "description": "Function to open the hover card" }, - "close": { - "type": "() => void", - "description": "Function to close the hover card" - }, "reposition": { "type": "(options?: Partial<PositioningOptions>) => void", "description": "Function to reposition the popover" @@ -1619,17 +1599,13 @@ }, "menu": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the menu is open" }, - "open": { - "type": "() => void", - "description": "Function to open the menu" - }, - "close": { - "type": "() => void", - "description": "Function to close the menu" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the menu" }, "highlightedValue": { "type": "string", @@ -1746,15 +1722,15 @@ }, "number-input": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the input is focused." }, - "isInvalid": { + "invalid": { "type": "boolean", "description": "Whether the input is invalid." }, - "isValueEmpty": { + "empty": { "type": "boolean", "description": "Whether the input value is empty." }, @@ -1939,14 +1915,6 @@ "type": "<V>(data: V[]) => V[]", "description": "Function to slice an array of data based on the current page." }, - "isFirstPage": { - "type": "boolean", - "description": "Whether the current page is the first page." - }, - "isLastPage": { - "type": "boolean", - "description": "Whether the current page is the last page." - }, "setCount": { "type": "(count: number) => void", "description": "Function to set the total number of pages." @@ -2019,7 +1987,7 @@ "type": "string", "description": "The value of the input as a string." }, - "isValueComplete": { + "complete": { "type": "boolean", "description": "Whether all inputs are filled." }, @@ -2134,17 +2102,13 @@ "type": "boolean", "description": "Whether the popover is portalled" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the popover is open" }, - "open": { - "type": "() => void", - "description": "Function to open the popover" - }, - "close": { - "type": "() => void", - "description": "Function to close the popover" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the popover" }, "reposition": { "type": "(options?: Partial<PositioningOptions>) => void", @@ -2231,7 +2195,7 @@ }, "presence": { "api": { - "isPresent": { + "present": { "type": "boolean", "description": "Whether the node is present in the DOM." }, @@ -2351,6 +2315,10 @@ "type": "boolean", "description": "If `true`, the radio group will be disabled" }, + "readOnly": { + "type": "boolean", + "description": "Whether the checkbox is read-only" + }, "onValueChange": { "type": "(details: ValueChangeDetails) => void", "description": "Function called once a radio is checked" @@ -2384,7 +2352,7 @@ "type": "() => void", "description": "Clears the value of the rating group" }, - "isHovering": { + "hovering": { "type": "boolean", "description": "Whether the rating group is being hovered" }, @@ -2475,15 +2443,15 @@ }, "select": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the select is focused" }, - "isOpen": { + "open": { "type": "boolean", "description": "Whether the select is open" }, - "isValueEmpty": { + "empty": { "type": "boolean", "description": "Whether the select value is empty" }, @@ -2535,13 +2503,9 @@ "type": "(props: ItemProps<any>) => ItemState", "description": "Returns the state of a select item" }, - "open": { - "type": "() => void", - "description": "Function to open the select" - }, - "close": { - "type": "() => void", - "description": "Function to close the select" + "setOpen": { + "type": "(open: boolean) => void", + "description": "Function to open or close the select" }, "collection": { "type": "Collection<V>", @@ -2662,11 +2626,11 @@ }, "signature-pad": { "api": { - "isEmpty": { + "empty": { "type": "boolean", "description": "Whether the signature pad is empty." }, - "isDrawing": { + "drawing": { "type": "boolean", "description": "Whether the user is currently drawing." }, @@ -2733,11 +2697,11 @@ "type": "number[]", "description": "The value of the slider." }, - "isDragging": { + "dragging": { "type": "boolean", "description": "Whether the slider is being dragged." }, - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the slider is focused." }, @@ -2840,7 +2804,7 @@ "description": "Function invoked when the slider's focused index changes" }, "getAriaValueText": { - "type": "(value: number, index: number) => string", + "type": "(details: ValueTextDetails) => string", "description": "Function that returns a human readable value for the slider thumb" }, "min": { @@ -2892,11 +2856,11 @@ }, "splitter": { "api": { - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the splitter is focused." }, - "isDragging": { + "dragging": { "type": "boolean", "description": "Whether the splitter is being dragged." }, @@ -2959,15 +2923,15 @@ }, "switch": { "api": { - "isChecked": { + "checked": { "type": "boolean", "description": "Whether the checkbox is checked" }, - "isDisabled": { + "disabled": { "type": "boolean", "description": "Whether the checkbox is disabled" }, - "isFocused": { + "focused": { "type": "boolean", "description": "Whether the checkbox is focused" }, @@ -3001,6 +2965,10 @@ "type": "boolean", "description": "If `true`, the switch input is marked as required," }, + "readOnly": { + "type": "boolean", + "description": "Whether the switch is read-only" + }, "onCheckedChange": { "type": "(details: CheckedChangeDetails) => void", "description": "Function to call when the switch is clicked." @@ -3117,7 +3085,7 @@ }, "tags-input": { "api": { - "isEmpty": { + "empty": { "type": "boolean", "description": "Whether the tags are empty" }, @@ -3137,7 +3105,7 @@ "type": "number", "description": "The number of the tags." }, - "isAtMax": { + "atMax": { "type": "boolean", "description": "Whether the tags have reached the max limit." }, @@ -3357,18 +3325,14 @@ }, "tooltip": { "api": { - "isOpen": { + "open": { "type": "boolean", "description": "Whether the tooltip is open." }, - "open": { - "type": "() => void", + "setOpen": { + "type": "(open: boolean) => void", "description": "Function to open the tooltip." }, - "close": { - "type": "() => void", - "description": "Function to close the tooltip." - }, "reposition": { "type": "(options?: Partial<PositioningOptions>) => void", "description": "Function to reposition the popover" 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<S.AnyEventObject> * -----------------------------------------------------------------------------*/ 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<T extends PropTypes = PropTypes> { @@ -120,7 +135,8 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * 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"] 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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" 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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..b92e9df1bd 100644 --- a/packages/machines/carousel/src/carousel.types.ts +++ b/packages/machines/carousel/src/carousel.types.ts @@ -98,15 +98,33 @@ export type Send = S.Send<S.AnyEventObject> * -----------------------------------------------------------------------------*/ export interface ItemProps { + /** + * The index of the item. + */ index: number } export interface ItemState { + /** + * The text value of the item. Used for accessibility. + */ valueText: string - isCurrent: boolean - isNext: boolean - isPrevious: boolean - isInView: boolean + /** + * Whether the item is the current item in the carousel + */ + current: boolean + /** + * Whether the item is the next item in the carousel + */ + next: boolean + /** + * Whether the item is the previous item in the carousel + */ + previous: boolean + /** + * Whether the item is in view + */ + inView: boolean } export interface IndicatorProps { @@ -124,9 +142,9 @@ export interface MachineApi<T extends PropTypes = PropTypes> { */ 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 */ diff --git a/packages/machines/checkbox/package.json b/packages/machines/checkbox/package.json index e1a9a13721..e7f490b20e 100644 --- a/packages/machines/checkbox/package.json +++ b/packages/machines/checkbox/package.json @@ -41,7 +41,6 @@ "@zag-js/types": "workspace:*", "@zag-js/dom-query": "workspace:*", "@zag-js/dom-event": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/form-utils": "workspace:*", "@zag-js/utils": "workspace:*" }, diff --git a/packages/machines/checkbox/src/checkbox.connect.ts b/packages/machines/checkbox/src/checkbox.connect.ts index 307448656d..ff16d983b3 100644 --- a/packages/machines/checkbox/src/checkbox.connect.ts +++ b/packages/machines/checkbox/src/checkbox.connect.ts @@ -1,38 +1,39 @@ -import { dataAttr } from "@zag-js/dom-query" +import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./checkbox.anatomy" import { dom } from "./checkbox.dom" -import type { CheckedState, MachineApi, Send, State } from "./checkbox.types" +import type { MachineApi, Send, State } from "./checkbox.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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 readOnly = state.context.readOnly const dataAttrs = { "data-active": dataAttr(state.context.active), - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), + "data-readonly": dataAttr(readOnly), "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 { - isChecked, - isDisabled, - isIndeterminate, - isFocused, + checked, + disabled, + indeterminate, + focused, checkedState: state.context.checked, - setChecked(checked: CheckedState) { + setChecked(checked) { send({ type: "CHECKED.SET", checked, isTrusted: false }) }, toggleChecked() { - send({ type: "CHECKED.TOGGLE", checked: isChecked, isTrusted: false }) + send({ type: "CHECKED.TOGGLE", checked: checked, isTrusted: false }) }, rootProps: normalize.label({ @@ -42,11 +43,11 @@ export function connect<T extends PropTypes>(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 +76,16 @@ export function connect<T extends PropTypes>(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, @@ -92,6 +93,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize value: state.context.value, style: visuallyHiddenStyle, onChange(event) { + if (readOnly) { + event.preventDefault() + return + } + const checked = event.currentTarget.checked send({ type: "CHECKED.SET", checked, isTrusted: true }) }, diff --git a/packages/machines/checkbox/src/checkbox.props.ts b/packages/machines/checkbox/src/checkbox.props.ts index f0072b357b..46e1903a4f 100644 --- a/packages/machines/checkbox/src/checkbox.props.ts +++ b/packages/machines/checkbox/src/checkbox.props.ts @@ -13,6 +13,7 @@ export const props = createProps<UserDefinedContext>()([ "invalid", "name", "onCheckedChange", + "readOnly", "required", "value", ]) diff --git a/packages/machines/checkbox/src/checkbox.types.ts b/packages/machines/checkbox/src/checkbox.types.ts index b41e80e46f..d3be097554 100644 --- a/packages/machines/checkbox/src/checkbox.types.ts +++ b/packages/machines/checkbox/src/checkbox.types.ts @@ -28,27 +28,32 @@ interface PublicContext extends DirectionProperty, CommonProperties { */ ids?: ElementIds /** - * If `true`, the checkbox will be disabled + * Whether the checkbox is disabled */ disabled?: boolean /** - * If `true`, the checkbox is marked as invalid. + * Whether the checkbox is invalid */ invalid?: boolean /** - * If `true`, the checkbox input is marked as required, + * Whether the checkbox is required */ required?: boolean /** - * If `true`, the checkbox will be checked. + * The checked state of the checkbox */ checked: CheckedState /** - * The callback invoked when the checked state of the `Checkbox` changes. + * Whether the checkbox is read-only + */ + readOnly?: boolean + /** + * The callback invoked when the checked state changes. */ onCheckedChange?(details: CheckedChangeDetails): void /** - * The name of the input field in a checkbox. Useful for form submission. + * The name of the input field in a checkbox. + * Useful for form submission. */ name?: string /** @@ -120,19 +125,19 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * 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 */ 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * Whether the value has been copied to the clipboard */ - isCopied: boolean + copied: boolean /** * The value to be copied to the clipboard */ diff --git a/packages/machines/collapsible/src/collapsible.connect.ts b/packages/machines/collapsible/src/collapsible.connect.ts index 7d2fcfd25d..7034c3daf5 100644 --- a/packages/machines/collapsible/src/collapsible.connect.ts +++ b/packages/machines/collapsible/src/collapsible.connect.ts @@ -5,39 +5,37 @@ import { dom } from "./collapsible.dom" import type { MachineApi, Send, State } from "./collapsible.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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) { + if (_open === open) return + 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 +47,13 @@ export function connect<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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"] diff --git a/packages/machines/color-picker/package.json b/packages/machines/color-picker/package.json index d7a2811237..8905765bcc 100644 --- a/packages/machines/color-picker/package.json +++ b/packages/machines/color-picker/package.json @@ -44,7 +44,6 @@ "@zag-js/utils": "workspace:*", "@zag-js/form-utils": "workspace:*", "@zag-js/color-utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/popper": "workspace:*", "@zag-js/text-selection": "workspace:*", "@zag-js/types": "workspace:*" diff --git a/packages/machines/color-picker/src/color-picker.connect.ts b/packages/machines/color-picker/src/color-picker.connect.ts index f284442c8b..ad4988e790 100644 --- a/packages/machines/color-picker/src/color-picker.connect.ts +++ b/packages/machines/color-picker/src/color-picker.connect.ts @@ -8,10 +8,9 @@ import { isModifierKey, type EventKeyMap, } from "@zag-js/dom-event" -import { dataAttr, query } from "@zag-js/dom-query" +import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query" import { getPlacementStyles } from "@zag-js/popper" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./color-picker.anatomy" import { dom } from "./color-picker.dom" import type { @@ -32,12 +31,12 @@ export function connect<T extends PropTypes>(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 +57,19 @@ export function connect<T extends PropTypes>(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) { + if (_open === open) return + send({ type: _open ? "OPEN" : "CLOSE" }) }, setValue(value) { send({ type: "VALUE.SET", value: normalizeColor(value), src: "set-color" }) @@ -99,7 +96,7 @@ export function connect<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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.machine.ts b/packages/machines/color-picker/src/color-picker.machine.ts index b0a1d271fa..4bb0f1a20f 100644 --- a/packages/machines/color-picker/src/color-picker.machine.ts +++ b/packages/machines/color-picker/src/color-picker.machine.ts @@ -404,11 +404,11 @@ export function machine(userContext: UserDefinedContext) { openEyeDropper(ctx) { const isSupported = "EyeDropper" in dom.getWin(ctx) if (!isSupported) return - const win = dom.getWin(ctx) as any + const win = dom.getWin(ctx) const picker = new win.EyeDropper() picker .open() - .then(({ sRGBHex }: { sRGBHex: string }) => { + .then(({ sRGBHex }) => { const format = ctx.value.getFormat() const color = parseColor(sRGBHex).toFormat(format) as Color set.value(ctx, color) diff --git a/packages/machines/color-picker/src/color-picker.types.ts b/packages/machines/color-picker/src/color-picker.types.ts index d01e222427..c6dd65a700 100644 --- a/packages/machines/color-picker/src/color-picker.types.ts +++ b/packages/machines/color-picker/src/color-picker.types.ts @@ -7,6 +7,20 @@ import type { MaybeFunction } from "@zag-js/utils" export type ExtendedColorChannel = ColorChannel | "hex" | "css" +// patch the global window object to include the EyeDropper API + +interface EyeDropper { + new (): EyeDropper + open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> + [Symbol.toStringTag]: "EyeDropper" +} + +declare global { + interface Window { + EyeDropper: EyeDropper + } +} + /* ----------------------------------------------------------------------------- * Callback details * -----------------------------------------------------------------------------*/ @@ -218,8 +232,8 @@ export interface SwatchTriggerProps { export interface SwatchTriggerState { value: Color valueAsString: string - isChecked: boolean - isDisabled: boolean + checked: boolean + disabled: boolean } export interface SwatchProps { @@ -241,11 +255,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * 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 +297,9 @@ export interface MachineApi<T extends PropTypes = PropTypes> { */ 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"] diff --git a/packages/machines/combobox/src/combobox.connect.ts b/packages/machines/combobox/src/combobox.connect.ts index c698c343e7..56bea6054a 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<T extends PropTypes, V extends CollectionItem>( state: State, @@ -21,13 +21,13 @@ export function connect<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( focus() { dom.getInputEl(state.context)?.focus() }, - open() { - if (isOpen) return - send("OPEN") + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( ...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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( }, 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( 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<T extends PropTypes, V extends CollectionItem>( "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..858b85e86c 100644 --- a/packages/machines/combobox/src/combobox.types.ts +++ b/packages/machines/combobox/src/combobox.types.ts @@ -278,15 +278,33 @@ export type Send = S.Send<S.AnyEventObject> * -----------------------------------------------------------------------------*/ export interface ItemProps { + /** + * Whether hovering outside should clear the highlighted state + */ persistFocus?: boolean + /** + * The item to render + */ item: CollectionItem } export interface ItemState { + /** + * The value of the item + */ value: string - isDisabled: boolean - isSelected: boolean - isHighlighted: boolean + /** + * Whether the item is disabled + */ + disabled: boolean + /** + * Whether the item is selected + */ + selected: boolean + /** + * Whether the item is highlighted via pointer or keyboard navigation + */ + highlighted: boolean } export interface ItemGroupProps { @@ -301,15 +319,15 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio /** * Whether the combobox is focused */ - isFocused: boolean + focused: boolean /** * Whether the combobox is open */ - isOpen: boolean + open: boolean /** * Whether the combobox input value is empty */ - isInputValueEmpty: boolean + inputEmpty: boolean /** * The value of the combobox input */ @@ -367,13 +385,9 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio */ getItemState(props: ItemProps): ItemState /** - * Function to open the combobox - */ - open(): void - /** - * Function to close the combobox + * Function to open or close the combobox */ - close(): void + setOpen(open: boolean): void /** * Function to toggle the combobox */ diff --git a/packages/machines/date-picker/src/date-picker.connect.ts b/packages/machines/date-picker/src/date-picker.connect.ts index fce409f70f..26be920504 100644 --- a/packages/machines/date-picker/src/date-picker.connect.ts +++ b/packages/machines/date-picker/src/date-picker.connect.ts @@ -63,7 +63,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const disabled = state.context.disabled const readOnly = state.context.readOnly - const isInteractive = state.context.isInteractive + const interactive = state.context.isInteractive const min = state.context.min const max = state.context.max @@ -71,8 +71,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const timeZone = state.context.timeZone const startOfWeek = state.context.startOfWeek - const isFocused = state.matches("focused") - const isOpen = state.matches("open") + const focused = state.matches("focused") + const open = state.matches("open") const isRangePicker = state.context.selectionMode === "range" const isDateUnavailableFn = state.context.isDateUnavailable @@ -120,12 +120,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const { value, disabled } = props const normalized = focusedValue.set({ year: value }) const cellState = { - isFocused: focusedValue.year === props.value, - isSelectable: !isDateInvalid(normalized, min, max), - isSelected: !!selectedValue.find((date) => date.year === value), + focused: focusedValue.year === props.value, + selectable: !isDateInvalid(normalized, min, max), + selected: !!selectedValue.find((date) => date.year === value), valueText: value.toString(), - get isDisabled() { - return disabled || !cellState.isSelectable + get disabled() { + return disabled || !cellState.selectable }, } return cellState @@ -136,12 +136,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const normalized = focusedValue.set({ month: value }) const formatter = getMonthFormatter(locale, timeZone) const cellState = { - isFocused: focusedValue.month === props.value, - isSelectable: !isDateInvalid(normalized, min, max), - isSelected: !!selectedValue.find((date) => date.month === value && date.year === focusedValue.year), + focused: focusedValue.month === props.value, + selectable: !isDateInvalid(normalized, min, max), + selected: !!selectedValue.find((date) => date.month === value && date.year === focusedValue.year), valueText: formatter.format(normalized.toDate(timeZone)), - get isDisabled() { - return disabled || !cellState.isSelectable + get disabled() { + return disabled || !cellState.selectable }, } return cellState @@ -156,28 +156,28 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const end = visibleRange.start.add(unitDuration).subtract({ days: 1 }) const cellState = { - isInvalid: isDateInvalid(value, min, max), - isDisabled: disabled || isDateDisabled(value, visibleRange.start, end, min, max), - isSelected: selectedValue.some((date) => isDateEqual(value, date)), - isUnavailable: isDateUnavailable(value, isDateUnavailableFn, locale, min, max) && !disabled, - isOutsideRange: isDateOutsideVisibleRange(value, visibleRange.start, end), - isInRange: + invalid: isDateInvalid(value, min, max), + disabled: disabled || isDateDisabled(value, visibleRange.start, end, min, max), + selected: selectedValue.some((date) => isDateEqual(value, date)), + unavailable: isDateUnavailable(value, isDateUnavailableFn, locale, min, max) && !disabled, + outsideRange: isDateOutsideVisibleRange(value, visibleRange.start, end), + inRange: isRangePicker && (isDateWithinRange(value, selectedValue) || isDateWithinRange(value, hoveredRangeValue)), - isFirstInRange: isRangePicker && isDateEqual(value, selectedValue[0]), - isLastInRange: isRangePicker && isDateEqual(value, selectedValue[1]), - isToday: isTodayDate(value, timeZone), - isWeekend: isWeekend(value, locale), + firstInRange: isRangePicker && isDateEqual(value, selectedValue[0]), + lastInRange: isRangePicker && isDateEqual(value, selectedValue[1]), + today: isTodayDate(value, timeZone), + weekend: isWeekend(value, locale), formattedDate: formatter.format(value.toDate(timeZone)), - get isFocused() { - return isDateEqual(value, focusedValue) && !cellState.isOutsideRange + get focused() { + return isDateEqual(value, focusedValue) && !cellState.outsideRange }, get ariaLabel() { - if (cellState.isUnavailable) return `Not available. ${cellState.formattedDate}` - if (cellState.isSelected) return `Selected date. ${cellState.formattedDate}` + if (cellState.unavailable) return `Not available. ${cellState.formattedDate}` + if (cellState.selected) return `Selected date. ${cellState.formattedDate}` return `Choose ${cellState.formattedDate}` }, - get isSelectable() { - return !cellState.isDisabled && !cellState.isUnavailable + get selectable() { + return !cellState.disabled && !cellState.unavailable }, } return cellState @@ -189,8 +189,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize } return { - isFocused, - isOpen, + focused, + open, view: state.context.view, getRangePresetValue(preset) { return getDateRangePreset(preset, locale, timeZone) @@ -231,11 +231,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize setFocusedValue(value) { send({ type: "FOCUS.SET", value }) }, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, focusMonth, focusYear, @@ -270,7 +268,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.root.attrs, dir: state.context.dir, id: dom.getRootId(state.context), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(readOnly), }), @@ -279,7 +277,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.label.attrs, dir: state.context.dir, htmlFor: dom.getInputId(state.context, 0), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(readOnly), }), @@ -298,9 +296,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize contentProps: normalize.element({ ...parts.content.attrs, - hidden: !isOpen, + hidden: !open, dir: state.context.dir, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "data-placement": currentPlacement, id: dom.getContentId(state.context), role: "application", @@ -425,10 +423,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return normalize.element({ ...parts.tableCell.attrs, role: "gridcell", - "aria-disabled": ariaAttr(!cellState.isSelectable), - "aria-selected": cellState.isSelected || cellState.isInRange, - "aria-invalid": ariaAttr(cellState.isInvalid), - "aria-current": cellState.isToday ? "date" : undefined, + "aria-disabled": ariaAttr(!cellState.selectable), + "aria-selected": cellState.selected || cellState.inRange, + "aria-invalid": ariaAttr(cellState.invalid), + "aria-current": cellState.today ? "date" : undefined, "data-value": value.toString(), }) }, @@ -440,28 +438,29 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getCellTriggerId(state.context, value.toString()), role: "button", dir: state.context.dir, - tabIndex: cellState.isFocused ? 0 : -1, + tabIndex: cellState.focused ? 0 : -1, "aria-label": cellState.ariaLabel, - "aria-disabled": ariaAttr(!cellState.isSelectable), - "aria-invalid": ariaAttr(cellState.isInvalid), - "data-disabled": dataAttr(!cellState.isSelectable), - "data-selected": dataAttr(cellState.isSelected), + "aria-disabled": ariaAttr(!cellState.selectable), + "aria-invalid": ariaAttr(cellState.invalid), + "data-disabled": dataAttr(!cellState.selectable), + "data-selected": dataAttr(cellState.selected), "data-value": value.toString(), "data-view": "day", - "data-today": dataAttr(cellState.isToday), - "data-focused": dataAttr(cellState.isFocused), - "data-unavailable": dataAttr(cellState.isUnavailable), - "data-range-start": dataAttr(cellState.isFirstInRange), - "data-range-end": dataAttr(cellState.isLastInRange), - "data-in-range": dataAttr(cellState.isInRange), - "data-outside-range": dataAttr(cellState.isOutsideRange), - "data-weekend": dataAttr(cellState.isWeekend), - onClick() { - if (!cellState.isSelectable) return + "data-today": dataAttr(cellState.today), + "data-focused": dataAttr(cellState.focused), + "data-unavailable": dataAttr(cellState.unavailable), + "data-range-start": dataAttr(cellState.firstInRange), + "data-range-end": dataAttr(cellState.lastInRange), + "data-in-range": dataAttr(cellState.inRange), + "data-outside-range": dataAttr(cellState.outsideRange), + "data-weekend": dataAttr(cellState.weekend), + onClick(event) { + if (event.defaultPrevented) return + if (!cellState.selectable) return send({ type: "CELL.CLICK", cell: "day", value }) }, onPointerMove(event) { - if (event.pointerType === "touch" || !cellState.isSelectable) return + if (event.pointerType === "touch" || !cellState.selectable) return const focus = event.currentTarget.ownerDocument.activeElement !== event.currentTarget if (hoveredValue && isEqualDay(value, hoveredValue)) return send({ type: "CELL.POINTER_MOVE", cell: "day", value, focus }) @@ -478,9 +477,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, colSpan: columns, role: "gridcell", - "aria-selected": ariaAttr(cellState.isSelected), - "data-selected": dataAttr(cellState.isSelected), - "aria-disabled": ariaAttr(!cellState.isSelectable), + "aria-selected": ariaAttr(cellState.selected), + "data-selected": dataAttr(cellState.selected), + "aria-disabled": ariaAttr(!cellState.selectable), "data-value": value, }) }, @@ -492,16 +491,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, role: "button", id: dom.getCellTriggerId(state.context, value.toString()), - "data-selected": dataAttr(cellState.isSelected), - "aria-disabled": ariaAttr(!cellState.isSelectable), - "data-disabled": dataAttr(!cellState.isSelectable), - "data-focused": dataAttr(cellState.isFocused), + "data-selected": dataAttr(cellState.selected), + "aria-disabled": ariaAttr(!cellState.selectable), + "data-disabled": dataAttr(!cellState.selectable), + "data-focused": dataAttr(cellState.focused), "aria-label": cellState.valueText, "data-view": "month", "data-value": value, - tabIndex: cellState.isFocused ? 0 : -1, - onClick() { - if (!cellState.isSelectable) return + tabIndex: cellState.focused ? 0 : -1, + onClick(event) { + if (event.defaultPrevented) return + if (!cellState.selectable) return send({ type: "CELL.CLICK", cell: "month", value }) }, }) @@ -516,9 +516,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, colSpan: columns, role: "gridcell", - "aria-selected": ariaAttr(cellState.isSelected), - "data-selected": dataAttr(cellState.isSelected), - "aria-disabled": ariaAttr(!cellState.isSelectable), + "aria-selected": ariaAttr(cellState.selected), + "data-selected": dataAttr(cellState.selected), + "aria-disabled": ariaAttr(!cellState.selectable), "data-value": value, }) }, @@ -530,16 +530,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, role: "button", id: dom.getCellTriggerId(state.context, value.toString()), - "data-selected": dataAttr(cellState.isSelected), - "data-focused": dataAttr(cellState.isFocused), - "aria-disabled": ariaAttr(!cellState.isSelectable), - "data-disabled": dataAttr(!cellState.isSelectable), + "data-selected": dataAttr(cellState.selected), + "data-focused": dataAttr(cellState.focused), + "aria-disabled": ariaAttr(!cellState.selectable), + "data-disabled": dataAttr(!cellState.selectable), "aria-label": cellState.valueText, "data-value": value, "data-view": "year", - tabIndex: cellState.isFocused ? 0 : -1, - onClick() { - if (!cellState.isSelectable) return + tabIndex: cellState.focused ? 0 : -1, + onClick(event) { + if (event.defaultPrevented) return + if (!cellState.selectable) return send({ type: "CELL.CLICK", cell: "year", value }) }, }) @@ -554,7 +555,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize type: "button", "aria-label": getNextTriggerLabel(view), disabled: disabled || !state.context.isNextVisibleRangeValid, - onClick() { + onClick(event) { + if (event.defaultPrevented) return send({ type: "GOTO.NEXT", view }) }, }) @@ -569,7 +571,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize type: "button", "aria-label": getPrevTriggerLabel(view), disabled: disabled || !state.context.isPrevVisibleRangeValid, - onClick() { + onClick(event) { + if (event.defaultPrevented) return send({ type: "GOTO.PREV", view }) }, }) @@ -582,7 +585,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize type: "button", "aria-label": "Clear dates", hidden: !state.context.value.length, - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("VALUE.CLEAR") }, }), @@ -593,13 +597,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, type: "button", "data-placement": currentPlacement, - "aria-label": isOpen ? "Close calendar" : "Open calendar", + "aria-label": open ? "Close calendar" : "Open calendar", "aria-controls": dom.getContentId(state.context), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "aria-haspopup": "grid", disabled, - onClick() { - if (!isInteractive) return + onClick(event) { + if (event.defaultPrevented) return + if (!interactive) return send("TRIGGER.CLICK") }, }), @@ -614,8 +619,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize type: "button", disabled, "aria-label": getViewTriggerLabel(state.context.view), - onClick() { - if (!isInteractive) return + onClick(event) { + if (event.defaultPrevented) return + if (!interactive) return send("VIEW.CHANGE") }, }) @@ -641,7 +647,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize spellCheck: "false", dir: state.context.dir, name: state.context.name, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", readOnly, disabled, placeholder: getInputPlaceholder(locale), @@ -660,7 +666,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (evt.isComposing) return if (event.key !== "Enter") return @@ -714,7 +720,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ? `select ${value[0].toString()} to ${value[1].toString()}` : `select ${value}`, type: "button", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send({ type: "PRESET.CLICK", value }) }, }) diff --git a/packages/machines/date-picker/src/date-picker.types.ts b/packages/machines/date-picker/src/date-picker.types.ts index 1a8c502a61..d816ab6d36 100644 --- a/packages/machines/date-picker/src/date-picker.types.ts +++ b/packages/machines/date-picker/src/date-picker.types.ts @@ -317,11 +317,11 @@ export interface TableCellProps { } export interface TableCellState { - isFocused: boolean - isSelectable: boolean - isSelected: boolean + focused: boolean + selectable: boolean + selected: boolean valueText: string - readonly isDisabled: boolean + readonly disabled: boolean } export interface DayTableCellProps { @@ -331,20 +331,20 @@ export interface DayTableCellProps { } export interface DayTableCellState { - isInvalid: boolean - isDisabled: boolean - isSelected: boolean - isUnavailable: boolean - isOutsideRange: boolean - isInRange: boolean - isFirstInRange: boolean - isLastInRange: boolean - isToday: boolean - isWeekend: boolean + invalid: boolean + disabled: boolean + selected: boolean + unavailable: boolean + outsideRange: boolean + inRange: boolean + firstInRange: boolean + lastInRange: boolean + today: boolean + weekend: boolean formattedDate: string - readonly isFocused: boolean + readonly focused: boolean readonly ariaLabel: string - readonly isSelectable: boolean + readonly selectable: boolean } export interface TableProps { @@ -402,11 +402,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the input is focused */ - isFocused: boolean + focused: boolean /** * Whether the date picker is open */ - isOpen: boolean + open: boolean /** * The current view of the date picker */ @@ -488,13 +488,9 @@ export interface MachineApi<T extends PropTypes = PropTypes> { */ clearValue(): void /** - * Function to open the calendar. - */ - open(): void - /** - * Function to close the calendar. + * Function to open or close the calendar. */ - close(): void + setOpen(open: boolean): void /** * Function to set the selected month. */ diff --git a/packages/machines/dialog/src/dialog.connect.ts b/packages/machines/dialog/src/dialog.connect.ts index 9debea931b..1aa91cf736 100644 --- a/packages/machines/dialog/src/dialog.connect.ts +++ b/packages/machines/dialog/src/dialog.connect.ts @@ -5,16 +5,14 @@ import type { MachineApi, Send, State } from "./dialog.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { const ariaLabel = state.context["aria-label"] - const isOpen = state.matches("open") + const open = state.matches("open") const rendered = state.context.renderedElements return { - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, triggerProps: normalize.button({ @@ -23,10 +21,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getTriggerId(state.context), "aria-haspopup": "dialog", type: "button", - "aria-expanded": isOpen, - "data-state": isOpen ? "open" : "closed", + "aria-expanded": open, + "data-state": open ? "open" : "closed", "aria-controls": dom.getContentId(state.context), - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("TOGGLE") }, }), @@ -34,9 +33,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize backdropProps: normalize.element({ ...parts.backdrop.attrs, dir: state.context.dir, - hidden: !isOpen, + hidden: !open, id: dom.getBackdropId(state.context), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", }), positionerProps: normalize.element({ @@ -44,7 +43,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getPositionerId(state.context), style: { - pointerEvents: isOpen ? undefined : "none", + pointerEvents: open ? undefined : "none", }, }), @@ -52,10 +51,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.content.attrs, dir: state.context.dir, role: state.context.role, - hidden: !isOpen, + hidden: !open, id: dom.getContentId(state.context), tabIndex: -1, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "aria-modal": true, "aria-label": ariaLabel || undefined, "aria-labelledby": ariaLabel || !rendered.title ? undefined : dom.getTitleId(state.context), @@ -80,6 +79,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getCloseTriggerId(state.context), type: "button", onClick(event) { + if (event.defaultPrevented) return event.stopPropagation() send("CLOSE") }, diff --git a/packages/machines/dialog/src/dialog.types.ts b/packages/machines/dialog/src/dialog.types.ts index afbe63ba6e..47b30de38f 100644 --- a/packages/machines/dialog/src/dialog.types.ts +++ b/packages/machines/dialog/src/dialog.types.ts @@ -121,15 +121,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the dialog is open */ - isOpen: boolean - /** - * Function to open the dialog - */ - open(): void + open: boolean /** - * Function to close the dialog + * Function to open or close the dialog */ - close(): void + setOpen(open: boolean): void triggerProps: T["button"] backdropProps: T["element"] 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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 */ diff --git a/packages/machines/file-upload/package.json b/packages/machines/file-upload/package.json index fdc4f8907a..9041a4b8e5 100644 --- a/packages/machines/file-upload/package.json +++ b/packages/machines/file-upload/package.json @@ -40,7 +40,6 @@ "@zag-js/dom-query": "workspace:*", "@zag-js/file-utils": "workspace:*", "@zag-js/i18n-utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/utils": "workspace:*", "@zag-js/types": "workspace:*" }, diff --git a/packages/machines/file-upload/src/file-upload.connect.ts b/packages/machines/file-upload/src/file-upload.connect.ts index 9d960ebe8b..7aa4d58b28 100644 --- a/packages/machines/file-upload/src/file-upload.connect.ts +++ b/packages/machines/file-upload/src/file-upload.connect.ts @@ -1,7 +1,6 @@ -import { contains, dataAttr, isSelfTarget } from "@zag-js/dom-query" +import { contains, dataAttr, isSelfTarget, visuallyHiddenStyle } from "@zag-js/dom-query" import { formatBytes } from "@zag-js/i18n-utils" import { type NormalizeProps, type PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./file-upload.anatomy" import { dom } from "./file-upload.dom" import { type MachineApi, type Send, type State } from "./file-upload.types" @@ -12,13 +11,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const allowDrop = state.context.allowDrop const translations = state.context.translations - const isDragging = state.matches("dragging") - const isFocused = state.matches("focused") && !disabled + const dragging = state.matches("dragging") + const focused = state.matches("focused") && !disabled return { - isDragging, - isFocused, - open() { + dragging: dragging, + focused: focused, + openFilePicker() { send("OPEN") }, deleteFile(file) { @@ -48,7 +47,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getRootId(state.context), "data-disabled": dataAttr(disabled), - "data-dragging": dataAttr(isDragging), + "data-dragging": dataAttr(dragging), }), dropzoneProps: normalize.element({ @@ -60,7 +59,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "aria-invalid": state.context.invalid, "data-invalid": dataAttr(state.context.invalid), "data-disabled": dataAttr(disabled), - "data-dragging": dataAttr(isDragging), + "data-dragging": dataAttr(dragging), onKeyDown(event) { if (event.defaultPrevented) return const evt = event.nativeEvent || event 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<T extends PropTypes> { /** * 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 */ diff --git a/packages/machines/floating-panel/src/floating-panel.connect.ts b/packages/machines/floating-panel/src/floating-panel.connect.ts index 31020465d7..5e4865a646 100644 --- a/packages/machines/floating-panel/src/floating-panel.connect.ts +++ b/packages/machines/floating-panel/src/floating-panel.connect.ts @@ -7,24 +7,29 @@ import type { MachineApi, ResizeTriggerProps, Send, State } from "./floating-pan import { getResizeAxisStyle } from "./get-resize-axis-style" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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) { + if (_open === open) return + 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 +49,11 @@ export function connect<T extends PropTypes>(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 +98,8 @@ export function connect<T extends PropTypes>(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 +110,8 @@ export function connect<T extends PropTypes>(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 +122,8 @@ export function connect<T extends PropTypes>(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 +134,8 @@ export function connect<T extends PropTypes>(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 +218,12 @@ export function connect<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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"] diff --git a/packages/machines/hover-card/src/hover-card.connect.ts b/packages/machines/hover-card/src/hover-card.connect.ts index fd90277bb6..eb57de0e3d 100644 --- a/packages/machines/hover-card/src/hover-card.connect.ts +++ b/packages/machines/hover-card/src/hover-card.connect.ts @@ -5,7 +5,7 @@ import { dom } from "./hover-card.dom" import type { MachineApi, Send, State } from "./hover-card.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isOpen = state.hasTag("open") + const open = state.hasTag("open") const popperStyles = getPlacementStyles({ ...state.context.positioning, @@ -13,12 +13,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }) return { - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open: open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, reposition(options = {}) { send({ type: "POSITIONING.SET", options }) @@ -42,7 +40,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, "data-placement": state.context.currentPlacement, id: dom.getTriggerId(state.context), - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", onPointerEnter(event) { if (event.pointerType === "touch") return send({ type: "POINTER_ENTER", src: "trigger" }) @@ -73,8 +71,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.content.attrs, dir: state.context.dir, id: dom.getContentId(state.context), - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", + hidden: !open, + "data-state": open ? "open" : "closed", "data-placement": state.context.currentPlacement, onPointerEnter(event) { if (event.pointerType === "touch") return diff --git a/packages/machines/hover-card/src/hover-card.types.ts b/packages/machines/hover-card/src/hover-card.types.ts index 7b9fd48631..15c9b5a26a 100644 --- a/packages/machines/hover-card/src/hover-card.types.ts +++ b/packages/machines/hover-card/src/hover-card.types.ts @@ -88,19 +88,16 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the hover card is open */ - isOpen: boolean + open: boolean /** * Function to open the hover card */ - open(): void - /** - * Function to close the hover card - */ - close(): void + setOpen(open: boolean): void /** * Function to reposition the popover */ reposition(options?: Partial<PositioningOptions>): void + arrowProps: T["element"] arrowTipProps: T["element"] triggerProps: T["element"] diff --git a/packages/machines/menu/src/menu.connect.ts b/packages/machines/menu/src/menu.connect.ts index 687e0a5dd9..b0772277cb 100644 --- a/packages/machines/menu/src/menu.connect.ts +++ b/packages/machines/menu/src/menu.connect.ts @@ -27,7 +27,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const isSubmenu = state.context.isSubmenu const isTypingAhead = state.context.isTypingAhead - const isOpen = state.hasTag("open") + const open = state.hasTag("open") const popperStyles = getPlacementStyles({ ...state.context.positioning, @@ -36,8 +36,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize function getItemState(props: ItemProps): ItemState { return { - isDisabled: !!props.disabled, - isHighlighted: state.context.highlightedValue === props.value, + disabled: !!props.disabled, + highlighted: state.context.highlightedValue === props.value, } } @@ -50,7 +50,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const itemState = getItemState(getOptionItemProps(props)) return { ...itemState, - isChecked: !!props.checked, + checked: !!props.checked, } } @@ -61,39 +61,39 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.item.attrs, id, role: "menuitem", - "aria-disabled": itemState.isDisabled, - "data-disabled": dataAttr(itemState.isDisabled), + "aria-disabled": itemState.disabled, + "data-disabled": dataAttr(itemState.disabled), "data-ownedby": dom.getContentId(state.context), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-highlighted": dataAttr(itemState.highlighted), "data-valuetext": valueText, onDragStart(event) { const isLink = event.currentTarget.matches("a[href]") if (isLink) event.preventDefault() }, onPointerMove(event) { - if (itemState.isDisabled) return + if (itemState.disabled) return if (event.pointerType !== "mouse") return const target = event.currentTarget - if (itemState.isHighlighted) return + if (itemState.highlighted) return send({ type: "ITEM_POINTERMOVE", id, target, closeOnSelect }) }, onPointerLeave(event) { const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE" if (!mouseMoved) return - if (itemState.isDisabled) return + if (itemState.disabled) return if (event.pointerType !== "mouse") return const target = event.currentTarget send({ type: "ITEM_POINTERLEAVE", id, target, closeOnSelect }) }, onPointerDown(event) { - if (itemState.isDisabled) return + if (itemState.disabled) return const target = event.currentTarget send({ type: "ITEM_POINTERDOWN", target, id, closeOnSelect }) }, onPointerUp(event) { if (isDownloadingEvent(event)) return if (isOpeningInNewTab(event)) return - if (itemState.isDisabled) return + if (itemState.disabled) return if (!isLeftClick(event)) return const target = event.currentTarget @@ -112,12 +112,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return { highlightedValue: state.context.highlightedValue, - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open: open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, setHighlightedValue(value) { send({ type: "HIGHLIGHTED.SET", id: value }) @@ -179,8 +177,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "data-uid": state.context.id, "aria-haspopup": "menu", "aria-controls": dom.getContentId(state.context), - "aria-expanded": isOpen || undefined, - "data-state": isOpen ? "open" : "closed", + "aria-expanded": open || undefined, + "data-state": open ? "open" : "closed", onPointerMove(event) { if (event.pointerType !== "mouse") return const disabled = dom.isTargetDisabled(event.currentTarget) @@ -247,7 +245,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize indicatorProps: normalize.element({ ...parts.indicator.attrs, dir: state.context.dir, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", }), positionerProps: normalize.element({ @@ -274,8 +272,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.content.attrs, id: dom.getContentId(state.context), "aria-label": state.context["aria-label"], - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", + hidden: !open, + "data-state": open ? "open" : "closed", role: "menu", tabIndex: 0, dir: state.context.dir, @@ -380,15 +378,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, "data-value": option.value, role: `menuitem${type}`, - "aria-checked": !!itemState.isChecked, - "data-state": itemState.isChecked ? "checked" : "unchecked", + "aria-checked": !!itemState.checked, + "data-state": itemState.checked ? "checked" : "unchecked", onPointerUp(event) { if (!isLeftClick(event) || disabled) return if (isDownloadingEvent(event)) return if (isOpeningInNewTab(event)) return const target = event.currentTarget send({ type: "ITEM_CLICK", src: "pointerup", target, option, closeOnSelect }) - onCheckedChange?.(!itemState.isChecked) + onCheckedChange?.(!itemState.checked) }, }), } @@ -399,10 +397,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return normalize.element({ ...parts.itemIndicator.attrs, dir: state.context.dir, - "data-disabled": dataAttr(itemState.isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-state": itemState.isChecked ? "checked" : "unchecked", - hidden: !itemState.isChecked, + "data-disabled": dataAttr(itemState.disabled), + "data-highlighted": dataAttr(itemState.highlighted), + "data-state": itemState.checked ? "checked" : "unchecked", + hidden: !itemState.checked, }) }, @@ -411,9 +409,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return normalize.element({ ...parts.itemText.attrs, dir: state.context.dir, - "data-disabled": dataAttr(itemState.isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-state": itemState.isChecked ? "checked" : "unchecked", + "data-disabled": dataAttr(itemState.disabled), + "data-highlighted": dataAttr(itemState.highlighted), + "data-state": itemState.checked ? "checked" : "unchecked", }) }, diff --git a/packages/machines/menu/src/menu.types.ts b/packages/machines/menu/src/menu.types.ts index 3300506c6c..ce4fb3c524 100644 --- a/packages/machines/menu/src/menu.types.ts +++ b/packages/machines/menu/src/menu.types.ts @@ -221,16 +221,25 @@ export interface OptionItemProps extends Partial<ItemProps> { /** * Function called when the option state is changed */ - onCheckedChange?: (checked: boolean) => void + onCheckedChange?(checked: boolean): void } export interface ItemState { - isDisabled: boolean - isHighlighted: boolean + /** + * Whether the item is disabled + */ + disabled: boolean + /** + * Whether the item is highlighted + */ + highlighted: boolean } export interface OptionItemState extends ItemState { - isChecked: boolean + /** + * Whether the option item is checked + */ + checked: boolean } export interface ItemGroupProps { @@ -251,15 +260,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the menu is open */ - isOpen: boolean - /** - * Function to open the menu - */ - open(): void + open: boolean /** - * Function to close the menu + * Function to open or close the menu */ - close(): void + setOpen(open: boolean): void /** * The id of the currently highlighted menuitem */ diff --git a/packages/machines/number-input/src/number-input.connect.ts b/packages/machines/number-input/src/number-input.connect.ts index 7f80ba9e8a..0e4fe75bab 100644 --- a/packages/machines/number-input/src/number-input.connect.ts +++ b/packages/machines/number-input/src/number-input.connect.ts @@ -7,23 +7,22 @@ import { dom } from "./number-input.dom" import type { MachineApi, Send, State } from "./number-input.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isFocused = state.hasTag("focus") - const isInvalid = state.context.isOutOfRange || !!state.context.invalid + const focused = state.hasTag("focus") + const disabled = state.context.isDisabled + const readOnly = state.context.readOnly - const isValueEmpty = state.context.isValueEmpty + const empty = state.context.isValueEmpty + const invalid = state.context.isOutOfRange || !!state.context.invalid - const isDisabled = state.context.isDisabled - const isReadOnly = state.context.readOnly - - const isIncrementDisabled = isDisabled || !state.context.canIncrement || isReadOnly - const isDecrementDisabled = isDisabled || !state.context.canDecrement || isReadOnly + const isIncrementDisabled = disabled || !state.context.canIncrement || readOnly + const isDecrementDisabled = disabled || !state.context.canDecrement || readOnly const translations = state.context.translations return { - isFocused, - isInvalid, - isValueEmpty, + focused: focused, + invalid: invalid, + empty: empty, value: state.context.formattedValue, valueAsNumber: state.context.valueAsNumber, setValue(value) { @@ -52,17 +51,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getRootId(state.context), ...parts.root.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), - "data-focus": dataAttr(isFocused), - "data-invalid": dataAttr(isInvalid), + "data-disabled": dataAttr(disabled), + "data-focus": dataAttr(focused), + "data-invalid": dataAttr(invalid), }), labelProps: normalize.label({ ...parts.label.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), - "data-focus": dataAttr(isFocused), - "data-invalid": dataAttr(isInvalid), + "data-disabled": dataAttr(disabled), + "data-focus": dataAttr(focused), + "data-invalid": dataAttr(invalid), id: dom.getLabelId(state.context), htmlFor: dom.getInputId(state.context), }), @@ -71,10 +70,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.control.attrs, dir: state.context.dir, role: "group", - "aria-disabled": isDisabled, - "data-focus": dataAttr(isFocused), - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), + "aria-disabled": disabled, + "data-focus": dataAttr(focused), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), "aria-invalid": ariaAttr(state.context.invalid), }), @@ -88,10 +87,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize defaultValue: state.context.formattedValue, pattern: state.context.pattern, inputMode: state.context.inputMode, - "aria-invalid": ariaAttr(isInvalid), - "data-invalid": dataAttr(isInvalid), - disabled: isDisabled, - "data-disabled": dataAttr(isDisabled), + "aria-invalid": ariaAttr(invalid), + "data-invalid": dataAttr(invalid), + disabled: disabled, + "data-disabled": dataAttr(disabled), readOnly: !!state.context.readOnly, autoComplete: "off", autoCorrect: "off", @@ -102,12 +101,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "aria-valuemax": state.context.max, "aria-valuenow": Number.isNaN(state.context.valueAsNumber) ? undefined : state.context.valueAsNumber, "aria-valuetext": state.context.valueText, - onCompositionStart() { - send("INPUT.COMPOSITION_START") - }, - onCompositionEnd() { - send("INPUT.COMPOSITION_END") - }, onFocus() { send("INPUT.FOCUS") }, @@ -133,7 +126,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }, onKeyDown(event) { if (event.defaultPrevented) return - if (isReadOnly) return + if (readOnly) return const evt = getNativeEvent(event) if (evt.isComposing) return @@ -226,11 +219,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize scrubberProps: normalize.element({ ...parts.scrubber.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), id: dom.getScrubberId(state.context), role: "presentation", onMouseDown(event) { - if (isDisabled) return + if (disabled) return const evt = getNativeEvent(event) const point = getEventPoint(evt) @@ -242,7 +235,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize event.preventDefault() }, style: { - cursor: isDisabled ? undefined : "ew-resize", + cursor: disabled ? undefined : "ew-resize", }, }), } diff --git a/packages/machines/number-input/src/number-input.types.ts b/packages/machines/number-input/src/number-input.types.ts index 2ceaf13fe7..eb4916be9b 100644 --- a/packages/machines/number-input/src/number-input.types.ts +++ b/packages/machines/number-input/src/number-input.types.ts @@ -258,15 +258,15 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the input is focused. */ - isFocused: boolean + focused: boolean /** * Whether the input is invalid. */ - isInvalid: boolean + invalid: boolean /** * Whether the input value is empty. */ - isValueEmpty: boolean + empty: boolean /** * The formatted value of the input. */ @@ -303,6 +303,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { * Function to focus the input. */ focus(): void + rootProps: T["element"] labelProps: T["label"] controlProps: T["element"] diff --git a/packages/machines/pagination/src/pagination.connect.ts b/packages/machines/pagination/src/pagination.connect.ts index 53eb501f4a..f98c0ed48b 100644 --- a/packages/machines/pagination/src/pagination.connect.ts +++ b/packages/machines/pagination/src/pagination.connect.ts @@ -27,8 +27,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize previousPage, nextPage, pageRange, - isFirstPage, - isLastPage, slice(data) { return data.slice(pageRange.start, pageRange.end) }, diff --git a/packages/machines/pagination/src/pagination.types.ts b/packages/machines/pagination/src/pagination.types.ts index 67a4450cbd..01417fc9e5 100644 --- a/packages/machines/pagination/src/pagination.types.ts +++ b/packages/machines/pagination/src/pagination.types.ts @@ -166,14 +166,6 @@ export interface MachineApi<T extends PropTypes = PropTypes> { * Function to slice an array of data based on the current page. */ slice<V>(data: V[]): V[] - /** - * Whether the current page is the first page. - */ - isFirstPage: boolean - /** - * Whether the current page is the last page. - */ - isLastPage: boolean /** * Function to set the total number of pages. */ diff --git a/packages/machines/pin-input/package.json b/packages/machines/pin-input/package.json index 63d5c43f93..10e06eb99d 100644 --- a/packages/machines/pin-input/package.json +++ b/packages/machines/pin-input/package.json @@ -31,7 +31,6 @@ "@zag-js/dom-query": "workspace:*", "@zag-js/dom-event": "workspace:*", "@zag-js/form-utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/utils": "workspace:*", "@zag-js/core": "workspace:*", "@zag-js/types": "workspace:*" diff --git a/packages/machines/pin-input/src/pin-input.connect.ts b/packages/machines/pin-input/src/pin-input.connect.ts index 0d1d19b521..246c5ef2fb 100644 --- a/packages/machines/pin-input/src/pin-input.connect.ts +++ b/packages/machines/pin-input/src/pin-input.connect.ts @@ -1,16 +1,15 @@ import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from "@zag-js/dom-event" -import { ariaAttr, dataAttr, getBeforeInputValue } from "@zag-js/dom-query" +import { ariaAttr, dataAttr, getBeforeInputValue, visuallyHiddenStyle } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { invariant } from "@zag-js/utils" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./pin-input.anatomy" import { dom } from "./pin-input.dom" import type { MachineApi, Send, State } from "./pin-input.types" import { isValidValue } from "./pin-input.utils" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isValueComplete = state.context.isValueComplete - const isInvalid = state.context.invalid + const complete = state.context.isValueComplete + const invalid = state.context.invalid const focusedIndex = state.context.focusedIndex const translations = state.context.translations @@ -22,7 +21,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize focus, value: state.context.value, valueAsString: state.context.valueAsString, - isValueComplete: isValueComplete, + complete: complete, setValue(value) { if (!Array.isArray(value)) { invariant("[pin-input/setValue] value must be an array") @@ -40,9 +39,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, ...parts.root.attrs, id: dom.getRootId(state.context), - "data-invalid": dataAttr(isInvalid), + "data-invalid": dataAttr(invalid), "data-disabled": dataAttr(state.context.disabled), - "data-complete": dataAttr(isValueComplete), + "data-complete": dataAttr(complete), }), labelProps: normalize.label({ @@ -50,9 +49,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, htmlFor: dom.getHiddenInputId(state.context), id: dom.getLabelId(state.context), - "data-invalid": dataAttr(isInvalid), + "data-invalid": dataAttr(invalid), "data-disabled": dataAttr(state.context.disabled), - "data-complete": dataAttr(isValueComplete), + "data-complete": dataAttr(complete), onClick(event) { event.preventDefault() focus() @@ -85,13 +84,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, disabled: state.context.disabled, "data-disabled": dataAttr(state.context.disabled), - "data-complete": dataAttr(isValueComplete), + "data-complete": dataAttr(complete), id: dom.getInputId(state.context, index.toString()), "data-ownedby": dom.getRootId(state.context), "aria-label": translations.inputLabel(index, state.context.valueLength), inputMode: state.context.otp || state.context.type === "numeric" ? "numeric" : "text", - "aria-invalid": ariaAttr(isInvalid), - "data-invalid": dataAttr(isInvalid), + "aria-invalid": ariaAttr(invalid), + "data-invalid": dataAttr(invalid), type: state.context.mask ? "password" : inputType, defaultValue: state.context.value[index] || "", autoCapitalize: "none", diff --git a/packages/machines/pin-input/src/pin-input.types.ts b/packages/machines/pin-input/src/pin-input.types.ts index d037e146be..65c7ba538a 100644 --- a/packages/machines/pin-input/src/pin-input.types.ts +++ b/packages/machines/pin-input/src/pin-input.types.ts @@ -175,7 +175,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether all inputs are filled. */ - isValueComplete: boolean + complete: boolean /** * Function to set the value of the inputs. */ diff --git a/packages/machines/popover/src/popover.connect.ts b/packages/machines/popover/src/popover.connect.ts index 04cf90b4ad..1d875de448 100644 --- a/packages/machines/popover/src/popover.connect.ts +++ b/packages/machines/popover/src/popover.connect.ts @@ -6,7 +6,7 @@ import { dom } from "./popover.dom" import type { MachineApi, Send, State } from "./popover.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isOpen = state.matches("open") + const open = state.matches("open") const currentPlacement = state.context.currentPlacement const portalled = state.context.currentPortalled @@ -19,12 +19,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return { portalled, - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open: open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, reposition(options = {}) { send({ type: "POSITIONING.SET", options }) @@ -56,10 +54,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "data-placement": currentPlacement, id: dom.getTriggerId(state.context), "aria-haspopup": "dialog", - "aria-expanded": isOpen, - "data-state": isOpen ? "open" : "closed", + "aria-expanded": open, + "data-state": open ? "open" : "closed", "aria-controls": dom.getContentId(state.context), - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("TOGGLE") }, onBlur(event) { @@ -70,7 +69,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize indicatorProps: normalize.element({ ...parts.indicator.attrs, dir: state.context.dir, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", }), positionerProps: normalize.element({ @@ -86,9 +85,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getContentId(state.context), tabIndex: -1, role: "dialog", - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", - "data-expanded": dataAttr(isOpen), + hidden: !open, + "data-state": open ? "open" : "closed", + "data-expanded": dataAttr(open), "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : undefined, "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : undefined, "data-placement": currentPlacement, @@ -112,7 +111,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getCloseTriggerId(state.context), type: "button", "aria-label": "close", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("CLOSE") }, }), diff --git a/packages/machines/popover/src/popover.types.ts b/packages/machines/popover/src/popover.types.ts index b5622a5db9..e78bd64053 100644 --- a/packages/machines/popover/src/popover.types.ts +++ b/packages/machines/popover/src/popover.types.ts @@ -130,19 +130,16 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the popover is open */ - isOpen: boolean - /** - * Function to open the popover - */ - open(): void + open: boolean /** - * Function to close the popover + * Function to open or close the popover */ - close(): void + setOpen(open: boolean): void /** * Function to reposition the popover */ reposition(options?: Partial<PositioningOptions>): void + arrowProps: T["element"] arrowTipProps: T["element"] anchorProps: T["element"] diff --git a/packages/machines/presence/src/presence.connect.ts b/packages/machines/presence/src/presence.connect.ts index 79d45fe402..bf1be6e815 100644 --- a/packages/machines/presence/src/presence.connect.ts +++ b/packages/machines/presence/src/presence.connect.ts @@ -1,11 +1,9 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types" import type { MachineApi, Send, State } from "./presence.types" -export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi { - void normalize +export function connect<T extends PropTypes>(state: State, send: Send, _normalize: NormalizeProps<T>): MachineApi { return { - isPresent: state.matches("mounted", "unmountSuspended"), - + present: state.matches("mounted", "unmountSuspended"), setNode(node: HTMLElement | null) { if (!node) return send({ type: "NODE.SET", node }) diff --git a/packages/machines/presence/src/presence.types.ts b/packages/machines/presence/src/presence.types.ts index 6f839887e8..9659d93147 100644 --- a/packages/machines/presence/src/presence.types.ts +++ b/packages/machines/presence/src/presence.types.ts @@ -12,7 +12,7 @@ interface PublicContext { /** * Function called when the animation ends in the closed state. */ - onExitComplete?: () => void + onExitComplete?(): void } interface PrivateContext { @@ -42,7 +42,7 @@ export interface MachineApi { /** * Whether the node is present in the DOM. */ - isPresent: boolean + present: boolean /** * Function to set the node (as early as possible) */ diff --git a/packages/machines/radio-group/package.json b/packages/machines/radio-group/package.json index d4b01b4c05..e7b312b88a 100644 --- a/packages/machines/radio-group/package.json +++ b/packages/machines/radio-group/package.json @@ -39,7 +39,6 @@ "@zag-js/dom-query": "workspace:*", "@zag-js/element-rect": "workspace:*", "@zag-js/form-utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/utils": "workspace:*", "@zag-js/core": "workspace:*", "@zag-js/types": "workspace:*" diff --git a/packages/machines/radio-group/src/radio-group.connect.ts b/packages/machines/radio-group/src/radio-group.connect.ts index 21ba27bc81..49d1b49f0b 100644 --- a/packages/machines/radio-group/src/radio-group.connect.ts +++ b/packages/machines/radio-group/src/radio-group.connect.ts @@ -1,32 +1,33 @@ -import { dataAttr } from "@zag-js/dom-query" +import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./radio-group.anatomy" import { dom } from "./radio-group.dom" import type { ItemProps, ItemState, MachineApi, Send, State } from "./radio-group.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isGroupDisabled = state.context.isDisabled + const groupDisabled = state.context.isDisabled + const readOnly = state.context.readOnly function getItemState(props: ItemProps): ItemState { return { - isInvalid: !!props.invalid, - isDisabled: !!props.disabled || isGroupDisabled, - isChecked: state.context.value === props.value, - isFocused: state.context.focusedId === props.value, - isHovered: state.context.hoveredId === props.value, - isActive: state.context.activeId === props.value, + invalid: !!props.invalid, + disabled: !!props.disabled || groupDisabled, + checked: state.context.value === props.value, + focused: state.context.focusedValue === props.value, + hovered: state.context.hoveredValue === props.value, + active: state.context.activeValue === props.value, } } function getItemDataAttrs<T extends ItemProps>(props: T) { const radioState = getItemState(props) return { - "data-focus": dataAttr(radioState.isFocused), - "data-disabled": dataAttr(radioState.isDisabled), - "data-state": radioState.isChecked ? "checked" : "unchecked", - "data-hover": dataAttr(radioState.isHovered), - "data-invalid": dataAttr(radioState.isInvalid), + "data-focus": dataAttr(radioState.focused), + "data-disabled": dataAttr(radioState.disabled), + "dats-readonly": dataAttr(readOnly), + "data-state": radioState.checked ? "checked" : "unchecked", + "data-hover": dataAttr(radioState.hovered), + "data-invalid": dataAttr(radioState.invalid), "data-orientation": state.context.orientation, } } @@ -60,7 +61,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getRootId(state.context), "aria-labelledby": dom.getLabelId(state.context), "data-orientation": state.context.orientation, - "data-disabled": dataAttr(isGroupDisabled), + "data-disabled": dataAttr(groupDisabled), "aria-orientation": state.context.orientation, dir: state.context.dir, style: { @@ -72,7 +73,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.label.attrs, dir: state.context.dir, "data-orientation": state.context.orientation, - "data-disabled": dataAttr(isGroupDisabled), + "data-disabled": dataAttr(groupDisabled), id: dom.getLabelId(state.context), onClick: focus, }), @@ -87,24 +88,24 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize htmlFor: dom.getItemHiddenInputId(state.context, props.value), ...getItemDataAttrs(props), onPointerMove() { - if (rootState.isDisabled) return + if (rootState.disabled) return send({ type: "SET_HOVERED", value: props.value, hovered: true }) }, onPointerLeave() { - if (rootState.isDisabled) return + if (rootState.disabled) return send({ type: "SET_HOVERED", value: null }) }, onPointerDown(event) { - if (rootState.isDisabled) return + if (rootState.disabled) return // On pointerdown, the input blurs and returns focus to the `body`, // we need to prevent this. - if (rootState.isFocused && event.pointerType === "mouse") { + if (rootState.focused && event.pointerType === "mouse") { event.preventDefault() } send({ type: "SET_ACTIVE", value: props.value, active: true }) }, onPointerUp() { - if (rootState.isDisabled) return + if (rootState.disabled) return send({ type: "SET_ACTIVE", value: null }) }, }) @@ -126,7 +127,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.itemControl.attrs, dir: state.context.dir, id: dom.getItemControlId(state.context, props.value), - "data-active": dataAttr(controlState.isActive), + "data-active": dataAttr(controlState.active), "aria-hidden": true, ...getItemDataAttrs(props), }) @@ -143,7 +144,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize form: state.context.form, value: props.value, onChange(event) { - if (inputState.isDisabled) return + if (readOnly) { + event.preventDefault() + return + } if (event.target.checked) { send({ type: "SET_VALUE", value: props.value, isTrusted: true }) @@ -167,8 +171,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize send({ type: "SET_ACTIVE", value: null }) } }, - disabled: inputState.isDisabled, - defaultChecked: inputState.isChecked, + disabled: inputState.disabled, + defaultChecked: inputState.checked, style: visuallyHiddenStyle, }) }, @@ -178,7 +182,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.indicator.attrs, dir: state.context.dir, hidden: state.context.value == null, - "data-disabled": dataAttr(isGroupDisabled), + "data-disabled": dataAttr(groupDisabled), "data-orientation": state.context.orientation, style: { "--transition-property": "left, top, width, height", diff --git a/packages/machines/radio-group/src/radio-group.machine.ts b/packages/machines/radio-group/src/radio-group.machine.ts index f46aba29c0..b177c8e798 100644 --- a/packages/machines/radio-group/src/radio-group.machine.ts +++ b/packages/machines/radio-group/src/radio-group.machine.ts @@ -16,9 +16,9 @@ export function machine(userContext: UserDefinedContext) { initial: "idle", context: { value: null, - activeId: null, - focusedId: null, - hoveredId: null, + activeValue: null, + focusedValue: null, + hoveredValue: null, disabled: false, orientation: "vertical", ...ctx, @@ -89,13 +89,13 @@ export function machine(userContext: UserDefinedContext) { set.value(ctx, evt.value) }, setHovered(ctx, evt) { - ctx.hoveredId = evt.value + ctx.hoveredValue = evt.value }, setActive(ctx, evt) { - ctx.activeId = evt.value + ctx.activeValue = evt.value }, setFocused(ctx, evt) { - ctx.focusedId = evt.value + ctx.focusedValue = evt.value }, syncInputElements(ctx) { const inputs = dom.getInputEls(ctx) diff --git a/packages/machines/radio-group/src/radio-group.props.ts b/packages/machines/radio-group/src/radio-group.props.ts index bf88711baf..ee1fc1be26 100644 --- a/packages/machines/radio-group/src/radio-group.props.ts +++ b/packages/machines/radio-group/src/radio-group.props.ts @@ -12,6 +12,7 @@ export const props = createProps<UserDefinedContext>()([ "name", "onValueChange", "orientation", + "readOnly", "value", ]) export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props) diff --git a/packages/machines/radio-group/src/radio-group.types.ts b/packages/machines/radio-group/src/radio-group.types.ts index c65a117069..8390d0ba5c 100644 --- a/packages/machines/radio-group/src/radio-group.types.ts +++ b/packages/machines/radio-group/src/radio-group.types.ts @@ -28,7 +28,6 @@ interface PublicContext extends DirectionProperty, CommonProperties { * The value of the checked radio */ value: string | null - /** * The name of the input fields in the radio * (Useful for form submission). @@ -42,6 +41,10 @@ interface PublicContext extends DirectionProperty, CommonProperties { * If `true`, the radio group will be disabled */ disabled?: boolean + /** + * Whether the checkbox is read-only + */ + readOnly?: boolean /** * Function called once a radio is checked * @param value the value of the checked radio @@ -58,17 +61,17 @@ interface PrivateContext { * @internal * The id of the active radio */ - activeId: string | null + activeValue: string | null /** * @internal * The id of the focused radio */ - focusedId: string | null + focusedValue: string | null /** * @internal * The id of the hovered radio */ - hoveredId: string | null + hoveredValue: string | null /** * @internal * The active tab indicator's dom rect @@ -122,12 +125,30 @@ export interface ItemProps { } export interface ItemState { - isInvalid: boolean - isDisabled: boolean - isChecked: boolean - isFocused: boolean - isHovered: boolean - isActive: boolean + /** + * Whether the radio is invalid + */ + invalid: boolean + /** + * Whether the radio is disabled + */ + disabled: boolean + /** + * Whether the radio is checked + */ + checked: boolean + /** + * Whether the radio is focused + */ + focused: boolean + /** + * Whether the radio is hovered + */ + hovered: boolean + /** + * Whether the radio is active or pressed + */ + active: boolean } /* ----------------------------------------------------------------------------- @@ -150,11 +171,12 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Function to focus the radio group */ - focus: () => void + focus(): void /** * Returns the state details of a radio input */ getItemState(props: ItemProps): ItemState + rootProps: T["element"] labelProps: T["element"] getItemProps(props: ItemProps): T["label"] diff --git a/packages/machines/rating-group/src/rating-group.connect.ts b/packages/machines/rating-group/src/rating-group.connect.ts index 378020fd87..b1e37443bd 100644 --- a/packages/machines/rating-group/src/rating-group.connect.ts +++ b/packages/machines/rating-group/src/rating-group.connect.ts @@ -13,28 +13,27 @@ import { dom } from "./rating-group.dom" import type { ItemProps, ItemState, MachineApi, Send, State } from "./rating-group.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isInteractive = state.context.isInteractive - const isDisabled = state.context.isDisabled + const interactive = state.context.isInteractive + const disabled = state.context.isDisabled const value = state.context.value const hoveredValue = state.context.hoveredValue const translations = state.context.translations function getItemState(props: ItemProps): ItemState { const value = state.context.isHovering ? state.context.hoveredValue : state.context.value - const isEqual = Math.ceil(value) === props.index - const isHighlighted = props.index <= value || isEqual - const isHalf = isEqual && Math.abs(value - props.index) === 0.5 + const equal = Math.ceil(value) === props.index + const highlighted = props.index <= value || equal + const half = equal && Math.abs(value - props.index) === 0.5 + return { - isEqual, - isValueEmpty: state.context.value === -1, - isHighlighted, - isHalf, - isChecked: isEqual || (state.context.value === -1 && props.index === 1), + highlighted, + half, + checked: equal || (state.context.value === -1 && props.index === 1), } } return { - isHovering: state.context.isHovering, + hovering: state.context.isHovering, value, hoveredValue, count: state.context.count, @@ -66,7 +65,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.label.attrs, dir: state.context.dir, id: dom.getLabelId(state.context), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), }), controlProps: normalize.element({ @@ -79,13 +78,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "aria-readonly": ariaAttr(state.context.readOnly), "data-readonly": dataAttr(state.context.readOnly), tabIndex: state.context.readOnly ? 0 : -1, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), onPointerMove(event) { - if (!isInteractive || event.pointerType === "touch") return + if (!interactive || event.pointerType === "touch") return send("GROUP_POINTER_OVER") }, onPointerLeave(event) { - if (!isInteractive || event.pointerType === "touch") return + if (!interactive || event.pointerType === "touch") return send("GROUP_POINTER_LEAVE") }, }), @@ -100,27 +99,27 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getItemId(state.context, index.toString()), role: "radio", - tabIndex: isDisabled ? undefined : itemState.isChecked ? 0 : -1, + tabIndex: disabled ? undefined : itemState.checked ? 0 : -1, "aria-roledescription": "rating", "aria-label": valueText, - "aria-disabled": isDisabled, - "data-disabled": dataAttr(isDisabled), + "aria-disabled": disabled, + "data-disabled": dataAttr(disabled), "data-readonly": dataAttr(state.context.readOnly), "aria-setsize": state.context.count, - "aria-checked": itemState.isChecked, - "data-checked": dataAttr(itemState.isChecked), + "aria-checked": itemState.checked, + "data-checked": dataAttr(itemState.checked), "aria-posinset": index, - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-half": dataAttr(itemState.isHalf), + "data-highlighted": dataAttr(itemState.highlighted), + "data-half": dataAttr(itemState.half), onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (isLeftClick(evt)) { event.preventDefault() } }, onPointerMove(event) { - if (!isInteractive) return + if (!interactive) return const point = getEventPoint(getNativeEvent(event)) const relativePoint = getRelativePoint(point, event.currentTarget) const percentX = relativePoint.getPercentValue({ @@ -132,7 +131,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const keyMap: EventKeyMap = { ArrowLeft() { @@ -167,15 +166,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize } }, onClick() { - if (!isInteractive) return + if (!interactive) return send({ type: "CLICK", value: index }) }, onFocus() { - if (!isInteractive) return + if (!interactive) return send("FOCUS") }, onBlur() { - if (!isInteractive) return + if (!interactive) return send("BLUR") }, }) diff --git a/packages/machines/rating-group/src/rating-group.types.ts b/packages/machines/rating-group/src/rating-group.types.ts index 423d5ce829..e1544ebc71 100644 --- a/packages/machines/rating-group/src/rating-group.types.ts +++ b/packages/machines/rating-group/src/rating-group.types.ts @@ -130,11 +130,18 @@ export interface ItemProps { } export interface ItemState { - isEqual: boolean - isValueEmpty: boolean - isHighlighted: boolean - isHalf: boolean - isChecked: boolean + /** + * Whether the rating item is highlighted. + */ + highlighted: boolean + /** + * Whether the rating item is partially highlighted. + */ + half: boolean + /** + * Whether the rating item is checked. + */ + checked: boolean } export interface MachineApi<T extends PropTypes = PropTypes> { @@ -149,7 +156,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the rating group is being hovered */ - isHovering: boolean + hovering: boolean /** * The current value of the rating group */ diff --git a/packages/machines/select/package.json b/packages/machines/select/package.json index 8ba4850c94..bab3ec0606 100644 --- a/packages/machines/select/package.json +++ b/packages/machines/select/package.json @@ -40,7 +40,6 @@ "@zag-js/dom-query": "workspace:*", "@zag-js/dom-event": "workspace:*", "@zag-js/collection": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/form-utils": "workspace:*", "@zag-js/utils": "workspace:*", "@zag-js/dismissable": "workspace:*", diff --git a/packages/machines/select/src/select.connect.ts b/packages/machines/select/src/select.connect.ts index 180114aa73..6f664168a1 100644 --- a/packages/machines/select/src/select.connect.ts +++ b/packages/machines/select/src/select.connect.ts @@ -1,38 +1,43 @@ -import { getEventKey, getNativeEvent, type EventKeyMap } from "@zag-js/dom-event" -import { ariaAttr, dataAttr, getByTypeahead, isEditableElement, isSelfTarget } from "@zag-js/dom-query" +import { getEventKey, getNativeEvent, isLeftClick, type EventKeyMap } from "@zag-js/dom-event" +import { + ariaAttr, + dataAttr, + getByTypeahead, + isEditableElement, + isSelfTarget, + visuallyHiddenStyle, +} from "@zag-js/dom-query" import { getPlacementStyles } from "@zag-js/popper" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./select.anatomy" import { dom } from "./select.dom" -import type { CollectionItem, ItemProps, MachineApi, Send, State } from "./select.types" +import type { CollectionItem, ItemProps, ItemState, MachineApi, Send, State } from "./select.types" export function connect<T extends PropTypes, V extends CollectionItem = CollectionItem>( state: State, send: Send, normalize: NormalizeProps<T>, ): MachineApi<T, V> { - const isDisabled = state.context.isDisabled - const isInvalid = state.context.invalid - const isReadOnly = state.context.readOnly - const isInteractive = state.context.isInteractive + const disabled = state.context.isDisabled + const invalid = state.context.invalid + const readOnly = state.context.readOnly + const interactive = state.context.isInteractive - const isOpen = state.hasTag("open") - const isFocused = state.matches("focused") + const open = state.hasTag("open") + const focused = state.matches("focused") const highlightedItem = state.context.highlightedItem const selectedItems = state.context.selectedItems const isTypingAhead = state.context.isTypingAhead - function getItemState(props: ItemProps) { - const { item } = props - const disabled = state.context.collection.isItemDisabled(item) - const value = state.context.collection.itemToValue(item) + function getItemState(props: ItemProps): ItemState { + const _disabled = state.context.collection.isItemDisabled(props.item) + const value = state.context.collection.itemToValue(props.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), } } @@ -42,9 +47,9 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti }) return { - isOpen, - isFocused, - isValueEmpty: state.context.value.length === 0, + open: open, + focused: focused, + empty: state.context.value.length === 0, highlightedItem, highlightedValue: state.context.highlightedValue, selectedItems, @@ -61,11 +66,9 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti focus() { dom.getTriggerEl(state.context)?.focus({ preventScroll: true }) }, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, selectValue(value) { send({ type: "ITEM.SELECT", value }) @@ -90,20 +93,20 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti ...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({ dir: state.context.dir, id: dom.getLabelId(state.context), ...parts.label.attrs, - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), htmlFor: dom.getHiddenSelectId(state.context), onClick() { - if (isDisabled) return + if (disabled) return dom.getTriggerEl(state.context)?.focus({ preventScroll: true }) }, }), @@ -112,38 +115,39 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti ...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), }), triggerProps: normalize.button({ id: dom.getTriggerId(state.context), - disabled: isDisabled, + disabled: disabled, dir: state.context.dir, type: "button", role: "combobox", "aria-controls": dom.getContentId(state.context), - "aria-expanded": isOpen, + "aria-expanded": open, "aria-haspopup": "listbox", - "data-state": isOpen ? "open" : "closed", - "aria-invalid": isInvalid, + "data-state": open ? "open" : "closed", + "aria-invalid": invalid, "aria-labelledby": dom.getLabelId(state.context), ...parts.trigger.attrs, - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), "data-placement": state.context.currentPlacement, "data-placeholder-shown": dataAttr(!state.context.hasSelectedItems), onPointerDown(event) { - if (event.button || event.ctrlKey || !isInteractive) return + if (!isLeftClick(event)) return + if (!interactive) return event.currentTarget.dataset.pointerType = event.pointerType - if (isDisabled || event.pointerType === "touch") return + if (disabled || event.pointerType === "touch") return send({ type: "TRIGGER.CLICK" }) }, onClick(event) { - if (!isInteractive || event.button) return + if (!interactive || event.button) return if (event.currentTarget.dataset.pointerType === "touch") { send({ type: "TRIGGER.CLICK" }) } @@ -156,7 +160,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const keyMap: EventKeyMap = { ArrowUp() { @@ -208,10 +212,10 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti ...parts.indicator.attrs, dir: state.context.dir, "aria-hidden": true, - "data-state": isOpen ? "open" : "closed", - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-state": open ? "open" : "closed", + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), }), getItemProps(props) { @@ -223,23 +227,23 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti ...parts.item.attrs, dir: state.context.dir, "data-value": itemState.value, - "aria-selected": itemState.isSelected, - "data-state": itemState.isSelected ? "checked" : "unchecked", - "data-highlighted": dataAttr(itemState.isHighlighted), - "data-disabled": dataAttr(itemState.isDisabled), - "aria-disabled": ariaAttr(itemState.isDisabled), + "aria-selected": itemState.selected, + "data-state": itemState.selected ? "checked" : "unchecked", + "data-highlighted": dataAttr(itemState.highlighted), + "data-disabled": dataAttr(itemState.disabled), + "aria-disabled": ariaAttr(itemState.disabled), onPointerMove(event) { - if (itemState.isDisabled || event.pointerType !== "mouse") return + if (itemState.disabled || event.pointerType !== "mouse") return if (itemState.value === state.context.highlightedValue) return send({ type: "ITEM.POINTER_MOVE", value: itemState.value }) }, onPointerUp() { - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "ITEM.CLICK", src: "pointerup", value: itemState.value }) }, onPointerLeave(event) { const isKeyboardNavigationEvent = ["CONTENT.ARROW_UP", "CONTENT.ARROW_DOWN"].includes(state.event.type) - if (itemState.isDisabled || event.pointerType !== "mouse" || isKeyboardNavigationEvent) return + if (itemState.disabled || event.pointerType !== "mouse" || isKeyboardNavigationEvent) return send({ type: "ITEM.POINTER_LEAVE" }) }, onTouchEnd(event) { @@ -254,8 +258,8 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti const itemState = getItemState(props) return normalize.element({ ...parts.itemText.attrs, - "data-disabled": dataAttr(itemState.isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-disabled": dataAttr(itemState.disabled), + "data-highlighted": dataAttr(itemState.highlighted), }) }, @@ -264,8 +268,8 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti return normalize.element({ "aria-hidden": true, ...parts.itemIndicator.attrs, - "data-state": itemState.isSelected ? "checked" : "unchecked", - hidden: !itemState.isSelected, + "data-state": itemState.selected ? "checked" : "unchecked", + hidden: !itemState.selected, }) }, @@ -283,7 +287,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti const { id } = props return normalize.element({ ...parts.itemGroup.attrs, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), id: dom.getItemGroupId(state.context, id), "aria-labelledby": dom.getItemGroupLabelId(state.context, id), dir: state.context.dir, @@ -295,7 +299,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti id: dom.getClearTriggerId(state.context), type: "button", "aria-label": "Clear value", - disabled: isDisabled, + disabled: disabled, hidden: !state.context.hasSelectedItems, dir: state.context.dir, onClick() { @@ -306,7 +310,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti hiddenSelectProps: normalize.select({ name: state.context.name, form: state.context.form, - disabled: isDisabled, + disabled: disabled, multiple: state.context.multiple, "aria-hidden": true, id: dom.getHiddenSelectId(state.context), @@ -329,12 +333,12 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti }), contentProps: normalize.element({ - hidden: !isOpen, + hidden: !open, dir: state.context.dir, id: dom.getContentId(state.context), role: "listbox", ...parts.content.attrs, - "data-state": isOpen ? "open" : "closed", + "data-state": open ? "open" : "closed", "data-placement": state.context.currentPlacement, "aria-activedescendant": state.context.highlightedValue ? dom.getItemId(state.context, state.context.highlightedValue) @@ -345,7 +349,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti onKeyDown(event) { if (event.defaultPrevented) return const evt = getNativeEvent(event) - if (!isInteractive) return + if (!interactive) return if (!isSelfTarget(evt)) return // select should not be navigated using tab key so we prevent it diff --git a/packages/machines/select/src/select.types.ts b/packages/machines/select/src/select.types.ts index 543f6396b0..dfa2342074 100644 --- a/packages/machines/select/src/select.types.ts +++ b/packages/machines/select/src/select.types.ts @@ -213,10 +213,22 @@ export interface ItemProps<T extends CollectionItem = CollectionItem> { } export interface ItemState { + /** + * The underlying value of the item + */ value: string - isDisabled: boolean - isSelected: boolean - isHighlighted: boolean + /** + * Whether the item is disabled + */ + disabled: boolean + /** + * Whether the item is selected + */ + selected: boolean + /** + * Whether the item is highlighted + */ + highlighted: boolean } export interface ItemGroupProps { @@ -231,15 +243,15 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio /** * Whether the select is focused */ - isFocused: boolean + focused: boolean /** * Whether the select is open */ - isOpen: boolean + open: boolean /** * Whether the select value is empty */ - isValueEmpty: boolean + empty: boolean /** * The value of the highlighted item */ @@ -289,13 +301,9 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio */ getItemState(props: ItemProps): ItemState /** - * Function to open the select - */ - open(): void - /** - * Function to close the select + * Function to open or close the select */ - close(): void + setOpen(open: boolean): void /** * Function to toggle the select */ 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - 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<T extends PropTypes>(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<HTMLElement>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { /** * 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. */ diff --git a/packages/machines/slider/src/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts index 621829dcd4..824621093b 100644 --- a/packages/machines/slider/src/slider.connect.ts +++ b/packages/machines/slider/src/slider.connect.ts @@ -20,12 +20,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const ariaLabelledBy = state.context["aria-labelledby"] const sliderValue = state.context.value - const isFocused = state.matches("focus") - const isDragging = state.matches("dragging") + const focused = state.matches("focus") + const dragging = state.matches("dragging") - const isDisabled = state.context.isDisabled - const isInvalid = state.context.invalid - const isInteractive = state.context.isInteractive + const disabled = state.context.isDisabled + const invalid = state.context.invalid + const interactive = state.context.isInteractive function getValuePercentFn(value: number) { return getValuePercent(value, state.context.min, state.context.max) @@ -37,8 +37,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return { value: state.context.value, - isDragging, - isFocused, + dragging, + focused, setValue(value) { send({ type: "SET_VALUE", value: value }) }, @@ -70,21 +70,21 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize send({ type: "DECREMENT", index }) }, focus() { - if (!isInteractive) return + if (!interactive) return send({ type: "FOCUS", index: 0 }) }, labelProps: normalize.label({ ...parts.label.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), id: dom.getLabelId(state.context), htmlFor: dom.getHiddenInputId(state.context, 0), onClick(event) { - if (!isInteractive) return + if (!interactive) return event.preventDefault() dom.getFirstEl(state.context)?.focus() }, @@ -95,10 +95,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize rootProps: normalize.element({ ...parts.root.attrs, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), id: dom.getRootId(state.context), dir: state.context.dir, style: dom.getRootStyle(state.context), @@ -107,10 +107,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize valueTextProps: normalize.element({ ...parts.valueText.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), id: dom.getValueTextId(state.context), }), @@ -118,10 +118,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.track.attrs, dir: state.context.dir, id: dom.getTrackId(state.context), - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), "data-orientation": state.context.orientation, - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), style: { position: "relative" }, }), @@ -130,7 +130,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const value = sliderValue[index] const range = getRangeAtIndex(state.context, index) - const ariaValueText = state.context.getAriaValueText?.(value, index) + const valueText = state.context.getAriaValueText?.({ value, index }) const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy @@ -140,37 +140,37 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "data-index": index, "data-name": name, id: dom.getThumbId(state.context, index), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-focus": dataAttr(isFocused && state.context.focusedIndex === index), + "data-focus": dataAttr(focused && state.context.focusedIndex === index), draggable: false, - "aria-disabled": ariaAttr(isDisabled), + "aria-disabled": ariaAttr(disabled), "aria-label": _ariaLabel, "aria-labelledby": _ariaLabelledBy ?? dom.getLabelId(state.context), "aria-orientation": state.context.orientation, "aria-valuemax": range.max, "aria-valuemin": range.min, "aria-valuenow": sliderValue[index], - "aria-valuetext": ariaValueText, + "aria-valuetext": valueText, role: "slider", - tabIndex: isDisabled ? undefined : 0, + tabIndex: disabled ? undefined : 0, style: dom.getThumbStyle(state.context, index), onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return send({ type: "THUMB_POINTER_DOWN", index }) event.stopPropagation() }, onBlur() { - if (!isInteractive) return + if (!interactive) return send("BLUR") }, onFocus() { - if (!isInteractive) return + if (!interactive) return send({ type: "FOCUS", index }) }, onKeyDown(event) { if (event.defaultPrevented) return - if (!isInteractive) return + if (!interactive) return const step = getEventStep(event) * state.context.step let prevent = true @@ -237,9 +237,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getRangeId(state.context), ...parts.range.attrs, dir: state.context.dir, - "data-focus": dataAttr(isFocused), - "data-invalid": dataAttr(isInvalid), - "data-disabled": dataAttr(isDisabled), + "data-focus": dataAttr(focused), + "data-invalid": dataAttr(invalid), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, style: dom.getRangeStyle(state.context), }), @@ -248,13 +248,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.control.attrs, dir: state.context.dir, id: dom.getControlId(state.context), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-orientation": state.context.orientation, - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isFocused), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), style: dom.getControlStyle(), onPointerDown(event) { - if (!isInteractive) return + if (!interactive) return const evt = getNativeEvent(event) if (!isLeftClick(evt) || isModifierKey(evt)) return @@ -298,7 +298,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, "data-orientation": state.context.orientation, "data-value": props.value, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-state": markerState, style, }) diff --git a/packages/machines/slider/src/slider.types.ts b/packages/machines/slider/src/slider.types.ts index 86e4ca92e5..bbe2591bc2 100644 --- a/packages/machines/slider/src/slider.types.ts +++ b/packages/machines/slider/src/slider.types.ts @@ -14,6 +14,11 @@ export interface FocusChangeDetails { value: number[] } +export interface ValueTextDetails { + value: number + index: number +} + /* ----------------------------------------------------------------------------- * Machine context * -----------------------------------------------------------------------------*/ @@ -81,7 +86,7 @@ interface PublicContext extends DirectionProperty, CommonProperties { /** * Function that returns a human readable value for the slider thumb */ - getAriaValueText?(value: number, index: number): string + getAriaValueText?(details: ValueTextDetails): string /** * The minimum value of the slider */ @@ -214,11 +219,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the slider is being dragged. */ - isDragging: boolean + dragging: boolean /** * Whether the slider is focused. */ - isFocused: boolean + focused: boolean /** * Function to set the value of the slider. */ diff --git a/packages/machines/splitter/src/splitter.connect.ts b/packages/machines/splitter/src/splitter.connect.ts index a9252cb8fc..757b46331b 100644 --- a/packages/machines/splitter/src/splitter.connect.ts +++ b/packages/machines/splitter/src/splitter.connect.ts @@ -3,24 +3,24 @@ import { dataAttr } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { parts } from "./splitter.anatomy" import { dom } from "./splitter.dom" -import type { MachineApi, ResizeTriggerProps, Send, State } from "./splitter.types" +import type { MachineApi, ResizeTriggerProps, ResizeTriggerState, Send, State } from "./splitter.types" import { getHandleBounds } from "./splitter.utils" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isHorizontal = state.context.isHorizontal - const isFocused = state.hasTag("focus") - const isDragging = state.matches("dragging") + const horizontal = state.context.isHorizontal + const focused = state.hasTag("focus") + const dragging = state.matches("dragging") const panels = state.context.panels - function getResizeTriggerState(props: ResizeTriggerProps) { + function getResizeTriggerState(props: ResizeTriggerProps): ResizeTriggerState { const { id, disabled } = props const ids = id.split(":") const panelIds = ids.map((id) => dom.getPanelId(state.context, id)) const panels = getHandleBounds(state.context, id) return { - isDisabled: !!disabled, - isFocused: state.context.activeResizeId === id && isFocused, + disabled: !!disabled, + focused: state.context.activeResizeId === id && focused, panelIds, min: panels?.min, max: panels?.max, @@ -29,8 +29,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize } return { - isFocused, - isDragging, + focused: focused, + dragging: dragging, getResizeTriggerState, bounds: getHandleBounds(state.context), setToMinSize(id) { @@ -52,7 +52,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, style: { display: "flex", - flexDirection: isHorizontal ? "row" : "column", + flexDirection: horizontal ? "row" : "column", height: "100%", width: "100%", overflow: "hidden", @@ -88,15 +88,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize "data-orientation": state.context.orientation, "aria-orientation": state.context.orientation, "aria-controls": triggerState.panelIds.join(" "), - "data-focus": dataAttr(triggerState.isFocused), + "data-focus": dataAttr(triggerState.focused), "data-disabled": dataAttr(disabled), style: { touchAction: "none", userSelect: "none", flex: "0 0 auto", - pointerEvents: isDragging && !triggerState.isFocused ? "none" : undefined, - cursor: isHorizontal ? "col-resize" : "row-resize", - [isHorizontal ? "minHeight" : "minWidth"]: "0", + pointerEvents: dragging && !triggerState.focused ? "none" : undefined, + cursor: horizontal ? "col-resize" : "row-resize", + [horizontal ? "minHeight" : "minWidth"]: "0", }, onPointerDown(event) { if (disabled) { @@ -104,9 +104,16 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return } send({ type: "POINTER_DOWN", id }) + event.currentTarget.setPointerCapture(event.pointerId) event.preventDefault() event.stopPropagation() }, + onPointerUp(event) { + if (disabled) return + if (event.currentTarget.hasPointerCapture(event.pointerId)) { + event.currentTarget.releasePointerCapture(event.pointerId) + } + }, onPointerOver() { if (disabled) return send({ type: "POINTER_OVER", id }) diff --git a/packages/machines/splitter/src/splitter.types.ts b/packages/machines/splitter/src/splitter.types.ts index 70dbf0455e..ce1c78cbb7 100644 --- a/packages/machines/splitter/src/splitter.types.ts +++ b/packages/machines/splitter/src/splitter.types.ts @@ -106,8 +106,8 @@ export interface ResizeTriggerProps { } export interface ResizeTriggerState { - isDisabled: boolean - isFocused: boolean + disabled: boolean + focused: boolean panelIds: string[] min: number | undefined max: number | undefined @@ -123,11 +123,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the splitter is focused. */ - isFocused: boolean + focused: boolean /** * Whether the splitter is being dragged. */ - isDragging: boolean + dragging: boolean /** * The bounds of the currently dragged splitter handle. */ diff --git a/packages/machines/switch/package.json b/packages/machines/switch/package.json index 864f33b816..434b2df928 100644 --- a/packages/machines/switch/package.json +++ b/packages/machines/switch/package.json @@ -41,8 +41,7 @@ "@zag-js/dom-event": "workspace:*", "@zag-js/form-utils": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/types": "workspace:*", - "@zag-js/visually-hidden": "workspace:*" + "@zag-js/types": "workspace:*" }, "devDependencies": { "clean-package": "2.2.0" diff --git a/packages/machines/switch/src/switch.connect.ts b/packages/machines/switch/src/switch.connect.ts index 7aa3c9394b..9497759aae 100644 --- a/packages/machines/switch/src/switch.connect.ts +++ b/packages/machines/switch/src/switch.connect.ts @@ -1,33 +1,34 @@ -import { dataAttr } from "@zag-js/dom-query" +import { dataAttr, visuallyHiddenStyle } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" -import { visuallyHiddenStyle } from "@zag-js/visually-hidden" import { parts } from "./switch.anatomy" import { dom } from "./switch.dom" import type { MachineApi, Send, State } from "./switch.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isDisabled = state.context.isDisabled - const isFocused = !isDisabled && state.context.focused - const isChecked = state.context.checked + const disabled = state.context.isDisabled + const focused = !disabled && state.context.focused + const checked = state.context.checked + const readOnly = state.context.readOnly const dataAttrs = { "data-active": dataAttr(state.context.active), - "data-focus": dataAttr(isFocused), + "data-focus": dataAttr(focused), + "data-readonly": dataAttr(readOnly), "data-hover": dataAttr(state.context.hovered), - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), "data-state": state.context.checked ? "checked" : "unchecked", "data-invalid": dataAttr(state.context.invalid), } return { - isChecked, - isDisabled, - isFocused, + checked: checked, + disabled: disabled, + focused: focused, setChecked(checked) { send({ type: "CHECKED.SET", checked, isTrusted: false }) }, toggleChecked() { - send({ type: "CHECKED.TOGGLE", checked: isChecked, isTrusted: false }) + send({ type: "CHECKED.TOGGLE", checked: checked, isTrusted: false }) }, rootProps: normalize.label({ @@ -37,11 +38,11 @@ export function connect<T extends PropTypes>(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) { @@ -78,8 +79,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getHiddenInputId(state.context), type: "checkbox", required: state.context.required, - defaultChecked: isChecked, - disabled: isDisabled, + defaultChecked: checked, + disabled: disabled, "aria-labelledby": dom.getLabelId(state.context), "aria-invalid": state.context.invalid, name: state.context.name, @@ -87,6 +88,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize value: state.context.value, style: visuallyHiddenStyle, onChange(event) { + if (readOnly) { + event.preventDefault() + return + } + const checked = event.currentTarget.checked send({ type: "CHECKED.SET", checked, isTrusted: true }) }, diff --git a/packages/machines/switch/src/switch.props.ts b/packages/machines/switch/src/switch.props.ts index e617c7487c..bc76b29c0e 100644 --- a/packages/machines/switch/src/switch.props.ts +++ b/packages/machines/switch/src/switch.props.ts @@ -14,6 +14,7 @@ export const props = createProps<UserDefinedContext>()([ "label", "name", "onCheckedChange", + "readOnly", "required", "value", ]) diff --git a/packages/machines/switch/src/switch.types.ts b/packages/machines/switch/src/switch.types.ts index 624f7d5206..f75ef8fe88 100644 --- a/packages/machines/switch/src/switch.types.ts +++ b/packages/machines/switch/src/switch.types.ts @@ -42,6 +42,10 @@ interface PublicContext extends DirectionProperty, CommonProperties { * If `true`, the switch input is marked as required, */ required?: boolean + /** + * Whether the switch is read-only + */ + readOnly?: boolean /** * Function to call when the switch is clicked. */ @@ -116,15 +120,15 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the checkbox is checked */ - isChecked: boolean + checked: boolean /** * Whether the checkbox is disabled */ - isDisabled: boolean | undefined + disabled: boolean | undefined /** * Whether the checkbox is focused */ - isFocused: boolean | undefined + focused: boolean | undefined /** * Function to set the checked state of the switch. */ @@ -133,6 +137,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { * Function to toggle the checked state of the checkbox */ toggleChecked(): void + rootProps: T["label"] labelProps: T["element"] thumbProps: T["element"] 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<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<S.AnyEventObject> * -----------------------------------------------------------------------------*/ 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/machines/tags-input/src/tags-input.connect.ts b/packages/machines/tags-input/src/tags-input.connect.ts index 24c39470f7..508f6f4dfb 100644 --- a/packages/machines/tags-input/src/tags-input.connect.ts +++ b/packages/machines/tags-input/src/tags-input.connect.ts @@ -3,37 +3,37 @@ import { ariaAttr, dataAttr } from "@zag-js/dom-query" import type { NormalizeProps, PropTypes } from "@zag-js/types" import { parts } from "./tags-input.anatomy" import { dom } from "./tags-input.dom" -import type { ItemProps, MachineApi, Send, State } from "./tags-input.types" +import type { ItemProps, ItemState, MachineApi, Send, State } from "./tags-input.types" export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { - const isInteractive = state.context.isInteractive - const isDisabled = state.context.isDisabled - const isReadOnly = state.context.readOnly - const isInvalid = state.context.invalid || state.context.isOverflowing + const interactive = state.context.isInteractive + const disabled = state.context.disabled + const readOnly = state.context.readOnly + const invalid = state.context.invalid || state.context.isOverflowing const translations = state.context.translations - const isInputFocused = state.hasTag("focused") - const isEditingTag = state.matches("editing:tag") - const isEmpty = state.context.count === 0 + const focused = state.hasTag("focused") + const editingTag = state.matches("editing:tag") + const empty = state.context.count === 0 - function getItemState(options: ItemProps) { + function getItemState(options: ItemProps): ItemState { const id = dom.getItemId(state.context, options) return { id, - isEditing: isEditingTag && state.context.editedTagId === id, - isHighlighted: id === state.context.highlightedTagId, - isDisabled: options.disabled || isDisabled, + editing: editingTag && state.context.editedTagId === id, + highlighted: id === state.context.highlightedTagId, + disabled: Boolean(options.disabled || disabled), } } return { - isEmpty, + empty: empty, inputValue: state.context.trimmedInputValue, value: state.context.value, valueAsString: state.context.valueAsString, count: state.context.count, - isAtMax: state.context.isAtMax, + atMax: state.context.isAtMax, setValue(value) { send({ type: "SET_VALUE", value }) }, @@ -64,23 +64,23 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize rootProps: normalize.element({ dir: state.context.dir, ...parts.root.attrs, - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), - "data-disabled": dataAttr(isDisabled), - "data-focus": dataAttr(isInputFocused), - "data-empty": dataAttr(isEmpty), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), + "data-disabled": dataAttr(disabled), + "data-focus": dataAttr(focused), + "data-empty": dataAttr(empty), id: dom.getRootId(state.context), onPointerDown() { - if (!isInteractive) return + if (!interactive) return send("POINTER_DOWN") }, }), labelProps: normalize.label({ ...parts.label.attrs, - "data-disabled": dataAttr(isDisabled), - "data-invalid": dataAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-disabled": dataAttr(disabled), + "data-invalid": dataAttr(invalid), + "data-readonly": dataAttr(readOnly), id: dom.getLabelId(state.context), dir: state.context.dir, htmlFor: dom.getInputId(state.context), @@ -90,26 +90,26 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize id: dom.getControlId(state.context), ...parts.control.attrs, dir: state.context.dir, - tabIndex: isReadOnly ? 0 : undefined, - "data-disabled": dataAttr(isDisabled), - "data-readonly": dataAttr(isReadOnly), - "data-invalid": dataAttr(isInvalid), - "data-focus": dataAttr(isInputFocused), + tabIndex: readOnly ? 0 : undefined, + "data-disabled": dataAttr(disabled), + "data-readonly": dataAttr(readOnly), + "data-invalid": dataAttr(invalid), + "data-focus": dataAttr(focused), }), inputProps: normalize.input({ ...parts.input.attrs, dir: state.context.dir, - "data-invalid": dataAttr(isInvalid), - "aria-invalid": ariaAttr(isInvalid), - "data-readonly": dataAttr(isReadOnly), + "data-invalid": dataAttr(invalid), + "aria-invalid": ariaAttr(invalid), + "data-readonly": dataAttr(readOnly), maxLength: state.context.maxLength, id: dom.getInputId(state.context), defaultValue: state.context.inputValue, autoComplete: "off", autoCorrect: "off", autoCapitalize: "none", - disabled: isDisabled || isReadOnly, + disabled: disabled || readOnly, onChange(event) { const evt = getNativeEvent(event) @@ -197,7 +197,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.item.attrs, dir: state.context.dir, "data-value": props.value, - "data-disabled": dataAttr(isDisabled), + "data-disabled": dataAttr(disabled), }) }, @@ -207,17 +207,17 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.itemPreview.attrs, id: itemState.id, dir: state.context.dir, - hidden: itemState.isEditing, + hidden: itemState.editing, "data-value": props.value, - "data-disabled": dataAttr(isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-disabled": dataAttr(disabled), + "data-highlighted": dataAttr(itemState.highlighted), onPointerDown(event) { - if (!isInteractive || itemState.isDisabled) return + if (!interactive || itemState.disabled) return event.preventDefault() send({ type: "POINTER_DOWN_TAG", id: itemState.id }) }, onDoubleClick() { - if (!isInteractive || itemState.isDisabled) return + if (!interactive || itemState.disabled) return send({ type: "DOUBLE_CLICK_TAG", id: itemState.id }) }, }) @@ -228,8 +228,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize return normalize.element({ ...parts.itemText.attrs, dir: state.context.dir, - "data-disabled": dataAttr(isDisabled), - "data-highlighted": dataAttr(itemState.isHighlighted), + "data-disabled": dataAttr(disabled), + "data-highlighted": dataAttr(itemState.highlighted), }) }, @@ -240,11 +240,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, "aria-label": translations.tagEdited(props.value), "aria-hidden": true, - disabled: isDisabled, + disabled: disabled, id: dom.getItemInputId(state.context, props), tabIndex: -1, - hidden: !itemState.isEditing, - defaultValue: itemState.isEditing ? state.context.editedTagValue : "", + hidden: !itemState.editing, + defaultValue: itemState.editing ? state.context.editedTagValue : "", onChange(event) { send({ type: "TAG_INPUT_TYPE", value: event.target.value }) }, @@ -282,24 +282,24 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getItemDeleteTriggerId(state.context, props), type: "button", - disabled: isDisabled, + disabled: disabled, "aria-label": translations.deleteTagTriggerLabel(props.value), tabIndex: -1, onPointerDown(event) { - if (!isInteractive) { + if (!interactive) { event.preventDefault() } }, onPointerMove(event) { - if (!isInteractive) return + if (!interactive) return dom.setHoverIntent(event.currentTarget) }, onPointerLeave(event) { - if (!isInteractive) return + if (!interactive) return dom.clearHoverIntent(event.currentTarget) }, onClick() { - if (!isInteractive) return + if (!interactive) return send({ type: "CLEAR_TAG", id }) }, }) @@ -310,12 +310,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize dir: state.context.dir, id: dom.getClearTriggerId(state.context), type: "button", - "data-readonly": dataAttr(isReadOnly), - disabled: isDisabled, + "data-readonly": dataAttr(readOnly), + disabled: disabled, "aria-label": translations.clearTriggerLabel, - hidden: isEmpty, + hidden: empty, onClick() { - if (!isInteractive) return + if (!interactive) return send("CLEAR_VALUE") }, }), diff --git a/packages/machines/tags-input/src/tags-input.types.ts b/packages/machines/tags-input/src/tags-input.types.ts index b5abed2e64..2efc2567d9 100644 --- a/packages/machines/tags-input/src/tags-input.types.ts +++ b/packages/machines/tags-input/src/tags-input.types.ts @@ -267,17 +267,29 @@ export interface ItemProps { } export interface ItemState { + /** + * The underlying id of the item + */ id: string - isEditing: boolean - isHighlighted: boolean - isDisabled: boolean + /** + * Whether the item is being edited + */ + editing: boolean + /** + * Whether the item is highlighted + */ + highlighted: boolean + /** + * Whether the item is disabled + */ + disabled: boolean } export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the tags are empty */ - isEmpty: boolean + empty: boolean /** * The value of the tags entry input. */ @@ -297,7 +309,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the tags have reached the max limit. */ - isAtMax: boolean + atMax: boolean /** * Function to set the value of the tags. */ diff --git a/packages/machines/toast/src/toast.connect.ts b/packages/machines/toast/src/toast.connect.ts index 2aef906a01..1a500c357b 100644 --- a/packages/machines/toast/src/toast.connect.ts +++ b/packages/machines/toast/src/toast.connect.ts @@ -10,8 +10,8 @@ export function connect<T extends PropTypes, O>( send: Send, normalize: NormalizeProps<T>, ): MachineApi<T, O> { - const isVisible = state.hasTag("visible") - const isPaused = state.hasTag("paused") + const visible = state.hasTag("visible") + const paused = state.hasTag("paused") const placement = state.context.placement! const type = state.context.type! @@ -23,9 +23,8 @@ export function connect<T extends PropTypes, O>( title: state.context.title, description: state.context.description, placement, - isVisible, - isPaused, - isRtl: state.context.dir === "rtl", + visible: visible, + paused: paused, pause() { send("PAUSE") @@ -43,13 +42,13 @@ export function connect<T extends PropTypes, O>( ...parts.root.attrs, dir: state.context.dir, id: dom.getRootId(state.context), - "data-state": isVisible ? "open" : "closed", + "data-state": visible ? "open" : "closed", "data-type": type, "data-placement": placement, "data-align": align, "data-side": side, "data-mounted": dataAttr(state.context.mounted), - "data-paused": dataAttr(isPaused), + "data-paused": dataAttr(paused), "data-first": dataAttr(state.context.frontmost), "data-sibling": dataAttr(!state.context.frontmost), @@ -59,7 +58,7 @@ export function connect<T extends PropTypes, O>( role: "status", "aria-atomic": "true", tabIndex: 0, - style: getPlacementStyle(state.context, isVisible), + style: getPlacementStyle(state.context, visible), onKeyDown(event) { if (event.defaultPrevented) return if (event.key == "Escape") { @@ -72,13 +71,13 @@ export function connect<T extends PropTypes, O>( /* Leave a ghost div to avoid setting hover to false when transitioning out */ ghostBeforeProps: normalize.element({ "data-ghost": "before", - style: getGhostBeforeStyle(state.context, isVisible), + style: getGhostBeforeStyle(state.context, visible), }), /* Needed to avoid setting hover to false when in between toasts */ ghostAfterProps: normalize.element({ "data-ghost": "after", - style: getGhostAfterStyle(state.context, isVisible), + style: getGhostAfterStyle(state.context, visible), }), titleProps: normalize.element({ @@ -94,7 +93,8 @@ export function connect<T extends PropTypes, O>( actionTriggerProps: normalize.button({ ...parts.actionTrigger.attrs, type: "button", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("DISMISS") }, }), @@ -104,7 +104,8 @@ export function connect<T extends PropTypes, O>( ...parts.closeTrigger.attrs, type: "button", "aria-label": "Dismiss notification", - onClick() { + onClick(event) { + if (event.defaultPrevented) return send("DISMISS") }, }), diff --git a/packages/machines/toast/src/toast.types.ts b/packages/machines/toast/src/toast.types.ts index f18ca5af08..08d3df4525 100644 --- a/packages/machines/toast/src/toast.types.ts +++ b/packages/machines/toast/src/toast.types.ts @@ -353,15 +353,11 @@ export interface MachineApi<T extends PropTypes = PropTypes, O = any> extends Ge /** * Whether the toast is visible. */ - isVisible: boolean + visible: boolean /** * Whether the toast is paused. */ - isPaused: boolean - /** - * Whether the toast is in RTL mode. - */ - isRtl: boolean + paused: boolean /** * Function to pause the toast (keeping it visible). */ diff --git a/packages/machines/toggle-group/src/toggle-group.connect.ts b/packages/machines/toggle-group/src/toggle-group.connect.ts index 8bb5db4024..68be22b42c 100644 --- a/packages/machines/toggle-group/src/toggle-group.connect.ts +++ b/packages/machines/toggle-group/src/toggle-group.connect.ts @@ -13,16 +13,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const isHorizontal = state.context.orientation === "horizontal" function getItemState(props: ItemProps): ItemState { - const isDisabled = !!props.disabled || !!disabled - const isPressed = value?.includes(props.value) const id = dom.getItemId(state.context, props.value) - const isFocused = state.context.focusedId === id - return { id, - isDisabled, - isPressed, - isFocused, + disabled: Boolean(props.disabled || disabled), + pressed: !!value.includes(props.value), + focused: state.context.focusedId === id, } } @@ -61,31 +57,31 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize getItemProps(props) { const itemState = getItemState(props) - const rovingTabIndex = itemState.isFocused ? 0 : -1 + const rovingTabIndex = itemState.focused ? 0 : -1 return normalize.button({ ...parts.item.attrs, id: itemState.id, type: "button", "data-ownedby": dom.getRootId(state.context), - "data-focus": dataAttr(itemState.isFocused), - disabled: itemState.isDisabled, + "data-focus": dataAttr(itemState.focused), + disabled: itemState.disabled, tabIndex: rovingFocus ? rovingTabIndex : undefined, // radio role: isSingle ? "radio" : undefined, - "aria-checked": isSingle ? itemState.isPressed : undefined, - "aria-pressed": isSingle ? undefined : itemState.isPressed, + "aria-checked": isSingle ? itemState.pressed : undefined, + "aria-pressed": isSingle ? undefined : itemState.pressed, // - "data-disabled": dataAttr(itemState.isDisabled), + "data-disabled": dataAttr(itemState.disabled), "data-orientation": state.context.orientation, dir: state.context.dir, - "data-state": itemState.isPressed ? "on" : "off", + "data-state": itemState.pressed ? "on" : "off", onFocus() { - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "TOGGLE.FOCUS", id: itemState.id }) }, onClick(event) { - if (itemState.isDisabled) return + if (itemState.disabled) return send({ type: "TOGGLE.CLICK", id: itemState.id, value: props.value }) if (isSafari()) { event.currentTarget.focus({ preventScroll: true }) @@ -95,7 +91,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize if (event.defaultPrevented) return const evt = getNativeEvent(event) if (!isSelfTarget(evt)) return - if (itemState.isDisabled) return + if (itemState.disabled) return const keyMap: EventKeyMap = { Tab(event) { diff --git a/packages/machines/toggle-group/src/toggle-group.machine.ts b/packages/machines/toggle-group/src/toggle-group.machine.ts index 0bc87511da..96adb92158 100644 --- a/packages/machines/toggle-group/src/toggle-group.machine.ts +++ b/packages/machines/toggle-group/src/toggle-group.machine.ts @@ -22,7 +22,6 @@ export function machine(userContext: UserDefinedContext) { ...ctx, focusedId: null, isTabbingBackward: false, - hasFocusableToggle: false, isClickFocus: false, isWithinToolbar: false, }, @@ -31,7 +30,7 @@ export function machine(userContext: UserDefinedContext) { currentLoopFocus: (ctx) => ctx.loopFocus && !ctx.isWithinToolbar, }, - entry: ["checkFocusableToggles", "checkIfWithinToolbar"], + entry: ["checkIfWithinToolbar"], on: { "VALUE.SET": { @@ -107,9 +106,6 @@ export function machine(userContext: UserDefinedContext) { clearClickFocus(ctx) { ctx.isClickFocus = false }, - checkFocusableToggles(ctx) { - ctx.hasFocusableToggle = ctx.value.length > 0 - }, checkIfWithinToolbar(ctx) { const closestToolbar = dom.getRootEl(ctx)?.closest("[role=toolbar]") ctx.isWithinToolbar = !!closestToolbar diff --git a/packages/machines/toggle-group/src/toggle-group.types.ts b/packages/machines/toggle-group/src/toggle-group.types.ts index 63e7d572da..6c822c59b5 100644 --- a/packages/machines/toggle-group/src/toggle-group.types.ts +++ b/packages/machines/toggle-group/src/toggle-group.types.ts @@ -65,11 +65,6 @@ interface PrivateContext { * Whether the user is tabbing backward. */ isTabbingBackward: boolean - /** - * @internal - * Whether the toggle group has focusable toggles. - */ - hasFocusableToggle: boolean /** * @internal * Whether the toggle was focused by a click. @@ -108,10 +103,22 @@ export interface ItemProps { } export interface ItemState { + /** + * The underlying id of the item. + */ id: string - isDisabled: boolean - isPressed: boolean - isFocused: boolean + /** + * Whether the toggle item is disabled. + */ + disabled: boolean + /** + * Whether the toggle item is pressed. + */ + pressed: boolean + /** + * Whether the toggle item is focused. + */ + focused: boolean } export interface MachineApi<T extends PropTypes = PropTypes> { diff --git a/packages/machines/tooltip/src/tooltip.connect.ts b/packages/machines/tooltip/src/tooltip.connect.ts index 341803bee6..bd2f12b9cd 100644 --- a/packages/machines/tooltip/src/tooltip.connect.ts +++ b/packages/machines/tooltip/src/tooltip.connect.ts @@ -10,12 +10,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize const id = state.context.id const hasAriaLabel = state.context.hasAriaLabel - const isOpen = state.hasTag("open") + const open = state.hasTag("open") const triggerId = dom.getTriggerId(state.context) const contentId = dom.getContentId(state.context) - const isDisabled = state.context.disabled + const disabled = state.context.disabled const popperStyles = getPlacementStyles({ ...state.context.positioning, @@ -23,12 +23,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize }) return { - isOpen, - open() { - send("OPEN") - }, - close() { - send("CLOSE") + open: open, + setOpen(_open) { + if (_open === open) return + send(_open ? "OPEN" : "CLOSE") }, reposition(options = {}) { send({ type: "POSITIONING.SET", options }) @@ -38,39 +36,39 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize ...parts.trigger.attrs, id: triggerId, dir: state.context.dir, - "data-expanded": dataAttr(isOpen), - "data-state": isOpen ? "open" : "closed", - "aria-describedby": isOpen ? contentId : undefined, + "data-expanded": dataAttr(open), + "data-state": open ? "open" : "closed", + "aria-describedby": open ? contentId : undefined, onClick() { - if (isDisabled) return + if (disabled) return send("CLOSE") }, onFocus() { - if (isDisabled || state.event.type === "POINTER_DOWN") return + if (disabled || state.event.type === "POINTER_DOWN") return send("OPEN") }, onBlur() { - if (isDisabled) return + if (disabled) return if (id === store.id) { send("CLOSE") } }, onPointerDown() { - if (isDisabled || !state.context.closeOnPointerDown) return + if (disabled || !state.context.closeOnPointerDown) return if (id === store.id) { send("CLOSE") } }, onPointerMove(event) { - if (isDisabled || event.pointerType === "touch") return + if (disabled || event.pointerType === "touch") return send("POINTER_MOVE") }, onPointerLeave() { - if (isDisabled) return + if (disabled) return send("POINTER_LEAVE") }, onPointerCancel() { - if (isDisabled) return + if (disabled) return send("POINTER_LEAVE") }, }), @@ -98,8 +96,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize contentProps: normalize.element({ ...parts.content.attrs, dir: state.context.dir, - hidden: !isOpen, - "data-state": isOpen ? "open" : "closed", + hidden: !open, + "data-state": open ? "open" : "closed", role: hasAriaLabel ? undefined : "tooltip", id: hasAriaLabel ? undefined : contentId, "data-placement": state.context.currentPlacement, diff --git a/packages/machines/tooltip/src/tooltip.types.ts b/packages/machines/tooltip/src/tooltip.types.ts index 4375947b89..3bfd903390 100644 --- a/packages/machines/tooltip/src/tooltip.types.ts +++ b/packages/machines/tooltip/src/tooltip.types.ts @@ -119,15 +119,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> { /** * Whether the tooltip is open. */ - isOpen: boolean + open: boolean /** * Function to open the tooltip. */ - open(): void - /** - * Function to close the tooltip. - */ - close(): void + setOpen(open: boolean): void /** * Function to reposition the popover */ 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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes>(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<T extends PropTypes = PropTypes> { 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 } diff --git a/packages/utilities/dom-query/src/index.ts b/packages/utilities/dom-query/src/index.ts index 1a2ff56dfc..e2809c98dd 100644 --- a/packages/utilities/dom-query/src/index.ts +++ b/packages/utilities/dom-query/src/index.ts @@ -13,11 +13,12 @@ export * from "./is" export * from "./is-editable-element" export * from "./is-hidden-element" export * from "./is-overflow-element" +export * from "./observe-attributes" +export * from "./observe-children" export * from "./overflow" export * from "./platform" export * from "./query" export * from "./raf" export * from "./scope" export * from "./scroll-into-view" -export * from "./observe-attributes" -export * from "./observe-children" +export * from "./visually-hidden" diff --git a/packages/utilities/visually-hidden/src/index.ts b/packages/utilities/dom-query/src/visually-hidden.ts similarity index 100% rename from packages/utilities/visually-hidden/src/index.ts rename to packages/utilities/dom-query/src/visually-hidden.ts diff --git a/packages/utilities/focus-scope/package.json b/packages/utilities/focus-scope/package.json index 66965f0c53..320479ff48 100644 --- a/packages/utilities/focus-scope/package.json +++ b/packages/utilities/focus-scope/package.json @@ -33,7 +33,6 @@ }, "dependencies": { "@zag-js/dom-query": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "@zag-js/tabbable": "workspace:*", "@zag-js/dom-event": "workspace:*", "@zag-js/utils": "workspace:*" diff --git a/packages/utilities/focus-scope/src/focus-containment.ts b/packages/utilities/focus-scope/src/focus-containment.ts index 15191df70e..9819a975ac 100644 --- a/packages/utilities/focus-scope/src/focus-containment.ts +++ b/packages/utilities/focus-scope/src/focus-containment.ts @@ -1,5 +1,5 @@ import { addDomEvent } from "@zag-js/dom-event" -import { setVisuallyHidden } from "@zag-js/visually-hidden" +import { setVisuallyHidden } from "@zag-js/dom-query" import type { FocusContext } from "./focus-context" export interface FocusContainmentOptions { diff --git a/packages/utilities/live-region/package.json b/packages/utilities/live-region/package.json index a1abceebc4..804eb4230a 100644 --- a/packages/utilities/live-region/package.json +++ b/packages/utilities/live-region/package.json @@ -25,9 +25,6 @@ "prepack": "clean-package", "postpack": "clean-package restore" }, - "dependencies": { - "@zag-js/visually-hidden": "workspace:*" - }, "devDependencies": { "clean-package": "2.2.0" }, diff --git a/packages/utilities/live-region/src/index.ts b/packages/utilities/live-region/src/index.ts index a07cc31f85..e0efb2ddb1 100644 --- a/packages/utilities/live-region/src/index.ts +++ b/packages/utilities/live-region/src/index.ts @@ -1,5 +1,3 @@ -import { setVisuallyHidden } from "@zag-js/visually-hidden" - export interface LiveRegionOptions { level: "polite" | "assertive" document?: Document @@ -39,7 +37,18 @@ export function createLiveRegion(opts: Partial<LiveRegionOptions> = {}) { region.setAttribute("role", role) // hide live region - setVisuallyHidden(region) + Object.assign(region.style, { + border: "0", + clip: "rect(0 0 0 0)", + height: "1px", + margin: "-1px", + overflow: "hidden", + padding: "0", + position: "absolute", + width: "1px", + whiteSpace: "nowrap", + wordWrap: "normal", + }) parent.appendChild(region) diff --git a/packages/utilities/visually-hidden/CHANGELOG.md b/packages/utilities/visually-hidden/CHANGELOG.md deleted file mode 100644 index 0638fa4b74..0000000000 --- a/packages/utilities/visually-hidden/CHANGELOG.md +++ /dev/null @@ -1,152 +0,0 @@ -# @zag-js/visually-hidden - -## 0.47.0 - -## 0.46.0 - -## 0.45.0 - -## 0.44.0 - -## 0.43.0 - -## 0.42.0 - -## 0.41.0 - -## 0.40.0 - -## 0.39.0 - -## 0.38.1 - -## 0.38.0 - -## 0.37.3 - -## 0.37.2 - -## 0.37.1 - -## 0.37.0 - -## 0.36.3 - -## 0.36.2 - -## 0.36.1 - -## 0.36.0 - -## 0.35.0 - -## 0.34.0 - -## 0.33.2 - -## 0.33.1 - -## 0.33.0 - -## 0.32.1 - -## 0.32.0 - -## 0.31.1 - -## 0.31.0 - -## 0.30.0 - -## 0.29.0 - -## 0.28.1 - -## 0.28.0 - -## 0.27.1 - -## 0.27.0 - -## 0.26.0 - -## 0.25.0 - -## 0.24.0 - -## 0.23.0 - -## 0.22.0 - -## 0.21.0 - -## 0.20.0 - -### Patch Changes - -- [`942db6ca`](https://github.com/chakra-ui/zag/commit/942db6caf9f699d6af56929c835b10ae80cfbc85) Thanks - [@segunadebayo](https://github.com/segunadebayo)! - Remove toggle machine - -## 0.19.1 - -## 0.19.0 - -## 0.18.0 - -## 0.17.0 - -## 0.16.0 - -## 0.15.0 - -## 0.14.0 - -## 0.13.0 - -## 0.12.0 - -## 0.11.2 - -## 0.11.1 - -## 0.11.0 - -### Patch Changes - -- [`4f371874`](https://github.com/chakra-ui/zag/commit/4f3718742dc88a2cd8726bdd889c9bbde94f5bce) Thanks - [@segunadebayo](https://github.com/segunadebayo)! - Rebuild all packages using tsup - -## 0.10.5 - -## 0.10.4 - -## 0.10.3 - -### Patch Changes - -- [`c59a8dec`](https://github.com/chakra-ui/zag/commit/c59a8dec15ab57d218823bfe7af6d723972be6c7) Thanks - [@cschroeter](https://github.com/cschroeter)! - Use vite to build packages - -## 0.10.2 - -## 0.10.1 - -## 0.10.0 - -## 0.9.2 - -## 0.9.1 - -### Patch Changes - -- [`8469daa1`](https://github.com/chakra-ui/zag/commit/8469daa15fd7f2c0a80869a8715b0342bd3c355f) Thanks - [@segunadebayo](https://github.com/segunadebayo)! - Force release every package to fix regression - -## 0.0.1 - -### Patch Changes - -- [#536](https://github.com/chakra-ui/zag/pull/536) - [`aabc9aed`](https://github.com/chakra-ui/zag/commit/aabc9aed93ae3f49e2cec8d8b28edd23a337ce99) Thanks - [@segunadebayo](https://github.com/segunadebayo)! - Refactor all packages to have proper dependency structure and - bundle size. diff --git a/packages/utilities/visually-hidden/README.md b/packages/utilities/visually-hidden/README.md deleted file mode 100644 index 512313a24b..0000000000 --- a/packages/utilities/visually-hidden/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# @zag-js/visually-hidden - -## Installation - -```sh -yarn add @zag-js/visually-hidden -# or -npm i @zag-js/visually-hidden -``` - -## Contribution - -Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details. - -## Licence - -This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE). diff --git a/packages/utilities/visually-hidden/package.json b/packages/utilities/visually-hidden/package.json deleted file mode 100644 index d5aba8c698..0000000000 --- a/packages/utilities/visually-hidden/package.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "@zag-js/visually-hidden", - "version": "0.47.0", - "description": "", - "keywords": [ - "js", - "utils", - "visually-hidden" - ], - "author": "Segun Adebayo <sage@adebayosegun.com>", - "homepage": "https://github.com/chakra-ui/zag#readme", - "license": "MIT", - "main": "src/index.ts", - "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/visually-hidden", - "sideEffects": false, - "files": [ - "dist", - "src" - ], - "scripts": { - "build": "tsup", - "lint": "eslint src --ext .ts,.tsx", - "typecheck": "tsc --noEmit", - "prepack": "clean-package", - "postpack": "clean-package restore" - }, - "publishConfig": { - "access": "public" - }, - "bugs": { - "url": "https://github.com/chakra-ui/zag/issues" - }, - "clean-package": "../../../clean-package.config.json", - "devDependencies": { - "clean-package": "2.2.0" - } -} diff --git a/packages/utilities/visually-hidden/tsconfig.json b/packages/utilities/visually-hidden/tsconfig.json deleted file mode 100644 index 8e781cd154..0000000000 --- a/packages/utilities/visually-hidden/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../../tsconfig.json", - "include": ["src"], - "compilerOptions": { - "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo" - } -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 474dd48761..b9e3c46056 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -351,9 +351,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden form-serialize: specifier: 0.7.2 version: 0.7.2 @@ -607,9 +604,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden '@zag-js/vue': specifier: workspace:* version: link:../../packages/frameworks/vue @@ -854,9 +848,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden lucide-preact: specifier: 0.372.0 version: 0.372.0(preact@10.20.2) @@ -1101,9 +1092,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden form-serialize: specifier: 0.7.2 version: 0.7.2 @@ -1336,9 +1324,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden form-serialize: specifier: 0.7.2 version: 0.7.2 @@ -1586,9 +1571,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden '@zag-js/vue': specifier: workspace:* version: link:../../packages/frameworks/vue @@ -1924,9 +1906,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2014,9 +1993,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2193,9 +2169,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2382,9 +2355,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2488,9 +2458,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2556,9 +2523,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -2677,9 +2641,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../utilities/visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -3038,9 +2999,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -3095,10 +3053,6 @@ importers: version: 2.2.0 packages/utilities/live-region: - dependencies: - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../visually-hidden devDependencies: clean-package: specifier: 2.2.0 @@ -3168,12 +3122,6 @@ importers: specifier: 2.2.0 version: 2.2.0 - packages/utilities/visually-hidden: - devDependencies: - clean-package: - specifier: 2.2.0 - version: 2.2.0 - shared: {} starters/react: @@ -3382,9 +3330,6 @@ importers: '@zag-js/utils': specifier: workspace:* version: link:../../packages/utilities/core - '@zag-js/visually-hidden': - specifier: workspace:* - version: link:../../packages/utilities/visually-hidden form-serialize: specifier: 0.7.2 version: 0.7.2 diff --git a/shared/src/controls.ts b/shared/src/controls.ts index bc30740d1d..0ecf149c95 100644 --- a/shared/src/controls.ts +++ b/shared/src/controls.ts @@ -10,6 +10,7 @@ export const checkboxControls = defineControls({ name: { type: "string", defaultValue: "checkbox" }, disabled: { type: "boolean", defaultValue: false }, value: { type: "string", defaultValue: "on" }, + readOnly: { type: "boolean", defaultValue: false }, }) export const collapsibleControls = defineControls({ diff --git a/shared/src/css/toast.css b/shared/src/css/toast.css index cd406fdf77..a93e4fd550 100644 --- a/shared/src/css/toast.css +++ b/shared/src/css/toast.css @@ -103,7 +103,22 @@ bottom: 0; inset-inline: 0; animation-name: shrink; + animation-duration: var(--duration); animation-fill-mode: forwards; + animation-play-state: running; + transform-origin: left; + + [data-type="loading"] & { + animation-name: none; + } + + [data-paused] & { + animation-play-state: paused; + } + + [dir="rtl"] & { + transform-origin: right; + } } [data-scope="toast"][data-part="progressbar"][data-type="loading"] { diff --git a/starters/react/components/accordion.tsx b/starters/react/components/accordion.tsx index ae25f17eca..363e36bb4f 100644 --- a/starters/react/components/accordion.tsx +++ b/starters/react/components/accordion.tsx @@ -30,7 +30,7 @@ export const Accordion = (props: Props) => { {...itemContentProps} dir={context.dir} ids={{ content: itemContentProps.id }} - open={itemState.isOpen} + open={itemState.open} > {item.description} </Collapsible> diff --git a/starters/react/components/clipboard.tsx b/starters/react/components/clipboard.tsx index 75939a842d..5a04cbe1a7 100644 --- a/starters/react/components/clipboard.tsx +++ b/starters/react/components/clipboard.tsx @@ -21,7 +21,7 @@ export function Clipboard(props: Props) { <label {...api.labelProps}>Copy this link</label> <div {...api.controlProps}> <input {...api.inputProps} /> - <button {...api.triggerProps}>{api.isCopied ? <ClipboardCheck /> : <ClipboardCopyIcon />}</button> + <button {...api.triggerProps}>{api.copied ? <ClipboardCheck /> : <ClipboardCopyIcon />}</button> </div> <div {...api.getIndicatorProps({ copied: true })}>Copied!</div> <div {...api.getIndicatorProps({ copied: false })}>Copy</div> diff --git a/starters/react/components/collapsible.tsx b/starters/react/components/collapsible.tsx index 563eb58c28..91f9dc3199 100644 --- a/starters/react/components/collapsible.tsx +++ b/starters/react/components/collapsible.tsx @@ -30,7 +30,7 @@ export function Collapsible(props: Props) { const api = collapsible.connect(state, send, normalizeProps) const { unmount } = useRenderStrategy({ - visible: api.isVisible, + visible: api.visible, lazyMount, unmountOnExit, }) diff --git a/starters/react/components/dialog.tsx b/starters/react/components/dialog.tsx index 2f901d4d3b..7737ff8642 100644 --- a/starters/react/components/dialog.tsx +++ b/starters/react/components/dialog.tsx @@ -28,7 +28,7 @@ export function Dialog(props: Props) { return ( <> <button {...api.triggerProps}>Open Dialog</button> - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.backdropProps} /> <div {...api.positionerProps}> diff --git a/starters/react/components/hover-card.tsx b/starters/react/components/hover-card.tsx index 00d20da977..ff677ce3ad 100644 --- a/starters/react/components/hover-card.tsx +++ b/starters/react/components/hover-card.tsx @@ -33,7 +33,7 @@ export function HoverCard(props: Props) { Twitter </a> - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.positionerProps}> <div {...api.contentProps}> diff --git a/starters/react/components/tooltip.tsx b/starters/react/components/tooltip.tsx index 76618a408d..423af50fee 100644 --- a/starters/react/components/tooltip.tsx +++ b/starters/react/components/tooltip.tsx @@ -34,7 +34,7 @@ export function Tooltip(props: Props) { ) : ( <span {...api.triggerProps}>{children}</span> )} - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.positionerProps}> <div {...api.contentProps}>{label}</div> diff --git a/starters/react/package.json b/starters/react/package.json index b64737025e..5b4cae0401 100644 --- a/starters/react/package.json +++ b/starters/react/package.json @@ -77,7 +77,6 @@ "@zag-js/tree-view": "workspace:*", "@zag-js/types": "workspace:*", "@zag-js/utils": "workspace:*", - "@zag-js/visually-hidden": "workspace:*", "form-serialize": "0.7.2", "match-sorter": "6.3.4", "lucide-react": "0.372.0", diff --git a/website/components/machines/clipboard.tsx b/website/components/machines/clipboard.tsx index 1194f6e0e1..af607013d5 100644 --- a/website/components/machines/clipboard.tsx +++ b/website/components/machines/clipboard.tsx @@ -23,7 +23,7 @@ export function Clipboard(props: Props) { <div {...api.controlProps}> <input {...api.inputProps} /> <button {...api.triggerProps}> - {api.isCopied ? <HiCheck /> : <HiOutlineClipboard />} + {api.copied ? <HiCheck /> : <HiOutlineClipboard />} </button> </div> </div> diff --git a/website/components/machines/editable.tsx b/website/components/machines/editable.tsx index 82c37b4260..eb11471c7e 100644 --- a/website/components/machines/editable.tsx +++ b/website/components/machines/editable.tsx @@ -17,8 +17,8 @@ export function Editable(props: any) { </div> <div> - {!api.isEditing && <button {...api.editTriggerProps}>Edit</button>} - {api.isEditing && ( + {!api.editing && <button {...api.editTriggerProps}>Edit</button>} + {api.editing && ( <div> <button {...api.submitTriggerProps}>Save</button> <button {...api.cancelTriggerProps}>Cancel</button> diff --git a/website/components/machines/hover-card.tsx b/website/components/machines/hover-card.tsx index 263d1fafab..fc582b4c5c 100644 --- a/website/components/machines/hover-card.tsx +++ b/website/components/machines/hover-card.tsx @@ -27,7 +27,7 @@ export function HoverCard(props: HoverCardProps) { <img alt="Twitter" src="/favicon/apple-touch-icon.png" /> </a> - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.positionerProps}> <div {...api.contentProps}> diff --git a/website/components/machines/rating.tsx b/website/components/machines/rating.tsx index 22fc68b175..30a1f9f8ce 100644 --- a/website/components/machines/rating.tsx +++ b/website/components/machines/rating.tsx @@ -64,7 +64,7 @@ export function Rating(props: RadioProps) { const state = api.getItemState({ index }) return ( <span key={index} {...api.getItemProps({ index })}> - {state.isHalf ? <HalfStar /> : <Star />} + {state.half ? <HalfStar /> : <Star />} </span> ) })} diff --git a/website/components/machines/switch.tsx b/website/components/machines/switch.tsx index 2378187177..abe3468dcc 100644 --- a/website/components/machines/switch.tsx +++ b/website/components/machines/switch.tsx @@ -22,7 +22,7 @@ export function Switch(props: SwitchProps) { <span {...api.controlProps}> <span {...api.thumbProps} /> </span> - <span {...api.labelProps}>{api.isChecked ? "On" : "Off"}</span> + <span {...api.labelProps}>{api.checked ? "On" : "Off"}</span> </label> </div> ) diff --git a/website/components/machines/tooltip.tsx b/website/components/machines/tooltip.tsx index e3ed35315e..2b1e399f4e 100644 --- a/website/components/machines/tooltip.tsx +++ b/website/components/machines/tooltip.tsx @@ -16,7 +16,7 @@ export function Tooltip(props: TooltipProps) { <> <button {...api.triggerProps}>Hover me</button> <Portal> - {api.isOpen && ( + {api.open && ( <div {...api.positionerProps}> <div {...api.contentProps}> <div {...api.arrowProps}> diff --git a/website/components/mobile-navigation.tsx b/website/components/mobile-navigation.tsx index 194187f441..1ea28f29fb 100644 --- a/website/components/mobile-navigation.tsx +++ b/website/components/mobile-navigation.tsx @@ -26,12 +26,12 @@ export function MobileNavigation() { const [desktop] = useMatchMedia([`(min-width: ${lgBreakpoint})`]) useEffect(() => { - if (desktop) api.close() + if (desktop) api.setOpen(false) // eslint-disable-next-line react-hooks/exhaustive-deps }, [desktop]) useRouteChange(() => { - api.close() + api.setOpen(false) }) return ( @@ -51,7 +51,7 @@ export function MobileNavigation() { </HStack> </Button> - {api.isOpen && ( + {api.open && ( <Portal> <div {...api.positionerProps}> <Box diff --git a/website/components/search-dialog.tsx b/website/components/search-dialog.tsx index 974493b2a5..c8883b0c0a 100644 --- a/website/components/search-dialog.tsx +++ b/website/components/search-dialog.tsx @@ -15,7 +15,7 @@ export function Search() { return ( <> <SearchTrigger {...dialog_api.triggerProps} /> - {dialog_api.isOpen && ( + {dialog_api.open && ( <Portal> <Box position="fixed" @@ -137,7 +137,7 @@ export function Search() { lineHeight="1" color="gray.500" spacing="5" - borderTopWidth={combobox_api.isOpen ? "1px" : undefined} + borderTopWidth={combobox_api.open ? "1px" : undefined} > <HStack> <Box as="span">↑↓</Box> diff --git a/website/data/components/clipboard.mdx b/website/data/components/clipboard.mdx index f66e1cf325..ed13727369 100644 --- a/website/data/components/clipboard.mdx +++ b/website/data/components/clipboard.mdx @@ -83,13 +83,12 @@ const [state, send] = useMachine( ## Checking if the value is copied -Use the `api.isCopied` property to check if the value is copied to the -clipboard. +Use the `api.copied` property to check if the value is copied to the clipboard. ```jsx {3} const api = clipboard.connect(state, send) -if (api.isCopied) { +if (api.copied) { console.log("Value is copied to the clipboard") } ``` diff --git a/website/data/components/color-picker.mdx b/website/data/components/color-picker.mdx index 7b46c17fd3..27de4d5fa3 100644 --- a/website/data/components/color-picker.mdx +++ b/website/data/components/color-picker.mdx @@ -157,8 +157,8 @@ const [current, send] = useMachine( ) ``` -You can also leverage the `api.open()` or `api.close()` methods to control the -open and closed state of the color picker. +You can also leverage the `api.setOpen(...)` method to control the open and +closed state of the color picker. ## Controlling individual color channel diff --git a/website/data/components/editable.mdx b/website/data/components/editable.mdx index b300f7a6d3..fb5b823d0d 100644 --- a/website/data/components/editable.mdx +++ b/website/data/components/editable.mdx @@ -89,7 +89,7 @@ const [state, send] = useMachine( onValueChange(details) { console.log("Value changed", details.value) }, - onValueCommit: (details) => { + onValueCommit(details) { console.log("Value submitted", details.value) }, }), diff --git a/website/data/components/pagination.mdx b/website/data/components/pagination.mdx index 6e17ec825b..2597be14a3 100644 --- a/website/data/components/pagination.mdx +++ b/website/data/components/pagination.mdx @@ -65,9 +65,6 @@ const currentPageData = data.slice(api.pageRange.start, api.pageRange.end) api.page // => 1 -api.isFirstPage() -// => true - api.setPage(3) // page => 3 diff --git a/website/lib/use-search.ts b/website/lib/use-search.ts index fabc99ec50..b4085a7420 100644 --- a/website/lib/use-search.ts +++ b/website/lib/use-search.ts @@ -53,7 +53,7 @@ export function useSearch(): UseSearchReturn { return inputValue.length > 2 }, onValueChange() { - dialog_api.close() + dialog_api.setOpen(false) }, onInputValueChange({ inputValue }) { if (inputValue.length < 3) return @@ -77,14 +77,14 @@ export function useSearch(): UseSearchReturn { const hotkey = isMac ? "metaKey" : "ctrlKey" if (event.key?.toLowerCase() === "k" && event[hotkey]) { event.preventDefault() - dialog_api.isOpen ? dialog_api.close() : dialog_api.open() + dialog_api.setOpen(dialog_api.open ? false : true) } } document.addEventListener("keydown", fn) return () => { document.removeEventListener("keydown", fn) } - }, [dialog_api.isOpen, dialog_api.close, dialog_api.open]) + }, [dialog_api.setOpen, dialog_api.open]) const combobox_api = combobox.connect( combobox_state, @@ -93,20 +93,16 @@ export function useSearch(): UseSearchReturn { ) useUpdateEffect(() => { - if (dialog_api.isOpen && combobox_api.isInputValueEmpty) { + if (dialog_api.open && combobox_api.inputEmpty) { setResults([]) } - }, [dialog_api.isOpen, combobox_api.isInputValueEmpty]) + }, [dialog_api.open, combobox_api.inputEmpty]) useUpdateEffect(() => { - if (!dialog_api.isOpen && !combobox_api.isInputValueEmpty) { + if (!dialog_api.open && !combobox_api.inputEmpty) { combobox_api.clearValue() } - }, [ - dialog_api.isOpen, - combobox_api.isInputValueEmpty, - combobox_api.clearValue, - ]) + }, [dialog_api.open, combobox_api.inputEmpty, combobox_api.clearValue]) return { results,
- - {api.title} - {api.description} - Close -
{api.title}
{api.description}