@wordpress/components/build/input-control/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InputControl = void 0;
exports.UnforwardedInputControl = UnforwardedInputControl;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _inputBase = _interopRequireDefault(require("./input-base"));
var _inputField = _interopRequireDefault(require("./input-field"));
var _space = require("../utils/space");
var _utils = require("./utils");
var _baseControl = _interopRequireDefault(require("../base-control"));
var _useDeprecatedProps = require("../utils/use-deprecated-props");
var _deprecated36pxSize = require("../utils/deprecated-36px-size");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const noop = () => {};
function useUniqueId(idProp) {
  const instanceId = (0, _compose.useInstanceId)(InputControl);
  const id = `inspector-input-control-${instanceId}`;
  return idProp || id;
}
function UnforwardedInputControl(props, ref) {
  const {
    __next40pxDefaultSize,
    __shouldNotWarnDeprecated36pxSize,
    __unstableStateReducer: stateReducer = state => state,
    __unstableInputWidth,
    className,
    disabled = false,
    help,
    hideLabelFromVision = false,
    id: idProp,
    isPressEnterToChange = false,
    label,
    labelPosition = 'top',
    onChange = noop,
    onValidate = noop,
    onKeyDown = noop,
    prefix,
    size = 'default',
    style,
    suffix,
    value,
    ...restProps
  } = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props);
  const id = useUniqueId(idProp);
  const classes = (0, _clsx.default)('components-input-control', className);
  const draftHookProps = (0, _utils.useDraft)({
    value,
    onBlur: restProps.onBlur,
    onChange
  });
  const helpProp = !!help ? {
    'aria-describedby': `${id}__help`
  } : {};
  (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
    componentName: 'InputControl',
    __next40pxDefaultSize,
    size,
    __shouldNotWarnDeprecated36pxSize
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
    className: classes,
    help: help,
    id: id,
    __nextHasNoMarginBottom: true,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputBase.default, {
      __next40pxDefaultSize: __next40pxDefaultSize,
      __unstableInputWidth: __unstableInputWidth,
      disabled: disabled,
      gap: 3,
      hideLabelFromVision: hideLabelFromVision,
      id: id,
      justify: "left",
      label: label,
      labelPosition: labelPosition,
      prefix: prefix,
      size: size,
      style: style,
      suffix: suffix,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputField.default, {
        ...restProps,
        ...helpProp,
        __next40pxDefaultSize: __next40pxDefaultSize,
        className: "components-input-control__input",
        disabled: disabled,
        id: id,
        isPressEnterToChange: isPressEnterToChange,
        onKeyDown: onKeyDown,
        onValidate: onValidate,
        paddingInlineStart: prefix ? (0, _space.space)(1) : undefined,
        paddingInlineEnd: suffix ? (0, _space.space)(1) : undefined,
        ref: ref,
        size: size,
        stateReducer: stateReducer,
        ...draftHookProps
      })
    })
  });
}

/**
 * InputControl components let users enter and edit text. This is an experimental component
 * intended to (in time) merge with or replace `TextControl`.
 *
 * ```jsx
 * import { __experimentalInputControl as InputControl } from '@wordpress/components';
 * import { useState } from 'react';
 *
 * const Example = () => {
 *   const [ value, setValue ] = useState( '' );
 *
 *   return (
 *  	<InputControl
 * 			__next40pxDefaultSize
 *  		value={ value }
 *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 *  	/>
 *   );
 * };
 * ```
 */
const InputControl = exports.InputControl = (0, _element.forwardRef)(UnforwardedInputControl);
var _default = exports.default = InputControl;
//# sourceMappingURL=index.js.map