@razorpay/blade
Version:
The Design System that powers Razorpay
662 lines (659 loc) • 31 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default from 'react';
import styled from 'styled-components';
import { StyledBaseInput } from './StyledBaseInput.web.js';
import { BaseInputVisuals } from './BaseInputVisuals.js';
import { BaseInputWrapper } from './BaseInputWrapper.js';
import { BaseInputTagSlot } from './BaseInputTagSlot.web.js';
import { baseInputBorderBackgroundMotion, formHintLeftLabelMarginLeft } from './baseInputTokens.js';
import '../../Form/index.js';
import '../../Box/BaseBox/index.js';
import '../../Box/styledProps/index.js';
import '../../../utils/index.js';
import '../../../utils/metaAttribute/index.js';
import { useFormId } from '../../Form/useFormId.js';
import '../../BladeProvider/index.js';
import useInteraction from '../../../utils/useInteraction.js';
import '../../../utils/makeSize/index.js';
import '../../../utils/makeAccessible/index.js';
import '../../../utils/logger/index.js';
import { announce } from '../../LiveAnnouncer/LiveAnnouncer.web.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import '../../../utils/getFocusRingStyles/index.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import { useMergeRefs } from '../../../utils/useMergeRefs.js';
import { getOuterMotionRef, getInnerMotionRef } from '../../../utils/getMotionRefs.js';
import '../../../utils/makeAnalyticsAttribute/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { throwBladeError } from '../../../utils/logger/logger.js';
import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
import { isReactNative } from '../../../utils/platform/isReactNative.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
import { castWebType } from '../../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
import useTheme from '../../BladeProvider/useTheme.js';
import { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
import { FormLabel } from '../../Form/FormLabel.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import { FormHint } from '../../Form/FormHint.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["as", "label", "labelPosition", "placeholder", "type", "defaultValue", "tags", "showAllTags", "activeTagIndex", "setActiveTagIndex", "name", "value", "onFocus", "onChange", "onInput", "onBlur", "onSubmit", "onClick", "onKeyDown", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "leadingIcon", "prefix", "trailingInteractionElement", "onTrailingInteractionElementClick", "leadingInteractionElement", "suffix", "trailingIcon", "maxCharacters", "textAlign", "autoFocus", "keyboardReturnKeyType", "keyboardType", "autoCompleteSuggestionType", "trailingHeaderSlot", "trailingFooterSlot", "numberOfLines", "id", "componentName", "accessibilityLabel", "labelId", "activeDescendant", "hideLabelText", "hideFormHint", "hasPopup", "popupId", "isPopupExpanded", "maxTagRows", "shouldIgnoreBlurAnimation", "setShouldIgnoreBlurAnimation", "autoCapitalize", "setInputWrapperRef", "testID", "isDropdownTrigger", "isLabelInsideInput", "size", "trailingButton", "valueComponentType", "isTableInputCell", "showHintsAsTooltip", "_motionMeta", "role", "tabIndex"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var autoCompleteSuggestionTypeValues = ['none', 'on', 'name', 'email', 'username', 'password', 'newPassword', 'oneTimeCode', 'telephone', 'postalCode', 'countryName', 'creditCardNumber', 'creditCardCSC', 'creditCardExpiry', 'creditCardExpiryMonth', 'creditCardExpiryYear'];
var useTags = function useTags(tags, activeTagIndex, setActiveTagIndex) {
var visibleTagsCountRef = React__default.useRef(0);
React__default.useEffect(function () {
if (tags && activeTagIndex >= 0 && activeTagIndex < tags.length) {
var _tags$activeTagIndex, _tags$activeTagIndex$;
var tagTitle = (_tags$activeTagIndex = tags[activeTagIndex]) === null || _tags$activeTagIndex === void 0 ? void 0 : (_tags$activeTagIndex$ = _tags$activeTagIndex.props) === null || _tags$activeTagIndex$ === void 0 ? void 0 : _tags$activeTagIndex$.children;
if (tagTitle) {
announce("Close ".concat(tagTitle, " Tag"));
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeTagIndex, tags === null || tags === void 0 ? void 0 : tags.length]);
var onTagLeft = function onTagLeft() {
if (activeTagIndex < 0) {
setActiveTagIndex === null || setActiveTagIndex === void 0 ? void 0 : setActiveTagIndex(visibleTagsCountRef.current - 1);
}
if (activeTagIndex > 0) {
setActiveTagIndex === null || setActiveTagIndex === void 0 ? void 0 : setActiveTagIndex(activeTagIndex - 1);
}
};
var onTagRight = function onTagRight() {
if (activeTagIndex < visibleTagsCountRef.current - 1) {
setActiveTagIndex === null || setActiveTagIndex === void 0 ? void 0 : setActiveTagIndex(activeTagIndex + 1);
}
};
var onTagRemove = function onTagRemove() {
if (activeTagIndex >= 0 && activeTagIndex < visibleTagsCountRef.current && tags) {
tags[activeTagIndex].props.onDismiss({
tagIndex: activeTagIndex
});
}
};
var onInputKeydownTagHandler = function onInputKeydownTagHandler(key) {
if (tags && tags.length > 0) {
if (key === 'ArrowRight') {
onTagRight();
}
if (key === 'ArrowLeft') {
onTagLeft();
}
if (key === 'Backspace') {
onTagRemove();
}
}
};
return {
onInputKeydownTagHandler: onInputKeydownTagHandler,
visibleTagsCountRef: visibleTagsCountRef
};
};
var useInput = function useInput(_ref) {
var value = _ref.value,
defaultValue = _ref.defaultValue,
onClick = _ref.onClick,
onFocus = _ref.onFocus,
onChange = _ref.onChange,
onBlur = _ref.onBlur,
onSubmit = _ref.onSubmit,
onInput = _ref.onInput,
onKeyDown = _ref.onKeyDown,
onInputKeydownTagHandler = _ref.onInputKeydownTagHandler;
if (false) {
if (value && defaultValue) {
throwBladeError({
message: "Either 'value' or 'defaultValue' shall be passed. This decides if the input field is controlled or uncontrolled",
moduleName: 'Input'
});
}
}
var _React$useState = React__default.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : value),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputValue = _React$useState2[0],
setInputValue = _React$useState2[1];
var handleOnFocus = React__default.useCallback(function (_ref2) {
var name = _ref2.name,
value = _ref2.value;
var _value = '';
if (getPlatformType() === 'react-native' && typeof value === 'string') {
_value = value;
} else if (typeof value !== 'string') {
var _value$target$value;
// Could have just done "getPlatformType() === 'react-native' ? value : value?.target.value" but TS doesn't understands that
_value = (_value$target$value = value === null || value === void 0 ? void 0 : value.target.value) !== null && _value$target$value !== void 0 ? _value$target$value : '';
}
onFocus === null || onFocus === void 0 ? void 0 : onFocus({
name: name,
value: _value
});
}, [onFocus]);
var handleOnClick = React__default.useCallback(function (_ref3) {
var name = _ref3.name,
value = _ref3.value;
var _value = '';
if (getPlatformType() === 'react-native' && typeof value === 'string') {
_value = value;
} else if (typeof value !== 'string') {
var _value$currentTarget$;
// Could have just done "getPlatformType() === 'react-native' ? value : value?.target.value" but TS doesn't understands that
_value = (_value$currentTarget$ = value === null || value === void 0 ? void 0 : value.currentTarget.value) !== null && _value$currentTarget$ !== void 0 ? _value$currentTarget$ : '';
}
onClick === null || onClick === void 0 ? void 0 : onClick({
name: name,
value: _value
});
}, [onClick]);
var handleOnSubmit = React__default.useCallback(function (_ref4) {
var name = _ref4.name,
value = _ref4.value;
var _value = '';
if (getPlatformType() === 'react-native' && typeof value === 'string') {
_value = value;
} else if (typeof value !== 'string') {
var _value$target$value2;
// Could have just done "getPlatformType() === 'react-native' ? value : value?.target.value" but TS doesn't understands that
_value = (_value$target$value2 = value === null || value === void 0 ? void 0 : value.target.value) !== null && _value$target$value2 !== void 0 ? _value$target$value2 : '';
}
if (isReactNative()) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
//@ts-ignore need to ignore this since it will throw a TS error for web but not for native
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
name: name,
value: _value
});
}
}, [onSubmit]);
var handleOnBlur = React__default.useCallback(function (_ref5) {
var name = _ref5.name,
value = _ref5.value;
var _value = '';
if (getPlatformType() === 'react-native' && typeof value == 'string') {
_value = value;
} else if (typeof value !== 'string') {
var _value$target$value3;
// Could have just done "getPlatformType() === 'react-native' ? value : value?.target.value" but TS doesn't understands that
_value = (_value$target$value3 = value === null || value === void 0 ? void 0 : value.target.value) !== null && _value$target$value3 !== void 0 ? _value$target$value3 : '';
}
onBlur === null || onBlur === void 0 ? void 0 : onBlur({
name: name,
value: _value
});
}, [onBlur]);
var handleOnChange = React__default.useCallback(function (_ref6) {
var name = _ref6.name,
value = _ref6.value;
var _value = '';
if (getPlatformType() === 'react-native' && typeof value === 'string') {
_value = value;
} else if (typeof value !== 'string') {
var _value$target$value4;
// Could have just done "getPlatformType() === 'react-native' ? value : value?.target.value" but TS doesn't understands that
_value = (_value$target$value4 = value === null || value === void 0 ? void 0 : value.target.value) !== null && _value$target$value4 !== void 0 ? _value$target$value4 : '';
}
onChange === null || onChange === void 0 ? void 0 : onChange({
name: name,
value: _value
});
setInputValue(_value);
}, [onChange]);
var handleOnInput = React__default.useCallback(function (_ref7) {
var name = _ref7.name,
value = _ref7.value;
var _value = '';
if (getPlatformType() === 'react-native' && typeof value == 'string') {
_value = value;
} else if (typeof value !== 'string') {
var _value$target$value5;
// Could have just done "getPlatformType() === 'react-native' ? value : value?.target.value" but TS doesn't understands that
_value = (_value$target$value5 = value === null || value === void 0 ? void 0 : value.target.value) !== null && _value$target$value5 !== void 0 ? _value$target$value5 : '';
}
onInput === null || onInput === void 0 ? void 0 : onInput({
name: name,
value: _value
});
}, [onInput]);
var handleOnKeyDown = React__default.useCallback(function (_ref8) {
var name = _ref8.name,
key = _ref8.key,
code = _ref8.code,
event = _ref8.event;
onInputKeydownTagHandler(key);
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown({
name: name,
key: key,
code: code,
event: event
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[onKeyDown]);
return {
handleOnFocus: handleOnFocus,
handleOnClick: handleOnClick,
handleOnChange: handleOnChange,
handleOnBlur: handleOnBlur,
handleOnSubmit: handleOnSubmit,
handleOnInput: handleOnInput,
handleOnKeyDown: handleOnKeyDown,
inputValue: inputValue
};
};
var getHintType = function getHintType(_ref9) {
var validationState = _ref9.validationState,
hasHelpText = _ref9.hasHelpText;
if (validationState === 'error') {
return 'error';
}
if (validationState === 'success') {
return 'success';
}
if (hasHelpText) {
return 'help';
}
return 'help';
};
var getDescribedByElementId = function getDescribedByElementId(_ref10) {
var validationState = _ref10.validationState,
hasErrorText = _ref10.hasErrorText,
hasSuccessText = _ref10.hasSuccessText,
hasHelpText = _ref10.hasHelpText,
errorTextId = _ref10.errorTextId,
successTextId = _ref10.successTextId,
helpTextId = _ref10.helpTextId;
if (validationState === 'error' && hasErrorText) {
return errorTextId;
}
if (validationState === 'success' && hasSuccessText) {
return successTextId;
}
if (hasHelpText) {
return helpTextId;
}
return '';
};
var FocusRingWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "BaseInput__FocusRingWrapper",
componentId: "sc-177qd3e-0"
})(function (_ref11) {
var theme = _ref11.theme,
currentInteraction = _ref11.currentInteraction,
isTableInputCell = _ref11.isTableInputCell;
return {
borderRadius: makeBorderSize(isTableInputCell ? theme.border.radius.none : theme.border.radius.medium),
width: '100%',
'&:focus-within': !isTableInputCell ? _objectSpread(_objectSpread({}, getFocusRingStyles({
theme: theme
})), {}, {
transitionDuration: castWebType(makeMotionTime(getIn(theme.motion.duration, baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit'].duration))),
transitionTimingFunction: castWebType(theme.motion.easing[baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit'].easing])
}) : {}
};
});
var _BaseInput = function _BaseInput(_ref12, ref) {
var _ref12$as = _ref12.as,
as = _ref12$as === void 0 ? 'input' : _ref12$as,
label = _ref12.label,
_ref12$labelPosition = _ref12.labelPosition,
labelPosition = _ref12$labelPosition === void 0 ? 'top' : _ref12$labelPosition,
placeholder = _ref12.placeholder,
_ref12$type = _ref12.type,
type = _ref12$type === void 0 ? 'text' : _ref12$type,
defaultValue = _ref12.defaultValue,
tags = _ref12.tags,
_ref12$showAllTags = _ref12.showAllTags,
showAllTags = _ref12$showAllTags === void 0 ? false : _ref12$showAllTags,
_ref12$activeTagIndex = _ref12.activeTagIndex,
activeTagIndex = _ref12$activeTagIndex === void 0 ? -1 : _ref12$activeTagIndex,
setActiveTagIndex = _ref12.setActiveTagIndex,
name = _ref12.name,
value = _ref12.value,
onFocus = _ref12.onFocus,
onChange = _ref12.onChange,
onInput = _ref12.onInput,
onBlur = _ref12.onBlur,
onSubmit = _ref12.onSubmit,
onClick = _ref12.onClick,
onKeyDown = _ref12.onKeyDown,
isDisabled = _ref12.isDisabled,
necessityIndicator = _ref12.necessityIndicator,
validationState = _ref12.validationState,
errorText = _ref12.errorText,
helpText = _ref12.helpText,
successText = _ref12.successText,
isRequired = _ref12.isRequired,
leadingIcon = _ref12.leadingIcon,
prefix = _ref12.prefix,
trailingInteractionElement = _ref12.trailingInteractionElement,
onTrailingInteractionElementClick = _ref12.onTrailingInteractionElementClick,
leadingInteractionElement = _ref12.leadingInteractionElement,
suffix = _ref12.suffix,
trailingIcon = _ref12.trailingIcon,
maxCharacters = _ref12.maxCharacters,
textAlign = _ref12.textAlign,
autoFocus = _ref12.autoFocus,
keyboardReturnKeyType = _ref12.keyboardReturnKeyType,
keyboardType = _ref12.keyboardType,
autoCompleteSuggestionType = _ref12.autoCompleteSuggestionType,
trailingHeaderSlot = _ref12.trailingHeaderSlot,
trailingFooterSlot = _ref12.trailingFooterSlot,
numberOfLines = _ref12.numberOfLines,
id = _ref12.id,
componentName = _ref12.componentName,
accessibilityLabel = _ref12.accessibilityLabel,
labelId = _ref12.labelId,
activeDescendant = _ref12.activeDescendant,
hideLabelText = _ref12.hideLabelText,
hideFormHint = _ref12.hideFormHint,
hasPopup = _ref12.hasPopup,
popupId = _ref12.popupId,
isPopupExpanded = _ref12.isPopupExpanded,
maxTagRows = _ref12.maxTagRows,
shouldIgnoreBlurAnimation = _ref12.shouldIgnoreBlurAnimation,
setShouldIgnoreBlurAnimation = _ref12.setShouldIgnoreBlurAnimation,
autoCapitalize = _ref12.autoCapitalize,
setInputWrapperRef = _ref12.setInputWrapperRef,
testID = _ref12.testID,
isDropdownTrigger = _ref12.isDropdownTrigger,
isLabelInsideInput = _ref12.isLabelInsideInput,
_ref12$size = _ref12.size,
size = _ref12$size === void 0 ? 'medium' : _ref12$size,
trailingButton = _ref12.trailingButton,
_ref12$valueComponent = _ref12.valueComponentType,
valueComponentType = _ref12$valueComponent === void 0 ? 'text' : _ref12$valueComponent,
_ref12$isTableInputCe = _ref12.isTableInputCell,
isTableInputCell = _ref12$isTableInputCe === void 0 ? false : _ref12$isTableInputCe,
_ref12$showHintsAsToo = _ref12.showHintsAsTooltip,
showHintsAsTooltip = _ref12$showHintsAsToo === void 0 ? false : _ref12$showHintsAsToo,
_motionMeta = _ref12._motionMeta,
role = _ref12.role,
tabIndex = _ref12.tabIndex,
rest = _objectWithoutProperties(_ref12, _excluded);
var _useTheme = useTheme(),
theme = _useTheme.theme;
var inputRef = React__default.useRef(null);
var mergedInputRef = useMergeRefs(ref, inputRef);
var inputWrapperRef = React__default.useRef(null);
var _useTags = useTags(tags, activeTagIndex, setActiveTagIndex),
onInputKeydownTagHandler = _useTags.onInputKeydownTagHandler,
visibleTagsCountRef = _useTags.visibleTagsCountRef;
var _React$useState3 = React__default.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
showAllTagsWithAnimation = _React$useState4[0],
setShowAllTagsWithAnimation = _React$useState4[1];
var isReactNative = getPlatformType() === 'react-native';
var defaultRole = hasPopup ? 'combobox' : undefined;
React__default.useEffect(function () {
if (showAllTags) {
setShowAllTagsWithAnimation(true);
} else if (maxTagRows !== 'expandable') {
setShowAllTagsWithAnimation(false);
}
}, [showAllTags, maxTagRows]);
var _useInput = useInput({
defaultValue: defaultValue,
value: value,
onFocus: onFocus,
onClick: onClick,
onChange: onChange,
onBlur: onBlur,
onSubmit: onSubmit,
onInput: onInput,
onKeyDown: onKeyDown,
onInputKeydownTagHandler: onInputKeydownTagHandler
}),
handleOnFocus = _useInput.handleOnFocus,
handleOnChange = _useInput.handleOnChange,
handleOnClick = _useInput.handleOnClick,
handleOnBlur = _useInput.handleOnBlur,
handleOnSubmit = _useInput.handleOnSubmit,
handleOnInput = _useInput.handleOnInput,
handleOnKeyDown = _useInput.handleOnKeyDown,
inputValue = _useInput.inputValue;
var _useFormId = useFormId(id),
inputId = _useFormId.inputId,
helpTextId = _useFormId.helpTextId,
errorTextId = _useFormId.errorTextId,
successTextId = _useFormId.successTextId;
var _useBreakpoint = useBreakpoint({
breakpoints: theme.breakpoints
}),
matchedDeviceType = _useBreakpoint.matchedDeviceType;
var isLabelLeftPositioned = labelPosition === 'left' && matchedDeviceType === 'desktop';
var _useInteraction = useInteraction(),
currentInteraction = _useInteraction.currentInteraction,
setCurrentInteraction = _useInteraction.setCurrentInteraction;
var _isRequired = isRequired || necessityIndicator === 'required';
var accessibilityProps = makeAccessible({
required: Boolean(_isRequired),
disabled: Boolean(isDisabled),
invalid: Boolean(validationState === 'error'),
describedBy: getDescribedByElementId({
validationState: validationState,
hasErrorText: Boolean(errorText),
hasSuccessText: Boolean(successText),
hasHelpText: Boolean(helpText),
errorTextId: errorTextId,
successTextId: successTextId,
helpTextId: helpTextId
}),
label: accessibilityLabel,
hasPopup: hasPopup,
expanded: hasPopup ? isPopupExpanded : undefined,
controls: hasPopup ? popupId : undefined,
role: role !== null && role !== void 0 ? role : defaultRole,
activeDescendant: activeDescendant
});
var willRenderHintText = Boolean(helpText) || validationState === 'success' && Boolean(successText) || validationState === 'error' && Boolean(errorText);
if (false) {
if (autoCompleteSuggestionType && !autoCompleteSuggestionTypeValues.includes(autoCompleteSuggestionType)) {
throwBladeError({
message: "Expected autoCompleteSuggestionType to be one of ".concat(autoCompleteSuggestionTypeValues.join(', '), " but received ").concat(autoCompleteSuggestionType),
moduleName: 'Input'
});
}
}
var isTextArea = as === 'textarea';
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
ref: getOuterMotionRef({
_motionMeta: _motionMeta,
ref: ref
})
}, metaAttribute({
name: componentName,
testID: testID
})), getStyledProps(rest)), {}, {
children: [/*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: isLabelLeftPositioned ? 'row' : 'column',
justifyContent: isLabelLeftPositioned ? 'center' : undefined,
alignItems: isLabelLeftPositioned ? 'center' : undefined,
position: "relative",
width: "100%",
children: [!hideLabelText && !isLabelInsideInput && label && /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: isLabelLeftPositioned ? 'column' : 'row',
justifyContent: "space-between",
alignSelf: isTextArea ? 'flex-start' : undefined,
marginY: isTextArea && isLabelLeftPositioned ? 'spacing.3' : 'spacing.0',
children: [/*#__PURE__*/jsx(FormLabel, {
as: "label",
necessityIndicator: necessityIndicator,
position: labelPosition,
id: labelId,
htmlFor: inputId,
size: size,
children: label
}), trailingHeaderSlot === null || trailingHeaderSlot === void 0 ? void 0 : trailingHeaderSlot(value !== null && value !== void 0 ? value : inputValue)]
}), /*#__PURE__*/jsx(FocusRingWrapper, {
currentInteraction: currentInteraction,
isTableInputCell: isTableInputCell,
children: /*#__PURE__*/jsxs(BaseInputWrapper, {
isDropdownTrigger: isDropdownTrigger,
isTextArea: isTextArea,
isDisabled: isDisabled,
validationState: validationState,
currentInteraction: currentInteraction,
isLabelLeftPositioned: isLabelLeftPositioned,
showAllTags: showAllTags,
setShowAllTagsWithAnimation: setShowAllTagsWithAnimation,
ref: function ref(refNode) {
if (refNode) {
setInputWrapperRef === null || setInputWrapperRef === void 0 ? void 0 : setInputWrapperRef(refNode);
inputWrapperRef.current = refNode;
}
},
maxTagRows: maxTagRows,
size: size,
numberOfLines: numberOfLines,
onClick: function onClick() {
if (!isReactNative) {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
}
},
isTableInputCell: isTableInputCell,
children: [/*#__PURE__*/jsx(BaseInputVisuals, {
size: size,
leadingIcon: leadingIcon,
prefix: prefix,
isDisabled: isDisabled,
leadingInteractionElement: leadingInteractionElement
}), /*#__PURE__*/jsx(BaseInputTagSlot, {
renderAs: as,
tags: tags,
isDisabled: isDisabled,
showAllTags: showAllTagsWithAnimation,
setFocusOnInput: function setFocusOnInput() {
var innerRef = getInnerMotionRef({
_motionMeta: _motionMeta,
ref: ref
});
if (innerRef && !isReactNative && 'current' in innerRef) {
var _innerRef$current;
(_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
}
},
labelPrefix: isLabelInsideInput ? label : undefined,
isDropdownTrigger: isDropdownTrigger,
visibleTagsCountRef: visibleTagsCountRef,
handleOnInputClick: function handleOnInputClick(e) {
handleOnClick({
name: name,
value: isReactNative ? value : e
});
},
setShouldIgnoreBlurAnimation: setShouldIgnoreBlurAnimation,
maxTagRows: maxTagRows,
inputWrapperRef: inputWrapperRef,
size: size,
numberOfLines: numberOfLines,
isTextArea: isTextArea,
children: /*#__PURE__*/jsx(StyledBaseInput, _objectSpread(_objectSpread({
as: as,
id: inputId,
ref: getInnerMotionRef({
_motionMeta: _motionMeta,
ref: mergedInputRef
}),
name: name,
type: type,
defaultValue: defaultValue,
value: value,
placeholder: placeholder,
isDisabled: isDisabled,
validationState: validationState,
isRequired: _isRequired,
handleOnFocus: handleOnFocus,
handleOnChange: handleOnChange,
handleOnBlur: handleOnBlur,
handleOnSubmit: handleOnSubmit,
handleOnInput: handleOnInput,
handleOnKeyDown: handleOnKeyDown,
handleOnClick: handleOnClick,
leadingIcon: leadingIcon,
prefix: prefix,
trailingInteractionElement: trailingInteractionElement,
leadingInteractionElement: leadingInteractionElement,
suffix: suffix,
trailingIcon: trailingIcon,
maxCharacters: maxCharacters,
textAlign: textAlign
// eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: autoFocus,
keyboardReturnKeyType: keyboardReturnKeyType,
keyboardType: keyboardType,
autoCompleteSuggestionType: autoCompleteSuggestionType,
accessibilityProps: accessibilityProps,
currentInteraction: currentInteraction,
setCurrentInteraction: setCurrentInteraction,
numberOfLines: numberOfLines,
isTextArea: isTextArea || maxTagRows === 'multiple' || maxTagRows === 'expandable',
hasPopup: hasPopup,
hasTags: !!(tags && tags.length > 0),
shouldIgnoreBlurAnimation: shouldIgnoreBlurAnimation,
autoCapitalize: autoCapitalize,
isDropdownTrigger: isDropdownTrigger,
$size: size,
valueComponentType: valueComponentType,
isTableInputCell: isTableInputCell,
tabIndex: tabIndex
}, metaAttribute({
name: MetaConstants.StyledBaseInput
})), makeAnalyticsAttribute(rest)))
}), /*#__PURE__*/jsx(BaseInputVisuals, {
trailingInteractionElement: trailingInteractionElement,
onTrailingInteractionElementClick: onTrailingInteractionElementClick,
suffix: suffix,
trailingIcon: trailingIcon,
isDisabled: isDisabled,
validationState: validationState,
trailingButton: trailingButton,
size: size,
errorText: errorText,
successText: successText,
showHintsAsTooltip: showHintsAsTooltip
})]
})
})]
}), hideFormHint || showHintsAsTooltip ? null : /*#__PURE__*/jsx(BaseBox, {
marginLeft: makeSize(isLabelLeftPositioned && !hideLabelText ? formHintLeftLabelMarginLeft[size] : 0),
children: /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
justifyContent: willRenderHintText ? 'space-between' : 'flex-end',
children: [/*#__PURE__*/jsx(FormHint, {
type: getHintType({
validationState: validationState,
hasHelpText: Boolean(helpText)
}),
helpText: helpText,
errorText: errorText,
successText: successText,
helpTextId: helpTextId,
errorTextId: errorTextId,
successTextId: successTextId,
size: size
}), trailingFooterSlot === null || trailingFooterSlot === void 0 ? void 0 : trailingFooterSlot(value !== null && value !== void 0 ? value : inputValue)]
})
})]
}));
};
var BaseInputWithRef = /*#__PURE__*/React__default.forwardRef(_BaseInput);
var BaseInput = /*#__PURE__*/assignWithoutSideEffects(BaseInputWithRef, {
displayName: 'BaseInput'
});
export { BaseInput, getHintType };
//# sourceMappingURL=BaseInput.js.map