refactor: consistent boolean (#1435)

* refactor: accordion * refactor: avatar * refactor: carousel * refactor: checkbox * refactor: checkbox * refactor: clipboard * refactor: collapsible * refactor: color picker * refactor: combobox * refactor: treeview * refactor: tabs * refactor: signature pad * refactor: editable * refactor: floating panel * refactor: file upload * refactor: machines * refactor: update examples * fix: types * fix: checkbox * refactor: cleanup toasts * chore: update tag * refactor: color picker * refactor: set open * chore: js doc * refactor: one less package * chore: update * refactor: toast api * chore: update * feat: add readonly * fix: props * docs: update
chakra-ui · Apr 22, 2024 · 23ed828 · 23ed828
1 parent 037ccfb
commit 23ed828
Show file tree

Hide file tree

Showing 225 changed files with 1,803 additions and 1,893 deletions.
diff --git a/.changeset/cyan-parrots-grin.md b/.changeset/cyan-parrots-grin.md
@@ -0,0 +1,10 @@
+---
+"@zag-js/checkbox": minor
+---
+
+Rename `api` properties
+
+- `isChecked` to `checked`
+- `isDisabled` to `disabled`
+- `isIndeterminate` to `indeterminate`
+- `isFocused` to `focused`
diff --git a/.changeset/friendly-rings-impress.md b/.changeset/friendly-rings-impress.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/avatar": minor
+---
+
+- Rename `api.isLoaded` to `api.loaded`
+- Remove `api.showFallback` since it's equivalent to `!api.loaded`
diff --git a/.changeset/gold-pigs-smash.md b/.changeset/gold-pigs-smash.md
@@ -0,0 +1,7 @@
+---
+"@zag-js/radio-group": minor
+"@zag-js/checkbox": minor
+"@zag-js/switch": minor
+---
+
+Add support for `readOnly` prop
diff --git a/.changeset/large-weeks-shout.md b/.changeset/large-weeks-shout.md
@@ -0,0 +1,8 @@
+---
+"@zag-js/editable": minor
+---
+
+Rename `api` properties
+
+- `isEditing` -> `editing`
+- `isValueEmpty` -> `empty`
diff --git a/.changeset/plenty-cherries-lay.md b/.changeset/plenty-cherries-lay.md
@@ -0,0 +1,13 @@
+---
+"@zag-js/tree-view": minor
+---
+
+- Rename `api.getItemState` properties
+
+  - `isDisabled` -> `disabled`
+  - `isFocused` -> `focused`
+  - `isSelected` -> `selected`
+
+- Rename `api.getBranchState` properties
+
+  - `isExpanded` -> `expanded`
diff --git a/.changeset/polite-vans-nail.md b/.changeset/polite-vans-nail.md
@@ -0,0 +1,10 @@
+---
+"@zag-js/combobox": minor
+---
+
+Rename `api` properties
+
+- `isFocused` -> `focused`
+- `isOpen` -> `open`
+- `isInputValueEmpty` -> `inputEmpty`
+- `open()`, `close()` -> `setOpen(true|false)`
diff --git a/.changeset/quick-flowers-sparkle.md b/.changeset/quick-flowers-sparkle.md
@@ -0,0 +1,8 @@
+---
+"@zag-js/signature-pad": minor
+---
+
+Rename `api` properties
+
+- `isDrawing` -> `drawing`
+- `isEmpty` -> `empty`
diff --git a/.changeset/real-icons-study.md b/.changeset/real-icons-study.md
@@ -0,0 +1,10 @@
+---
+"@zag-js/collapsible": minor
+---
+
+Rename `api` properties
+
+- `isVisible` -> `visible`
+- `isDisabled` -> `disabled`
+- `isOpen` -> `open`
+- `open`, `close` -> `setOpen(true|false)`
diff --git a/.changeset/sour-boxes-march.md b/.changeset/sour-boxes-march.md
@@ -0,0 +1,9 @@
+---
+"@zag-js/file-upload": minor
+---
+
+Rename `api` properties
+
+- `isDragging` -> `dragging`
+- `isFocused` -> `focused`
+- `open()` -> `openFilePicker()`
diff --git a/.changeset/swift-hornets-hug.md b/.changeset/swift-hornets-hug.md
@@ -0,0 +1,12 @@
+---
+"@zag-js/carousel": minor
+---
+
+- Rename `api.getItemState` properties
+
+  - `isCurrent` to `current`
+  - `isNext` to `next`
+  - `isPrevious` to `previous`
+  - `isInView` to `inView`
+
+- Rename `api.isAutoPlay` to `api.autoPlaying`
diff --git a/.changeset/swift-years-do.md b/.changeset/swift-years-do.md
@@ -0,0 +1,9 @@
+---
+"@zag-js/color-picker": minor
+---
+
+Rename `api` properties
+
+- `isDragging` -> `dragging`
+- `isOpen` -> `open`
+- `open()`, `close()` -> `setOpen(true|false)`
diff --git a/.changeset/three-planes-mix.md b/.changeset/three-planes-mix.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/clipboard": minor
+---
+
+Rename `api.isCopied` to `api.copied`
diff --git a/.changeset/unlucky-pumpkins-impress.md b/.changeset/unlucky-pumpkins-impress.md
@@ -0,0 +1,9 @@
+---
+"@zag-js/tabs": minor
+---
+
+Rename `api.getTriggerState` properties
+
+- `isSelected` -> `selected`
+- `isDisabled` -> `disabled`
+- `isFocused` -> `focused`
diff --git a/.changeset/witty-tomatoes-roll.md b/.changeset/witty-tomatoes-roll.md
@@ -0,0 +1,8 @@
+---
+"@zag-js/accordion": minor
+---
+
+- Rename `getItemState` properties
+  - `isOpen` -> `expanded`
+  - `isDisabled` -> `disabled`
+  - `isFocused` -> `focused`
diff --git a/.xstate/toggle-group.js b/.xstate/toggle-group.js
@@ -15,7 +15,7 @@ const fetchMachine = createMachine({
   context: {
     "!(isClickFocus && isTabbingBackward)": false
   },
-  entry: ["checkFocusableToggles", "checkIfWithinToolbar"],
+  entry: ["checkIfWithinToolbar"],
   on: {
     "VALUE.SET": {
       actions: ["setValue"]

diff --git a/examples/next-ts/components/dialog.tsx b/examples/next-ts/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/examples/next-ts/package.json b/examples/next-ts/package.json
@@ -80,7 +80,6 @@
     "@zag-js/tree-view": "workspace:*",
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*",
-    "@zag-js/visually-hidden": "workspace:*",
     "form-serialize": "0.7.2",
     "lucide-react": "0.372.0",
     "match-sorter": "6.3.4",

diff --git a/examples/next-ts/pages/checkbox.tsx b/examples/next-ts/pages/checkbox.tsx
@@ -34,15 +34,15 @@ export default function Page() {
           <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/next-ts/pages/clipboard.tsx b/examples/next-ts/pages/clipboard.tsx
@@ -29,7 +29,7 @@ export default function Page() {
           <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/examples/next-ts/pages/cmdk.tsx b/examples/next-ts/pages/cmdk.tsx
@@ -102,14 +102,14 @@ export default function Page() {
 
   useEffect(() => {
     const fn = (event: KeyboardEvent) => {
-      if (dialogApi.isOpen) return
+      if (dialogApi.open) return
 
       const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform)
       const hotkey = isMac ? "metaKey" : "ctrlKey"
 
       if (event.key?.toLowerCase() === "k" && event[hotkey]) {
         event.preventDefault()
-        dialogApi.open()
+        dialogApi.setOpen(true)
       }
     }
     document.addEventListener("keydown", fn, true)
@@ -129,7 +129,7 @@ export default function Page() {
         or press <kbd> Cmd+K</kbd>
       </div>
 
-      {dialogApi.isOpen && (
+      {dialogApi.open && (
         <Portal>
           <div {...dialogApi.backdropProps} />
           <div {...dialogApi.positionerProps}>
@@ -139,7 +139,7 @@ export default function Page() {
                 collection={collection}
                 onValueChange={({ value }) => {
                   console.log("Selected value:", value)
-                  queueMicrotask(() => dialogApi.close())
+                  queueMicrotask(() => dialogApi.setOpen(false))
                 }}
                 onInputValueChange={({ inputValue }) => {
                   setInputValue(inputValue)

diff --git a/examples/next-ts/pages/collapsible.tsx b/examples/next-ts/pages/collapsible.tsx
@@ -38,8 +38,8 @@ export default function Page() {
 
         <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/next-ts/pages/combo-textarea.tsx b/examples/next-ts/pages/combo-textarea.tsx
@@ -96,21 +96,21 @@ export default function Page() {
                 api.reposition()
               },
               onPointerDown() {
-                api.close()
+                api.setOpen(true)
               },
               onKeyDown(event) {
                 if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-                  api.close()
+                  api.setOpen(false)
                 }
               },
               onChange(event) {
                 const trigger = getTrigger(event.currentTarget)
                 const searchValue = getSearchValue(event.currentTarget)
 
                 if (trigger) {
-                  api.open()
+                  api.setOpen(true)
                 } else if (!searchValue) {
-                  api.close()
+                  api.setOpen(false)
                 }
 
                 setSearchValue(searchValue)

diff --git a/examples/next-ts/pages/dialog/controlled.tsx b/examples/next-ts/pages/dialog/controlled.tsx
@@ -23,8 +23,8 @@ export default function Dialog() {
     <div>
       <button onClick={() => setOpen(!isOpen)}>Open Dialog</button>
       <p>state - isOpen: {String(isOpen)}</p>
-      <p>machine - isOpen: {String(api.isOpen)}</p>
-      {api.isOpen && (
+      <p>machine - isOpen: {String(api.open)}</p>
+      {api.open && (
         <Portal>
           <div {...api.backdropProps} />
           <div {...api.positionerProps}>

diff --git a/examples/next-ts/pages/dialog/index.tsx b/examples/next-ts/pages/dialog/index.tsx
@@ -33,7 +33,7 @@ export default function Page() {
 
           <div style={{ minHeight: "1200px" }} />
 
-          {parentDialog.isOpen && (
+          {parentDialog.open && (
             <Portal>
               <div {...parentDialog.backdropProps} />
               <div data-testid="positioner-1" {...parentDialog.positionerProps}>
@@ -52,7 +52,7 @@ export default function Page() {
                     Open Nested
                   </button>
 
-                  {childDialog.isOpen && (
+                  {childDialog.open && (
                     <Portal>
                       <div {...childDialog.backdropProps} />
                       <div data-testid="positioner-2" {...childDialog.positionerProps}>
@@ -61,7 +61,7 @@ export default function Page() {
                           <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/next-ts/pages/dialog/overflow.tsx b/examples/next-ts/pages/dialog/overflow.tsx
@@ -9,7 +9,7 @@ export default function Dialog() {
     <div>
       <div style={{ width: "200vw", height: "30vh" }} />
       <button {...api.triggerProps}> Click me</button>
-      {api.isOpen && (
+      {api.open && (
         <Portal>
           <div {...api.backdropProps} />
           <div {...api.positionerProps}>

diff --git a/examples/next-ts/pages/editable.tsx b/examples/next-ts/pages/editable.tsx
@@ -29,12 +29,12 @@ export default function Page() {
             <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/next-ts/pages/hover-card.tsx b/examples/next-ts/pages/hover-card.tsx
@@ -29,7 +29,7 @@ export default function Page() {
             Twitter
           </a>
 
-          {api.isOpen && (
+          {api.open && (
             <Portal>
               <div {...api.positionerProps}>
                 <div {...api.contentProps}>

diff --git a/examples/next-ts/pages/pagination.tsx b/examples/next-ts/pages/pagination.tsx
@@ -1,7 +1,6 @@
 import * as pagination from "@zag-js/pagination"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import { paginationControls, paginationData } from "@zag-js/shared"
-import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
 import { useId, useState } from "react"
 import { Print } from "../components/print"
 import { StateVisualizer } from "../components/state-visualizer"
@@ -60,9 +59,7 @@ export default function Page() {
           <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 function Page() {
                   )
               })}
               <li>
-                <button {...api.nextTriggerProps}>
-                  Next <span style={visuallyHiddenStyle}>Page</span>
-                </button>
+                <button {...api.nextTriggerProps}>Next</button>
               </li>
             </ul>
           </nav>

diff --git a/examples/next-ts/pages/popover-selection.tsx b/examples/next-ts/pages/popover-selection.tsx
@@ -53,14 +53,14 @@ export default function Page() {
     const onMouseUp = () => {
       if (!hasSelectionWithin(node)) return
       api.reposition()
-      api.open()
+      api.setOpen(true)
     }
 
     const onSelect = () => {
       if (hasSelectionWithin(node)) {
         return api.reposition()
       }
-      api.close()
+      api.setOpen(false)
     }
 
     doc.addEventListener("mouseup", onMouseUp)

diff --git a/examples/next-ts/pages/presence.tsx b/examples/next-ts/pages/presence.tsx
@@ -17,7 +17,7 @@ export default function Page() {
   return (
     <main className="presence">
       <button onClick={() => setPresent((c) => !c)}>Toggle</button>
-      {api.isPresent && (
+      {api.present && (
         <div
           ref={(node) => {
             api.setNode(node)