<commit_before>// NEW REACT ARIA SPEC
import { Popovers: { Manager, Toggle, Input, Popover, Item } } = 'react-aria'


////////////////////////////////////////////
// POPOVER (LATEST)
///////////////////////////////////////////
<Overlay.Toggle controls="my-popover">
  Toggle Popover (Receives focus after modal closes, keyboard accessible, etc..)
</Overlay.Toggle>
<Overlay.Manager
  id="my-popover"
  trapFocus={false} // traps focus within the popover, mainly useful for compliant ARIA modals
  freezeScroll={false} // prevents the main document scrollbar from being able to scroll while popover is open
  onRequestClose={() => this.setState({ isOpen: false })}
  onOutsideClick={() => this.setState({ isOpen: false })}
  onItemSelection={(item, e) => {
    console.log('item selected:', item)
    this.setState({ isOpen: false })
  }}
>
  <TransitionMotion> // allows composition of other components
    { this.state.isOpen &&
      <Overlay.Popover> // this can be other provided components <Overlay.Modal>, <Overlay.Menu>, etc.
        <div>Popover!</div>
        <Overlay.Item>Item 1</Overlay.Item>
        <Overlay.Item>Item 2</Overlay.Item>
        <Overlay.Item>Item 3</Overlay.Item>
      </Overlay.Popover>
    }
  </TransitionMotion>
</Overlay.Manager>


////////////////////////////////////////////
// MODAL
///////////////////////////////////////////
<Popovers.Manager
  trapFocus={true||false} // keeps focus contained within popover
  freezeScroll={true||false} // prevents window from being able to scroll
  // closeOnOutsideTap
  // onOutsideTap
>
 { (isOpen, requestClose) =>
    <div>
      <Popovers.Toggle
        className={classNames(
          'popover-toggle',
          isOpen && 'is-active',
        )}
      >
        Toggle Modal
      </Popovers.Toggle>
      <Transition>
        { isOpen &&<commit_msg>add another exampel<commit_after>// NEW REACT ARIA SPEC
import { Popovers: { Manager, Toggle, Input, Popover, Item } } = 'react-aria'


////////////////////////////////////////////
// POPOVER (LATEST)
///////////////////////////////////////////
<Overlay.Toggle controls="my-popover">
  Toggle Popover (Receives focus after modal closes, keyboard accessible, etc..)
</Overlay.Toggle>
<Overlay.Manager
  id="my-popover"
  trapFocus={false} // traps focus within the popover, mainly useful for compliant ARIA modals
  freezeScroll={false} // prevents the main document scrollbar from being able to scroll while popover is open
  onRequestClose={() => this.setState({ isOpen: false })}
  onOutsideClick={() => this.setState({ isOpen: false })}
  onItemSelection={(item, e) => {
    console.log('item selected:', item)
    this.setState({ isOpen: false })
  }}
>
  <TransitionMotion> // allows composition of other components
    { this.state.isOpen &&
      <Overlay.Popover> // this can be other provided components <Overlay.Modal>, <Overlay.Menu>, etc.
        <div>Popover!</div>
        <Overlay.Item>Item 1</Overlay.Item>
        <Overlay.Item>Item 2</Overlay.Item>
        <Overlay.Item>Item 3</Overlay.Item>
      </Overlay.Popover>
    }
  </TransitionMotion>
</Overlay.Manager>


// building our own ARIA tooltip
class Tooltip extends Component {
  state = { isOpen: false }
  uuid = 'TOOLTIP' + Math.abs(~~(Math.random() * new Date()))
  open = () => this.setState({ isOpen: true })
  close = () => this.setState({ isOpen: false })

  render() {
    return (
      <div>
        <Toggle
          controls={this.uuid}
          toggleOn="hover"
          onToggle={this.open}
        >
          { props => cloneElement(firstChild, props)}
        </Toggle>
        <Overlay
          id={this.uuid}
          type="tooltip"
          onRequestClose={this.close}
        >
          { props =>
            <TransitionMotion>
              { this.state.isOpen &&
                <Portal>
                  {cloneElement(secondChild, props)}
                </Portal>
              }
            </TransitionMotion>
          }
        </Overlay>
      <div>
    )
  }
}

// <Overlay.Toggle on="hover">
//   <InfoIcon/>
// </Overlay.Toggle>
// <Overlay.Manager>
//   <Overlay.Tooltip>
//     Some Popover Content
//   </Overlay.Tooltip>
// </Overlay.Manager>

// <Overlay.Toggle on="hover" controls="tooltip">
//   <InfoIcon/>
// </Overlay.Toggle>
// <Overlay.Tooltip id="tooltip">
//   I'm a tooltip!
// </Overlay.Tooltip>

// <Toggle on="hover" controls="tooltip">
//   <InfoIcon/>
// </Toggle>
// <Overlay type="tooltip" id="tooltip">
// { props =>
//   <TransitionMotion>
//     { isOpen &&
//       <div {...props}>I'm a tooltip</div>
//     }
//   </TransitionMotion>
// }
// </Overlay>

// <Toggle controls="tip" on="hover">
//   <InfoIcon/>
// </Toggle>
// <Overlay id="tip" type="tooltip">
// { (props, isOpen) =>
//   <TransitionMotion>
//     { isOpen &&
//       <div {...props}>I'm a tooltip</div>
//     }
//   </TransitionMotion>
// }
// </Overlay>

// <Toggle controls="tip" on="hover">
//   <InfoIcon/>
// </Toggle>
// <Overlay id="tip" type="tooltip">
//   { props => this.state.isOpen &&
//     <div {...props}>I'm a tooltip</div>
//   }
// </Overlay>

// <Toggle controls="tip" on="hover">
//   <InfoIcon/>
// </Toggle>
// <Overlay id="tip" type="tooltip">
//   { props =>
//     <TransitionMotion>
//       { this.state.isOpen &&
//         <div {...props}>I'm a tooltip</div>
//       }
//     </TransitionMotion>
//   }
// </Overlay>


////////////////////////////////////////////
// MODAL
///////////////////////////////////////////
<Popovers.Manager
  trapFocus={true||false} // keeps focus contained within popover
  freezeScroll={true||false} // prevents window from being able to scroll
  // closeOnOutsideTap
  // onOutsideTap
>
 { (isOpen, requestClose) =>
    <div>
      <Popovers.Toggle
        className={classNames(
          'popover-toggle',
          isOpen && 'is-active',
        )}
      >
        Toggle Modal
      </Popovers.Toggle>
      <Transition>
        { isOpen &&
{'fraction_non_alphanumeric': 0.21632515955660062, 'fraction_numerical': 0.001007725898555593, 'mean_word_length': 2.0197768762677484, 'pattern_counts': {'":': 0, '<': 105, '<?xml version=': 0, '>': 121, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5653223', 'n_tokens_mistral': 1791, 'n_tokens_neox': 1798, 'n_words': 403}