@razorpay/blade
Version:
The Design System that powers Razorpay
256 lines (250 loc) • 12.2 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import '../BaseInput/index.js';
import { InputChevronIcon } from './InputChevronIcon.web.js';
import { useDropdown } from '../../Dropdown/useDropdown.js';
import '../../../utils/index.js';
import { getActionListContainerRole } from '../../ActionList/getA11yRoles.js';
import '../../../utils/metaAttribute/index.js';
import { getTagsGroup } from '../../Tag/getTagsGroup.js';
import { useTableContext } from '../../Table/TableContext.js';
import { rowDensityToIsTableInputCellMapping, tableEditableCellRowDensityToInputSizeMap, validationStateToInputTrailingIconMap } from '../../Table/tokens.js';
import { useTableEditableCell } from '../../Table/TableEditableCellContext.js';
import '../../../utils/makeAnalyticsAttribute/index.js';
import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
import '../../../utils/useControlledDropdownInput/index.js';
import { jsx } from 'react/jsx-runtime';
import { useControlledDropdownInput } from '../../../utils/useControlledDropdownInput/useControlledDropdownInput.js';
import { isReactNative } from '../../../utils/platform/isReactNative.js';
import { BaseInput } from '../BaseInput/BaseInput.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
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 _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
var _props$placeholder, _props$validationStat, _props$maxRows, _props$label;
var _useDropdown = useDropdown(),
isOpen = _useDropdown.isOpen,
activeTagIndex = _useDropdown.activeTagIndex,
setActiveTagIndex = _useDropdown.setActiveTagIndex,
displayValue = _useDropdown.displayValue,
selectionType = _useDropdown.selectionType,
dropdownTriggerer = _useDropdown.dropdownTriggerer,
dropdownBaseId = _useDropdown.dropdownBaseId,
selectedIndices = _useDropdown.selectedIndices,
triggererRef = _useDropdown.triggererRef,
headerAutoCompleteRef = _useDropdown.headerAutoCompleteRef,
triggererWrapperRef = _useDropdown.triggererWrapperRef,
isTagDismissedRef = _useDropdown.isTagDismissedRef,
onTriggerClick = _useDropdown.onTriggerClick,
value = _useDropdown.value,
shouldIgnoreBlurAnimation = _useDropdown.shouldIgnoreBlurAnimation,
setShouldIgnoreBlurAnimation = _useDropdown.setShouldIgnoreBlurAnimation,
activeIndex = _useDropdown.activeIndex,
hasFooterAction = _useDropdown.hasFooterAction,
options = _useDropdown.options,
removeOption = _useDropdown.removeOption,
setChangeCallbackTriggerer = _useDropdown.setChangeCallbackTriggerer,
changeCallbackTriggerer = _useDropdown.changeCallbackTriggerer;
var _useTableContext = useTableContext(),
rowDensity = _useTableContext.rowDensity;
var _useTableEditableCell = useTableEditableCell(),
isInsideTableEditableCell = _useTableEditableCell.isInsideTableEditableCell;
var dropdownTriggerPlaceholder = (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : 'Select Option';
var isAutoCompleteInHeader = !props.isSelectInput && dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete;
var getShowAllTags = React__default.useCallback(function () {
if (isAutoCompleteInHeader) {
// When AutoComplete is in bottomsheet header, we never want to show all tags in outer select input
if (props.isSelectInput) {
return false;
}
// ... And we always want to show all tags in inner AutoComplete
return true;
}
return isOpen;
}, [isAutoCompleteInHeader, props.isSelectInput, isOpen]);
useControlledDropdownInput({
onChange: props.onChange,
name: props.name,
value: props.value,
defaultValue: props.defaultValue,
syncInputValueWithSelection: props.syncInputValueWithSelection,
isSelectInput: props.isSelectInput,
triggererRef: triggererRef
});
var getValue = function getValue() {
var prefix = '';
if (props.labelPosition === 'inside-input' && props.label) {
prefix = "".concat(props.label, ": ");
}
if (props.isSelectInput) {
if (selectionType === 'single') {
return "".concat(prefix).concat(displayValue);
}
// In multiselect, we return tags so no display value is required
return undefined;
}
// In AutoComplete, input has a special value too
return props.inputValue;
};
var getTags = React__default.useMemo(function () {
return function (_ref) {
var size = _ref.size;
if (selectionType === 'single') {
return undefined;
}
return getTagsGroup({
size: size,
tags: selectedIndices.map(function (selectedIndex) {
var _options$selectedInde;
return (_options$selectedInde = options[selectedIndex]) === null || _options$selectedInde === void 0 ? void 0 : _options$selectedInde.title;
}),
activeTagIndex: activeTagIndex,
isDisabled: props.isDisabled,
onDismiss: function onDismiss(_ref2) {
var tagIndex = _ref2.tagIndex;
if (isTagDismissedRef.current) {
isTagDismissedRef.current.value = true;
}
if (!isReactNative()) {
var _triggererRef$current;
(_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 || _triggererRef$current.focus();
}
removeOption(selectedIndices[tagIndex]);
setChangeCallbackTriggerer(Number(changeCallbackTriggerer) + 1);
}
});
};
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[selectedIndices, selectionType, activeTagIndex, changeCallbackTriggerer, options]);
var tableInputProps = {
isTableInputCell: rowDensityToIsTableInputCellMapping[rowDensity],
id: 'table-editable-cell-input',
size: tableEditableCellRowDensityToInputSizeMap[rowDensity],
trailingIcon: validationStateToInputTrailingIconMap[(_props$validationStat = props.validationState) !== null && _props$validationStat !== void 0 ? _props$validationStat : 'none'],
showHintsAsTooltip: true
};
var isValidationStateNone = props.validationState === 'none' || props.validationState === undefined;
return /*#__PURE__*/jsx(BaseInput, _objectSpread(_objectSpread(_objectSpread({
as: props.isSelectInput ? 'button' : 'input',
ref: isReactNative() ? null :
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function (node) {
if (isAutoCompleteInHeader) {
headerAutoCompleteRef.current = node;
} else {
triggererRef.current = node;
}
if (ref) {
if (typeof ref === 'function') {
ref(node);
} else {
ref.current = node;
}
}
},
isDropdownTrigger: true,
setInputWrapperRef: function setInputWrapperRef(wrapperNode) {
// when autocomplete is in header, its not a trigger but a component inside of DropdownOverlay
if (!isAutoCompleteInHeader) {
triggererWrapperRef.current = wrapperNode;
}
},
maxTagRows: (_props$maxRows = props.maxRows) !== null && _props$maxRows !== void 0 ? _props$maxRows : 'single',
tags: getTags({
size: props.size || 'medium'
}),
showAllTags: getShowAllTags(),
activeTagIndex: activeTagIndex,
setActiveTagIndex: setActiveTagIndex,
shouldIgnoreBlurAnimation: shouldIgnoreBlurAnimation,
setShouldIgnoreBlurAnimation: setShouldIgnoreBlurAnimation,
textAlign: "left"
// Form Props
,
label: props.label,
placeholder: selectionType === 'multiple' && selectedIndices.length > 0 ? undefined : dropdownTriggerPlaceholder,
hideLabelText: ((_props$label = props.label) === null || _props$label === void 0 ? void 0 : _props$label.length) === 0,
accessibilityLabel: props.accessibilityLabel,
labelPosition: props.labelPosition === 'inside-input' ? undefined : props.labelPosition,
isLabelInsideInput: props.labelPosition === 'inside-input',
necessityIndicator: props.necessityIndicator,
autoCompleteSuggestionType: "none",
validationState: props.validationState,
helpText: props.helpText,
errorText: props.errorText,
successText: props.successText,
name: props.name,
isDisabled: props.isDisabled,
isRequired: props.isRequired,
prefix: props.prefix,
suffix: props.suffix,
valueSuffix: typeof props.valueSuffix === 'function' ? props.valueSuffix({
values: options.filter(function (option, index) {
return selectedIndices.includes(index);
}).map(function (option) {
return option.value;
})
}) : undefined,
autoFocus: props.autoFocus // eslint-disable-line jsx-a11y/no-autofocus
,
value: getValue(),
onClick: function onClick(e) {
var _props$onTriggerClick;
if (props.isDisabled) {
return;
}
(_props$onTriggerClick = props.onTriggerClick) === null || _props$onTriggerClick === void 0 || _props$onTriggerClick.call(props, e);
},
onFocus: props.onFocus,
onBlur: function onBlur(_ref3) {
var _props$onBlur;
var name = _ref3.name;
(_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, {
name: name,
value: value
});
},
leadingIcon: props.icon
// Meta Props
,
componentName: props.isSelectInput ? MetaConstants.SelectInput : MetaConstants.AutoComplete,
testID: props.testID
// a11y Props
,
id: "".concat(dropdownBaseId, "-trigger"),
labelId: "".concat(dropdownBaseId, "-label"),
role: isAutoCompleteInHeader ? 'searchbox' : 'combobox',
hasPopup: isAutoCompleteInHeader ? false : getActionListContainerRole(hasFooterAction, dropdownTriggerer),
isPopupExpanded: isOpen,
activeDescendant: activeIndex >= 0 ? "".concat(dropdownBaseId, "-").concat(activeIndex) : undefined,
popupId: isAutoCompleteInHeader ? undefined : "".concat(dropdownBaseId, "-actionlist")
// Special Props for Unique behaviour between Select and AutoComplete
,
onChange: props.isSelectInput ? undefined : props.onInputValueChange,
onKeyDown: props.onTriggerKeydown,
size: props.size
}, makeAnalyticsAttribute(props)), {}, {
onTrailingInteractionElementClick: function onTrailingInteractionElementClick() {
if (!props.isDisabled) {
// Icon onClicks to the SelectInput itself
if (!isReactNative()) {
var _triggererRef$current2;
(_triggererRef$current2 = triggererRef.current) === null || _triggererRef$current2 === void 0 || _triggererRef$current2.focus();
}
onTriggerClick();
}
},
trailingInteractionElement: isAutoCompleteInHeader || isInsideTableEditableCell && !isValidationStateNone ? null : /*#__PURE__*/jsx(InputChevronIcon, {
isDisabled: props.isDisabled,
isOpen: isOpen
})
}, isInsideTableEditableCell ? tableInputProps : undefined), {}, {
// When AutoComplete is present inside DropdownOverlay, the floating ui adds tabIndex -1 internally. We override it with tabIndex 0 here
tabIndex: isAutoCompleteInHeader ? 0 : undefined
}));
};
var BaseDropdownInputTrigger = /*#__PURE__*/React__default.forwardRef(_BaseDropdownInputTrigger);
export { BaseDropdownInputTrigger };
//# sourceMappingURL=BaseDropdownInputTrigger.js.map