@razorpay/blade
Version:
The Design System that powers Razorpay
717 lines (714 loc) • 34.1 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 { baseInputBorderRadius, 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 { useInputGroupContext } from '../../InputGroup/InputGroupContext.js';
import { useCounterInputContext } from '../../CounterInput/CounterInputContext.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", "onPaste", "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", "padding", "borderRadius", "elevation", "trailingButton", "valueComponentType", "isTableInputCell", "showHintsAsTooltip", "_motionMeta", "role", "tabIndex", "leadingDropDown", "trailingDropDown", "labelSuffix", "labelTrailing", "valueSuffix", "children", "topContent", "bottomContent", "inputRowOverlay", "caretColor"];
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;
var tagTitle = (_tags$activeTagIndex = tags[activeTagIndex]) === null || _tags$activeTagIndex === 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 || setActiveTagIndex(visibleTagsCountRef.current - 1);
}
if (activeTagIndex > 0) {
setActiveTagIndex === null || setActiveTagIndex === void 0 || setActiveTagIndex(activeTagIndex - 1);
}
};
var onTagRight = function onTagRight() {
if (activeTagIndex < visibleTagsCountRef.current - 1) {
setActiveTagIndex === null || setActiveTagIndex === 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 (true) {
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 || 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 || 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 || 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 || 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 || 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 || 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 || 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(_ref0) {
var validationState = _ref0.validationState,
hasErrorText = _ref0.hasErrorText,
hasSuccessText = _ref0.hasSuccessText,
hasHelpText = _ref0.hasHelpText,
errorTextId = _ref0.errorTextId,
successTextId = _ref0.successTextId,
helpTextId = _ref0.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 (_ref1) {
var theme = _ref1.theme,
currentInteraction = _ref1.currentInteraction,
isTableInputCell = _ref1.isTableInputCell,
shouldAddLimitedFocus = _ref1.shouldAddLimitedFocus,
$size = _ref1.$size,
$borderRadius = _ref1.$borderRadius;
return {
borderRadius: makeBorderSize(isTableInputCell ? theme.border.radius.none : theme.border.radius[$borderRadius !== null && $borderRadius !== void 0 ? $borderRadius : baseInputBorderRadius[$size]]),
width: '100%',
'&:focus-within': !isTableInputCell && (shouldAddLimitedFocus ? currentInteraction === 'focus' : true) ? _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(_ref10, ref) {
var _ref11, _inputGroupProps$isDi, _inputGroupProps$size;
var _ref10$as = _ref10.as,
as = _ref10$as === void 0 ? 'input' : _ref10$as,
label = _ref10.label,
_ref10$labelPosition = _ref10.labelPosition,
labelPosition = _ref10$labelPosition === void 0 ? 'top' : _ref10$labelPosition,
placeholder = _ref10.placeholder,
_ref10$type = _ref10.type,
type = _ref10$type === void 0 ? 'text' : _ref10$type,
defaultValue = _ref10.defaultValue,
tags = _ref10.tags,
_ref10$showAllTags = _ref10.showAllTags,
showAllTags = _ref10$showAllTags === void 0 ? false : _ref10$showAllTags,
_ref10$activeTagIndex = _ref10.activeTagIndex,
activeTagIndex = _ref10$activeTagIndex === void 0 ? -1 : _ref10$activeTagIndex,
setActiveTagIndex = _ref10.setActiveTagIndex,
name = _ref10.name,
value = _ref10.value,
onFocus = _ref10.onFocus,
onChange = _ref10.onChange,
onInput = _ref10.onInput,
onBlur = _ref10.onBlur,
onSubmit = _ref10.onSubmit,
onClick = _ref10.onClick,
onKeyDown = _ref10.onKeyDown,
onPaste = _ref10.onPaste,
isDisabled = _ref10.isDisabled,
necessityIndicator = _ref10.necessityIndicator,
validationState = _ref10.validationState,
errorText = _ref10.errorText,
helpText = _ref10.helpText,
successText = _ref10.successText,
isRequired = _ref10.isRequired,
leadingIcon = _ref10.leadingIcon,
prefix = _ref10.prefix,
trailingInteractionElement = _ref10.trailingInteractionElement,
onTrailingInteractionElementClick = _ref10.onTrailingInteractionElementClick,
leadingInteractionElement = _ref10.leadingInteractionElement,
suffix = _ref10.suffix,
trailingIcon = _ref10.trailingIcon,
maxCharacters = _ref10.maxCharacters,
textAlign = _ref10.textAlign,
autoFocus = _ref10.autoFocus,
keyboardReturnKeyType = _ref10.keyboardReturnKeyType,
keyboardType = _ref10.keyboardType,
autoCompleteSuggestionType = _ref10.autoCompleteSuggestionType,
trailingHeaderSlot = _ref10.trailingHeaderSlot,
trailingFooterSlot = _ref10.trailingFooterSlot,
numberOfLines = _ref10.numberOfLines,
id = _ref10.id,
componentName = _ref10.componentName,
accessibilityLabel = _ref10.accessibilityLabel,
labelId = _ref10.labelId,
activeDescendant = _ref10.activeDescendant,
hideLabelText = _ref10.hideLabelText,
hideFormHint = _ref10.hideFormHint,
hasPopup = _ref10.hasPopup,
popupId = _ref10.popupId,
isPopupExpanded = _ref10.isPopupExpanded,
maxTagRows = _ref10.maxTagRows,
shouldIgnoreBlurAnimation = _ref10.shouldIgnoreBlurAnimation,
setShouldIgnoreBlurAnimation = _ref10.setShouldIgnoreBlurAnimation,
autoCapitalize = _ref10.autoCapitalize,
setInputWrapperRef = _ref10.setInputWrapperRef,
testID = _ref10.testID,
isDropdownTrigger = _ref10.isDropdownTrigger,
isLabelInsideInput = _ref10.isLabelInsideInput,
_ref10$size = _ref10.size,
size = _ref10$size === void 0 ? 'medium' : _ref10$size,
padding = _ref10.padding,
borderRadius = _ref10.borderRadius,
elevation = _ref10.elevation,
trailingButton = _ref10.trailingButton,
_ref10$valueComponent = _ref10.valueComponentType,
valueComponentType = _ref10$valueComponent === void 0 ? 'text' : _ref10$valueComponent,
_ref10$isTableInputCe = _ref10.isTableInputCell,
isTableInputCell = _ref10$isTableInputCe === void 0 ? false : _ref10$isTableInputCe,
_ref10$showHintsAsToo = _ref10.showHintsAsTooltip,
showHintsAsTooltip = _ref10$showHintsAsToo === void 0 ? false : _ref10$showHintsAsToo,
_motionMeta = _ref10._motionMeta,
role = _ref10.role,
tabIndex = _ref10.tabIndex,
leadingDropDown = _ref10.leadingDropDown,
trailingDropDown = _ref10.trailingDropDown,
labelSuffix = _ref10.labelSuffix,
labelTrailing = _ref10.labelTrailing,
valueSuffix = _ref10.valueSuffix,
children = _ref10.children,
topContent = _ref10.topContent,
bottomContent = _ref10.bottomContent,
inputRowOverlay = _ref10.inputRowOverlay,
caretColor = _ref10.caretColor,
rest = _objectWithoutProperties(_ref10, _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;
var inputGroupProps = useInputGroupContext();
var isInsideInputGroup = inputGroupProps.isInsideInputGroup;
var counterInputProps = useCounterInputContext();
var color = counterInputProps.color,
disabledColor = counterInputProps.disabledTextColor,
isCounterInputDisabled = counterInputProps.isDisabled,
isCounterInputLoading = counterInputProps.isLoading,
isInsideCounterInput = counterInputProps.isInsideCounterInput;
var _isDisabled = (_ref11 = (_inputGroupProps$isDi = inputGroupProps.isDisabled) !== null && _inputGroupProps$isDi !== void 0 ? _inputGroupProps$isDi : isCounterInputDisabled || isCounterInputLoading) !== null && _ref11 !== void 0 ? _ref11 : isDisabled;
var _size = (_inputGroupProps$size = inputGroupProps.size) !== null && _inputGroupProps$size !== void 0 ? _inputGroupProps$size : size;
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 (true) {
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';
var hasLeadingDropdown = Boolean(leadingDropDown);
var hasTrailingDropdown = Boolean(trailingDropDown);
var shouldAddLimitedFocus = hasLeadingDropdown || hasTrailingDropdown;
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 && !isInsideInputGroup && /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: isLabelLeftPositioned ? 'column' : 'row',
justifyContent: "space-between",
alignSelf: isTextArea && isLabelLeftPositioned ? '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,
labelSuffix: labelSuffix,
labelTrailing: labelTrailing,
children: label
}), trailingHeaderSlot === null || trailingHeaderSlot === void 0 ? void 0 : trailingHeaderSlot(value !== null && value !== void 0 ? value : inputValue)]
}), /*#__PURE__*/jsx(FocusRingWrapper, {
currentInteraction: currentInteraction,
isTableInputCell: isTableInputCell,
className: "focus-ring-wrapper",
shouldAddLimitedFocus: shouldAddLimitedFocus,
$size: _size,
$borderRadius: borderRadius,
elevation: elevation,
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 || setInputWrapperRef(refNode);
inputWrapperRef.current = refNode;
}
},
maxTagRows: maxTagRows,
size: _size,
borderRadius: borderRadius,
numberOfLines: numberOfLines,
onClick: function onClick() {
if (!isReactNative) {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
}
},
isTableInputCell: isTableInputCell,
topContent: topContent,
bottomContent: bottomContent,
inputRowOverlay: inputRowOverlay,
children: [/*#__PURE__*/jsx(BaseInputVisuals, {
size: _size,
leadingIcon: leadingIcon,
prefix: prefix,
isDisabled: _isDisabled,
leadingInteractionElement: leadingInteractionElement,
leadingDropDown: leadingDropDown
}), /*#__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 || _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,
onPaste: onPaste,
handleOnClick: handleOnClick,
leadingIcon: leadingIcon,
prefix: prefix,
trailingInteractionElement: trailingInteractionElement,
leadingInteractionElement: leadingInteractionElement,
suffix: suffix,
valueSuffix: valueSuffix,
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,
$padding: padding,
valueComponentType: valueComponentType,
isTableInputCell: isTableInputCell,
tabIndex: tabIndex,
hasLeadingDropdown: Boolean(leadingDropDown),
children: children,
color: color,
disabledColor: disabledColor,
isInsideCounterInput: isInsideCounterInput,
$caretColor: caretColor
}, 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,
trailingDropDown: trailingDropDown
})]
})
})]
}), hideFormHint || showHintsAsTooltip || isInsideInputGroup ? 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