@wordpress/components/build-module/box-control/unit-control.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { noop } from 'lodash';
import { useHover } from 'react-use-gesture';
/**
 * Internal dependencies
 */

import BaseTooltip from '../tooltip';
import { UnitControlWrapper, UnitControl } from './styles/box-control-styles';
export default function BoxUnitControl({
  isFirst,
  isLast,
  isOnly,
  onHoverOn = noop,
  onHoverOff = noop,
  label,
  value,
  ...props
}) {
  const bindHoverGesture = useHover(({
    event,
    ...state
  }) => {
    if (state.hovering) {
      onHoverOn(event, state);
    } else {
      onHoverOff(event, state);
    }
  });
  return createElement(UnitControlWrapper, bindHoverGesture(), createElement(Tooltip, {
    text: label
  }, createElement(UnitControl, _extends({
    "aria-label": label,
    className: "component-box-control__unit-control",
    hideHTMLArrows: true,
    isFirst: isFirst,
    isLast: isLast,
    isOnly: isOnly,
    isPressEnterToChange: true,
    isResetValueOnUnitChange: false,
    value: value
  }, props))));
}

function Tooltip({
  children,
  text
}) {
  if (!text) return children;
  /**
   * Wrapping the children in a `<div />` as Tooltip as it attempts
   * to render the <UnitControl />. Using a plain `<div />` appears to
   * resolve this issue.
   *
   * Originally discovered and referenced here:
   * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
   */

  return createElement(BaseTooltip, {
    text: text,
    position: "top"
  }, createElement("div", null, children));
}
//# sourceMappingURL=unit-control.js.map