update documentation to reflect changes to setProps functions and library version

docs/tutorials/dropdown.md

@@ -152,7 +152,7 @@ Error found:
 in type synonym ChildQuery
 ```
 
-The compiler has noticed that `#!hs ChildQuery`, a type synonym, is partially applied. That's because `#!hs Select.Query`, itself a type synonym, takes several arguments as described in the [module documentation on Pursuit](https://pursuit.purescript.org/packages/purescript-halogen-select/2.0.0/docs/Select#t:Query). Let's walk through each one:
+The compiler has noticed that `#!hs ChildQuery`, a type synonym, is partially applied. That's because `#!hs Select.Query`, itself a type synonym, takes several arguments as described in the [module documentation on Pursuit](https://pursuit.purescript.org/packages/purescript-halogen-select/3.0.0/docs/Select#t:Query). Let's walk through each one:
 
 ```hs
 type ChildQuery o item = Select.Query o item
@@ -271,7 +271,7 @@ dropdown st =
   ]
 ```
 
-From this, we can see that we need to use the state type from `Select` to drive our render function, not the state from our parent component. Will our function still work? Let's look at [`Select`'s state type in the module documentation](https://pursuit.purescript.org/packages/purescript-halogen-select/2.0.0/docs/Select#t:State) to see what we have available:
+From this, we can see that we need to use the state type from `Select` to drive our render function, not the state from our parent component. Will our function still work? Let's look at [`Select`'s state type in the module documentation](https://pursuit.purescript.org/packages/purescript-halogen-select/3.0.0/docs/Select#t:State) to see what we have available:
 
 ```hs
 type State item =
@@ -279,7 +279,7 @@ type State item =
   , search           :: String
   , debounceTime     :: Milliseconds
   , debouncer        :: Maybe Debouncer
-  , inputElement     :: Maybe HTMLElement
+  , inputRef         :: RefLabel
   , items            :: Array item
   , visibility       :: Visibility
   , highlightedIndex :: Maybe Int
@@ -398,13 +398,13 @@ dropdown childState =
   ]
 ```
 
-Finally, we can make sure that our button toggles the menu on and off, captures keyboard events, can be tabbed to, and all sorts of other stuff with the `#!hs setToggleProps` function.
+Finally, we can make sure that our button toggles the menu on and off, captures keyboard events, can be tabbed to, and all sorts of other stuff with the `#!hs setToggleProps` function. Note that this function takes the Select component's state as its first argument, which is necessary for Select to maintain a reference to the toggling element.
 
 ```hs
 dropdown childState =
   HH.div_
   [ HH.button
-    (Setters.setToggleProps [])
+    (Setters.setToggleProps childState [])
     [ HH.text $ fromMaybe "Click me to view some items" parentState.selectedItem ]
   , case childState.visibility of
       Select.Off -> HH.text ""
@@ -464,7 +464,7 @@ Error found in module Component:
 in type constructor Query
 ```
 
-This looks similar to the type error we got when we tried to just use `Select.Query` in a type synonym. We need to provide a `#!hs Type` to `#!hs HandleSelect`, but `#!hs Select.Message` is still awaiting 2 arguments, the first of which is *itself* awaiting an argument! Let's go look at the [module documentation for `Select.Message`](https://pursuit.purescript.org/packages/purescript-halogen-select/2.0.0/docs/Select#t:Message).
+This looks similar to the type error we got when we tried to just use `Select.Query` in a type synonym. We need to provide a `#!hs Type` to `#!hs HandleSelect`, but `#!hs Select.Message` is still awaiting 2 arguments, the first of which is *itself* awaiting an argument! Let's go look at the [module documentation for `Select.Message`](https://pursuit.purescript.org/packages/purescript-halogen-select/3.0.0/docs/Select#t:Message).
 
 ```hs
 data Message o item
@@ -650,7 +650,7 @@ If you'd like to use this component as a starting point from which to build your
           dropdown childState =
             HH.div_
             [ HH.button
-              (Setters.setToggleProps [])
+              (Setters.setToggleProps childState [])
               [ HH.text $ fromMaybe "Click me to view some items" parentState.selectedItem ]
             , case childState.visibility of
                 Select.Off -> HH.text ""

docs/tutorials/typeahead.md

@@ -117,7 +117,6 @@ data QueryF o item a
   = Search String a
   | Highlight Target a
   | Select Int a
-  | CaptureRef ET.Event a
   | Focus Boolean a
   | Key KE.KeyboardEvent a
   | PreventClick ME.MouseEvent a
@@ -183,7 +182,7 @@ render st =
 	[ HH.slot unit Select.component ?input (HE.input HandleSelect) ]
 ```
 
-With that out of the way, we can turn to the component's input type. Here's what we're required to fill in, as per the [`Select` module documentation](https://pursuit.purescript.org/packages/purescript-halogen-select/2.0.0/docs/Select#t:Input):
+With that out of the way, we can turn to the component's input type. Here's what we're required to fill in, as per the [`Select` module documentation](https://pursuit.purescript.org/packages/purescript-halogen-select/3.0.0/docs/Select#t:Input):
 
 ```hs
 -- | Text-driven inputs will operate like a normal search-driven selection component.
@@ -273,7 +272,7 @@ type State item =
   , search           :: String
   , debounceTime     :: Milliseconds
   , debouncer        :: Maybe Debouncer
-  , inputElement     :: Maybe HTMLElement
+  , inputRef         :: RefLabel
   , items            :: Array item
   , visibility       :: Visibility
   , highlightedIndex :: Maybe Int
@@ -333,7 +332,7 @@ initialState = const
 
 Now that we've got a usable `#!hs State` type, let's turn to our queries. Queries are the computations available to the component, so they're the place where we ought to think about what the typeahead should *do*, rather than just how it should render.
 
-Just like `#!hs State`, when we write our own `#!hs Query` type on top of `Select`, we should consider what is already available in the component. As usual, we'll turn to the [module documentation](https://pursuit.purescript.org/packages/purescript-halogen-select/2.0.0/docs/Select#t:QueryF) to look at our available queries. I'd recommend scrolling through the available functions to get a glimpse of what `Select` offers, but we'll skip to the main points here.
+Just like `#!hs State`, when we write our own `#!hs Query` type on top of `Select`, we should consider what is already available in the component. As usual, we'll turn to the [module documentation](https://pursuit.purescript.org/packages/purescript-halogen-select/3.0.0/docs/Select#t:QueryF) to look at our available queries. I'd recommend scrolling through the available functions to get a glimpse of what `Select` offers, but we'll skip to the main points here.
 
 `Select` is going to manage all the keyboard events, text input, debouncing, moving the highlighted index, and so on. On top of that, we'll need to add some extra functionality: the ability to remove items that have already been selected, and the ability to fetch new items when the user performs a search. We'll at least need two queries to handle these two features.
 
@@ -583,7 +582,7 @@ Let's move on to the input field. This field needs to be controlled by `Select`
 
 ```hs
 -- The text input field that will capture key events
-renderInput = HH.input ( Setters.setInputProps [] )
+renderInput = HH.input ( Setters.setInputProps childState [] )
 ```
 
 That's it! Now we have all the key events wired up for you. You could embed your own queries here, or add CSS, or whatever you want and the behavior will still work just fine.
@@ -767,7 +766,7 @@ If you'd like to use this component as a starting point from which to build your
               )
 
             -- The text input field that will capture key events
-            renderInput = HH.input ( Setters.setInputProps [] )
+            renderInput = HH.input ( Setters.setInputProps childState [] )
 
             -- The parent element holding the items  container
             renderContainer = case childState.visibility of