@keycloakify/keycloak-ui-shared 260502.0.0 → 260601.0.0

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

@@ -41,17 +41,22 @@ export const useEnvironment = <
 
 interface KeycloakContextProps<T extends BaseEnvironment> {
   environment: T;
+  keycloak?: Keycloak;
 }
 
 export const KeycloakProvider = <T extends BaseEnvironment>({
   environment,
+  keycloak: externalKeycloak,
   children,
 }: PropsWithChildren<KeycloakContextProps<T>>) => {
   KeycloakEnvContext = createKeycloakEnvContext<T>();
   const calledOnce = useRef(false);
-  const [init, setInit] = useState(false);
+  const [init, setInit] = useState(!!externalKeycloak);
   const [error, setError] = useState<unknown>();
   const keycloak = useMemo(() => {
+    if (externalKeycloak) {
+      return externalKeycloak;
+    }
     const keycloak = new Keycloak({
       url: environment.serverBaseUrl,
       realm: environment.realm,
@@ -61,9 +66,14 @@ export const KeycloakProvider = <T extends BaseEnvironment>({
     
 
     return keycloak;
-  }, [environment]);
+  }, [environment, externalKeycloak]);
 
   useEffect(() => {
+    // Skip initialization if using external keycloak (already initialized)
+    if (externalKeycloak) {
+      return;
+    }
+
     // only needed in dev mode
     if (calledOnce.current) {
       return;
@@ -82,7 +92,7 @@ export const KeycloakProvider = <T extends BaseEnvironment>({
       .catch((error) => setError(error));
 
     calledOnce.current = true;
-  }, [keycloak]);
+  }, [keycloak, externalKeycloak]);
 
   if (error) {
     return <ErrorPage error={error} />;

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

@@ -3,7 +3,7 @@
 // @ts-nocheck
 
 import { Icon, Popover } from "../../@patternfly/react-core";
-import { HelpIcon } from "../../@patternfly/react-icons";
+import { HelpIcon, ExclamationTriangleIcon } from "../../@patternfly/react-icons";
 import { ReactNode } from "react";
 import { useHelp } from "../context/HelpContext";
 
@@ -12,6 +12,7 @@ type HelpItemProps = {
   fieldLabelId: string;
   noVerticalAlign?: boolean;
   unWrap?: boolean;
+  isRecommendation?: boolean;
 };
 
 export const HelpItem = ({
@@ -19,8 +20,11 @@ export const HelpItem = ({
   fieldLabelId,
   noVerticalAlign = true,
   unWrap = false,
+  isRecommendation = false,
 }: HelpItemProps) => {
   const { enabled } = useHelp();
+  const IconComponent = isRecommendation ? ExclamationTriangleIcon : HelpIcon;
+
   return enabled ? (
     <Popover bodyContent={helpText}>
       <>
@@ -31,14 +35,20 @@ export const HelpItem = ({
             onClick={(e) => e.preventDefault()}
             className="pf-v5-c-form__group-label-help"
           >
-            <Icon isInline={noVerticalAlign}>
-              <HelpIcon />
+            <Icon
+              isInline={noVerticalAlign}
+              status={isRecommendation ? "warning" : undefined}
+            >
+              <IconComponent />
             </Icon>
           </button>
         )}
         {unWrap && (
-          <Icon isInline={noVerticalAlign}>
-            <HelpIcon />
+          <Icon
+            isInline={noVerticalAlign}
+            status={isRecommendation ? "warning" : undefined}
+          >
+            <IconComponent />
           </Icon>
         )}
       </>

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

@@ -7,7 +7,8 @@ import { Badge, Chip, ChipGroup } from "../../@patternfly/react-core";
 import { TableText } from "../../@patternfly/react-table";
 import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { KeycloakDataTable, LoaderFunction } from "./table/KeycloakDataTable";
+import type { Action, LoaderFunction } from "./table/KeycloakDataTable";
+import { KeycloakDataTable } from "./table/KeycloakDataTable";
 
 type OrgDetailLinkProps = {
   link: FunctionComponent<
@@ -71,6 +72,7 @@ export type OrganizationTableProps = PropsWithChildren & {
   onSelect?: (orgs: OrganizationRepresentation[]) => void;
   onDelete?: (org: OrganizationRepresentation) => void;
   deleteLabel?: string;
+  actions?: Action<OrganizationRepresentation>[];
 };
 
 export const OrganizationTable = ({
@@ -84,6 +86,7 @@ export const OrganizationTable = ({
   deleteLabel = "delete",
   link,
   children,
+  actions,
 }: OrganizationTableProps) => {
   const { t } = useTranslation();
 
@@ -97,16 +100,10 @@ export const OrganizationTable = ({
       toolbarItem={toolbarItem}
       onSelect={onSelect}
       canSelectAll={onSelect !== undefined}
-      actions={
-        onDelete
-          ? [
-              {
-                title: t(deleteLabel),
-                onRowClick: onDelete,
-              },
-            ]
-          : undefined
-      }
+      actions={[
+        ...(onDelete ? [{ title: t(deleteLabel), onRowClick: onDelete }] : []),
+        ...(actions ?? []),
+      ]}
       columns={[
         {
           name: "name",

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

@@ -23,6 +23,7 @@ export enum SelectVariant {
 export type SelectControlOption = {
   key: string;
   value: string;
+  description?: string;
 };
 
 export type OptionType = string[] | SelectControlOption[];
@@ -51,6 +52,7 @@ export type SelectControlProps<
     onFilter?: (value: string) => void;
     variant?: Variant;
     isDisabled?: boolean;
+    isFullWidth?: boolean;
     menuAppendTo?: string;
     placeholderText?: string;
     chipGroupProps?: ChipGroupProps;

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

@@ -38,6 +38,7 @@ export const SingleSelectControl = <
   controller,
   labelIcon,
   isDisabled,
+  isFullWidth = true,
   onSelect,
   ...rest
 }: SelectControlProps<T, P>) => {
@@ -84,7 +85,7 @@ export const SingleSelectControl = <
                 ref={ref}
                 onClick={() => setOpen(!open)}
                 isExpanded={open}
-                isFullWidth
+                isFullWidth={isFullWidth}
                 status={get(errors, name) ? MenuToggleStatus.danger : undefined}
                 aria-label={label}
                 isDisabled={isDisabled}
@@ -111,7 +112,15 @@ export const SingleSelectControl = <
           >
             <SelectList data-testid={`select-${name}`}>
               {[...options, ...selectedOptions].map((option) => (
-                <SelectOption key={key(option)} value={key(option)}>
+                <SelectOption
+                  key={key(option)}
+                  value={key(option)}
+                  description={
+                    !isString(option) && "description" in option
+                      ? option.description
+                      : undefined
+                  }
+                >
                   {isString(option) ? option : option.value}
                 </SelectOption>
               ))}

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

@@ -54,6 +54,7 @@ export const TypeaheadSelectControl = <
   placeholderText,
   onFilter,
   variant,
+  isFullWidth = true,
   ...rest
 }: SelectControlProps<T, P>) => {
   const {
@@ -210,7 +211,7 @@ export const TypeaheadSelectControl = <
                   textInputRef.current?.focus();
                 }}
                 isExpanded={open}
-                isFullWidth
+                isFullWidth={isFullWidth}
                 status={get(errors, name) ? MenuToggleStatus.danger : undefined}
               >
                 <TextInputGroup isPlain>
@@ -307,6 +308,11 @@ export const TypeaheadSelectControl = <
                   value={key(option)}
                   isFocused={focusedItemIndex === index}
                   isActive={field.value.includes(getValue(option))}
+                  description={
+                    !isString(option) && "description" in option
+                      ? option.description
+                      : undefined
+                  }
                 >
                   {getValue(option)}
                 </SelectOption>

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

@@ -25,7 +25,7 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
     field: ControllerRenderProps<UserFormFields>,
   ) => {
     if (isMultiValue) {
-      if (field.value.includes(value)) {
+      if (field.value?.includes(value)) {
         field.onChange(field.value.filter((item: string) => item !== value));
       } else {
         if (Array.isArray(field.value)) {
@@ -51,14 +51,18 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
   const fetchLabel = (option: string) =>
     label(props.t, optionLabel[option], option, prefix);
 
-  const convertOptions = (selected: string) =>
+  const convertOptions = (selected: string | string[]) =>
     options
       .filter((o) =>
         fetchLabel(o)!.toLowerCase().includes(filter.toLowerCase()),
       )
       .map((option) => (
         <SelectOption
-          selected={selected === option}
+          selected={
+            Array.isArray(selected)
+              ? selected.includes(option)
+              : selected === option
+          }
           key={option}
           value={option}
         >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/keycloak-ui-shared",
-  "version": "260502.0.0",
+  "version": "260601.0.0",
   "repository": {
     "type": "git",
     "url": "git://github.com/keycloakify/keycloak-ui-shared.git"
@@ -14,11 +14,11 @@
     "@patternfly/react-styles": "^5.4.1",
     "@patternfly/react-table": "^5.4.16",
     "i18next": "^25.7.3",
-    "lodash-es": "^4.17.22",
+    "lodash-es": "^4.18.1",
     "react": "^18.3.1",
     "react-hook-form": "7.70.0",
     "react-i18next": "^16.5.1",
-    "@keycloak/keycloak-admin-client": "26.5.2",
+    "@keycloak/keycloak-admin-client": "26.6.1",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.18",
     "oidc-spa": "~10.0.5"