@wordpress/components/build-module/input-control/input-base.js

UI components for WordPress.

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

/**
 * WordPress dependencies
 */
import { useInstanceId } from '@wordpress/compose';
import { forwardRef } from '@wordpress/element';
/**
 * Internal dependencies
 */

import Backdrop from './backdrop';
import Label from './label';
import { Container, Root, Prefix, Suffix, LabelWrapper } from './styles/input-control-styles';

function useUniqueId(idProp) {
  const instanceId = useInstanceId(InputBase);
  const id = `input-base-control-${instanceId}`;
  return idProp || id;
} // Adapter to map props for the new ui/flex compopnent.


function getUIFlexProps({
  labelPosition
}) {
  const props = {};

  switch (labelPosition) {
    case 'top':
      props.direction = 'column';
      props.gap = 0;
      break;

    case 'bottom':
      props.direction = 'column-reverse';
      props.gap = 0;
      break;

    case 'edge':
      props.justify = 'space-between';
      break;
  }

  return props;
}

export function InputBase({
  __unstableInputWidth,
  children,
  className,
  disabled = false,
  hideLabelFromVision = false,
  labelPosition,
  id: idProp,
  isFocused = false,
  label,
  prefix,
  size = 'default',
  suffix,
  ...props
}, ref) {
  const id = useUniqueId(idProp);
  const hideLabel = hideLabelFromVision || !label;
  return createElement(Root, _extends({}, props, getUIFlexProps({
    labelPosition
  }), {
    className: className,
    isFocused: isFocused,
    labelPosition: labelPosition,
    ref: ref,
    __unstableVersion: "next"
  }), createElement(LabelWrapper, null, createElement(Label, {
    className: "components-input-control__label",
    hideLabelFromVision: hideLabelFromVision,
    labelPosition: labelPosition,
    htmlFor: id,
    size: size
  }, label)), createElement(Container, {
    __unstableInputWidth: __unstableInputWidth,
    className: "components-input-control__container",
    disabled: disabled,
    hideLabel: hideLabel,
    isFocused: isFocused,
    labelPosition: labelPosition
  }, prefix && createElement(Prefix, {
    className: "components-input-control__prefix"
  }, prefix), children, suffix && createElement(Suffix, {
    className: "components-input-control__suffix"
  }, suffix), createElement(Backdrop, {
    "aria-hidden": "true",
    disabled: disabled,
    isFocused: isFocused,
    label: label,
    size: size
  })));
}
export default forwardRef(InputBase);
//# sourceMappingURL=input-base.js.map