@keycloakify/keycloak-ui-shared 260200.0.0 → 260500.0.0

package/keycloak-theme/shared/keycloak-ui-shared/context/ErrorPage.tsx

@@ -11,18 +11,17 @@ import {
   TextContent,
 } from "../../@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { getNetworkErrorDescription } from "../utils/errors";
+import { getNetworkErrorMessage } from "../utils/errors";
 
 type ErrorPageProps = {
   error?: unknown;
 };
 
 export const ErrorPage = (props: ErrorPageProps) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const error = props.error;
-  const errorMessage =
-    getErrorMessage(error) ||
-    getNetworkErrorDescription(error)?.replace(/\+/g, " ");
+  const errorMessage = getErrorMessage(error);
+  const networkErrorMessage = getNetworkErrorMessage(error);
   console.error(error);
 
   function onRetry() {
@@ -33,7 +32,7 @@ export const ErrorPage = (props: ErrorPageProps) => {
     <Page>
       <Modal
         variant={ModalVariant.small}
-        title={errorMessage ? "" : t("somethingWentWrong")}
+        title={t("somethingWentWrong")}
         titleIconVariant="danger"
         showClose={false}
         isOpen
@@ -46,6 +45,8 @@ export const ErrorPage = (props: ErrorPageProps) => {
         <TextContent>
           {errorMessage ? (
             <Text>{t(errorMessage)}</Text>
+          ) : networkErrorMessage && i18n.exists(networkErrorMessage) ? (
+            <Text>{t(networkErrorMessage)}</Text>
           ) : (
             <Text>{t("somethingWentWrongDescription")}</Text>
           )}
@@ -56,10 +57,6 @@ export const ErrorPage = (props: ErrorPageProps) => {
 };
 
 function getErrorMessage(error: unknown): string | null {
-  if (typeof error === "string") {
-    return error;
-  }
-
   if (error instanceof Error) {
     return error.message;
   }

package/keycloak-theme/shared/keycloak-ui-shared/context/KeycloakContext.tsx

@@ -71,7 +71,7 @@ export const KeycloakProvider = <T extends BaseEnvironment>({
 
     const init = () =>
       keycloak.init({
-        onLoad: "check-sso",
+        onLoad: "login-required",
         pkceMethod: "S256",
         responseMode: "query",
         scope: environment.scope,
@@ -84,14 +84,8 @@ export const KeycloakProvider = <T extends BaseEnvironment>({
     calledOnce.current = true;
   }, [keycloak]);
 
-  const searchParams = new URLSearchParams(window.location.search);
-
-  if (error || searchParams.get("error_description")) {
-    return (
-      <ErrorPage
-        error={error ? error : searchParams.get("error_description")}
-      />
-    );
+  if (error) {
+    return <ErrorPage error={error} />;
   }
 
   if (!init) {

package/keycloak-theme/shared/keycloak-ui-shared/context/environment.ts

@@ -19,7 +19,7 @@ export type BaseEnvironment = {
   clientId: string;
   /** The base URL of the resources. */
   resourceUrl: string;
-  /** The source URL for the the logo image. */
+  /** The source URL for the logo image. */
   logo: string;
   /** The URL to be followed when the logo is clicked. */
   logoUrl: string;

package/keycloak-theme/shared/keycloak-ui-shared/controls/FileUploadControl.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+import {
+  FileUpload,
+  ValidatedOptions,
+  FileUploadProps,
+} from "../../@patternfly/react-core";
+import { ReactNode, useState } from "react";
+import {
+  FieldPath,
+  FieldValues,
+  PathValue,
+  UseControllerProps,
+  useController,
+} from "react-hook-form";
+import { getRuleValue } from "../utils/getRuleValue";
+import { FormLabel } from "./FormLabel";
+import { useTranslation } from "react-i18next";
+
+export type FileUploadControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = UseControllerProps<T, P> &
+  Omit<FileUploadProps, "name" | "isRequired" | "required"> & {
+    label: string;
+    labelIcon?: string | ReactNode;
+    isDisabled?: boolean;
+    "data-testid"?: string;
+    type?: string;
+  };
+
+export const FileUploadControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>(
+  props: FileUploadControlProps<T, P>,
+) => {
+  const { labelIcon, ...rest } = props;
+  const required = !!getRuleValue(props.rules?.required);
+  const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
+
+  const { t } = useTranslation();
+
+  const [filename, setFilename] = useState<string>("");
+
+  const { field, fieldState } = useController({
+    ...props,
+    defaultValue,
+  });
+
+  return (
+    <FormLabel
+      name={props.name}
+      label={props.label}
+      labelIcon={labelIcon}
+      isRequired={required}
+      error={fieldState.error}
+    >
+      <FileUpload
+        isRequired={required}
+        data-testid={props["data-testid"] || props.name}
+        filename={filename}
+        browseButtonText={t("browse")}
+        validated={
+          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        hideDefaultPreview
+        isDisabled={props.isDisabled}
+        type="text"
+        onFileInputChange={(_, file) => {
+          field.onChange(file);
+          setFilename(file.name);
+        }}
+        onClearClick={() => {
+          field.onChange(null);
+          setFilename("");
+        }}
+        {...rest}
+        {...field}
+      />
+    </FormLabel>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/FormLabel.tsx

@@ -9,6 +9,7 @@ import { FormErrorText } from "./FormErrorText";
 import { HelpItem } from "./HelpItem";
 
 export type FieldProps<T extends FieldValues = FieldValues> = {
+  id?: string | undefined;
   label?: string;
   name: string;
   labelIcon?: string | ReactNode;
@@ -19,6 +20,7 @@ export type FieldProps<T extends FieldValues = FieldValues> = {
 type FormLabelProps = FieldProps & Omit<FormGroupProps, "label" | "labelIcon">;
 
 export const FormLabel = ({
+  id,
   name,
   label,
   labelIcon,
@@ -28,10 +30,10 @@ export const FormLabel = ({
 }: PropsWithChildren<FormLabelProps>) => (
   <FormGroup
     label={label || name}
-    fieldId={name}
+    fieldId={id || name}
     labelIcon={
       labelIcon ? (
-        <HelpItem helpText={labelIcon} fieldLabelId={name} />
+        <HelpItem helpText={labelIcon} fieldLabelId={id || name} />
       ) : undefined
     }
     {...rest}

package/keycloak-theme/shared/keycloak-ui-shared/controls/SwitchControl.tsx

@@ -18,7 +18,7 @@ export type SwitchControlProps<
   T extends FieldValues,
   P extends FieldPath<T> = FieldPath<T>,
 > = Omit<SwitchProps, "name" | "defaultValue" | "ref"> &
-  UseControllerProps<T, P> & {
+  UseControllerProps<any, P> & {
     name: string;
     label?: string;
     labelIcon?: string;
@@ -58,6 +58,7 @@ export const SwitchControl = <
             id={props.name}
             data-testid={debeerify(props.name)}
             label={labelOn}
+            aria-label={props.label}
             isChecked={stringify ? value === "true" : value}
             onChange={(e, checked) => {
               const value = stringify ? checked.toString() : checked;

package/keycloak-theme/shared/keycloak-ui-shared/controls/select-control/SelectControl.tsx

@@ -45,6 +45,7 @@ export type SelectControlProps<
     name: string;
     label?: string;
     options: OptionType;
+    selectedOptions?: OptionType;
     labelIcon?: string;
     controller: Omit<ControllerProps, "name" | "render">;
     onFilter?: (value: string) => void;

package/keycloak-theme/shared/keycloak-ui-shared/controls/select-control/SingleSelectControl.tsx

@@ -34,6 +34,7 @@ export const SingleSelectControl = <
   name,
   label,
   options,
+  selectedOptions = [],
   controller,
   labelIcon,
   isDisabled,
@@ -49,6 +50,7 @@ export const SingleSelectControl = <
 
   return (
     <FormLabel
+      id={id}
       name={name}
       label={label}
       isRequired={required}
@@ -78,7 +80,7 @@ export const SingleSelectControl = <
             }
             toggle={(ref) => (
               <MenuToggle
-                id={id || name.slice(name.lastIndexOf(".") + 1)}
+                id={id || name}
                 ref={ref}
                 onClick={() => setOpen(!open)}
                 isExpanded={open}
@@ -108,7 +110,7 @@ export const SingleSelectControl = <
             isOpen={open}
           >
             <SelectList data-testid={`select-${name}`}>
-              {options.map((option) => (
+              {[...options, ...selectedOptions].map((option) => (
                 <SelectOption key={key(option)} value={key(option)}>
                   {isString(option) ? option : option.value}
                 </SelectOption>

package/keycloak-theme/shared/keycloak-ui-shared/controls/select-control/TypeaheadSelectControl.tsx

@@ -28,6 +28,7 @@ import {
 import { getRuleValue } from "../../utils/getRuleValue";
 import { FormLabel } from "../FormLabel";
 import {
+  OptionType,
   SelectControlOption,
   SelectControlProps,
   SelectVariant,
@@ -47,6 +48,7 @@ export const TypeaheadSelectControl = <
   name,
   label,
   options,
+  selectedOptions = [],
   controller,
   labelIcon,
   placeholderText,
@@ -61,28 +63,50 @@ export const TypeaheadSelectControl = <
   const [open, setOpen] = useState(false);
   const [filterValue, setFilterValue] = useState("");
   const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0);
+  const [selectedOptionsState, setSelectedOptions] = useState<
+    SelectControlOption[]
+  >([]);
   const textInputRef = useRef<HTMLInputElement>();
   const required = getRuleValue(controller.rules?.required) === true;
   const isTypeaheadMulti = variant === SelectVariant.typeaheadMulti;
 
-  const filteredOptions = options.filter((option) =>
-    getValue(option).toLowerCase().startsWith(filterValue.toLowerCase()),
+  const combinedOptions = useMemo(
+    () =>
+      [
+        ...options.filter(
+          (o) => !selectedOptions.map((o) => getValue(o)).includes(getValue(o)),
+        ),
+        ...selectedOptions,
+      ] as OptionType,
+    [selectedOptions, options],
   );
 
-  const convert = useMemo(
-    () =>
-      filteredOptions.map((option, index) => (
-        <SelectOption
-          key={key(option)}
-          value={key(option)}
-          isFocused={focusedItemIndex === index}
-        >
-          {getValue(option)}
-        </SelectOption>
-      )),
-    [focusedItemIndex, filteredOptions],
+  const filteredOptions = combinedOptions.filter((option) =>
+    getValue(option).toLowerCase().startsWith(filterValue.toLowerCase()),
   );
 
+  const updateValue = (
+    option: string | string[],
+    field: ControllerRenderProps<FieldValues, string>,
+  ) => {
+    if (field.value.includes(option)) {
+      field.onChange(field.value.filter((item: string) => item !== option));
+      if (isSelectBasedOptions(options)) {
+        setSelectedOptions(
+          selectedOptionsState.filter((item) => item.key !== option),
+        );
+      }
+    } else {
+      field.onChange([...field.value, option]);
+      if (isSelectBasedOptions(combinedOptions)) {
+        setSelectedOptions([
+          ...selectedOptionsState,
+          combinedOptions.find((o) => o.key === option)!,
+        ]);
+      }
+    }
+  };
+
   const onInputKeyDown = (
     event: React.KeyboardEvent<HTMLDivElement>,
     field: ControllerRenderProps<FieldValues, string>,
@@ -100,11 +124,8 @@ export const TypeaheadSelectControl = <
           setFilterValue("");
         }
 
-        field.onChange(
-          Array.isArray(field.value)
-            ? [...field.value, key(focusedItem)]
-            : key(focusedItem),
-        );
+        updateValue(key(focusedItem), field);
+
         setOpen(false);
         setFocusedItemIndex(0);
 
@@ -152,6 +173,7 @@ export const TypeaheadSelectControl = <
 
   return (
     <FormLabel
+      id={id}
       name={name}
       label={label}
       isRequired={required}
@@ -167,8 +189,8 @@ export const TypeaheadSelectControl = <
             {...rest}
             onOpenChange={() => setOpen(false)}
             selected={
-              isSelectBasedOptions(options)
-                ? options
+              isSelectBasedOptions(combinedOptions)
+                ? combinedOptions
                     .filter((o) =>
                       Array.isArray(field.value)
                         ? field.value.includes(o.key)
@@ -181,7 +203,7 @@ export const TypeaheadSelectControl = <
             toggle={(ref) => (
               <MenuToggle
                 ref={ref}
-                id={id || name.slice(name.lastIndexOf(".") + 1)}
+                id={id || name}
                 variant="typeahead"
                 onClick={() => {
                   setOpen(!open);
@@ -196,8 +218,8 @@ export const TypeaheadSelectControl = <
                     placeholder={placeholderText}
                     value={
                       variant === SelectVariant.typeahead && field.value
-                        ? isSelectBasedOptions(options)
-                          ? options.find(
+                        ? isSelectBasedOptions(combinedOptions)
+                          ? combinedOptions.find(
                               (o) =>
                                 o.key ===
                                 (Array.isArray(field.value)
@@ -235,9 +257,11 @@ export const TypeaheadSelectControl = <
                                   );
                                 }}
                               >
-                                {isSelectBasedOptions(options)
-                                  ? options.find((o) => selection === o.key)
-                                      ?.value
+                                {isSelectBasedOptions(combinedOptions)
+                                  ? [
+                                      ...combinedOptions,
+                                      ...selectedOptionsState,
+                                    ].find((o) => selection === o.key)?.value
                                   : getValue(selection)}
                               </Chip>
                             ),
@@ -267,13 +291,8 @@ export const TypeaheadSelectControl = <
               event?.stopPropagation();
               const option = v?.toString();
               if (isTypeaheadMulti && Array.isArray(field.value)) {
-                if (field.value.includes(option)) {
-                  field.onChange(
-                    field.value.filter((item: string) => item !== option),
-                  );
-                } else {
-                  field.onChange([...field.value, option]);
-                }
+                setFilterValue("");
+                updateValue(option || "", field);
               } else {
                 field.onChange(Array.isArray(field.value) ? [option] : option);
                 setOpen(false);
@@ -281,7 +300,18 @@ export const TypeaheadSelectControl = <
             }}
             isOpen={open}
           >
-            <SelectList>{convert}</SelectList>
+            <SelectList>
+              {filteredOptions.map((option, index) => (
+                <SelectOption
+                  key={key(option)}
+                  value={key(option)}
+                  isFocused={focusedItemIndex === index}
+                  isActive={field.value.includes(getValue(option))}
+                >
+                  {getValue(option)}
+                </SelectOption>
+              ))}
+            </SelectList>
           </Select>
         )}
       />

package/keycloak-theme/shared/keycloak-ui-shared/controls/table/KeycloakDataTable.tsx

@@ -92,21 +92,21 @@ const CellRenderer = ({
   index,
   actions,
   actionResolver,
-}: CellRendererProps) => (
-  <>
-    {row.cells!.map((c, i) => (
-      <Td key={`cell-${i}`}>{(isRow(c) ? c.title : c) as ReactNode}</Td>
-    ))}
-    {(actions || actionResolver) && (
-      <Td isActionCell>
-        <ActionsColumn
-          items={actions || actionResolver?.(row, {})!}
-          extraData={{ rowIndex: index }}
-        />
-      </Td>
-    )}
-  </>
-);
+}: CellRendererProps) => {
+  const items = actions || actionResolver?.(row, {});
+  return (
+    <>
+      {row.cells!.map((c, i) => (
+        <Td key={`cell-${i}`}>{(isRow(c) ? c.title : c) as ReactNode}</Td>
+      ))}
+      {items && items.length > 0 && !row.disableActions && (
+        <Td isActionCell>
+          <ActionsColumn items={items} extraData={{ rowIndex: index }} />
+        </Td>
+      )}
+    </>
+  );
+};
 
 const ExpandableRowRenderer = ({ row }: CellRendererProps) =>
   row.cells!.map((c, i) => (
@@ -239,6 +239,7 @@ function DataTable<T>({
                       (v) => get(v, "id") === row.data.id,
                     ),
                     variant: isRadio ? "radio" : "checkbox",
+                    isDisabled: row.disableSelection,
                   }}
                 />
               )}
@@ -261,7 +262,7 @@ function DataTable<T>({
                     rows[index + 1].cells.length === 0
                       ? undefined
                       : {
-                          isExpanded: !!expandedRows[index],
+                          isExpanded: expandedRows[index] ?? false,
                           rowIndex: index,
                           expandId: "expandable-row-",
                           onToggle: (_, rowIndex, isOpen) => {
@@ -281,7 +282,7 @@ function DataTable<T>({
                 />
               </Tr>
             ) : (
-              <Tr isExpanded={!!expandedRows[index - 1]}>
+              <Tr isExpanded={expandedRows[index - 1] ?? false}>
                 <Td />
                 <Td colSpan={columns.length}>
                   <ExpandableRowContent>
@@ -360,7 +361,7 @@ export type DataListProps<T> = Omit<
  * @param {DataListProps} props - The properties.
  * @param {string} props.ariaLabelKey - The aria label key i18n key to lookup the label
  * @param {string} props.searchPlaceholderKey - The i18n key to lookup the placeholder for the search box
- * @param {boolean} props.isPaginated - if true the the loader will be called with first, max and search and a pager will be added in the header
+ * @param {boolean} props.isPaginated - if true, the loader will be called with first, max and search and a pager will be added in the header
  * @param {(first?: number, max?: number, search?: string) => Promise<T[]>} props.loader - loader function that will fetch the data to display first, max and search are only applicable when isPaginated = true
  * @param {Field<T>} props.columns - definition of the columns
  * @param {Field<T>} props.detailColumns - definition of the columns expandable columns

package/keycloak-theme/shared/keycloak-ui-shared/controls/table/ListEmptyState.tsx

@@ -2,7 +2,12 @@
 
 // @ts-nocheck
 
-import { ComponentClass, MouseEventHandler, ReactNode } from "react";
+import {
+  ComponentClass,
+  MouseEventHandler,
+  PropsWithChildren,
+  ReactNode,
+} from "react";
 import {
   EmptyState,
   EmptyStateIcon,
@@ -44,7 +49,8 @@ export const ListEmptyState = ({
   secondaryActions,
   icon,
   isDisabled = false,
-}: ListEmptyStateProps) => {
+  children,
+}: PropsWithChildren<ListEmptyStateProps>) => {
   return (
     <EmptyState data-testid="empty-state" variant="lg">
       {hasIcon && isSearchVariant ? (
@@ -67,6 +73,7 @@ export const ListEmptyState = ({
             {primaryActionText}
           </Button>
         )}
+        {children}
         {secondaryActions && (
           <EmptyStateActions>
             {secondaryActions.map((action) => (

package/keycloak-theme/shared/keycloak-ui-shared/main.ts

@@ -47,6 +47,10 @@ export {
   KeycloakTextArea,
   type KeycloakTextAreaProps,
 } from "./controls/keycloak-text-area/KeycloakTextArea";
+export {
+  FileUploadControl,
+  type FileUploadControlProps,
+} from "./controls/FileUploadControl";
 export { IconMapper } from "./icons/IconMapper";
 export { FormPanel } from "./scroll-form/FormPanel";
 export { ScrollForm, mainPageContentId } from "./scroll-form/ScrollForm";

package/keycloak-theme/shared/keycloak-ui-shared/scroll-form/ScrollForm.tsx

@@ -84,10 +84,17 @@ export const ScrollForm = ({
               const scrollId = spacesToHyphens(title.toLowerCase());
 
               return (
-                // note that JumpLinks currently does not work with spaces in the href
                 <JumpLinksItem
                   key={title}
-                  href={`#${scrollId}`}
+                  onClick={() => {
+                    const element = document.getElementById(scrollId);
+                    if (element) {
+                      element.scrollIntoView({
+                        behavior: "smooth",
+                        block: "start",
+                      });
+                    }
+                  }}
                   data-testid={`jump-link-${scrollId}`}
                 >
                   {title}

package/keycloak-theme/shared/keycloak-ui-shared/select/KeycloakSelect.tsx

@@ -22,7 +22,7 @@ export type KeycloakSelectProps = Omit<
   "name" | "toggle" | "selected" | "onClick" | "onSelect" | "variant"
 > & {
   toggleId?: string;
-  onFilter?: (value: string) => JSX.Element[];
+  onFilter?: (value: string) => void;
   onClear?: () => void;
   variant?: Variant;
   isDisabled?: boolean;

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/MultiInputComponent.tsx

@@ -33,6 +33,7 @@ export const MultiInputComponent = ({
       form={form}
       aria-label={labelAttribute(t, attribute)}
       name={fieldName(attribute.name)!}
+      defaultValue={[attribute.defaultValue || ""]}
       addButtonLabel={t("addMultivaluedLabel", {
         fieldLabel: labelAttribute(t, attribute),
       })}

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/OptionsComponent.tsx

@@ -31,7 +31,7 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
       <Controller
         name={fieldName(attribute.name)}
         control={form.control}
-        defaultValue=""
+        defaultValue={attribute.defaultValue}
         render={({ field }) => (
           <>
             {options.map((option) => (
@@ -41,15 +41,15 @@ export const OptionComponent = (props: UserProfileFieldProps) => {
                 data-testid={option}
                 label={label(props.t, optionLabel[option], option, prefix)}
                 value={option}
-                isChecked={field.value.includes(option)}
+                isChecked={field.value?.includes(option)}
                 onChange={() => {
                   if (isMultiSelect) {
-                    if (field.value.includes(option)) {
+                    if (field.value?.includes(option)) {
                       field.onChange(
-                        field.value.filter((item: string) => item !== option),
+                        field.value?.filter((item: string) => item !== option),
                       );
                     } else {
-                      field.onChange([...field.value, option]);
+                      field.onChange([...(field.value || []), option]);
                     }
                   } else {
                     field.onChange([option]);

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/SelectComponent.tsx

@@ -70,7 +70,7 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
     <UserProfileGroup {...props}>
       <Controller
         name={fieldName(attribute.name)}
-        defaultValue=""
+        defaultValue={attribute.defaultValue}
         control={form.control}
         render={({ field }) => (
           <KeycloakSelect

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/TextAreaComponent.tsx

@@ -21,6 +21,7 @@ export const TextAreaComponent = (props: UserProfileFieldProps) => {
         rows={attribute.annotations?.["inputTypeRows"] as number}
         readOnly={attribute.readOnly}
         isRequired={isRequired}
+        defaultValue={attribute.defaultValue}
       />
     </UserProfileGroup>
   );

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/TextComponent.tsx

@@ -33,8 +33,9 @@ export const TextComponent = (props: UserProfileFieldProps) => {
                 ] as string,
               )
         }
-        readOnly={attribute.readOnly}
+        isDisabled={attribute.readOnly}
         isRequired={isRequired}
+        defaultValue={attribute.defaultValue}
         {...form.register(fieldName(attribute.name))}
       />
     </UserProfileGroup>

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/utils.ts

@@ -19,7 +19,7 @@ export type UserFormFields = Omit<
 type FieldError = {
   field: string;
   errorMessage: string;
-  params?: string[];
+  params?: unknown[];
 };
 
 type ErrorArray = { errors?: FieldError[] };
@@ -28,7 +28,11 @@ export type UserProfileError = {
   responseData: ErrorArray | FieldError;
 };
 
-const isBundleKey = (displayName?: string) => displayName?.includes("${");
+const isBundleKey = (displayName: unknown) => {
+  return displayName && typeof displayName === "string"
+    ? displayName.includes("${")
+    : false;
+};
 const unWrap = (key: string) => key.substring(2, key.length - 1);
 
 export const label = (
@@ -77,7 +81,7 @@ export function setUserProfileServerError<T>(
   ).forEach((e) => {
     const params = Object.assign(
       {},
-      e.params?.map((p) => (isBundleKey(p?.toString()) ? t(unWrap(p)) : p)),
+      e.params?.map((p) => (isBundleKey(p) ? t(unWrap(p as string)) : p)),
     );
     setError(fieldName(e.field) as keyof T, {
       message: t(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/keycloak-ui-shared",
-  "version": "260200.0.0",
+  "version": "260500.0.0",
   "repository": {
     "type": "git",
     "url": "git://github.com/keycloakify/keycloak-ui-shared.git"
@@ -13,13 +13,13 @@
     "@patternfly/react-icons": "^5.4.2",
     "@patternfly/react-styles": "^5.4.1",
     "@patternfly/react-table": "^5.4.16",
-    "i18next": "^24.2.3",
-    "keycloak-js": "^26.2.0",
-    "lodash-es": "^4.17.21",
+    "i18next": "^25.7.3",
+    "keycloak-js": "^26.2.2",
+    "lodash-es": "^4.17.22",
     "react": "^18.3.1",
-    "react-hook-form": "7.54.2",
-    "react-i18next": "^15.4.1",
-    "@keycloak/keycloak-admin-client": "26.2.0",
+    "react-hook-form": "7.70.0",
+    "react-i18next": "^16.5.1",
+    "@keycloak/keycloak-admin-client": "26.5.0",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.18"
   },