@instructure/ui-popover 10.2.3-snapshot-1 → 10.2.3-snapshot-3

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.3-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-1) (2024-09-17)
+## [10.2.3-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-3) (2024-09-20)
 
 **Note:** Version bump only for package @instructure/ui-popover
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-popover",
-  "version": "10.2.3-snapshot-1",
+  "version": "10.2.3-snapshot-3",
   "description": "A component for hiding or showing content based on user interaction.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,29 +24,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.3-snapshot-1",
-    "@instructure/emotion": "10.2.3-snapshot-1",
-    "@instructure/shared-types": "10.2.3-snapshot-1",
-    "@instructure/ui-a11y-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-dialog": "10.2.3-snapshot-1",
-    "@instructure/ui-dom-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-i18n": "10.2.3-snapshot-1",
-    "@instructure/ui-position": "10.2.3-snapshot-1",
-    "@instructure/ui-prop-types": "10.2.3-snapshot-1",
-    "@instructure/ui-react-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-testable": "10.2.3-snapshot-1",
-    "@instructure/ui-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-view": "10.2.3-snapshot-1",
-    "@instructure/uid": "10.2.3-snapshot-1",
+    "@instructure/console": "10.2.3-snapshot-3",
+    "@instructure/emotion": "10.2.3-snapshot-3",
+    "@instructure/shared-types": "10.2.3-snapshot-3",
+    "@instructure/ui-a11y-utils": "10.2.3-snapshot-3",
+    "@instructure/ui-dialog": "10.2.3-snapshot-3",
+    "@instructure/ui-dom-utils": "10.2.3-snapshot-3",
+    "@instructure/ui-i18n": "10.2.3-snapshot-3",
+    "@instructure/ui-position": "10.2.3-snapshot-3",
+    "@instructure/ui-prop-types": "10.2.3-snapshot-3",
+    "@instructure/ui-react-utils": "10.2.3-snapshot-3",
+    "@instructure/ui-testable": "10.2.3-snapshot-3",
+    "@instructure/ui-utils": "10.2.3-snapshot-3",
+    "@instructure/ui-view": "10.2.3-snapshot-3",
+    "@instructure/uid": "10.2.3-snapshot-3",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.3-snapshot-1",
-    "@instructure/ui-color-utils": "10.2.3-snapshot-1",
-    "@instructure/ui-test-locator": "10.2.3-snapshot-1",
-    "@instructure/ui-test-queries": "10.2.3-snapshot-1",
-    "@instructure/ui-test-utils": "10.2.3-snapshot-1",
+    "@instructure/ui-babel-preset": "10.2.3-snapshot-3",
+    "@instructure/ui-color-utils": "10.2.3-snapshot-3",
+    "@instructure/ui-test-locator": "10.2.3-snapshot-3",
+    "@instructure/ui-test-queries": "10.2.3-snapshot-3",
+    "@instructure/ui-test-utils": "10.2.3-snapshot-3",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",

package/src/Popover/README.md

@@ -6,32 +6,105 @@ Popovers hide or show content as a result of user interaction, such as clicking,
 
 #### Uncontrolled Popover
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  state = {
-    withArrow: true,
-    shouldAlignArrow: true,
-    color : "primary"
+- ```js
+  class Example extends React.Component {
+    state = {
+      withArrow: true,
+      shouldAlignArrow: true,
+      color: 'primary'
+    }
+    toggleWithArrow = (event) =>
+      this.setState({ withArrow: !this.state.withArrow })
+    toggleAlignArrow = (event) =>
+      this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
+    changeColor = (event, color) => {
+      this.setState({ color })
+    }
+    render() {
+      return (
+        <>
+          <FormFieldGroup description="Uncontrolled Popover Example">
+            <Checkbox
+              checked={this.state.withArrow}
+              label="With Arrow"
+              onChange={this.toggleWithArrow}
+            />
+            <Checkbox
+              checked={this.state.shouldAlignArrow}
+              label="Align Arrow"
+              onChange={this.toggleAlignArrow}
+            />
+          </FormFieldGroup>
+          <View display="block" margin="small none">
+            <RadioInputGroup
+              name="color"
+              defaultValue="primary"
+              description="Color:"
+              variant="toggle"
+              size="small"
+              onChange={this.changeColor}
+            >
+              <RadioInput label="Primary" value="primary" />
+              <RadioInput label="Primary inverse" value="primary-inverse" />
+            </RadioInputGroup>
+          </View>
+          <View display="block" as="div" margin="small">
+            <Popover
+              renderTrigger={
+                <Link aria-describedby="tip">Hover or focus me</Link>
+              }
+              shouldRenderOffscreen
+              shouldReturnFocus={false}
+              withArrow={this.state.withArrow}
+              shouldAlignArrow={this.state.shouldAlignArrow}
+              color={this.state.color}
+              placement="top end"
+              onPositioned={() => console.log('positioned')}
+              onShowContent={() => console.log('showing')}
+              onHideContent={() => console.log('hidden')}
+            >
+              <View padding="x-small" display="block" as="div" id="tip">
+                Hello World
+              </View>
+            </Popover>
+          </View>
+        </>
+      )
+    }
   }
-  toggleWithArrow = (event) => this.setState({ withArrow: !this.state.withArrow })
-  toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
-  changeColor = (event,color) =>  {this.setState({color})}
-  render() {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [withArrow, setWithArrow] = useState(true)
+    const [shouldAlignArrow, setShouldAlignArrow] = useState(true)
+    const [color, setColor] = useState('primary')
+
+    const toggleWithArrow = () => {
+      setWithArrow((withArrow) => !withArrow)
+    }
+
+    const toggleAlignArrow = () => {
+      setShouldAlignArrow((shouldAlignArrow) => !shouldAlignArrow)
+    }
+
+    const changeColor = (event, color) => {
+      setColor(color)
+    }
+
     return (
       <>
         <FormFieldGroup description="Uncontrolled Popover Example">
           <Checkbox
-            checked={this.state.withArrow}
+            checked={withArrow}
             label="With Arrow"
-            onChange={this.toggleWithArrow}
+            onChange={toggleWithArrow}
           />
           <Checkbox
-            checked={this.state.shouldAlignArrow}
+            checked={shouldAlignArrow}
             label="Align Arrow"
-            onChange={this.toggleAlignArrow}
+            onChange={toggleAlignArrow}
           />
         </FormFieldGroup>
         <View display="block" margin="small none">
@@ -41,25 +114,23 @@ class Example extends React.Component {
             description="Color:"
             variant="toggle"
             size="small"
-            onChange={this.changeColor} >
-            <RadioInput label="Primary" value="primary"/>
+            onChange={changeColor}
+          >
+            <RadioInput label="Primary" value="primary" />
             <RadioInput label="Primary inverse" value="primary-inverse" />
           </RadioInputGroup>
         </View>
         <View display="block" as="div" margin="small">
           <Popover
             renderTrigger={
-              <Link aria-describedby="tip">
-                Hover or focus me
-              </Link>
+              <Link aria-describedby="tip">Hover or focus me</Link>
             }
             shouldRenderOffscreen
             shouldReturnFocus={false}
-            withArrow={this.state.withArrow}
-            shouldAlignArrow={this.state.shouldAlignArrow}
-            color = {this.state.color}
-            placement = "top end"
-            mountNode={() => document.getElementById('main')}
+            withArrow={withArrow}
+            shouldAlignArrow={shouldAlignArrow}
+            color={color}
+            placement="top end"
             onPositioned={() => console.log('positioned')}
             onShowContent={() => console.log('showing')}
             onHideContent={() => console.log('hidden')}
@@ -72,46 +143,95 @@ class Example extends React.Component {
       </>
     )
   }
-}
-render(<Example />)
-
-```
+  render(<Example />)
+  ```
 
 #### Controlled Popover
 
-```js
----
-type: example
----
-class Example extends React.Component {
+- ```js
+  class Example extends React.Component {
+    state = {
+      isShowingContent: false
+    }
+
+    renderCloseButton() {
+      return (
+        <CloseButton
+          placement="end"
+          offset="small"
+          onClick={() => this.setState({ isShowingContent: false })}
+          screenReaderLabel="Close"
+        />
+      )
+    }
 
-  state = {
-    isShowingContent: false
+    render() {
+      return (
+        <View>
+          <Popover
+            renderTrigger={<Button>Sign In</Button>}
+            isShowingContent={this.state.isShowingContent}
+            onShowContent={(e) => {
+              this.setState({ isShowingContent: true })
+            }}
+            onHideContent={(e, { documentClick }) => {
+              this.setState({ isShowingContent: false })
+            }}
+            on="click"
+            screenReaderLabel="Popover Dialog Example"
+            shouldContainFocus
+            shouldReturnFocus
+            shouldCloseOnDocumentClick
+            offsetY="16px"
+          >
+            <View padding="medium" display="block" as="form">
+              {this.renderCloseButton()}
+              <FormFieldGroup description="Log In">
+                <TextInput
+                  renderLabel="Username"
+                  inputRef={(el) => {
+                    if (el) {
+                      this._username = el
+                    }
+                  }}
+                />
+                <TextInput renderLabel="Password" type="password" />
+              </FormFieldGroup>
+            </View>
+          </Popover>
+        </View>
+      )
+    }
   }
 
+  render(<Example />)
+  ```
 
-  renderCloseButton () {
-    return (
+- ```js
+  const Example = () => {
+    const [isShowingContent, setIsShowingContent] = useState(false)
+
+    const usernameRef = useRef(null)
+
+    const renderCloseButton = () => (
       <CloseButton
         placement="end"
         offset="small"
-        onClick={() => this.setState({ isShowingContent: false })}
+        onClick={() => setIsShowingContent(false)}
         screenReaderLabel="Close"
       />
     )
-  }
 
-  render () {
     return (
       <View>
         <Popover
           renderTrigger={<Button>Sign In</Button>}
-          isShowingContent={this.state.isShowingContent}
-          onShowContent={(e) => {
-            this.setState({ isShowingContent: true })
+          isShowingContent={isShowingContent}
+          onShowContent={() => {
+            setIsShowingContent(true)
           }}
-          onHideContent={(e, { documentClick }) => {
-            this.setState({ isShowingContent: false })
+          onHideContent={() => {
+            setIsShowingContent(false)
           }}
           on="click"
           screenReaderLabel="Popover Dialog Example"
@@ -119,12 +239,11 @@ class Example extends React.Component {
           shouldReturnFocus
           shouldCloseOnDocumentClick
           offsetY="16px"
-          mountNode={() => document.getElementById('main')}
         >
           <View padding="medium" display="block" as="form">
-            {this.renderCloseButton()}
+            {renderCloseButton()}
             <FormFieldGroup description="Log In">
-              <TextInput renderLabel="Username" inputRef={(el) => { if (el) { this._username = el } }}/>
+              <TextInput renderLabel="Username" ref={usernameRef} />
               <TextInput renderLabel="Password" type="password" />
             </FormFieldGroup>
           </View>
@@ -132,136 +251,252 @@ class Example extends React.Component {
       </View>
     )
   }
-}
-
-render(<Example />)
 
-```
+  render(<Example />)
+  ```
 
 > Note: Popover can act as a dialog with a close button. With the `shouldContainFocus` property set, it will trap focus inside the Popover.
 
 The `shouldAlignArrow` prop will offset the popover content to adjust for the offset of the arrow. This will override offsetX for start/end placements, and will override offsetY for top/bottom placements.
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  state={
-    shouldAlignArrow : true
+- ```js
+  class Example extends React.Component {
+    state = {
+      shouldAlignArrow: true
+    }
+    toggleAlignArrow = (event) =>
+      this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
+
+    render() {
+      return (
+        <>
+          <FormFieldGroup description="Align Arrow Example">
+            <Checkbox
+              checked={this.state.shouldAlignArrow}
+              label="Align Arrow"
+              onChange={this.toggleAlignArrow}
+            />
+          </FormFieldGroup>
+          <div
+            style={{
+              paddingBottom: 25,
+              display: 'flex',
+              justifyContent: 'center'
+            }}
+          >
+            <Popover
+              renderTrigger={
+                <div
+                  style={{
+                    display: 'inline-block',
+                    height: '3px',
+                    width: '3px',
+                    background: 'blue'
+                  }}
+                />
+              }
+              isShowingContent={true}
+              placement="end top"
+              shouldAlignArrow={this.state.shouldAlignArrow}
+            >
+              <Heading>
+                Small
+                <br />
+                Target
+              </Heading>
+            </Popover>
+          </div>
+        </>
+      )
+    }
   }
-  toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
 
-  render () {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [shouldAlignArrow, setShouldAlignArrow] = useState(true)
+
+    const toggleAlignArrow = () => {
+      setShouldAlignArrow((shouldAlignArrow) => !shouldAlignArrow)
+    }
+
     return (
       <>
-      <FormFieldGroup description="Align Arrow Example">
-        <Checkbox
-          checked={this.state.shouldAlignArrow}
-          label="Align Arrow"
-          onChange={this.toggleAlignArrow}
-        />
-      </FormFieldGroup>
-      <div style={{ paddingBottom: 25, display: 'flex', justifyContent: 'center' }}>
-        <Popover
-          renderTrigger={<div style={{display: 'inline-block', height: '3px', width: '3px', background: 'blue'}}/>}
-          isShowingContent={true}
-          placement="end top"
-          shouldAlignArrow={this.state.shouldAlignArrow}
-          mountNode={() => document.getElementById('main')}
+        <FormFieldGroup description="Align Arrow Example">
+          <Checkbox
+            checked={shouldAlignArrow}
+            label="Align Arrow"
+            onChange={toggleAlignArrow}
+          />
+        </FormFieldGroup>
+        <div
+          style={{
+            paddingBottom: 25,
+            display: 'flex',
+            justifyContent: 'center'
+          }}
         >
-          <Heading>Small<br/>Target</Heading>
-        </Popover>
-      </div>
+          <Popover
+            renderTrigger={
+              <div
+                style={{
+                  display: 'inline-block',
+                  height: '3px',
+                  width: '3px',
+                  background: 'blue'
+                }}
+              />
+            }
+            isShowingContent={true}
+            placement="end top"
+            shouldAlignArrow={shouldAlignArrow}
+          >
+            <Heading>
+              Small
+              <br />
+              Target
+            </Heading>
+          </Popover>
+        </div>
       </>
     )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 If the `Popover` contains focusable content and should be rendered in the focus order immediately after the trigger, it can be configured using the `shouldFocusContentOnTriggerBlur` prop. Note that the content must be rendered in the correct order in the document (using the `mountNode` prop).
 
-```js
----
-type: example
----
-class Example extends React.Component {
-
-  state = {
-    isShowingContent: false
+- ```js
+  class Example extends React.Component {
+    state = {
+      isShowingContent: false
+    }
+
+    render() {
+      return (
+        <div
+          style={{
+            paddingBottom: 50,
+            display: 'flex',
+            justifyContent: 'center'
+          }}
+        >
+          <Popover
+            renderTrigger={<Button margin="small">Focus Me</Button>}
+            isShowingContent={this.state.isShowingContent}
+            onShowContent={(e) => {
+              this.setState({ isShowingContent: true })
+            }}
+            onHideContent={(e) => {
+              this.setState({ isShowingContent: false })
+            }}
+            on={['hover', 'focus']}
+            shouldContainFocus={false}
+            shouldFocusContentOnTriggerBlur={false}
+          >
+            <Button margin="small">Focus Me When Trigger Blurs</Button>
+          </Popover>
+          <div id="container" />
+          <Button id="next" margin="small">
+            Focus Me Next
+          </Button>
+        </div>
+      )
+    }
   }
 
-  render () {
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [isShowingContent, setIsShowingContent] = useState(false)
+
     return (
-      <div style={{ paddingBottom: 50, display: 'flex', justifyContent: 'center' }}>
+      <div
+        style={{ paddingBottom: 50, display: 'flex', justifyContent: 'center' }}
+      >
         <Popover
           renderTrigger={<Button margin="small">Focus Me</Button>}
-          isShowingContent={this.state.isShowingContent}
-          onShowContent={(e) => {
-            this.setState({ isShowingContent: true })
+          isShowingContent={isShowingContent}
+          onShowContent={() => {
+            setIsShowingContent(true)
           }}
-          onHideContent={(e) => {
-            this.setState({ isShowingContent: false })
+          onHideContent={() => {
+            setIsShowingContent(false)
           }}
-          on={['focus', 'click']}
+          on={['hover', 'focus']}
           shouldContainFocus={false}
-          shouldFocusContentOnTriggerBlur
-          mountNode={() => document.getElementById('container')}
+          shouldFocusContentOnTriggerBlur={false}
         >
           <Button margin="small">Focus Me When Trigger Blurs</Button>
         </Popover>
-        <div id="container"/>
-        <Button id="next" margin="small">Focus Me Next</Button>
+        <div id="container" />
+        <Button id="next" margin="small">
+          Focus Me Next
+        </Button>
       </div>
     )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 #### Custom elements as renderTrigger
 
 Popover and Tooltip attach mouse and focus event listeners to their `renderTrigger` components via props. These need to be propagated to the component for the listeners to work:
 
-```js
----
- type: example
----
-class MyComponent extends React.Component {
-  constructor(props) {
-    super(props)
-    this.ref = React.createRef()
+- ```js
+  class MyComponent extends React.Component {
+    constructor(props) {
+      super(props)
+      this.ref = React.createRef()
+    }
+    render() {
+      //  Spread the props to the underlying DOM element
+      return (
+        <div {...this.props} ref={this.ref} style={{ width: '10rem' }}>
+          My custom component
+        </div>
+      )
+    }
   }
-  render() {
-    //  Spread the props to the underlying DOM element
-    return <div {...this.props} ref={this.ref} style={{width:"10rem"}}>My custom component</div>
-  }
-}
-<Popover renderTrigger={<MyComponent />} >
-  This text is wrapped by a Popover
-</Popover>
-```
+  ;<Popover renderTrigger={<MyComponent />}>
+    This text is wrapped by a Popover
+  </Popover>
+  ```
+
+- ```js
+  const MyComponent = React.forwardRef((props, ref) => {
+    return (
+      <div {...props} ref={ref} style={{ width: '10rem' }}>
+        My custom component
+      </div>
+    )
+  })
+
+  render(<MyComponent />)
+  ;<Popover renderTrigger={<MyComponent />}>
+    This text is wrapped by a Popover
+  </Popover>
+  ```
 
 #### Popover playground
 
-```js
----
-type: example
----
-class Example extends React.Component {
-
-  state = {
-    shouldAlignArrow: true,
-    isShowingContent: true,
-    withArrow: true,
-    placement: 'top',
-    shadow: 'topmost',
-    color : 'primary'
-  }
-  static placementsValues = [
+- ```js
+  class Example extends React.Component {
+    state = {
+      shouldAlignArrow: true,
+      isShowingContent: true,
+      withArrow: true,
+      placement: 'top',
+      shadow: 'topmost',
+      color: 'primary'
+    }
+    static placementsValues = [
       'top',
       'end',
       'bottom',
@@ -280,54 +515,211 @@ class Example extends React.Component {
       'top center',
       'center end',
       'center start'
-    ];
-  static shadowValues = [
-      'none',
-      'resting',
-      'above',
-      'topmost'
-    ];
-  changePlacement = (e, { value }) => this.setState({ placement: value })
-  changeShadow = (e, { value }) => this.setState({ shadow: value})
-  toggleWithArrow = (event) => this.setState({ withArrow: !this.state.withArrow })
-  toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
-  toggleShowContent = (event) => this.setState({ isShowingContent: !this.state.isShowingContent })
-  changeColor = (event,value) =>  this.setState({color:value})
-  render() {
+    ]
+    static shadowValues = ['none', 'resting', 'above', 'topmost']
+    changePlacement = (e, { value }) => this.setState({ placement: value })
+    changeShadow = (e, { value }) => this.setState({ shadow: value })
+    toggleWithArrow = (event) =>
+      this.setState({ withArrow: !this.state.withArrow })
+    toggleAlignArrow = (event) =>
+      this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
+    toggleShowContent = (event) =>
+      this.setState({ isShowingContent: !this.state.isShowingContent })
+    changeColor = (event, value) => this.setState({ color: value })
+    render() {
+      return (
+        <View as="div" background="primary" padding="small">
+          <Flex margin="small small large" justifyItems="space-around">
+            <Flex.Item align="start">
+              <FormFieldGroup description="Popover Example">
+                <Checkbox
+                  checked={this.state.isShowingContent}
+                  label="Show Content"
+                  onChange={this.toggleShowContent}
+                />
+                <Checkbox
+                  checked={this.state.withArrow}
+                  label="With Arrow"
+                  onChange={this.toggleWithArrow}
+                />
+                <Checkbox
+                  checked={this.state.shouldAlignArrow}
+                  label="Align Arrow"
+                  onChange={this.toggleAlignArrow}
+                />
+              </FormFieldGroup>
+            </Flex.Item>
+            <Flex.Item>
+              <View as="div" margin="none" maxWidth="15rem">
+                <SimpleSelect
+                  renderLabel="Placement"
+                  value={this.state.placement}
+                  onChange={this.changePlacement}
+                >
+                  {Example.placementsValues.map((placement, index) => (
+                    <SimpleSelect.Option
+                      key={index}
+                      id={`${index}`}
+                      value={placement}
+                    >
+                      {placement}
+                    </SimpleSelect.Option>
+                  ))}
+                </SimpleSelect>
+              </View>
+              <View as="div" margin="medium none" maxWidth="15rem">
+                <SimpleSelect
+                  value={this.state.shadow}
+                  onChange={this.changeShadow}
+                  renderLabel="Shadow"
+                >
+                  {Example.shadowValues.map((shadow, index) => (
+                    <SimpleSelect.Option
+                      key={index}
+                      id={`${index}`}
+                      value={shadow}
+                    >
+                      {shadow}
+                    </SimpleSelect.Option>
+                  ))}
+                </SimpleSelect>
+              </View>
+            </Flex.Item>
+            <Flex.Item align="start">
+              <View as="div" margin="none">
+                <RadioInputGroup
+                  name="changeColor"
+                  defaultValue="primary"
+                  description="Color:"
+                  variant="toggle"
+                  size="small"
+                  onChange={this.changeColor}
+                >
+                  <RadioInput label="Primary" value="primary" />
+                  <RadioInput label="Primary inverse" value="primary-inverse" />
+                </RadioInputGroup>
+              </View>
+            </Flex.Item>
+          </Flex>
+          <View as="div" display="block" padding="large" textAlign="center">
+            <Popover
+              renderTrigger={
+                <div
+                  style={{
+                    display: 'inline-block',
+                    height: '3px',
+                    width: '3px',
+                    background: 'blue'
+                  }}
+                />
+              }
+              isShowingContent={this.state.isShowingContent}
+              placement={this.state.placement}
+              withArrow={this.state.withArrow}
+              shouldAlignArrow={this.state.shouldAlignArrow}
+              shadow={this.state.shadow}
+              color={this.state.color}
+            >
+              <Heading>
+                Small
+                <br />
+                Target
+              </Heading>
+            </Popover>
+          </View>
+        </View>
+      )
+    }
+  }
+
+  render(<Example />)
+  ```
+
+- ```js
+  const placementsValues = [
+    'top',
+    'end',
+    'bottom',
+    'start',
+    'top start',
+    'start top',
+    'start center',
+    'start bottom',
+    'bottom start',
+    'bottom center',
+    'bottom end',
+    'end bottom',
+    'end center',
+    'end top',
+    'top end',
+    'top center',
+    'center end',
+    'center start'
+  ]
+
+  const shadowValues = ['none', 'resting', 'above', 'topmost']
+
+  const Example = () => {
+    const [shouldAlignArrow, setShouldAlignArrow] = useState(true)
+    const [isShowingContent, setIsShowingContent] = useState(true)
+    const [withArrow, setWithArrow] = useState(true)
+    const [placement, setPlacement] = useState('top')
+    const [shadow, setShadow] = useState('topmost')
+    const [color, setColor] = useState('primary')
+
+    const changePlacement = (e, { value }) => {
+      setPlacement(value)
+    }
+
+    const changeShadow = (e, { value }) => {
+      setShadow(value)
+    }
+
+    const toggleWithArrow = () => {
+      setWithArrow((withArrow) => !withArrow)
+    }
+
+    const toggleAlignArrow = () => {
+      setShouldAlignArrow((shouldAlignArrow) => !shouldAlignArrow)
+    }
+
+    const toggleShowContent = () =>
+      setIsShowingContent((isShowingContent) => !isShowingContent)
+
+    const changeColor = (event, value) => {
+      setColor(value)
+    }
+
     return (
       <View as="div" background="primary" padding="small">
         <Flex margin="small small large" justifyItems="space-around">
           <Flex.Item align="start">
             <FormFieldGroup description="Popover Example">
               <Checkbox
-                checked={this.state.isShowingContent}
+                checked={isShowingContent}
                 label="Show Content"
-                onChange={this.toggleShowContent}
+                onChange={toggleShowContent}
               />
               <Checkbox
-                checked={this.state.withArrow}
+                checked={withArrow}
                 label="With Arrow"
-                onChange={this.toggleWithArrow}
+                onChange={toggleWithArrow}
               />
               <Checkbox
-                checked={this.state.shouldAlignArrow}
+                checked={shouldAlignArrow}
                 label="Align Arrow"
-                onChange={this.toggleAlignArrow}
+                onChange={toggleAlignArrow}
               />
             </FormFieldGroup>
           </Flex.Item>
           <Flex.Item>
-            <View
-            as="div"
-            margin="none"
-            maxWidth="15rem"
-            >
+            <View as="div" margin="none" maxWidth="15rem">
               <SimpleSelect
                 renderLabel="Placement"
-                value={this.state.placement}
-                onChange={this.changePlacement}
+                value={placement}
+                onChange={changePlacement}
               >
-                {Example.placementsValues.map((placement, index) => (
+                {placementsValues.map((placement, index) => (
                   <SimpleSelect.Option
                     key={index}
                     id={`${index}`}
@@ -338,26 +730,21 @@ class Example extends React.Component {
                 ))}
               </SimpleSelect>
             </View>
-            <View
-              as="div"
-              margin="medium none"
-              maxWidth="15rem"
-            >
-              <SimpleSelect  value={this.state.shadow}
-                onChange={this.changeShadow}
+            <View as="div" margin="medium none" maxWidth="15rem">
+              <SimpleSelect
+                value={shadow}
+                onChange={changeShadow}
                 renderLabel="Shadow"
               >
-                {
-                  Example.shadowValues.map((shadow, index) => (
-                    <SimpleSelect.Option
-                      key={index}
-                      id={`${index}`}
-                      value={shadow}
-                    >
-                      {shadow}
-                    </SimpleSelect.Option>
-                  ))
-                }
+                {shadowValues.map((shadow, index) => (
+                  <SimpleSelect.Option
+                    key={index}
+                    id={`${index}`}
+                    value={shadow}
+                  >
+                    {shadow}
+                  </SimpleSelect.Option>
+                ))}
               </SimpleSelect>
             </View>
           </Flex.Item>
@@ -369,38 +756,46 @@ class Example extends React.Component {
                 description="Color:"
                 variant="toggle"
                 size="small"
-                onChange={this.changeColor} >
-                <RadioInput label="Primary" value="primary"/>
+                onChange={changeColor}
+              >
+                <RadioInput label="Primary" value="primary" />
                 <RadioInput label="Primary inverse" value="primary-inverse" />
               </RadioInputGroup>
             </View>
           </Flex.Item>
         </Flex>
-        <View
-          as="div"
-          display="block"
-          padding="large"
-          textAlign="center">
+        <View as="div" display="block" padding="large" textAlign="center">
           <Popover
-            renderTrigger={<div style={{ display: 'inline-block', height: '3px', width: '3px', background: 'blue' }}/>}
-            isShowingContent={this.state.isShowingContent}
-            placement={this.state.placement}
-            withArrow={this.state.withArrow}
-            shouldAlignArrow={this.state.shouldAlignArrow}
-            shadow={this.state.shadow}
-            color={this.state.color}
-            mountNode={() => document.getElementById('main')}
+            renderTrigger={
+              <div
+                style={{
+                  display: 'inline-block',
+                  height: '3px',
+                  width: '3px',
+                  background: 'blue'
+                }}
+              />
+            }
+            isShowingContent={isShowingContent}
+            placement={placement}
+            withArrow={withArrow}
+            shouldAlignArrow={shouldAlignArrow}
+            shadow={shadow}
+            color={color}
           >
-            <Heading>Small<br />Target</Heading>
+            <Heading>
+              Small
+              <br />
+              Target
+            </Heading>
           </Popover>
         </View>
       </View>
     )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 ### Guidelines