add tests

example/components/RFCSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { createHost, createSlot } from 'create-slots/rfc'
 
 import { Item } from './RFCItem'
@@ -8,12 +8,13 @@ const SelectDivider = createSlot('hr')
 
 export const Select = (props: React.ComponentProps<'ul'>) => {
   const [selected, setSelected] = useState<React.ReactNode>(null)
+  const indexRef = useRef(0)
 
   return (
     <div>
       <div>Selected: {selected}</div>
       {createHost(props.children, (slots) => {
-        let index = 0
+        indexRef.current = 0
         return (
           <ul {...props}>
             {slots.map((slot) => {
@@ -23,11 +24,11 @@ export const Select = (props: React.ComponentProps<'ul'>) => {
                 return (
                   <Item
                     key={slot.key}
-                    {...slot.props}
+                    {...itemProps}
                     {...{
                       role: 'button',
                       tabIndex: 0,
-                      'data-index': index,
+                      'data-index': indexRef.current++,
                       'aria-selected': itemProps.children === selected,
                       onClick: () => {
                         setSelected(itemProps.value)

src/__fixtures__/RFCSelect.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+
+import { createHost, createSlot } from '../rfc'
+
+const Divider = (props: React.ComponentPropsWithoutRef<'hr'>) => (
+  <hr {...props} />
+)
+
+const SelectItem = createSlot('li')
+const SelectDivider = createSlot(Divider)
+
+export const Select = (props: React.ComponentPropsWithoutRef<'ul'>) => {
+  const [selected, setSelected] = React.useState<React.ReactElement>()
+  const indexRef = React.useRef(0)
+
+  return (
+    <div>
+      <div>Selected: {selected?.props.value ?? ''}</div>
+      {createHost(props.children, (slots) => {
+        indexRef.current = 0
+        return (
+          <ul {...props}>
+            {slots.map((slot) => {
+              if (slot.type === SelectItem) {
+                const itemProps = slot.props
+
+                return (
+                  <li
+                    key={slot.key}
+                    ref={slot.ref}
+                    {...itemProps}
+                    {...{
+                      'data-index': indexRef.current++,
+                      'aria-selected': slot === selected,
+                      onClick: () => {
+                        setSelected(slot)
+                      },
+                    }}
+                  />
+                )
+              }
+
+              return slot
+            })}
+          </ul>
+        )
+      })}
+    </div>
+  )
+}
+
+Select.Item = SelectItem
+Select.Divider = SelectDivider

src/__fixtures__/SimpleField.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+
+import { createHost, createSlot } from '../simple'
+
+const Description = (props: React.ComponentPropsWithoutRef<'span'>) => (
+  <span {...props} />
+)
+
+const FieldLabel = createSlot('label')
+const FieldInput = createSlot('input')
+const FieldDescription = createSlot(Description)
+const FieldIcon = createSlot('span')
+
+// const createFill = <P extends keyof typeof SlotComponents>(name: P) => {
+//   const FillComponent = React.forwardRef((props, ref) => {
+//     const Slots = useSlots()
+//     const [originalProps] = React.useState(() => Slots.getProps(name))
+
+//     React.useEffect(() => Slots.update(name, { ...props, ref }))
+//     React.useEffect(
+//       () => () => {
+//         originalProps ? Slots.update(name, originalProps) : Slots.unmount(name)
+//       },
+//       [Slots, originalProps]
+//     )
+
+//     return null
+//   }) as unknown as typeof SlotComponents[P]
+//   return FillComponent
+// }
+
+type FieldProps = React.ComponentPropsWithoutRef<'div'>
+
+export const Field = (props: FieldProps) => {
+  const id = ':r0:'
+  const descriptionId = ':r1:'
+
+  return createHost(props.children, (Slots) => {
+    const labelProps = Slots.getProps(FieldLabel)
+    const inputProps = Slots.getProps(FieldInput)
+    const descriptionProps = Slots.getProps(FieldDescription)
+    const iconProps = Slots.getProps(FieldIcon)
+    return (
+      <div {...props}>
+        {labelProps && <label {...labelProps} htmlFor={inputProps?.id || id} />}
+        {inputProps && (
+          <input
+            id={id}
+            aria-describedby={descriptionProps ? descriptionId : undefined}
+            {...inputProps}
+          />
+        )}
+        {(iconProps || descriptionProps) && (
+          <div>
+            {Slots.get(FieldIcon)}
+            {descriptionProps && (
+              <span {...descriptionProps} id={descriptionId} />
+            )}
+          </div>
+        )}
+      </div>
+    )
+  })
+}
+
+Field.Label = FieldLabel
+Field.Input = FieldInput
+Field.Description = FieldDescription
+Field.Icon = FieldIcon