How to use the dom-helpers/query/offset function in dom-helpers

function makeDefaultStyle(modal, backdrop) {
	const modalRect = offset(modal);
	const backdropRect = offset(backdrop);
	const margin = (backdropRect.height - modalRect.height) / 2;

	return {
		marginTop: `${margin}px`
	};
}

handleClick(event) {
		const {lower, upper} = this.refs;

		const lowerRect = offset(findDOMNode(lower));
		const upperRect = offset(findDOMNode(upper));

		const lowerDistance = this.distance(lowerRect, event);
		const upperDistance = this.distance(upperRect, event);

		if (lowerDistance < upperDistance) {
			this.lowerTrackEventListener(event);
		} else {
			this.upperTrackEventListener(event);
		}
	}

onUpdate = () => {
    if (!this._isMounted) {
      return
    }

    const { top: offsetTop, width } = getOffset(this.positioner)

    const container = getContainer(this.props.container)
    let offsetBottom
    if (container) {
      const documentHeight = getDocumentHeight(ownerDocument(this))
      const { top, height } = getOffset(container)
      offsetBottom = documentHeight - top - height
    } else {
      offsetBottom = null
    }

    this.updateState(offsetTop, offsetBottom, width)
  }

function adjustPosition(
  elem,
  getOverlayTarget,
  getOverlayContainer,
  position,
  alignment
) {
  const target = getOverlayTarget();
  const container = getOverlayContainer();
  const targetPosition =
    container.tagName === 'BODY'
      ? getOffset(target)
      : getPosition(target, container);

  if (position === 'top') {
    css(
      elem,
      'top',
      `${targetPosition.top - parseInt(css(elem, 'height'), 10)}px`
    );
  } else if (position === 'bottom') {
    css(elem, 'top', `${targetPosition.top + targetPosition.height}px`);
  } else if (position === 'left') {
    css(
      elem,
      'left',
      `${targetPosition.left - parseInt(css(elem, 'width'), 10)}px`
    );

function getContainerDimensions(containerNode) {
  let width, height, scroll;

  if (containerNode.tagName === 'BODY') {
    width = window.innerWidth;
    height = window.innerHeight;

    scroll =
      getScrollTop(ownerDocument(containerNode).documentElement) ||
      getScrollTop(containerNode);
  } else {
    ({ width, height } = getOffset(containerNode));
    scroll = getScrollTop(containerNode);
  }

  return { width, height, scroll};
}

moveTowardsPoint(index, point) {
		const {orientation, min, max} = this.props;
		const rect = offset(findDOMNode(this.refs.track));
		const ratio = (orientation === 'horizontal')
			? percentage(point.pageX - rect.left, rect.width)
			: percentage(point.pageY - rect.top, rect.height);

		const value = min + (((max - min) / 100) * ratio);
		const snapped = this.snapped(
			bound(
				value,
				this.lowerBound(index),
				this.upperBound(index)
			)
		);

		this.handleChange(index, snapped);
	}

function makeDefaultStyle(modal, backdrop) {
	const modalRect = offset(modal);
	const backdropRect = offset(backdrop);
	const margin = (backdropRect.height - modalRect.height) / 2;

	return {
		marginTop: `${margin}px`
	};
}

export default function calculatePosition(
  placement, overlayNode, target, container, padding
) {
  const childOffset = container.tagName === 'BODY' ?
    getOffset(target) : getPosition(target, container);

  const { height: overlayHeight, width: overlayWidth } =
    getOffset(overlayNode);

  let positionLeft, positionTop, arrowOffsetLeft, arrowOffsetTop;

  if (placement === 'left' || placement === 'right') {
    positionTop = childOffset.top + (childOffset.height - overlayHeight) / 2;

    if (placement === 'left') {
      positionLeft = childOffset.left - overlayWidth;
    } else {
      positionLeft = childOffset.left + childOffset.width;
    }

    const topDelta = getTopDelta(

updateStateAtBottom = () => {
    const positionTopMax = this.getPositionTopMax()
    const offsetParent = getOffsetParent(ReactDOM.findDOMNode(this))
    const parentTop = getOffset(offsetParent).top

    this.updateState('bottom', 'absolute', positionTopMax - parentTop)
  }