@gechiui/components/build/input-control/input-base.js

UI components for GeChiUI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InputBase = InputBase;
exports.default = void 0;

var _element = require("@gechiui/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _compose = require("@gechiui/compose");

var _backdrop = _interopRequireDefault(require("./backdrop"));

var _label = _interopRequireDefault(require("./label"));

var _inputControlStyles = require("./styles/input-control-styles");

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function useUniqueId(idProp) {
  const instanceId = (0, _compose.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;
}

function InputBase(_ref, ref) {
  let {
    __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 (// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions
    (0, _element.createElement)(_inputControlStyles.Root, (0, _extends2.default)({}, props, getUIFlexProps(labelPosition), {
      className: className,
      isFocused: isFocused,
      labelPosition: labelPosition,
      ref: ref
    }), (0, _element.createElement)(_inputControlStyles.LabelWrapper, null, (0, _element.createElement)(_label.default, {
      className: "components-input-control__label",
      hideLabelFromVision: hideLabelFromVision,
      labelPosition: labelPosition,
      htmlFor: id,
      size: size
    }, label)), (0, _element.createElement)(_inputControlStyles.Container, {
      __unstableInputWidth: __unstableInputWidth,
      className: "components-input-control__container",
      disabled: disabled,
      hideLabel: hideLabel,
      labelPosition: labelPosition
    }, prefix && (0, _element.createElement)(_inputControlStyles.Prefix, {
      className: "components-input-control__prefix"
    }, prefix), children, suffix && (0, _element.createElement)(_inputControlStyles.Suffix, {
      className: "components-input-control__suffix"
    }, suffix), (0, _element.createElement)(_backdrop.default, {
      disabled: disabled,
      isFocused: isFocused
    })))
  );
}

var _default = (0, _element.forwardRef)(InputBase);

exports.default = _default;
//# sourceMappingURL=input-base.js.map