@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
84 lines • 5.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Chip, ChipGroup, MenuFooter, MenuToggle, MenuToggleStatus, Select, SelectList, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from "@patternfly/react-core";
import { TimesIcon } from "@patternfly/react-icons";
import { Children, useRef, useState } from "react";
import { SelectVariant, propertyToString, } from "../../ui-shared/select/KeycloakSelect";
export const TypeaheadSelect = ({ toggleId, onSelect, onToggle, onFilter, variant, validated, placeholderText, maxHeight, width, toggleIcon, direction, selections, typeAheadAriaLabel, chipGroupComponent, chipGroupProps, footer, isDisabled, children, ...rest }) => {
const [filterValue, setFilterValue] = useState("");
const [focusedItemIndex, setFocusedItemIndex] = useState(0);
const textInputRef = useRef();
const childArray = Children.toArray(children);
const toggle = () => {
onToggle === null || onToggle === void 0 ? void 0 : onToggle(!rest.isOpen);
};
const onInputKeyDown = (event) => {
const focusedItem = childArray[focusedItemIndex];
onToggle === null || onToggle === void 0 ? void 0 : onToggle(true);
switch (event.key) {
case "Enter": {
event.preventDefault();
if (variant !== SelectVariant.typeaheadMulti) {
setFilterValue(focusedItem.props.value);
}
else {
setFilterValue("");
}
onSelect === null || onSelect === void 0 ? void 0 : onSelect(focusedItem.props.value);
onToggle === null || onToggle === void 0 ? void 0 : onToggle(false);
setFocusedItemIndex(0);
break;
}
case "Escape": {
onToggle === null || onToggle === void 0 ? void 0 : onToggle(false);
break;
}
case "Backspace": {
if (variant === SelectVariant.typeahead) {
onSelect === null || onSelect === void 0 ? void 0 : onSelect("");
}
break;
}
case "ArrowUp":
case "ArrowDown": {
event.preventDefault();
let indexToFocus = 0;
if (event.key === "ArrowUp") {
if (focusedItemIndex === 0) {
indexToFocus = childArray.length - 1;
}
else {
indexToFocus = focusedItemIndex - 1;
}
}
if (event.key === "ArrowDown") {
if (focusedItemIndex === childArray.length - 1) {
indexToFocus = 0;
}
else {
indexToFocus = focusedItemIndex + 1;
}
}
setFocusedItemIndex(indexToFocus);
break;
}
}
};
return (_jsxs(Select, { ...rest, onClick: toggle, onOpenChange: (isOpen) => onToggle === null || onToggle === void 0 ? void 0 : onToggle(isOpen), onSelect: (_, value) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(value || ""), maxMenuHeight: propertyToString(maxHeight), popperProps: { direction, width: propertyToString(width) }, toggle: (ref) => (_jsx(MenuToggle, { ref: ref, id: toggleId, variant: "typeahead", onClick: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(true), icon: toggleIcon, isDisabled: isDisabled, isExpanded: rest.isOpen, isFullWidth: true, status: validated === "error" ? MenuToggleStatus.danger : undefined, children: _jsxs(TextInputGroup, { isPlain: true, children: [_jsx(TextInputGroupMain, { placeholder: placeholderText, value: variant === SelectVariant.typeahead && selections
? selections
: filterValue, onClick: toggle, onChange: (_, value) => {
setFilterValue(value);
onFilter === null || onFilter === void 0 ? void 0 : onFilter(value);
}, onKeyDown: (event) => onInputKeyDown(event), autoComplete: "off", innerRef: textInputRef, role: "combobox", isExpanded: rest.isOpen, "aria-controls": "select-typeahead-listbox", "aria-label": typeAheadAriaLabel, children: variant === SelectVariant.typeaheadMulti &&
Array.isArray(selections) &&
(chipGroupComponent ? (chipGroupComponent) : (_jsx(ChipGroup, { ...chipGroupProps, children: selections.map((selection, index) => (_jsx(Chip, { onClick: (ev) => {
ev.stopPropagation();
onSelect === null || onSelect === void 0 ? void 0 : onSelect(selection);
}, children: selection }, index))) }))) }), _jsx(TextInputGroupUtilities, { children: !!filterValue && (_jsx(Button, { variant: "plain", onClick: () => {
var _a;
onSelect === null || onSelect === void 0 ? void 0 : onSelect("");
setFilterValue("");
onFilter === null || onFilter === void 0 ? void 0 : onFilter("");
(_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, "aria-label": "Clear input value", children: _jsx(TimesIcon, { "aria-hidden": true }) })) })] }) })), children: [_jsx(SelectList, { children: children }), footer && _jsx(MenuFooter, { children: footer })] }));
};
//# sourceMappingURL=TypeaheadSelect.js.map