@instructure/ui-options 10.2.1-snapshot-2 → 10.2.1-snapshot-11

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-2) (2024-08-30)
+## [10.2.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-11) (2024-08-30)
 
 **Note:** Version bump only for package @instructure/ui-options
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "10.2.1-snapshot-2",
+  "version": "10.2.1-snapshot-11",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,21 +23,21 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.1-snapshot-2",
-    "@instructure/ui-color-utils": "10.2.1-snapshot-2",
-    "@instructure/ui-test-locator": "10.2.1-snapshot-2",
-    "@instructure/ui-test-utils": "10.2.1-snapshot-2",
-    "@instructure/ui-themes": "10.2.1-snapshot-2"
+    "@instructure/ui-babel-preset": "10.2.1-snapshot-11",
+    "@instructure/ui-color-utils": "10.2.1-snapshot-11",
+    "@instructure/ui-test-locator": "10.2.1-snapshot-11",
+    "@instructure/ui-test-utils": "10.2.1-snapshot-11",
+    "@instructure/ui-themes": "10.2.1-snapshot-11"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "10.2.1-snapshot-2",
-    "@instructure/shared-types": "10.2.1-snapshot-2",
-    "@instructure/ui-icons": "10.2.1-snapshot-2",
-    "@instructure/ui-prop-types": "10.2.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.2.1-snapshot-2",
-    "@instructure/ui-testable": "10.2.1-snapshot-2",
-    "@instructure/ui-view": "10.2.1-snapshot-2",
+    "@instructure/emotion": "10.2.1-snapshot-11",
+    "@instructure/shared-types": "10.2.1-snapshot-11",
+    "@instructure/ui-icons": "10.2.1-snapshot-11",
+    "@instructure/ui-prop-types": "10.2.1-snapshot-11",
+    "@instructure/ui-react-utils": "10.2.1-snapshot-11",
+    "@instructure/ui-testable": "10.2.1-snapshot-11",
+    "@instructure/ui-view": "10.2.1-snapshot-11",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Options/README.md

@@ -88,80 +88,156 @@ type: example
 
 `Options` does not manage any state or react to any user interaction. The consuming component or app should listen for events on items and update the `variant` props accordingly via its own state.
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  constructor (props) {
-    super(props)
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        highlighted: -1,
+        selected: -1
+      }
+    }
 
-    this.state = {
-      highlighted: -1,
-      selected: -1
+    handleKeyDown = (event) => {
+      const { highlighted } = this.state
+      let index = highlighted
+
+      if (event.keyCode === 40 && highlighted < this.props.options.length - 1) {
+        // down arrow
+        event.preventDefault()
+        index = highlighted + 1
+      } else if (event.keyCode === 38 && highlighted > 0) {
+        // up arrow
+        event.preventDefault()
+        index = highlighted - 1
+      } else if (event.keyCode === 13 && highlighted > -1) {
+        // enter
+        this.setState({ selected: index })
+      }
+      this.setState({ highlighted: index })
+    }
+
+    handleFocus = (event, index) => {
+      this.setState({ highlighted: index })
+    }
+
+    handleMouseOver = (event, index) => {
+      this.setState({ highlighted: index })
     }
-  }
 
-  handleKeyDown = (event) => {
-    const { highlighted } = this.state
-    let index = highlighted
-
-    if (event.keyCode === 40 && highlighted < this.props.options.length - 1) {
-      // down arrow
-      event.preventDefault()
-      index = highlighted + 1
-    } else if (event.keyCode === 38 && highlighted > 0) {
-      // up arrow
-      event.preventDefault()
-      index = highlighted - 1
-    } else if (event.keyCode === 13 && highlighted > -1) {
-      // enter
+    handleClick = (event, index) => {
       this.setState({ selected: index })
     }
-    this.setState({ highlighted: index })
-  }
 
-  handleFocus = (event, index) => {
-    this.setState({ highlighted: index })
+    render() {
+      return (
+        <View display="block" width="300px" shadow="above">
+          <Options
+            onKeyDown={this.handleKeyDown}
+            onMouseOut={(e) => this.setState({ highlighted: -1 })}
+            tabIndex="0"
+          >
+            {this.props.options.map((option, index) => {
+              let variant = 'default'
+              if (this.state.highlighted === index) {
+                variant = 'highlighted'
+              } else if (this.state.selected === index) {
+                variant = 'selected'
+              }
+              return (
+                <Options.Item
+                  key={option}
+                  variant={variant}
+                  tabIndex="-1"
+                  onMouseOver={(e) => this.handleMouseOver(e, index)}
+                  onFocus={(e) => this.handleFocus(e, index)}
+                  onClick={(e) => this.handleClick(e, index)}
+                >
+                  {option}
+                </Options.Item>
+              )
+            })}
+          </Options>
+        </View>
+      )
+    }
   }
 
-  handleMouseOver = (event, index) => {
-    this.setState({ highlighted: index })
-  }
+  render(
+    <Example
+      options={[
+        'Option one',
+        'Option two',
+        'Option three',
+        'Option four',
+        'Option five'
+      ]}
+    />
+  )
+  ```
+
+- ```js
+  const Example = ({ options }) => {
+    const [highlighted, setHighlighted] = useState(-1)
+    const [selected, setSelected] = useState(-1)
+
+    const handleKeyDown = (event) => {
+      let index = highlighted
+
+      if (event.keyCode === 40 && highlighted < options.length - 1) {
+        // down arrow
+        event.preventDefault()
+        index = highlighted + 1
+      } else if (event.keyCode === 38 && highlighted > 0) {
+        // up arrow
+        event.preventDefault()
+        index = highlighted - 1
+      } else if (event.keyCode === 13 && highlighted > -1) {
+        // enter
+        setSelected(index)
+      }
 
-  handleClick = (event, index) => {
-    this.setState({ selected: index })
-  }
+      setHighlighted(index)
+    }
+
+    const handleFocus = (index) => {
+      setHighlighted(index)
+    }
+
+    const handleMouseOver = (index) => {
+      setHighlighted(index)
+    }
+
+    const handleClick = (index) => {
+      setSelected(index)
+    }
 
-  render () {
     return (
-      <View
-        display="block"
-        width="300px"
-        shadow="above"
-      >
+      <View display="block" width="300px" shadow="above">
         <Options
-          onKeyDown={this.handleKeyDown}
-          onMouseOut={(e) => this.setState({ highlighted: -1 })}
+          onKeyDown={handleKeyDown}
+          onMouseOut={() => setHighlighted(-1)}
           tabIndex="0"
         >
-          {this.props.options.map((option, index) => {
+          {options.map((option, index) => {
             let variant = 'default'
-            if (this.state.highlighted === index) {
+            if (highlighted === index) {
               variant = 'highlighted'
-            } else if (this.state.selected === index) {
+            } else if (selected === index) {
               variant = 'selected'
             }
+
             return (
               <Options.Item
                 key={option}
                 variant={variant}
                 tabIndex="-1"
-                onMouseOver={(e) => this.handleMouseOver(e, index)}
-                onFocus={(e) => this.handleFocus(e, index)}
-                onClick={(e) => this.handleClick(e, index)}
+                onMouseOver={(e) => handleMouseOver(index)}
+                onFocus={() => handleFocus(index)}
+                onClick={() => handleClick(index)}
               >
-                { option }
+                {option}
               </Options.Item>
             )
           })}
@@ -169,98 +245,210 @@ class Example extends React.Component {
       </View>
     )
   }
-}
-
-render(
-  <Example options={[
-    'Option one',
-    'Option two',
-    'Option three',
-    'Option four',
-    'Option five'
-  ]} />
-)
-```
+
+  render(
+    <Example
+      options={[
+        'Option one',
+        'Option two',
+        'Option three',
+        'Option four',
+        'Option five'
+      ]}
+    />
+  )
+  ```
 
 You can recolor the text and the background of the items for their `default`, `highlighted` and `selected` variants.
 
 By default, the icons in the `Option.Item` have the same color as the text. If you want to set the color of the icon separately, pass a function to the `renderBeforeLabel` or `renderAfterLabel` prop. This function will have a `props` parameter, so you can access the properties of that `Option.Item` (e.g. the current `variant`). The available props are: `[ variant, as, role, children ]`.
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  constructor (props) {
-    super(props)
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
 
-    this.state = {
-      highlighted: -1,
-      selected: -1
+      this.state = {
+        highlighted: -1,
+        selected: -1
+      }
+    }
+
+    handleKeyDown = (event) => {
+      const { highlighted } = this.state
+      let index = highlighted
+
+      if (event.keyCode === 40 && highlighted < this.props.options.length - 1) {
+        // down arrow
+        event.preventDefault()
+        index = highlighted + 1
+      } else if (event.keyCode === 38 && highlighted > 0) {
+        // up arrow
+        event.preventDefault()
+        index = highlighted - 1
+      } else if (event.keyCode === 13 && highlighted > -1) {
+        // enter
+        this.setState({ selected: index })
+      }
+      this.setState({ highlighted: index })
+    }
+
+    handleFocus = (event, index) => {
+      this.setState({ highlighted: index })
+    }
+
+    handleMouseOver = (event, index) => {
+      this.setState({ highlighted: index })
     }
-  }
 
-  handleKeyDown = (event) => {
-    const { highlighted } = this.state
-    let index = highlighted
-
-    if (event.keyCode === 40 && highlighted < this.props.options.length - 1) {
-      // down arrow
-      event.preventDefault()
-      index = highlighted + 1
-    } else if (event.keyCode === 38 && highlighted > 0) {
-      // up arrow
-      event.preventDefault()
-      index = highlighted - 1
-    } else if (event.keyCode === 13 && highlighted > -1) {
-      // enter
+    handleClick = (event, index) => {
       this.setState({ selected: index })
     }
-    this.setState({ highlighted: index })
-  }
 
-  handleFocus = (event, index) => {
-    this.setState({ highlighted: index })
+    render() {
+      return (
+        <View display="block" width="300px" shadow="above">
+          <Options
+            onKeyDown={this.handleKeyDown}
+            onMouseOut={(e) => this.setState({ highlighted: -1 })}
+            tabIndex="0"
+          >
+            {this.props.options.map((option, index) => {
+              let variant = 'default'
+              if (this.state.highlighted === index) {
+                variant = 'highlighted'
+              } else if (this.state.selected === index) {
+                variant = 'selected'
+              }
+              return (
+                <Options.Item
+                  key={option.label}
+                  variant={variant}
+                  tabIndex="-1"
+                  onMouseOver={(e) => this.handleMouseOver(e, index)}
+                  onFocus={(e) => this.handleFocus(e, index)}
+                  onClick={(e) => this.handleClick(e, index)}
+                  {...option.extraProps}
+                >
+                  {option.label}
+                </Options.Item>
+              )
+            })}
+          </Options>
+        </View>
+      )
+    }
   }
 
-  handleMouseOver = (event, index) => {
-    this.setState({ highlighted: index })
-  }
+  render(
+    <Example
+      options={[
+        {
+          label: 'Default item',
+          extraProps: {
+            renderBeforeLabel: IconCheckSolid
+          }
+        },
+        {
+          label: 'Text is green',
+          extraProps: {
+            renderBeforeLabel: IconCheckSolid,
+            themeOverride: { color: '#0B874B' }
+          }
+        },
+        {
+          label: 'Highlighted text is black',
+          extraProps: {
+            renderBeforeLabel: IconCheckSolid,
+            themeOverride: { highlightedLabelColor: '#2D3B45' }
+          }
+        },
+        {
+          label: 'Highlighted background is purple',
+          extraProps: {
+            renderBeforeLabel: IconCheckSolid,
+            themeOverride: { highlightedBackground: '#BF32A4' }
+          }
+        },
+        {
+          label: 'Only the icon is red',
+          extraProps: {
+            renderBeforeLabel: (props) => {
+              return (
+                <IconCheckSolid
+                  {...(props.variant === 'default' && { color: 'warning' })}
+                />
+              )
+            }
+          }
+        }
+      ]}
+    />
+  )
+  ```
+
+- ```js
+  const Example = ({ options }) => {
+    const [highlighted, setHighlighted] = useState(-1)
+    const [selected, setSelected] = useState(-1)
+
+    const handleKeyDown = (event) => {
+      let index = highlighted
+
+      if (event.keyCode === 40 && highlighted < options.length - 1) {
+        // down arrow
+        event.preventDefault()
+        index = highlighted + 1
+      } else if (event.keyCode === 38 && highlighted > 0) {
+        // up arrow
+        event.preventDefault()
+        index = highlighted - 1
+      } else if (event.keyCode === 13 && highlighted > -1) {
+        // enter
+        setSelected(index)
+      }
 
-  handleClick = (event, index) => {
-    this.setState({ selected: index })
-  }
+      setHighlighted(index)
+    }
+
+    const handleFocus = (event, index) => {
+      setHighlighted(index)
+    }
+
+    const handleMouseOver = (event, index) => {
+      setHighlighted(index)
+    }
+
+    const handleClick = (event, index) => {
+      setSelected(index)
+    }
 
-  render () {
     return (
-      <View
-        display="block"
-        width="300px"
-        shadow="above"
-      >
+      <View display="block" width="300px" shadow="above">
         <Options
-          onKeyDown={this.handleKeyDown}
-          onMouseOut={(e) => this.setState({ highlighted: -1 })}
+          onKeyDown={handleKeyDown}
+          onMouseOut={() => setHighlighted(-1)}
           tabIndex="0"
         >
-          {this.props.options.map((option, index) => {
+          {options.map((option, index) => {
             let variant = 'default'
-            if (this.state.highlighted === index) {
+            if (highlighted === index) {
               variant = 'highlighted'
-            } else if (this.state.selected === index) {
+            } else if (selected === index) {
               variant = 'selected'
             }
+
             return (
               <Options.Item
                 key={option.label}
                 variant={variant}
                 tabIndex="-1"
-                onMouseOver={(e) => this.handleMouseOver(e, index)}
-                onFocus={(e) => this.handleFocus(e, index)}
-                onClick={(e) => this.handleClick(e, index)}
+                onMouseOver={(e) => handleMouseOver(e, index)}
+                onFocus={(e) => handleFocus(e, index)}
+                onClick={(e) => handleClick(e, index)}
                 {...option.extraProps}
               >
-                { option.label }
+                {option.label}
               </Options.Item>
             )
           })}
@@ -268,80 +456,132 @@ class Example extends React.Component {
       </View>
     )
   }
-}
-
-render(
-  <Example options={[
-    {
-      label: 'Default item',
-      extraProps: {
-        renderBeforeLabel: IconCheckSolid
-      }
-    },
-    {
-      label: 'Text is green',
-      extraProps: {
-        renderBeforeLabel: IconCheckSolid,
-        themeOverride: { color: "#0B874B" }
-      }
-    },
-    {
-      label: 'Highlighted text is black',
-      extraProps: {
-        renderBeforeLabel: IconCheckSolid,
-        themeOverride: { highlightedLabelColor: "#2D3B45" }
 
-      }
-    },
-    {
-      label: 'Highlighted background is purple',
-      extraProps: {
-        renderBeforeLabel: IconCheckSolid,
-        themeOverride: { highlightedBackground: "#BF32A4" }
-      }
-    },
-    {
-      label: 'Only the icon is red',
-      extraProps: {
-        renderBeforeLabel: (props) => {
-          return <IconCheckSolid
-            {...(props.variant === "default" && { color: 'warning' }) }
-          />
+  render(
+    <Example
+      options={[
+        {
+          label: 'Default item',
+          extraProps: {
+            renderBeforeLabel: IconCheckSolid
+          }
+        },
+        {
+          label: 'Text is green',
+          extraProps: {
+            renderBeforeLabel: IconCheckSolid,
+            themeOverride: { color: '#0B874B' }
+          }
+        },
+        {
+          label: 'Highlighted text is black',
+          extraProps: {
+            renderBeforeLabel: IconCheckSolid,
+            themeOverride: { highlightedLabelColor: '#2D3B45' }
+          }
+        },
+        {
+          label: 'Highlighted background is purple',
+          extraProps: {
+            renderBeforeLabel: IconCheckSolid,
+            themeOverride: { highlightedBackground: '#BF32A4' }
+          }
+        },
+        {
+          label: 'Only the icon is red',
+          extraProps: {
+            renderBeforeLabel: (props) => {
+              return (
+                <IconCheckSolid
+                  {...(props.variant === 'default' && { color: 'warning' })}
+                />
+              )
+            }
+          }
         }
-      }
-    }
-  ]} />
-)
-```
+      ]}
+    />
+  )
+  ```
 
 Additional/secondary text can be added via the `description` prop, and the ARIA role of it can be set with the `descriptionRole` prop.
 
 For longer, multi-line options the problem of the vertical alignment comes up. The content of the `renderBeforeLabel` and `renderAfterLabel` props are vertically centered by default. This can be changed with the `beforeLabelContentVAlign` and `afterLabelContentVAlign` props.
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  constructor(props) {
-    super(props)
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
 
-    this.state = {
-      highlighted: -1
+      this.state = {
+        highlighted: -1
+      }
+    }
+
+    handleMouseOver = (index) => {
+      this.setState({ highlighted: index })
     }
-  }
 
-  handleMouseOver = (index) => {
-    this.setState({ highlighted: index })
+    render() {
+      return (
+        <View display="block" width="300px">
+          <Options onMouseOut={(e) => this.setState({ highlighted: -1 })}>
+            <Options.Item
+              onMouseOver={(e) => this.handleMouseOver(1)}
+              variant={this.state.highlighted === 1 ? 'highlighted' : 'default'}
+              description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
+              renderBeforeLabel={IconCheckSolid}
+              renderAfterLabel={IconArrowOpenEndSolid}
+              beforeLabelContentVAlign="start"
+              afterLabelContentVAlign="start"
+            >
+              Option one
+            </Options.Item>
+            <Options.Item
+              onMouseOver={(e) => this.handleMouseOver(2)}
+              variant={this.state.highlighted === 2 ? 'highlighted' : 'default'}
+              description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
+              renderBeforeLabel={IconCheckSolid}
+              renderAfterLabel={IconArrowOpenEndSolid}
+              beforeLabelContentVAlign="center"
+              afterLabelContentVAlign="center"
+            >
+              Option two
+            </Options.Item>
+            <Options.Item
+              onMouseOver={(e) => this.handleMouseOver(3)}
+              variant={this.state.highlighted === 3 ? 'highlighted' : 'default'}
+              description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
+              renderBeforeLabel={IconCheckSolid}
+              renderAfterLabel={IconArrowOpenEndSolid}
+              beforeLabelContentVAlign="end"
+              afterLabelContentVAlign="end"
+            >
+              Option three
+            </Options.Item>
+          </Options>
+        </View>
+      )
+    }
   }
 
-  render() {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [highlighted, setHighlighted] = useState(-1)
+
+    const handleMouseOver = (index) => {
+      setHighlighted(index)
+    }
+
     return (
       <View display="block" width="300px">
-        <Options onMouseOut={(e) => this.setState({ highlighted: -1 })}>
+        <Options onMouseOut={() => setHighlighted(-1)}>
           <Options.Item
-            onMouseOver={(e) => this.handleMouseOver(1)}
-            variant={this.state.highlighted === 1 ? 'highlighted' : 'default'}
+            onMouseOver={() => handleMouseOver(1)}
+            variant={highlighted === 1 ? 'highlighted' : 'default'}
             description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
             renderBeforeLabel={IconCheckSolid}
             renderAfterLabel={IconArrowOpenEndSolid}
@@ -351,8 +591,8 @@ class Example extends React.Component {
             Option one
           </Options.Item>
           <Options.Item
-            onMouseOver={(e) => this.handleMouseOver(2)}
-            variant={this.state.highlighted === 2 ? 'highlighted' : 'default'}
+            onMouseOver={() => handleMouseOver(2)}
+            variant={highlighted === 2 ? 'highlighted' : 'default'}
             description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
             renderBeforeLabel={IconCheckSolid}
             renderAfterLabel={IconArrowOpenEndSolid}
@@ -362,8 +602,8 @@ class Example extends React.Component {
             Option two
           </Options.Item>
           <Options.Item
-            onMouseOver={(e) => this.handleMouseOver(3)}
-            variant={this.state.highlighted === 3 ? 'highlighted' : 'default'}
+            onMouseOver={() => handleMouseOver(3)}
+            variant={highlighted === 3 ? 'highlighted' : 'default'}
             description="Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa."
             renderBeforeLabel={IconCheckSolid}
             renderAfterLabel={IconArrowOpenEndSolid}
@@ -376,56 +616,100 @@ class Example extends React.Component {
       </View>
     )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 Providing a `href` prop will render the option as `<a>` link element.
 
 **WARNING!** Since `Options` is a view-only component, you have to make sure it is accessible, and if set the variant to disabled, disable the links as well!
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  constructor(props) {
-    super(props)
+- ```js
+  class Example extends React.Component {
+    constructor(props) {
+      super(props)
 
-    this.state = {
-      highlighted: -1
+      this.state = {
+        highlighted: -1
+      }
     }
-  }
 
-  handleMouseOver = (index) => {
-    this.setState({ highlighted: index })
+    handleMouseOver = (index) => {
+      this.setState({ highlighted: index })
+    }
+
+    render() {
+      return (
+        <View display="block" width="300px">
+          <Options onMouseOut={(e) => this.setState({ highlighted: -1 })}>
+            <Options.Item
+              onMouseOver={(e) => this.handleMouseOver(1)}
+              variant={this.state.highlighted === 1 ? 'highlighted' : 'default'}
+              href="/"
+            >
+              Link one
+            </Options.Item>
+            <Options.Item
+              onMouseOver={(e) => this.handleMouseOver(2)}
+              variant={this.state.highlighted === 2 ? 'highlighted' : 'default'}
+              href="/"
+            >
+              Link two
+            </Options.Item>
+            <Options.Item
+              onMouseOver={(e) => this.handleMouseOver(3)}
+              variant={this.state.highlighted === 3 ? 'highlighted' : 'default'}
+              variant="disabled"
+              aria-disabled="true"
+              onClick={(e) => {
+                e.preventDefault()
+              }}
+              href="/"
+            >
+              Link three
+            </Options.Item>
+          </Options>
+        </View>
+      )
+    }
   }
 
-  render() {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [highlighted, setHighlighted] = useState(-1)
+
+    const handleMouseOver = (index) => {
+      setHighlighted(index)
+    }
+
     return (
       <View display="block" width="300px">
-        <Options onMouseOut={(e) => this.setState({ highlighted: -1 })}>
+        <Options onMouseOut={() => setHighlighted(-1)}>
           <Options.Item
-            onMouseOver={(e) => this.handleMouseOver(1)}
-            variant={this.state.highlighted === 1 ? 'highlighted' : 'default'}
+            onMouseOver={() => handleMouseOver(1)}
+            variant={highlighted === 1 ? 'highlighted' : 'default'}
             href="/"
           >
             Link one
           </Options.Item>
           <Options.Item
-            onMouseOver={(e) => this.handleMouseOver(2)}
-            variant={this.state.highlighted === 2 ? 'highlighted' : 'default'}
+            onMouseOver={() => handleMouseOver(2)}
+            variant={highlighted === 2 ? 'highlighted' : 'default'}
             href="/"
           >
             Link two
           </Options.Item>
           <Options.Item
-            onMouseOver={(e) => this.handleMouseOver(3)}
-            variant={this.state.highlighted === 3 ? 'highlighted' : 'default'}
+            onMouseOver={() => handleMouseOver(3)}
+            variant={highlighted === 3 ? 'highlighted' : 'default'}
             variant="disabled"
             aria-disabled="true"
-            onClick={(e) => { e.preventDefault() }}
+            onClick={(e) => {
+              e.preventDefault()
+            }}
             href="/"
           >
             Link three
@@ -434,7 +718,6 @@ class Example extends React.Component {
       </View>
     )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```