@keycloakify/keycloak-ui-shared 260007.0.5 → 260200.0.0

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

@@ -9,9 +9,9 @@ import {
   Page,
   Text,
   TextContent,
-  TextVariants,
 } from "../../@patternfly/react-core";
 import { useTranslation } from "react-i18next";
+import { getNetworkErrorDescription } from "../utils/errors";
 
 type ErrorPageProps = {
   error?: unknown;
@@ -20,7 +20,10 @@ type ErrorPageProps = {
 export const ErrorPage = (props: ErrorPageProps) => {
   const { t } = useTranslation();
   const error = props.error;
-  const errorMessage = getErrorMessage(error);
+  const errorMessage =
+    getErrorMessage(error) ||
+    getNetworkErrorDescription(error)?.replace(/\+/g, " ");
+  console.error(error);
 
   function onRetry() {
     location.href = location.origin + location.pathname;
@@ -30,7 +33,7 @@ export const ErrorPage = (props: ErrorPageProps) => {
     <Page>
       <Modal
         variant={ModalVariant.small}
-        title={t("somethingWentWrong")}
+        title={errorMessage ? "" : t("somethingWentWrong")}
         titleIconVariant="danger"
         showClose={false}
         isOpen
@@ -41,9 +44,10 @@ export const ErrorPage = (props: ErrorPageProps) => {
         ]}
       >
         <TextContent>
-          <Text>{t("somethingWentWrongDescription")}</Text>
-          {errorMessage && (
-            <Text component={TextVariants.small}>{errorMessage}</Text>
+          {errorMessage ? (
+            <Text>{t(errorMessage)}</Text>
+          ) : (
+            <Text>{t("somethingWentWrongDescription")}</Text>
           )}
         </TextContent>
       </Modal>

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

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

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

@@ -23,6 +23,8 @@ export type BaseEnvironment = {
   logo: string;
   /** The URL to be followed when the logo is clicked. */
   logoUrl: string;
+  /** The scopes to be requested when sending authorization requests*/
+  scope?: string;
 };
 
 /**

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

@@ -67,6 +67,7 @@ export type OrganizationTableProps = PropsWithChildren & {
   toolbarItem?: ReactNode;
   isPaginated?: boolean;
   isSearching?: boolean;
+  searchPlaceholderKey?: string;
   onSelect?: (orgs: OrganizationRepresentation[]) => void;
   onDelete?: (org: OrganizationRepresentation) => void;
   deleteLabel?: string;
@@ -77,6 +78,7 @@ export const OrganizationTable = ({
   toolbarItem,
   isPaginated = false,
   isSearching = false,
+  searchPlaceholderKey,
   onSelect,
   onDelete,
   deleteLabel = "delete",
@@ -91,6 +93,7 @@ export const OrganizationTable = ({
       isPaginated={isPaginated}
       isSearching={isSearching}
       ariaLabelKey="organizationList"
+      searchPlaceholderKey={searchPlaceholderKey}
       toolbarItem={toolbarItem}
       onSelect={onSelect}
       canSelectAll={onSelect !== undefined}

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

@@ -15,6 +15,7 @@ import {
   UseControllerProps,
   useController,
 } from "react-hook-form";
+import { getRuleValue } from "../utils/getRuleValue";
 import { FormLabel } from "./FormLabel";
 import { PasswordInput, PasswordInputProps } from "./PasswordInput";
 
@@ -36,7 +37,7 @@ export const PasswordControl = <
   props: PasswordControlProps<T, P>,
 ) => {
   const { labelIcon, ...rest } = props;
-  const required = !!props.rules?.required;
+  const required = !!getRuleValue(props.rules?.required);
   const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
 
   const { field, fieldState } = useController({

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

@@ -12,6 +12,7 @@ import {
 } from "react-hook-form";
 import { SwitchProps, Switch } from "../../@patternfly/react-core";
 import { FormLabel } from "./FormLabel";
+import { debeerify } from "../user-profile/utils";
 
 export type SwitchControlProps<
   T extends FieldValues,
@@ -55,7 +56,7 @@ export const SwitchControl = <
           <Switch
             {...props}
             id={props.name}
-            data-testid={props.name}
+            data-testid={debeerify(props.name)}
             label={labelOn}
             isChecked={stringify ? value === "true" : value}
             onChange={(e, checked) => {

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

@@ -57,6 +57,7 @@ export const TextAreaControl = <
           fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
         }
         isDisabled={props.isDisabled}
+        {...props}
         {...field}
       />
     </FormLabel>

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

@@ -18,7 +18,7 @@ import {
   UseControllerProps,
   useController,
 } from "react-hook-form";
-
+import { getRuleValue } from "../utils/getRuleValue";
 import { FormLabel } from "./FormLabel";
 
 export type TextControlProps<
@@ -31,6 +31,7 @@ export type TextControlProps<
     isDisabled?: boolean;
     helperText?: string;
     "data-testid"?: string;
+    type?: string;
   };
 
 export const TextControl = <
@@ -40,7 +41,7 @@ export const TextControl = <
   props: TextControlProps<T, P>,
 ) => {
   const { labelIcon, helperText, ...rest } = props;
-  const required = !!props.rules?.required;
+  const required = !!getRuleValue(props.rules?.required);
   const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
 
   const { field, fieldState } = useController({

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

@@ -53,6 +53,10 @@ export type SelectControlProps<
     menuAppendTo?: string;
     placeholderText?: string;
     chipGroupProps?: ChipGroupProps;
+    onSelect?: (
+      value: string | string[],
+      onChangeHandler: (value: string | string[]) => void,
+    ) => void;
   };
 
 export const isSelectBasedOptions = (

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

@@ -36,6 +36,8 @@ export const SingleSelectControl = <
   options,
   controller,
   labelIcon,
+  isDisabled,
+  onSelect,
   ...rest
 }: SelectControlProps<T, P>) => {
   const {
@@ -60,6 +62,7 @@ export const SingleSelectControl = <
         render={({ field: { onChange, value } }) => (
           <Select
             {...rest}
+            variant="default"
             onClick={() => setOpen(!open)}
             onOpenChange={() => setOpen(false)}
             selected={
@@ -81,7 +84,8 @@ export const SingleSelectControl = <
                 isExpanded={open}
                 isFullWidth
                 status={get(errors, name) ? MenuToggleStatus.danger : undefined}
-                aria-label="toggle"
+                aria-label={label}
+                isDisabled={isDisabled}
               >
                 {isSelectBasedOptions(options)
                   ? options.find(
@@ -92,13 +96,18 @@ export const SingleSelectControl = <
               </MenuToggle>
             )}
             onSelect={(_event, v) => {
-              const option = v?.toString();
-              onChange(Array.isArray(value) ? [option] : option);
+              const option = v?.toString()!;
+              const convertedValue = Array.isArray(value) ? [option] : option;
+              if (onSelect) {
+                onSelect(convertedValue, onChange);
+              } else {
+                onChange(convertedValue);
+              }
               setOpen(false);
             }}
             isOpen={open}
           >
-            <SelectList>
+            <SelectList data-testid={`select-${name}`}>
               {options.map((option) => (
                 <SelectOption key={key(option)} value={key(option)}>
                   {isString(option) ? option : option.value}

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

@@ -63,6 +63,7 @@ export const TypeaheadSelectControl = <
   const [focusedItemIndex, setFocusedItemIndex] = useState<number>(0);
   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()),
@@ -93,7 +94,7 @@ export const TypeaheadSelectControl = <
       case "Enter": {
         event.preventDefault();
 
-        if (variant !== SelectVariant.typeaheadMulti) {
+        if (!isTypeaheadMulti) {
           setFilterValue(getValue(focusedItem));
         } else {
           setFilterValue("");
@@ -164,7 +165,6 @@ export const TypeaheadSelectControl = <
         render={({ field }) => (
           <Select
             {...rest}
-            onClick={() => setOpen(!open)}
             onOpenChange={() => setOpen(false)}
             selected={
               isSelectBasedOptions(options)
@@ -177,12 +177,16 @@ export const TypeaheadSelectControl = <
                     .map((o) => o.value)
                 : field.value
             }
+            shouldFocusFirstItemOnOpen={false}
             toggle={(ref) => (
               <MenuToggle
                 ref={ref}
                 id={id || name.slice(name.lastIndexOf(".") + 1)}
                 variant="typeahead"
-                onClick={() => setOpen(!open)}
+                onClick={() => {
+                  setOpen(!open);
+                  textInputRef.current?.focus();
+                }}
                 isExpanded={open}
                 isFullWidth
                 status={get(errors, name) ? MenuToggleStatus.danger : undefined}
@@ -247,7 +251,7 @@ export const TypeaheadSelectControl = <
                         variant="plain"
                         onClick={() => {
                           setFilterValue("");
-                          field.onChange("");
+                          field.onChange(isTypeaheadMulti ? [] : "");
                           textInputRef?.current?.focus();
                         }}
                         aria-label="Clear input value"
@@ -262,10 +266,7 @@ export const TypeaheadSelectControl = <
             onSelect={(event, v) => {
               event?.stopPropagation();
               const option = v?.toString();
-              if (
-                variant === SelectVariant.typeaheadMulti &&
-                Array.isArray(field.value)
-              ) {
+              if (isTypeaheadMulti && Array.isArray(field.value)) {
                 if (field.value.includes(option)) {
                   field.onChange(
                     field.value.filter((item: string) => item !== option),

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

@@ -3,6 +3,7 @@
 // @ts-nocheck
 
 import { Button, ButtonVariant, ToolbarItem } from "../../../@patternfly/react-core";
+import { SyncAltIcon } from "../../../@patternfly/react-icons";
 import type { SVGIconProps } from "@patternfly/react-icons/dist/js/createIcon";
 import {
   ActionsColumn,
@@ -23,7 +24,7 @@ import {
   Thead,
   Tr,
 } from "../../../@patternfly/react-table";
-import { cloneDeep, differenceBy, get } from "lodash-es";
+import { cloneDeep, get, intersectionBy } from "lodash-es";
 import {
   ComponentClass,
   ReactNode,
@@ -36,13 +37,11 @@ import {
   type JSX,
 } from "react";
 import { useTranslation } from "react-i18next";
-
-import { useStoredState } from "../../utils/useStoredState";
 import { useFetch } from "../../utils/useFetch";
+import { useStoredState } from "../../utils/useStoredState";
+import { KeycloakSpinner } from "../KeycloakSpinner";
 import { ListEmptyState } from "./ListEmptyState";
 import { PaginatingTableToolbar } from "./PaginatingTableToolbar";
-import { SyncAltIcon } from "../../../@patternfly/react-icons";
-import { KeycloakSpinner } from "../KeycloakSpinner";
 
 type TitleCell = { title: JSX.Element };
 type Cell<T> = keyof T | JSX.Element | TitleCell;
@@ -69,24 +68,50 @@ type DataTableProps<T> = {
   rows: (Row<T> | SubRow<T>)[];
   actions?: IActions;
   actionResolver?: IActionsResolver;
-  onSelect?: (isSelected: boolean, rowIndex: number) => void;
+  selected?: T[];
+  onSelect?: (value: T[]) => void;
   onCollapse?: (isOpen: boolean, rowIndex: number) => void;
   canSelectAll: boolean;
+  canSelect: boolean;
   isNotCompact?: boolean;
   isRadio?: boolean;
 };
 
 type CellRendererProps = {
   row: IRow;
+  index?: number;
+  actions?: IActions;
+  actionResolver?: IActionsResolver;
 };
 
-const CellRenderer = ({ row }: CellRendererProps) => {
-  const isRow = (c: ReactNode | IRowCell): c is IRowCell =>
-    !!c && (c as IRowCell).title !== undefined;
-  return row.cells!.map((c, i) => (
-    <Td key={`cell-${i}`}>{(isRow(c) ? c.title : c) as ReactNode}</Td>
+const isRow = (c: ReactNode | IRowCell): c is IRowCell =>
+  !!c && (c as IRowCell).title !== undefined;
+
+const CellRenderer = ({
+  row,
+  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>
+    )}
+  </>
+);
+
+const ExpandableRowRenderer = ({ row }: CellRendererProps) =>
+  row.cells!.map((c, i) => (
+    <div key={`cell-${i}`}>{(isRow(c) ? c.title : c) as ReactNode}</div>
   ));
-};
 
 function DataTable<T>({
   columns,
@@ -94,37 +119,75 @@ function DataTable<T>({
   actions,
   actionResolver,
   ariaLabelKey,
+  selected,
   onSelect,
   onCollapse,
   canSelectAll,
+  canSelect,
   isNotCompact,
   isRadio,
   ...props
 }: DataTableProps<T>) {
   const { t } = useTranslation();
-
-  const [selectedRows, setSelectedRows] = useState<boolean[]>([]);
+  const [selectedRows, setSelectedRows] = useState<T[]>(selected || []);
   const [expandedRows, setExpandedRows] = useState<boolean[]>([]);
 
-  const updateState = (rowIndex: number, isSelected: boolean) => {
-    const items = [
-      ...(rowIndex === -1 ? Array(rows.length).fill(isSelected) : selectedRows),
-    ];
-    items[rowIndex] = isSelected;
-    setSelectedRows(items);
-  };
+  const rowsSelectedOnPage = useMemo(
+    () =>
+      intersectionBy(
+        selectedRows,
+        rows.map((row) => row.data),
+        "id",
+      ),
+    [selectedRows, rows],
+  );
 
   useEffect(() => {
     if (canSelectAll) {
       const selectAllCheckbox = document.getElementsByName("check-all").item(0);
       if (selectAllCheckbox) {
         const checkbox = selectAllCheckbox as HTMLInputElement;
-        const selected = selectedRows.filter((r) => r === true);
         checkbox.indeterminate =
-          selected.length < rows.length && selected.length > 0;
+          rowsSelectedOnPage.length < rows.length &&
+          rowsSelectedOnPage.length > 0;
       }
     }
-  }, [selectedRows]);
+  }, [selectedRows, canSelectAll, rows]);
+
+  const updateSelectedRows = (selected: T[]) => {
+    setSelectedRows(selected);
+    onSelect?.(selected);
+  };
+
+  const updateState = (rowIndex: number, isSelected: boolean) => {
+    if (isRadio) {
+      const selectedRow = isSelected ? [rows[rowIndex].data] : [];
+      updateSelectedRows(selectedRow);
+    } else {
+      if (rowIndex === -1) {
+        const rowsSelectedOnPageIds = rowsSelectedOnPage.map((v) =>
+          get(v, "id"),
+        );
+        updateSelectedRows(
+          isSelected
+            ? [...selectedRows, ...rows.map((row) => row.data)]
+            : selectedRows.filter(
+                (v) => !rowsSelectedOnPageIds.includes(get(v, "id")),
+              ),
+        );
+      } else {
+        if (isSelected) {
+          updateSelectedRows([...selectedRows, rows[rowIndex].data]);
+        } else {
+          updateSelectedRows(
+            selectedRows.filter(
+              (v) => get(v, "id") !== (rows[rowIndex] as IRow).data.id,
+            ),
+          );
+        }
+      }
+    }
+  };
 
   return (
     <Table
@@ -134,19 +197,17 @@ function DataTable<T>({
     >
       <Thead>
         <Tr>
-          {onCollapse && <Th />}
+          {onCollapse && <Th screenReaderText={t("expandRow")} />}
           {canSelectAll && (
             <Th
+              screenReaderText={t("selectAll")}
               select={
                 !isRadio
                   ? {
-                      onSelect: (_, isSelected, rowIndex) => {
-                        onSelect!(isSelected, rowIndex);
+                      onSelect: (_, isSelected) => {
                         updateState(-1, isSelected);
                       },
-                      isSelected:
-                        selectedRows.filter((r) => r === true).length ===
-                        rows.length,
+                      isSelected: rowsSelectedOnPage.length === rows.length,
                     }
                   : undefined
               }
@@ -154,7 +215,8 @@ function DataTable<T>({
           )}
           {columns.map((column) => (
             <Th
-              key={column.displayKey}
+              screenReaderText={t("expandRow")}
+              key={column.displayKey || column.name}
               className={column.transforms?.[0]().className}
             >
               {t(column.displayKey || column.name)}
@@ -166,28 +228,26 @@ function DataTable<T>({
         <Tbody>
           {(rows as IRow[]).map((row, index) => (
             <Tr key={index} isExpanded={expandedRows[index]}>
-              {onSelect && (
+              {canSelect && (
                 <Td
                   select={{
                     rowIndex: index,
                     onSelect: (_, isSelected, rowIndex) => {
-                      onSelect!(isSelected, rowIndex);
                       updateState(rowIndex, isSelected);
                     },
-                    isSelected: selectedRows[index],
+                    isSelected: !!selectedRows.find(
+                      (v) => get(v, "id") === row.data.id,
+                    ),
                     variant: isRadio ? "radio" : "checkbox",
                   }}
                 />
               )}
-              <CellRenderer row={row} />
-              {(actions || actionResolver) && (
-                <Td isActionCell>
-                  <ActionsColumn
-                    items={actions || actionResolver?.(row, {})!}
-                    extraData={{ rowIndex: index }}
-                  />
-                </Td>
-              )}
+              <CellRenderer
+                row={row}
+                index={index}
+                actions={actions}
+                actionResolver={actionResolver}
+              />
             </Tr>
           ))}
         </Tbody>
@@ -197,26 +257,35 @@ function DataTable<T>({
             {index % 2 === 0 ? (
               <Tr>
                 <Td
-                  expand={{
-                    isExpanded: !!expandedRows[index],
-                    rowIndex: index,
-                    expandId: `${index}`,
-                    onToggle: (_, rowIndex, isOpen) => {
-                      onCollapse(isOpen, rowIndex);
-                      const expand = [...expandedRows];
-                      expand[index] = isOpen;
-                      setExpandedRows(expand);
-                    },
-                  }}
+                  expand={
+                    rows[index + 1].cells.length === 0
+                      ? undefined
+                      : {
+                          isExpanded: !!expandedRows[index],
+                          rowIndex: index,
+                          expandId: "expandable-row-",
+                          onToggle: (_, rowIndex, isOpen) => {
+                            onCollapse(isOpen, rowIndex);
+                            const expand = [...expandedRows];
+                            expand[index] = isOpen;
+                            setExpandedRows(expand);
+                          },
+                        }
+                  }
+                />
+                <CellRenderer
+                  row={row}
+                  index={index}
+                  actions={actions}
+                  actionResolver={actionResolver}
                 />
-                <CellRenderer row={row} />
               </Tr>
             ) : (
               <Tr isExpanded={!!expandedRows[index - 1]}>
                 <Td />
                 <Td colSpan={columns.length}>
                   <ExpandableRowContent>
-                    <CellRenderer row={row} />
+                    <ExpandableRowRenderer row={row} />
                   </ExpandableRowContent>
                 </Td>
               </Tr>
@@ -480,38 +549,6 @@ export function KeycloakDataTable<T>({
       return action;
     });
 
-  const _onSelect = (isSelected: boolean, rowIndex: number) => {
-    const data = filteredData || rows;
-    if (rowIndex === -1) {
-      setRows(
-        data!.map((row) => {
-          (row as Row<T>).selected = isSelected;
-          return row;
-        }),
-      );
-    } else {
-      (data![rowIndex] as Row<T>).selected = isSelected;
-
-      setRows([...rows!]);
-    }
-
-    // Keeps selected items when paginating
-    const difference = differenceBy(
-      selected,
-      data!.map((row) => row.data),
-      "id",
-    );
-
-    // Selected rows are any rows previously selected from a different page, plus current page selections
-    const selectedRows = [
-      ...difference,
-      ...data!.filter((row) => (row as Row<T>).selected).map((row) => row.data),
-    ];
-
-    setSelected(selectedRows);
-    onSelect!(selectedRows);
-  };
-
   const onCollapse = (isOpen: boolean, rowIndex: number) => {
     (data![rowIndex] as Row<T>).isOpen = isOpen;
     setRows([...data!]);
@@ -526,7 +563,7 @@ export function KeycloakDataTable<T>({
 
   return (
     <>
-      {(loading || !noData || searching) && (
+      {(!noData || searching) && (
         <PaginatingTableToolbar
           id={id}
           count={rowLength}
@@ -549,7 +586,7 @@ export function KeycloakDataTable<T>({
             <>
               {toolbarItem} <ToolbarItem variant="separator" />{" "}
               <ToolbarItem>
-                <Button variant="link" onClick={refresh}>
+                <Button variant="link" onClick={refresh} data-testid="refresh">
                   <SyncAltIcon /> {t("refresh")}
                 </Button>
               </ToolbarItem>
@@ -561,7 +598,12 @@ export function KeycloakDataTable<T>({
             <DataTable
               {...props}
               canSelectAll={canSelectAll}
-              onSelect={onSelect ? _onSelect : undefined}
+              canSelect={!!onSelect}
+              selected={selected}
+              onSelect={(selected) => {
+                setSelected(selected);
+                onSelect?.(selected);
+              }}
               onCollapse={detailColumns ? onCollapse : undefined}
               actions={convertAction()}
               actionResolver={actionResolver}
@@ -592,9 +634,9 @@ export function KeycloakDataTable<T>({
               }
             />
           )}
-          {loading && <KeycloakSpinner />}
         </PaginatingTableToolbar>
       )}
+      {loading && <KeycloakSpinner />}
       {!loading && noData && !searching && emptyState}
     </>
   );

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

@@ -36,25 +36,20 @@ export const TableToolbar = ({
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState<string>("");
 
-  const onSearch = () => {
-    if (searchValue !== "") {
-      setSearchValue(searchValue);
-      inputGroupOnEnter?.(searchValue);
-    } else {
-      setSearchValue("");
-      inputGroupOnEnter?.("");
-    }
+  const onSearch = (searchValue: string) => {
+    setSearchValue(searchValue.trim());
+    inputGroupOnEnter?.(searchValue.trim());
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
-      onSearch();
+      onSearch(searchValue);
     }
   };
 
   return (
     <>
-      <Toolbar>
+      <Toolbar data-testid="table-toolbar">
         <ToolbarContent>
           {inputGroupName && (
             <ToolbarItem>
@@ -69,12 +64,9 @@ export const TableToolbar = ({
                     onChange={(_, value) => {
                       setSearchValue(value);
                     }}
-                    onSearch={onSearch}
+                    onSearch={() => onSearch(searchValue)}
                     onKeyDown={handleKeyDown}
-                    onClear={() => {
-                      setSearchValue("");
-                      inputGroupOnEnter?.("");
-                    }}
+                    onClear={() => onSearch("")}
                   />
                 )}
               </InputGroup>

package/keycloak-theme/shared/keycloak-ui-shared/icons/IconMapper.tsx

@@ -46,7 +46,6 @@ function getIcon(icon: string) {
     case "linkedin-openid-connect":
       return LinkedinIcon;
 
-    case "openshift-v3":
     case "openshift-v4":
       return OpenshiftIcon;
     case "stackoverflow":

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

@@ -97,4 +97,3 @@ export {
 } from "./utils/ErrorBoundary";
 export type { FallbackProps } from "./utils/ErrorBoundary";
 export { OrganizationTable } from "./controls/OrganizationTable";
-export { initializeDarkMode } from "./utils/darkMode";

package/keycloak-theme/shared/keycloak-ui-shared/masthead/Masthead.tsx

@@ -58,6 +58,7 @@ type KeycloakMastheadProps = MastheadMainProps & {
   kebabDropdownItems?: ReactNode[];
   dropdownItems?: ReactNode[];
   toolbarItems?: ReactNode[];
+  toolbar?: ReactNode;
 };
 
 const KeycloakMasthead = ({
@@ -72,6 +73,7 @@ const KeycloakMasthead = ({
   kebabDropdownItems,
   dropdownItems = [],
   toolbarItems,
+  toolbar,
   ...rest
 }: KeycloakMastheadProps) => {
   const { t } = useTranslation();
@@ -106,6 +108,7 @@ const KeycloakMasthead = ({
         <img src={src} alt={alt} className={className} />
       </MastheadBrand>
       <MastheadContent>
+        {toolbar}
         <Toolbar>
           <ToolbarContent>
             {toolbarItems?.map((item, index) => (

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

@@ -19,7 +19,7 @@ export const propertyToString = (prop: string | number | undefined) =>
 
 export type KeycloakSelectProps = Omit<
   SelectProps,
-  "name" | "toggle" | "selected" | "onClick" | "onSelect"
+  "name" | "toggle" | "selected" | "onClick" | "onSelect" | "variant"
 > & {
   toggleId?: string;
   onFilter?: (value: string) => JSX.Element[];

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

@@ -119,7 +119,11 @@ export const TypeaheadSelect = ({
       {...rest}
       onClick={toggle}
       onOpenChange={(isOpen) => onToggle?.(isOpen)}
-      onSelect={(_, value) => onSelect?.(value || "")}
+      onSelect={(_, value) => {
+        onSelect?.(value || "");
+        onFilter?.("");
+        setFilterValue("");
+      }}
       maxMenuHeight={propertyToString(maxHeight)}
       popperProps={{ direction, width: propertyToString(width) }}
       toggle={(ref) => (

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

@@ -47,7 +47,7 @@ export const LocaleSelector = ({
         name="attributes.locale"
         label={t("selectALocale")}
         controller={{ defaultValue: "" }}
-        options={locales}
+        options={[{ key: "", value: t("defaultLocale") }, ...locales]}
         variant={locales.length >= 10 ? "typeahead" : "single"}
       />
     </FormProvider>

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

@@ -86,7 +86,7 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
             }}
             selections={
               isMultiValue && Array.isArray(field.value)
-                ? field.value
+                ? field.value.map((option) => fetchLabel(option))
                 : fetchLabel(field.value)
             }
             variant={

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

@@ -21,12 +21,18 @@ export const TextComponent = (props: UserProfileFieldProps) => {
         id={attribute.name}
         data-testid={attribute.name}
         type={type}
-        placeholder={label(
-          props.t,
-          attribute.annotations?.["inputTypePlaceholder"] as string,
-          attribute.name,
-          attribute.annotations?.["inputOptionLabelsI18nPrefix"] as string,
-        )}
+        placeholder={
+          attribute.readOnly
+            ? ""
+            : label(
+                props.t,
+                attribute.annotations?.["inputTypePlaceholder"] as string,
+                "",
+                attribute.annotations?.[
+                  "inputOptionLabelsI18nPrefix"
+                ] as string,
+              )
+        }
         readOnly={attribute.readOnly}
         isRequired={isRequired}
         {...form.register(fieldName(attribute.name))}

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

@@ -77,12 +77,13 @@ 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?.toString()) ? t(unWrap(p)) : p)),
     );
     setError(fieldName(e.field) as keyof T, {
       message: t(
         isBundleKey(e.errorMessage) ? unWrap(e.errorMessage) : e.errorMessage,
         {
+          /* eslint-disable @typescript-eslint/no-misused-spread */
           ...params,
           defaultValue: e.errorMessage || e.field,
         },
@@ -94,34 +95,9 @@ export function setUserProfileServerError<T>(
 
 export function isRequiredAttribute({
   required,
-  validators,
 }: UserProfileAttributeMetadata): boolean {
-  // Check if required is true or if the validators include a validation that would make the attribute implicitly required.
-  return required || hasRequiredValidators(validators);
-}
-
-/**
- * Checks whether the given validators include a validation that would make the attribute implicitly required.
- */
-function hasRequiredValidators(
-  validators?: UserProfileAttributeMetadata["validators"],
-): boolean {
-  // If we don't have any validators, the attribute is not required.
-  if (!validators) {
-    return false;
-  }
-
-  // If the 'length' validator is defined and has a minimal length greater than zero the attribute is implicitly required.
-  // We have to do a lot of defensive coding here, because we don't have type information for the validators.
-  if (
-    "length" in validators &&
-    "min" in validators.length &&
-    typeof validators.length.min === "number"
-  ) {
-    return validators.length.min > 0;
-  }
-
-  return false;
+  // Check if required is true
+  return required as boolean;
 }
 
 export function isUserProfileError(error: unknown): error is UserProfileError {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/keycloak-ui-shared",
-  "version": "260007.0.5",
+  "version": "260200.0.0",
   "repository": {
     "type": "git",
     "url": "git://github.com/keycloakify/keycloak-ui-shared.git"
@@ -9,19 +9,19 @@
   "author": "The Keycloak Team, re-packaged by u/garronej",
   "homepage": "https://github.com/keycloakify/keycloak-ui-shared",
   "peerDependencies": {
-    "@patternfly/react-core": "^5.4.1",
-    "@patternfly/react-icons": "^5.4.0",
-    "@patternfly/react-styles": "^5.4.0",
-    "@patternfly/react-table": "^5.4.1",
-    "i18next": "^23.15.1",
+    "@patternfly/react-core": "^5.4.14",
+    "@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",
     "react": "^18.3.1",
-    "react-hook-form": "7.53.0",
-    "react-i18next": "^15.0.2",
-    "@keycloak/keycloak-admin-client": "26.0.7",
-    "keycloak-js": "26.0.7",
+    "react-hook-form": "7.54.2",
+    "react-i18next": "^15.4.1",
+    "@keycloak/keycloak-admin-client": "26.2.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.11"
+    "@types/react": "^18.3.18"
   },
   "publishConfig": {
     "access": "public"