docs: rework combobox demo

Author: segunadebayo

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import * as combobox from "@zag-js/combobox"
-import { Portal, normalizeProps, useMachine } from "@zag-js/react"
+import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react"
 import { useId, useMemo, useState } from "react"
+import { createFilter } from "@zag-js/i18n-utils"
 
 interface ComboboxProps {
   controls: {
@@ -60,6 +61,8 @@ const CaretIcon = () => (
 export function Combobox(props: ComboboxProps) {
   const [options, setOptions] = useState(comboboxData)
 
+  const filter = createFilter({ sensitivity: "base" })
+
   const collection = useMemo(
     () =>
       combobox.collection({
@@ -73,30 +76,31 @@ export function Combobox(props: ComboboxProps) {
   const service = useMachine(combobox.machine, {
     id: useId(),
     collection,
-    onOpenChange() {
-      setOptions(comboboxData)
-    },
     onInputValueChange({ inputValue }) {
       const filtered = comboboxData.filter((item) =>
-        item.label.toLowerCase().includes(inputValue.toLowerCase()),
+        filter.contains(item.label, inputValue),
       )
       setOptions(filtered.length > 0 ? filtered : comboboxData)
     },
     placeholder: "Type or select country",
     ...props.controls,
   })
 
-  // { context: { ...props.controls, collection } },
-
   const api = combobox.connect(service, normalizeProps)
 
+  const triggerProps = mergeProps(api.getTriggerProps(), {
+    onClick() {
+      setOptions(comboboxData)
+    },
+  })
+
   return (
     <div>
       <div {...api.getRootProps()}>
         <label {...api.getLabelProps()}>Nationality</label>
         <div {...api.getControlProps()}>
           <input {...api.getInputProps()} />
-          <button {...api.getTriggerProps()}>
+          <button {...triggerProps}>
             <CaretIcon />
           </button>
         </div>

website/components/machines/combobox.tsx

@@ -42,6 +42,7 @@
     "@zag-js/docs": "workspace:*",
     "@zag-js/editable": "workspace:*",
     "@zag-js/file-upload": "workspace:*",
+    "@zag-js/i18n-utils": "workspace:*",
     "@zag-js/hover-card": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",