@spaced-out/ui-design-system
Version:
Sense UI components library
240 lines (238 loc) • 8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Combobox = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _qa = require("../../utils/qa");
var _Dropdown = require("../Dropdown");
var _Input = require("../Input");
var _Text = require("../Text");
var _ComboboxModule = _interopRequireDefault(require("./Combobox.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
value,
onChange,
classNames,
disabled,
type = 'text',
label,
inputPlaceholder,
size = 'medium',
onContainerClick,
onInputFocus,
onInputBlur,
onInputKeyDown,
onInputContainerClick,
inputName,
locked,
error,
errorText,
helperText,
required,
iconLeftName,
iconLeftType,
iconRightName,
iconRightType,
onIconRightClick,
readOnly,
boxRef,
inputBoxRef,
minLength,
maxLength,
pattern,
min,
max,
menu,
onMenuOpen,
onMenuClose,
scrollMenuToBottom,
onDropdownFocus,
onDropdownBlur,
onDropdownKeyDown,
onDropdownContainerClick,
dropdownName,
dropdownPlaceholder,
dropdownBoxRef,
testId
} = props;
const inputRef = React.useRef(null);
const dropdownRef = React.useRef(null);
const {
input: inputValue,
dropdown: dropdownInputText
} = value;
const handleInputChange = (evt, isEnter) => {
onChange({
dropdown: dropdownInputText || '',
input: evt.target.value,
inputChange: {
evt,
isEnter
}
});
};
const handleDropdownChange = option => {
onChange({
dropdown: option.label || '',
input: inputValue || '',
dropdownOption: option
});
};
/* Handling locked functionality at Combobox level */
React.useEffect(() => {
if (locked) {
if (inputRef.current) {
inputRef.current.disabled = true;
}
if (dropdownRef.current) {
dropdownRef.current.disabled = true;
}
} else {
if (inputRef.current) {
inputRef.current.disabled = false;
}
if (dropdownRef.current) {
dropdownRef.current.disabled = false;
}
}
}, [locked]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: ref,
className: (0, _classify.default)(_ComboboxModule.default.wrapper, classNames?.wrapper),
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'root'
}),
children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _ComboboxModule.default.info,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'label'
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _ComboboxModule.default.infoContent,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
color: "secondary",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'label-text'
}),
children: label ?? ''
}), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
color: "danger",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'required'
}),
children: "*"
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classify.default)(_ComboboxModule.default.box, {
[_ComboboxModule.default.withError]: error ?? false
}, classNames?.box),
onClick: !(disabled || locked) ? onContainerClick : undefined,
ref: boxRef,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'box'
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
ref: dropdownRef,
menu: menu,
boxRef: dropdownBoxRef,
placeholder: dropdownPlaceholder,
readOnly: readOnly,
classNames: {
wrapper: (0, _classify.default)(_ComboboxModule.default.dropdownWrapper, classNames?.dropdown?.wrapper),
box: (0, _classify.default)(_ComboboxModule.default.dropdownBox, {
[_ComboboxModule.default.disabled]: disabled ?? null,
[_ComboboxModule.default.locked]: locked ?? null
}, classNames?.dropdown?.box),
iconRight: _ComboboxModule.default.chevron
},
disabled: disabled,
size: size,
onMenuOpen: onMenuOpen,
onMenuClose: onMenuClose,
onChange: handleDropdownChange,
scrollMenuToBottom: scrollMenuToBottom,
dropdownInputText: dropdownInputText,
onFocus: onDropdownFocus,
onBlur: onDropdownBlur,
onKeyDown: onDropdownKeyDown,
onContainerClick: onDropdownContainerClick,
name: dropdownName,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'dropdown'
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
ref: inputRef,
boxRef: inputBoxRef,
name: inputName,
placeholder: inputPlaceholder,
onFocus: onInputFocus,
onBlur: onInputBlur,
onChange: handleInputChange,
onKeyDown: onInputKeyDown,
onContainerClick: onInputContainerClick,
value: inputValue,
type: type,
error: error,
disabled: disabled,
readOnly: readOnly,
classNames: {
wrapper: (0, _classify.default)(_ComboboxModule.default.inputWrapper, classNames?.input?.wrapper),
box: (0, _classify.default)(_ComboboxModule.default.inputBox, {
[_ComboboxModule.default.disabled]: disabled ?? null,
[_ComboboxModule.default.locked]: locked ?? null
}, classNames?.input?.box),
iconLeft: classNames?.input?.iconLeft,
iconRight: classNames?.input?.iconRight
},
size: size,
iconLeftName: iconLeftName,
iconLeftType: iconLeftType,
iconRightName: iconRightName,
iconRightType: iconRightType,
onIconRightClick: onIconRightClick,
minLength: minLength,
maxLength: maxLength,
pattern: pattern,
min: min,
max: max,
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'input'
})
})]
}), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _ComboboxModule.default.info,
"data-testid": (0, _qa.generateTestId)({
base: testId,
slot: 'helper'
}),
children: error && errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
color: "danger",
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'error'
}),
children: errorText
}) : typeof helperText === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
color: disabled ? 'disabled' : 'secondary',
testId: (0, _qa.generateTestId)({
base: testId,
slot: 'helper-text'
}),
children: helperText
}) : helperText
})]
});
});