How to use @instructure/ui-utils - 10 common examples

getRootProps: ({
          onMouseDown,
          onClick,
          ...rest
        } = {}) => {
          return {
            onClick: createChainedFunction(this.handleOpenClose, onClick),
            onMouseDown: createChainedFunction((event) => {
              if (event.target !== this._trigger) {
                event.preventDefault() // prevent trigger from losing focus
              }
            }, onMouseDown),
            ...rest
          }
        },

Object.keys(props).forEach((prop) => {
    // If prop looks like an event handler "on*" and either
    // props[props] or element.props[prop] is a function create a chained function.
    // If only one is a function it will just use that function with no extra overhead.
    // This is necessary in cases where props[prop] is `null` or `undefined` which would
    // otherwise unwantedly override element.props[prop].
    if (prop.indexOf('on') === 0 && (
        typeof props[prop] === 'function' ||
        typeof element.props[prop] === 'function'
    )) {
      mergedProps[prop] = createChainedFunction(element.props[prop], props[prop])
    }
  })

}

      if (shouldContainFocus) {
        // only set aria-expanded if popover can contain focus
        expanded = this.shown ? 'true' : 'false'
      } else {
        expanded = null
      }

      trigger = safeCloneElement(trigger, {
        ref: el => this._trigger = el,
        'aria-expanded': expanded,
        'data-popover-trigger': true,
        onKeyDown: createChainedFunction(this.handleTriggerKeyDown, this.props.onKeyDown),
        onClick: createChainedFunction(onClick, this.props.onClick),
        onBlur: createChainedFunction(this.handleTriggerBlur, this.props.onBlur),
        onFocus: createChainedFunction(onFocus, this.props.onFocus),
        onMouseOut: createChainedFunction(onMouseOut, this.props.onMouseOut),
        onMouseOver: createChainedFunction(onMouseOver, this.props.onMouseOver)
      })
    }

    return trigger
  }

// only set aria-expanded if popover can contain focus
        expanded = this.shown ? 'true' : 'false'
      } else {
        expanded = null
      }

      trigger = safeCloneElement(trigger, {
        ref: el => this._trigger = el,
        'aria-expanded': expanded,
        'data-popover-trigger': true,
        onKeyDown: createChainedFunction(this.handleTriggerKeyDown, this.props.onKeyDown),
        onClick: createChainedFunction(onClick, this.props.onClick),
        onBlur: createChainedFunction(this.handleTriggerBlur, this.props.onBlur),
        onFocus: createChainedFunction(onFocus, this.props.onFocus),
        onMouseOut: createChainedFunction(onMouseOut, this.props.onMouseOut),
        onMouseOver: createChainedFunction(onMouseOver, this.props.onMouseOver)
      })
    }

    return trigger
  }

function mergeWithDefaultThemeVariables (themeKey, overrides) {
  let variables

  if (themeKey) {
    variables = getVariablesWithOverrides(themeKey, overrides)
  } else { // fall back to defaults, but still apply overrides
    const defaultOverrides = getRegistry().overrides
    const defaultOverridesIsEmpty = isEmpty(defaultOverrides)
    if (!defaultOverridesIsEmpty && !isEmpty(overrides)) {
      variables = mergeDeep(defaultOverrides, overrides)
    } else if (defaultOverridesIsEmpty) {
      variables = overrides
    } else {
      variables = defaultOverrides
    }
  }

  return getVariablesWithOverrides(getDefaultThemeKey(), variables)
}

return function (variables) {
    let theme = {}

    if (typeof componentThemeFunction === 'function') {
      theme = componentThemeFunction(variables)
    }

    // so that the components for the themeKey can
    // just specify overrides we merge them with defaults here
    let defaultComponentTheme = {}

    if (typeof componentThemeFunction[themeKey] === 'function') {
      defaultComponentTheme = componentThemeFunction[themeKey](variables)
    }

    if (!isEmpty(defaultComponentTheme) && !isEmpty(theme)) {
      theme = {...theme, ...defaultComponentTheme}
    } else if (isEmpty(theme)) {
      theme = defaultComponentTheme
    }

    return theme
  }
}

function mergeWithDefaultThemeVariables (themeKey, overrides) {
  let variables

  if (themeKey) {
    variables = getVariablesWithOverrides(themeKey, overrides)
  } else { // fall back to defaults, but still apply overrides
    const defaultOverrides = getRegistry().overrides
    const defaultOverridesIsEmpty = isEmpty(defaultOverrides)
    if (!defaultOverridesIsEmpty && !isEmpty(overrides)) {
      variables = mergeDeep(defaultOverrides, overrides)
    } else if (defaultOverridesIsEmpty) {
      variables = overrides
    } else {
      variables = defaultOverrides
    }
  }

  return getVariablesWithOverrides(getDefaultThemeKey(), variables)
}

if (typeof componentThemeFunction === 'function') {
      theme = componentThemeFunction(variables)
    }

    // so that the components for the themeKey can
    // just specify overrides we merge them with defaults here
    let defaultComponentTheme = {}

    if (typeof componentThemeFunction[themeKey] === 'function') {
      defaultComponentTheme = componentThemeFunction[themeKey](variables)
    }

    if (!isEmpty(defaultComponentTheme) && !isEmpty(theme)) {
      theme = {...theme, ...defaultComponentTheme}
    } else if (isEmpty(theme)) {
      theme = defaultComponentTheme
    }

    return theme
  }
}

render () {
    const {
      formatValue,
      size
    } = this.props

    const props = omitProps(this.props, RangeInput.propTypes)

    const classes = {
      [styles.root]: true,
      [styles[size]]: size
    }

    /* eslint-disable jsx-a11y/no-redundant-roles */
    return (
      
        <div>
          <input> { this._input = c }}</div>

render () {
    const {
      variant,
      layout
    } = this.props

    return (
      
        {this.renderChildren()}
      
    )
  }
}