@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileFields.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, jsxs as _jsxs } from "react/jsx-runtime";
import { Text } from "@patternfly/react-core";
import { useMemo } from "react";
import { ScrollForm } from "../../ui-shared/main";
import { LocaleSelector } from "../../ui-shared/user-profile/LocaleSelector";
import { MultiInputComponent } from "../../ui-shared/user-profile/MultiInputComponent";
import { OptionComponent } from "../../ui-shared/user-profile/OptionsComponent";
import { SelectComponent } from "../../ui-shared/user-profile/SelectComponent";
import { TextAreaComponent } from "../../ui-shared/user-profile/TextAreaComponent";
import { TextComponent } from "../../ui-shared/user-profile/TextComponent";
import { fieldName, isRootAttribute, label } from "../../ui-shared/user-profile/utils";
const INPUT_TYPES = [
    "text",
    "textarea",
    "select",
    "select-radiobuttons",
    "multiselect",
    "multiselect-checkboxes",
    "html5-email",
    "html5-tel",
    "html5-url",
    "html5-number",
    "html5-range",
    "html5-datetime-local",
    "html5-date",
    "html5-month",
    "html5-time",
    "multi-input",
];
export const FIELDS = {
    text: TextComponent,
    textarea: TextAreaComponent,
    select: SelectComponent,
    "select-radiobuttons": OptionComponent,
    multiselect: SelectComponent,
    "multiselect-checkboxes": OptionComponent,
    "html5-email": TextComponent,
    "html5-tel": TextComponent,
    "html5-url": TextComponent,
    "html5-number": TextComponent,
    "html5-range": TextComponent,
    "html5-datetime-local": TextComponent,
    "html5-date": TextComponent,
    "html5-month": TextComponent,
    "html5-time": TextComponent,
    "multi-input": MultiInputComponent,
};
export const UserProfileFields = ({ t, form, userProfileMetadata, supportedLocales, currentLocale, hideReadOnly = false, renderer, }) => {
    // Group attributes by group, for easier rendering.
    const groupsWithAttributes = useMemo(() => {
        var _a;
        // If there are no attributes, there is no need to group them.
        if (!userProfileMetadata.attributes) {
            return [];
        }
        // Hide read-only attributes if 'hideReadOnly' is enabled.
        const attributes = hideReadOnly
            ? userProfileMetadata.attributes.filter(({ readOnly }) => !readOnly)
            : userProfileMetadata.attributes;
        return [
            // Insert an empty group for attributes without a group.
            { name: undefined },
            ...((_a = userProfileMetadata.groups) !== null && _a !== void 0 ? _a : []),
        ].map((group) => ({
            group,
            attributes: attributes.filter((attribute) => attribute.group === group.name),
        }));
    }, [
        hideReadOnly,
        userProfileMetadata.groups,
        userProfileMetadata.attributes,
    ]);
    if (groupsWithAttributes.length === 0) {
        return null;
    }
    return (_jsx(ScrollForm, { label: t("jumpToSection"), sections: groupsWithAttributes
            .filter((group) => group.attributes.length > 0)
            .map(({ group, attributes }) => ({
            title: label(t, group.displayHeader, group.name) || t("general"),
            panel: (_jsxs("div", { className: "pf-v5-c-form", children: [group.displayDescription && (_jsx(Text, { className: "pf-v5-u-pb-lg", children: label(t, group.displayDescription, "") })), attributes.map((attribute) => (_jsx(FormField, { t: t, form: form, supportedLocales: supportedLocales, currentLocale: currentLocale, renderer: renderer, attribute: attribute }, attribute.name)))] })),
        })) }));
};
const FormField = ({ t, form, renderer, supportedLocales, currentLocale, attribute, }) => {
    var _a;
    const value = form.watch(fieldName(attribute.name));
    const inputType = useMemo(() => determineInputType(attribute), [attribute]);
    const Component = attribute.multivalued ||
        (isMultiValue(value) && ((_a = attribute.annotations) === null || _a === void 0 ? void 0 : _a.inputType) === undefined)
        ? FIELDS["multi-input"]
        : FIELDS[inputType];
    if (attribute.name === "locale")
        return (_jsx(LocaleSelector, { form: form, supportedLocales: supportedLocales, currentLocale: currentLocale, t: t, attribute: attribute }));
    return (_jsx(Component, { t: t, form: form, inputType: inputType, attribute: attribute, renderer: renderer }));
};
const DEFAULT_INPUT_TYPE = "text";
function determineInputType(attribute) {
    var _a;
    // Always treat the root attributes as a text field.
    if (isRootAttribute(attribute.name)) {
        return "text";
    }
    const inputType = (_a = attribute.annotations) === null || _a === void 0 ? void 0 : _a.inputType;
    // if we have an valid input type use that to render
    if (isValidInputType(inputType)) {
        return inputType;
    }
    // In all other cases use the default
    return DEFAULT_INPUT_TYPE;
}
const isValidInputType = (value) => typeof value === "string" && value in FIELDS;
const isMultiValue = (value) => Array.isArray(value) && value.length > 1;
//# sourceMappingURL=UserProfileFields.js.map