souporserious

import React from 'react'
import PropTypes from 'prop-types'

import Box from '../Box'
import { cloneChildren, joinChildren } from '../utils'

const BASELINE = 'baseline'
const CENTER = 'center'
const END = 'end'
const FILL = 'fill'

souporserious

/**
 * Locks scrollbars starting from an element
 * @param {HTMLElement} node - the element to start locking scroll at
 * @return {Function} unlockScroll - unlocks all scroll elements/parents
 */
function lockScroll(node, lockedNodes = []) {
  const viewport = getClosestViewport(node)
  if (viewport && !viewport.__locked) {
    const { overflow, paddingRight } = getComputedStyle(viewport)
    const previousStyles = {

souporserious

/**
 * Lock all scrollbars by disabling mousewheel and locking scrollbars in position
 * Optionally provide an element to allow it to scroll when hovered
 */
const lockedScrolls = []
function lockScroll(node) {
  const scrollCoords = new WeakMap()
  const preventDefault = event => event.preventDefault()
  const mouseOver = () => window.removeEventListener('wheel', preventDefault)
  const mouseOut = () => window.addEventListener('wheel', preventDefault)

souporserious

/**
 * Get the width for a single line of text
 * @param {String} text - the string of text to be measured
 * @param {Object|HTMLElement} font - optional font styles or node to pull font styles from
 * @return {Number} the width of the text passed in
 */
const expando = 'text-width' + new Date().getTime()
const canvas =
  typeof document === 'undefined' ? null : document.createElement('canvas')
const context = canvas && canvas.getContext('2d')

souporserious

import React, { Component, createContext } from 'react'

const SetRefContext = createContext()

function isOutsideElement({ source, target }) {
  return source !== target && !source.contains(target)
}

class FocusGroup extends Component {
  static defaultProps = {

souporserious

// modified from https://stackoverflow.com/a/52008131/1461204
const zoomEvent = new Event('zoom')
let currentRatio = window.devicePixelRatio

function checkZooming() {
  if (currentRatio !== window.devicePixelRatio) {
    window.dispatchEvent(zoomEvent)
  }
}

souporserious

export function useZoom({ onZoom }) {
  useEffect(() => {
    let lastRatio = window.devicePixelRatio
    function checkZooming(event) {
      if (lastRatio !== window.devicePixelRatio) {
        if (onZoom) {
          onZoom(event)
        }
        lastRatio = window.devicePixelRatio
      }

souporserious

const highlightAction = amount =>
  assign({
    highlightedIndex: (context, event) =>
      context.highlightedIndex === null ? 0 : context.highlightedIndex + amount
  });
const highlightMachine = Machine({
  id: "highlight",
  initial: "idle",
  context: {
    highlightedIndex: null

souporserious

import React, { useRef } from 'react'
import { useMeasure } from 'react-measure'

function getViewTargets(node) {
  const targets = []
  if (node) {
    let target = 0
    for (let index = 0; index < node.children.length; index++) {
      const childNode = node.children[index]
      const bounds = childNode.getBoundingClientRect()

souporserious

export function useMeasure(
  measureRef,
  getDimensions = getRect,
  shouldUpdate = (prev, next) => !shallowEqual(prev, next)
) {
  const [dimensions, setDimensions] = useState(
    getDimensions(measureRef.current)
  )
  const mutationObserver = useRef(null)
  const resizeObserver = useRef(null)