@keycloakify/keycloak-account-ui
Version:
<p align="center"> <img src="https://github.com/user-attachments/assets/e31c4910-7205-441c-9a35-e134b806b3a8"> </p> <p align="center"> <i>Repackaged Keycloak Account UI</i> <br> <br> <a href="https://github.com/keycloakify/keycloak-a
96 lines • 6.57 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
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 = (_a) => {
var { toggleId, onSelect, onToggle, onFilter, variant, validated, placeholderText, maxHeight, width, toggleIcon, direction, selections, typeAheadAriaLabel, chipGroupComponent, chipGroupProps, footer, children } = _a, rest = __rest(_a, ["toggleId", "onSelect", "onToggle", "onFilter", "variant", "validated", "placeholderText", "maxHeight", "width", "toggleIcon", "direction", "selections", "typeAheadAriaLabel", "chipGroupComponent", "chipGroupProps", "footer", "children"]);
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, Object.assign({}, rest, { onClick: toggle, onOpenChange: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(false), 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, 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, Object.assign({}, 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