@keycloakify/keycloak-admin-ui/components/key-value-form/KeySelect.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { KeycloakSelect } from "../../ui-shared";
import { Grid, GridItem, SelectOption, TextInput, } from "@patternfly/react-core";
import { useState } from "react";
import { useController } from "react-hook-form";
import { useTranslation } from "react-i18next";
import useToggle from "../../utils/useToggle";
export const KeySelect = ({ selectItems, ...rest }) => {
    const { t } = useTranslation();
    const [open, toggle] = useToggle();
    const { field } = useController(rest);
    const [custom, setCustom] = useState(!selectItems.map(({ key }) => key).includes(field.value));
    return (_jsxs(Grid, { children: [_jsx(GridItem, { lg: custom ? 2 : 12, children: _jsx(KeycloakSelect, { onToggle: () => toggle(), isOpen: open, onSelect: (value) => {
                        if (value) {
                            setCustom(false);
                        }
                        field.onChange(value);
                        toggle();
                    }, selections: !custom ? [field.value] : "", children: [
                        _jsx(SelectOption, { onClick: () => setCustom(true), children: t("customAttribute") }, "custom"),
                        ...selectItems.map((item) => (_jsx(SelectOption, { value: item.key, children: item.label }, item.key))),
                    ] }) }), custom && (_jsx(GridItem, { lg: 10, children: _jsx(TextInput, { id: "customValue", "data-testid": rest.name, placeholder: t("keyPlaceholder"), value: field.value, onChange: field.onChange, autoFocus: true }) }))] }));
};
//# sourceMappingURL=KeySelect.js.map