@keycloakify/keycloak-ui-shared 260103.0.1 → 260200.0.0

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/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/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,8 +96,13 @@ 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}

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

@@ -160,24 +160,31 @@ function DataTable<T>({
   };
 
   const updateState = (rowIndex: number, isSelected: boolean) => {
-    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")),
-            ),
-      );
+    if (isRadio) {
+      const selectedRow = isSelected ? [rows[rowIndex].data] : [];
+      updateSelectedRows(selectedRow);
     } else {
-      if (isSelected) {
-        updateSelectedRows([...selectedRows, rows[rowIndex].data]);
-      } else {
+      if (rowIndex === -1) {
+        const rowsSelectedOnPageIds = rowsSelectedOnPage.map((v) =>
+          get(v, "id"),
+        );
         updateSelectedRows(
-          selectedRows.filter(
-            (v) => get(v, "id") !== (rows[rowIndex] as IRow).data.id,
-          ),
+          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,
+            ),
+          );
+        }
       }
     }
   };
@@ -250,17 +257,21 @@ 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}
@@ -552,7 +563,7 @@ export function KeycloakDataTable<T>({
 
   return (
     <>
-      {(loading || !noData || searching) && (
+      {(!noData || searching) && (
         <PaginatingTableToolbar
           id={id}
           count={rowLength}
@@ -575,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>
@@ -623,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

@@ -49,7 +49,7 @@ export const TableToolbar = ({
 
   return (
     <>
-      <Toolbar>
+      <Toolbar data-testid="table-toolbar">
         <ToolbarContent>
           {inputGroupName && (
             <ToolbarItem>

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/TextComponent.tsx

@@ -27,7 +27,7 @@ export const TextComponent = (props: UserProfileFieldProps) => {
             : label(
                 props.t,
                 attribute.annotations?.["inputTypePlaceholder"] as string,
-                attribute.name,
+                "",
                 attribute.annotations?.[
                   "inputOptionLabelsI18nPrefix"
                 ] as string,

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,
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/keycloak-ui-shared",
-  "version": "260103.0.1",
+  "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.10",
+    "@patternfly/react-core": "^5.4.14",
     "@patternfly/react-icons": "^5.4.2",
     "@patternfly/react-styles": "^5.4.1",
-    "@patternfly/react-table": "^5.4.13",
-    "i18next": "^24.2.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.54.2",
-    "react-i18next": "^15.4.0",
-    "@keycloak/keycloak-admin-client": "26.1.3",
-    "keycloak-js": "26.1.3",
+    "react-i18next": "^15.4.1",
+    "@keycloak/keycloak-admin-client": "26.2.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.13"
+    "@types/react": "^18.3.18"
   },
   "publishConfig": {
     "access": "public"