@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 { useHover } from '@use-gesture/react';
/**
 * Internal dependencies
 */

import BaseTooltip from '../tooltip';
import { UnitControlWrapper, UnitControl } from './styles/box-control-styles';

const noop = () => {};

export default function BoxUnitControl(_ref) {
  let {
    isFirst,
    isLast,
    isOnly,
    onHoverOn = noop,
    onHoverOff = noop,
    label,
    value,
    ...props
  } = _ref;
  const bindHoverGesture = useHover(_ref2 => {
    let {
      event,
      ...state
    } = _ref2;

    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",
    isFirst: isFirst,
    isLast: isLast,
    isOnly: isOnly,
    isPressEnterToChange: true,
    isResetValueOnUnitChange: false,
    value: value
  }, props))));
}

function Tooltip(_ref3) {
  let {
    children,
    text
  } = _ref3;
  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