refactor: collection and related machines

chakra-ui · Sep 6, 2023 · e4d78be · e4d78be · vercel · Sep 6, 2023
1 parent 2c79cf9
commit e4d78be
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 48 deletions.
diff --git a/.changeset/clean-jobs-sell.md b/.changeset/clean-jobs-sell.md
@@ -0,0 +1,8 @@
+---
+"@zag-js/collection": patch
+"@zag-js/combobox": patch
+"@zag-js/select": patch
+---
+
+- Loosen the collection item types to allow string item
+- Add generic to select and combobox context and api
diff --git a/.xstate/select.js b/.xstate/select.js
@@ -64,7 +64,7 @@ const fetchMachine = createMachine({
       on: {
         "TRIGGER.CLICK": {
           target: "open",
-          actions: ["invokeOnOpen"]
+          actions: ["invokeOnOpen", "highlightFirstSelectedItem"]
         },
         "TRIGGER.FOCUS": {
           target: "focused"
@@ -88,7 +88,7 @@ const fetchMachine = createMachine({
         },
         "TRIGGER.CLICK": {
           target: "open",
-          actions: ["invokeOnOpen"]
+          actions: ["invokeOnOpen", "highlightFirstSelectedItem"]
         },
         "TRIGGER.ENTER": [{
           cond: "hasSelectedItems",

diff --git a/packages/machines/combobox/src/combobox.collection.ts b/packages/machines/combobox/src/combobox.collection.ts
@@ -5,6 +5,6 @@ export const collection = <T extends CollectionItem>(options: CollectionOptions<
   return ref(new Collection(options))
 }
 
-collection.empty = (): Collection<any> => {
-  return ref(new Collection<any>({ items: [] }))
+collection.empty = (): Collection<CollectionItem> => {
+  return ref(new Collection<CollectionItem>({ items: [] }))
 }
diff --git a/packages/machines/combobox/src/combobox.types.ts b/packages/machines/combobox/src/combobox.types.ts
@@ -1,9 +1,11 @@
-import type { Collection, CollectionItem } from "@zag-js/collection"
+import type { Collection, CollectionItem, CollectionOptions } from "@zag-js/collection"
 import type { StateMachine as S } from "@zag-js/core"
 import type { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from "@zag-js/interact-outside"
 import type { Placement, PositioningOptions } from "@zag-js/popper"
 import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
 
+export type { CollectionOptions }
+
 type IntlTranslations = {
   triggerLabel?: string
   clearTriggerLabel?: string
@@ -23,7 +25,21 @@ type ElementIds = Partial<{
   itemGroupLabel(id: string | number): string
 }>
 
-type PublicContext = DirectionProperty &
+export type ValueChangeDetails<T extends CollectionItem = CollectionItem> = {
+  value: string[]
+  items: T[]
+}
+
+export type HighlightChangeDetails<T extends CollectionItem = CollectionItem> = {
+  value: string | null
+  item: T | null
+}
+
+type InputValueChangeDetails = {
+  value: string
+}
+
+type PublicContext<T extends CollectionItem = CollectionItem> = DirectionProperty &
   CommonProperties & {
     /**
      * The ids of the elements in the combobox. Useful for composition.
@@ -108,16 +124,16 @@ type PublicContext = DirectionProperty &
     /**
      * Function called when the input's value changes
      */
-    onInputChange?: (details: { value: string }) => void
+    onInputChange?: (details: InputValueChangeDetails) => void
     /**
      * Function called when a new item is selected
      */
-    onChange?: (details: { value: string[]; items: CollectionItem[] }) => void
+    onChange?: (details: ValueChangeDetails<T>) => void
     /**
      * Function called when an item is highlighted using the pointer
      * or keyboard navigation.
      */
-    onHighlight?: (details: { value: string | null; item: CollectionItem | null }) => void
+    onHighlight?: (details: HighlightChangeDetails<T>) => void
     /**
      * Function called when the popup is opened
      */
@@ -159,7 +175,10 @@ type PublicContext = DirectionProperty &
 /**
  * This is the actual context exposed to the user.
  */
-export type UserDefinedContext = RequiredBy<PublicContext, "id" | "collection">
+export type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<
+  PublicContext<T>,
+  "id" | "collection"
+>
 
 type ComputedContext = Readonly<{
   /**
@@ -246,7 +265,7 @@ export type ItemGroupLabelProps = {
 
 export type { InteractOutsideEvent, Placement, PositioningOptions }
 
-export type MachineApi<T extends PropTypes = PropTypes> = {
+export type MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem = CollectionItem> = {
   /**
    * Whether the combobox is focused
    */
@@ -270,15 +289,15 @@ export type MachineApi<T extends PropTypes = PropTypes> = {
   /**
    * The highlighted item
    */
-  highlightedItem: CollectionItem | null
+  highlightedItem: V | null
   /**
    * The value of the combobox input
    */
   highlightValue(value: string): void
   /**
    * The selected items
    */
-  selectedItems: CollectionItem[]
+  selectedItems: V[]
   /**
    * Whether there's a selected item
    */
@@ -326,7 +345,7 @@ export type MachineApi<T extends PropTypes = PropTypes> = {
   /**
    * Function to set the collection of items
    */
-  setCollection(collection: Collection<any>): void
+  setCollection(collection: Collection<V>): void
 
   rootProps: T["element"]
   labelProps: T["label"]

diff --git a/packages/machines/combobox/src/index.ts b/packages/machines/combobox/src/index.ts
@@ -11,4 +11,5 @@ export type {
   Placement,
   PositioningOptions,
   MachineApi as Api,
+  CollectionOptions,
 } from "./combobox.types"
diff --git a/packages/machines/select/src/index.ts b/packages/machines/select/src/index.ts
@@ -8,4 +8,5 @@ export type {
   ItemGroupProps,
   ItemProps,
   MachineApi as Api,
+  CollectionOptions,
 } from "./select.types"
diff --git a/packages/machines/select/src/select.collection.ts b/packages/machines/select/src/select.collection.ts
@@ -5,6 +5,6 @@ export const collection = <T extends CollectionItem>(options: CollectionOptions<
   return ref(new Collection(options))
 }
 
-collection.empty = (): Collection<any> => {
-  return ref(new Collection<any>({ items: [] }))
+collection.empty = (): Collection<CollectionItem> => {
+  return ref(new Collection<CollectionItem>({ items: [] }))
 }
diff --git a/packages/machines/select/src/select.machine.ts b/packages/machines/select/src/select.machine.ts
@@ -81,7 +81,7 @@ export function machine(userContext: UserDefinedContext) {
           on: {
             "TRIGGER.CLICK": {
               target: "open",
-              actions: ["invokeOnOpen"],
+              actions: ["invokeOnOpen", "highlightFirstSelectedItem"],
             },
             "TRIGGER.FOCUS": {
               target: "focused",
@@ -106,7 +106,7 @@ export function machine(userContext: UserDefinedContext) {
             },
             "TRIGGER.CLICK": {
               target: "open",
-              actions: ["invokeOnOpen"],
+              actions: ["invokeOnOpen", "highlightFirstSelectedItem"],
             },
             "TRIGGER.ENTER": [
               {

diff --git a/packages/machines/select/src/select.types.ts b/packages/machines/select/src/select.types.ts
@@ -1,10 +1,12 @@
-import type { Collection, CollectionItem, CollectionItem as Item } from "@zag-js/collection"
+import type { Collection, CollectionItem, CollectionOptions } from "@zag-js/collection"
 import type { StateMachine as S } from "@zag-js/core"
 import type { InteractOutsideHandlers } from "@zag-js/dismissable"
 import type { TypeaheadState } from "@zag-js/dom-query"
 import type { Placement, PositioningOptions } from "@zag-js/popper"
 import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
 
+export type { CollectionOptions }
+
 type ElementIds = Partial<{
   content: string
   trigger: string
@@ -17,17 +19,17 @@ type ElementIds = Partial<{
   itemGroupLabel(id: string | number): string
 }>
 
-export type ValueChangeDetails = {
+export type ValueChangeDetails<T extends CollectionItem = CollectionItem> = {
   value: string[]
-  items: Item[]
+  items: T[]
 }
 
-export type HighlightChangeDetails = {
+export type HighlightChangeDetails<T extends CollectionItem = CollectionItem> = {
   value: string | null
-  item: Item | null
+  item: T | null
 }
 
-type PublicContext = DirectionProperty &
+type PublicContext<T extends CollectionItem = any> = DirectionProperty &
   CommonProperties &
   InteractOutsideHandlers & {
     /**
@@ -70,11 +72,11 @@ type PublicContext = DirectionProperty &
     /**
      * The callback fired when the highlighted item changes.
      */
-    onHighlight?: (details: HighlightChangeDetails) => void
+    onHighlight?: (details: HighlightChangeDetails<T>) => void
     /**
      * The callback fired when the selected item changes.
      */
-    onChange?: (details: ValueChangeDetails) => void
+    onChange?: (details: ValueChangeDetails<T>) => void
     /**
      * Function called when the popup is opened
      */
@@ -151,25 +153,28 @@ type ComputedContext = Readonly<{
   /**
    * The highlighted item
    */
-  highlightedItem: Item | null
+  highlightedItem: CollectionItem | null
   /**
    * @computed
    * The selected items
    */
-  selectedItems: Item[]
+  selectedItems: CollectionItem[]
   /**
    * @computed
    * The display value of the select (based on the selected items)
    */
   valueAsString: string
 }>
 
-export type UserDefinedContext = RequiredBy<PublicContext, "id" | "collection">
+export type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<
+  PublicContext<T>,
+  "id" | "collection"
+>
 
 export type MachineContext = PublicContext & PrivateContext & ComputedContext
 
-export type ItemProps = {
-  item: Item
+export type ItemProps<T extends CollectionItem = CollectionItem> = {
+  item: T
 }
 
 export type ItemState = {
@@ -195,7 +200,7 @@ export type ItemGroupLabelProps = {
   htmlFor: string
 }
 
-export type MachineApi<T extends PropTypes = PropTypes> = {
+export type MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem = CollectionItem> = {
   /**
    * Whether the select is focused
    */
@@ -211,15 +216,15 @@ export type MachineApi<T extends PropTypes = PropTypes> = {
   /**
    * The highlighted item
    */
-  highlightedItem: CollectionItem | null
+  highlightedItem: V | null
   /**
    * The value of the combobox input
    */
   highlightValue(value: string): void
   /**
    * The selected items
    */
-  selectedItems: CollectionItem[]
+  selectedItems: V[]
   /**
    * Whether there's a selected option
    */
@@ -263,7 +268,7 @@ export type MachineApi<T extends PropTypes = PropTypes> = {
   /**
    * Function to set the collection of items
    */
-  setCollection(collection: Collection<any>): void
+  setCollection(collection: Collection<V>): void
 
   labelProps: T["label"]
   triggerProps: T["button"]