@keycloakify/keycloak-account-ui/ui-shared/user-profile/SelectComponent.js

<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

import { jsx as _jsx } from "react/jsx-runtime";
import { SelectOption } from "@patternfly/react-core";
import { useState } from "react";
import { Controller } from "react-hook-form";
import { KeycloakSelect, SelectVariant } from "../../ui-shared/select/KeycloakSelect";
import { UserProfileGroup } from "../../ui-shared/user-profile/UserProfileGroup";
import { fieldName, label } from "../../ui-shared/user-profile/utils";
export const SelectComponent = (props) => {
    var _a, _b, _c;
    const { t, form, inputType, attribute } = props;
    const [open, setOpen] = useState(false);
    const [filter, setFilter] = useState("");
    const isMultiValue = inputType === "multiselect";
    const setValue = (value, field) => {
        if (isMultiValue) {
            if (field.value.includes(value)) {
                field.onChange(field.value.filter((item) => item !== value));
            }
            else {
                if (Array.isArray(field.value)) {
                    field.onChange([...field.value, value]);
                }
                else {
                    field.onChange([value]);
                }
            }
        }
        else {
            field.onChange(value === field.value ? "" : value);
        }
    };
    const options = ((_b = (_a = attribute.validators) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.options) || [];
    const optionLabel = ((_c = attribute.annotations) === null || _c === void 0 ? void 0 : _c["inputOptionLabels"]) || {};
    const fetchLabel = (option) => label(props.t, optionLabel[option], option);
    const convertOptions = (selected) => options
        .filter((o) => fetchLabel(o).toLowerCase().includes(filter.toLowerCase()))
        .map((option) => (_jsx(SelectOption, { selected: selected === option, value: option, children: fetchLabel(option) }, option)));
    return (_jsx(UserProfileGroup, Object.assign({}, props, { children: _jsx(Controller, { name: fieldName(attribute.name), defaultValue: "", control: form.control, render: ({ field }) => (_jsx(KeycloakSelect, { toggleId: attribute.name, onToggle: (b) => setOpen(b), onClear: () => setValue("", field), onSelect: (value) => {
                    const option = value.toString();
                    setValue(option, field);
                    if (!Array.isArray(field.value)) {
                        setOpen(false);
                    }
                }, selections: isMultiValue && Array.isArray(field.value)
                    ? field.value
                    : fetchLabel(field.value), variant: isMultiValue
                    ? SelectVariant.typeaheadMulti
                    : options.length >= 10
                        ? SelectVariant.typeahead
                        : SelectVariant.single, "aria-label": t("selectOne"), isOpen: open, isDisabled: attribute.readOnly, onFilter: (value) => {
                    setFilter(value);
                    return convertOptions(field.value);
                }, children: convertOptions(field.value) })) }) })));
};
//# sourceMappingURL=SelectComponent.js.map